[Feat] #14 상세 페이지 기능 구현

kdt-8-4 · Feb 2, 2024 · 6111873 · 6111873
2 parents cb35944 + 273cf7f
commit 6111873
Show file tree

Hide file tree

Showing 34 changed files with 813 additions and 141 deletions.
diff --git a/weatherfit_refactoring/@types/feed/index.d.ts b/weatherfit_refactoring/@types/feed/index.d.ts
@@ -1,14 +1,17 @@
 interface LIKE {
-    likeId : number;
-    nickName: string;
-  }
-
+  likeId: number
+  nickName: string
+}
 
 interface IMAGE {
-    imageId: number;
-    boardId: number;
-    imageUrl: string;
-  }
+  boardId: number
+  imageId: number
+  imageUrl: string
+}
+
+interface BOARDID {
+  boardId: string | string[] | undefined
+}
 
 interface FEEDDATA {
     boardId: number;
@@ -24,3 +27,19 @@ interface FEEDDATA {
     modifiedDate: string;
   }
 
+interface FEEDATA {
+  boardId: number
+  images: string
+  createDate: string
+  likeCount: number
+  likelist: LIKE[]
+  nickName: string
+  temperature: number
+  weather: string
+  weatherIcon: string
+  // 임시 detail용
+  userImage: string | StaticImport
+  content: string
+  hashTag: string[]
+  category: string[]
+}
diff --git a/weatherfit_refactoring/next.config.js b/weatherfit_refactoring/next.config.js
@@ -2,13 +2,16 @@
 const nextConfig = {}
 
 module.exports = {
-    images: {
-      domains: [
-        "weatherfit-board-image.s3.amazonaws.com",
-        "heesung-s3.s3.ap-northeast-2.amazonaws.com",
-        "openweathermap.org",
-        "cdn.peacedoorball.blog",
-        "cdnimg.melon.co.kr",
-      ],
-    },
-  };
+  images: {
+    domains: [
+      'weatherfit-board-image.s3.amazonaws.com',
+      'heesung-s3.s3.ap-northeast-2.amazonaws.com',
+      'openweathermap.org',
+      'cdn.peacedoorball.blog',
+      'cdnimg.melon.co.kr',
+      // 외부 url 이미지 로드
+      'postfiles.pstatic.net',
+      'i.pinimg.com',
+    ],
+  },
+}
diff --git a/weatherfit_refactoring/package-lock.json b/weatherfit_refactoring/package-lock.json
diff --git a/weatherfit_refactoring/package.json b/weatherfit_refactoring/package.json
@@ -14,6 +14,8 @@
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
+    "slick-carousel": "^1.8.1",
+    "sweetalert2": "^11.10.4",
     "zustand": "^4.4.7"
   },
   "devDependencies": {

diff --git a/weatherfit_refactoring/public/dummy_data/feed.json b/weatherfit_refactoring/public/dummy_data/feed.json
@@ -1,37 +1,63 @@
 {
-    "feed_data" : [
-      {
-        "boardId": 1,
-        "images" : "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp",
-        "createDate": "2023-08-31 04:29:55",
-        "likeCount": 2,
-        "likelist": [{"likeId":1 , "nickName":"user1"}, {"likeId":2 , "nickName":"user2"}],
-        "nickName": "user1",
-        "temperature": -6,
-        "weather": "clear sky",
-        "weatherIcon": "01d"
-      },
-      {
-        "boardId": 2,
-        "images" : "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp",
-        "createDate": "2023-08-30 04:29:53",
-        "likeCount": 1,
-        "likelist": [{"likeId":1 , "nickName":"user1"}],
-        "nickName": "user1",
-        "temperature": 2,
-        "weather": "rain",
-        "weatherIcon": "10d"
-      },
-      {
-        "boardId": 3,
-        "images" : "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp",
-        "createDate": "2023-09-01 11:30:30",
-        "likeCount": 2,
-        "likelist": [{"likeId":1 , "nickName":"user1"}, {"likeId":2 , "nickName":"user2"}],
-        "nickName": "user2",
-        "temperature": -4,
-        "weather": "cloud",
-        "weatherIcon": "03d"
-      }      
-    ]
-  }
+  "feed_data": [
+    {
+      "boardId": 1,
+      "images": [
+        "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp",
+        "https://postfiles.pstatic.net/MjAyMDA1MjJfMTUy/MDAxNTkwMDg5Njk3NjEy.WzzdxiwQV_iHROSHjdQ9v1amtfFRmSUwjRoB1iqbpNEg.ruMcbiRKcGhohFv_z91YDvVyjhlCQ2W_9Q28SrhVDCAg.JPEG.knh941010/C820D450-083E-41CC-A00D-0A2F60DC804B-4331-0000014161917C89.jpg?type=w966",
+        "https://i.pinimg.com/564x/18/c0/a6/18c0a61d88e3d75e77039f2de8813f55.jpg"
+      ],
+      "createDate": "2023-08-31 04:29:55",
+      "likeCount": 2,
+      "likelist": [
+        { "likeId": 1, "nickName": "user1" },
+        { "likeId": 2, "nickName": "user2" }
+      ],
+      "nickName": "user1",
+      "temperature": -6,
+      "weather": "clear sky",
+      "weatherIcon": "01d",
+      "content": "안녕 안녕#hi 헬로 #하이 가나다라마바사아자#안녕 차카타파하 안녕안녕안녕 안녕안녕안녕안녕안녕 가나다라마바사아자차 카타파하 가나다라 마바사아자차카타파하 안녕안녕 안녕안녕안녕 안녕안녕안녕 가나다라마바사아자차카타파하",
+      "hashTag": ["hi", "하이", "안녕"],
+      "category": ["후드 집업", "가죽자켓", "컨버스", "운동화", "베레모"],
+      "userImage": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90"
+    },
+    {
+      "boardId": 2,
+      "images": [
+        "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp"
+      ],
+      "createDate": "2023-08-30 04:29:53",
+      "likeCount": 1,
+      "likelist": [{ "likeId": 1, "nickName": "user1" }],
+      "nickName": "user1",
+      "temperature": 2,
+      "weather": "rain",
+      "weatherIcon": "10d",
+      "content": "안녕 안녕 #hi 헬로",
+      "hashTag": "hi",
+      "category": ["후드 집업", "가죽자켓", "컨버스", "운동화", "베레모"],
+      "userImage": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90"
+    },
+    {
+      "boardId": 3,
+      "images": [
+        "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp"
+      ],
+      "createDate": "2023-09-01 11:30:30",
+      "likeCount": 2,
+      "likelist": [
+        { "likeId": 1, "nickName": "user1" },
+        { "likeId": 2, "nickName": "user2" }
+      ],
+      "nickName": "user2",
+      "temperature": -4,
+      "weather": "cloud",
+      "weatherIcon": "03d",
+      "content": "안녕 안녕 #hi 헬로",
+      "hashTag": "hi",
+      "category": ["후드 집업", "가죽자켓", "컨버스", "운동화", "베레모"],
+      "userImage": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90"
+    }
+  ]
+}
diff --git a/weatherfit_refactoring/src/Components/Atoms/Box/BoxStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Box/BoxStore.tsx
@@ -15,9 +15,8 @@ interface Props {
   onClickFunction?: MouseEventHandler<HTMLButtonElement> | undefined
   children?: React.ReactNode
 }
-//높이 조정도 필요하면 가져다 쓰세요
 
-export default function ButtonStore({
+export default function BoxStore({
   boxStyle,
   children,
   onClickFunction,

diff --git a/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx
@@ -11,7 +11,7 @@ export enum ButtonStyle {
   CATEGORY_BTN_CHECKED = 'CATEGORY_BTN_CHECKED',
   TEXT_BTN = 'TEXT_BTN',
   CONFIRM_BTN = 'CONFIRM_BTN',
-  CANCLE_BTN = "CANCLE_BTN",
+  CANCEL_BTN = 'CANCEL_BTN',
   CATEGORY_BTN_TOP = "CATEGORY_BTN_TOP",
 }
 
@@ -46,7 +46,8 @@ export default function ButtonStore({
       case ButtonStyle.DEFAULT_BTN_BLUE:
         return (
           <button
-            className={`${style} border bg-A8C6EC border-black rounded-2xl z-10`}              style={{ boxShadow: '7px 7px 1px' }}
+            className={`${style} border bg-A8C6EC border-black rounded-2xl z-10`}
+            style={{ boxShadow: '7px 7px 1px' }}
             onClick={onClickFunction}>
             {children}
           </button>
@@ -71,15 +72,15 @@ export default function ButtonStore({
       case ButtonStyle.CATEGORY_BTN_Y:
         return (
           <button
-            className={`${style} bg-yellow-200 border border-black rounded-2xl pb-[5px] px-1.5 py-0.5`}
+            className={`${style} bg-yellow-200 border border-black rounded-2xl px-2 py-0.5`}
             onClick={onClickFunction}>
             {children}
           </button>
         )
       case ButtonStyle.CATEGORY_BTN_CHECKED:
         return (
           <button
-            className={`${style} bg-blue-300 border border-blue-300 text-white rounded-2xl px-1.5 py-0.5`}
+            className={`${style} bg-blue-300 border border-blue-300 text-white rounded-2xl px-2 py-0.5`}
             onClick={onClickFunction}>
             {children}
           </button>
@@ -100,14 +101,14 @@ export default function ButtonStore({
             {children}
           </button>
         )
-        case ButtonStyle.CANCLE_BTN:
-          return (
-            <button
-              className={`${style} bg-yellow-200 border border-gray-500 rounded-[9px]`}
-              onClick={onClickFunction}>
-              {children}
-            </button>
-          )
+      case ButtonStyle.CANCEL_BTN:
+        return (
+          <button
+            className={`${style} bg-yellow-200 border border-gray-500 rounded-[9px]`}
+            onClick={onClickFunction}>
+            {children}
+          </button>
+        )
       case ButtonStyle.GOOGLE_BTN:
         return (
           <button

diff --git a/weatherfit_refactoring/src/Components/Atoms/Icon/IconStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Icon/IconStore.tsx
@@ -1,5 +1,4 @@
 import Image from 'next/image'
-import { MouseEventHandler } from 'react'
 
 export enum IconStyle {
   MY_PROFILE = 'MY_PROFILE',
@@ -106,6 +105,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.UNLIKE:
@@ -116,6 +116,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.LIKE:
@@ -126,6 +127,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.TOGGLE:
@@ -156,6 +158,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.PREV2:
@@ -177,6 +180,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.SETTING:
@@ -198,6 +202,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.HIGHEST: