[Feat] kdt-8-4#14 상세 페이지 틀 작업중

hyeiis · Jan 27, 2024 · d88cb37 · d88cb37
1 parent 8043b18
commit d88cb37
Show file tree

Hide file tree

Showing 10 changed files with 382 additions and 281 deletions.
diff --git a/weatherfit_refactoring/@types/feed/index.d.ts b/weatherfit_refactoring/@types/feed/index.d.ts
@@ -1,24 +1,27 @@
 interface LIKE {
-    likeId : number;
-    nickName: string;
-  }
-
+  likeId: number
+  nickName: string
+}
 
 interface IMAGE {
-    boardId: number;
-    imageId: number;
-    imageUrl: string;
-  }
+  boardId: number
+  imageId: number
+  imageUrl: string
+}
 
 interface FEEDATA {
-    boardId: number;
-    images: string;
-    createDate: string;
-    likeCount: number;
-    likelist: LIKE[];
-    nickName: string;
-    temperature: number;
-    weather: string;
-    weatherIcon: string;
-  }
-
+  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/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/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",
+  CANCLE_BTN = 'CANCLE_BTN',
 }
 
 interface Props {
@@ -45,7 +45,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>
@@ -70,7 +71,7 @@ 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-1.5 py-0.5`}
             onClick={onClickFunction}>
             {children}
           </button>
@@ -91,14 +92,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.CANCLE_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/Molecules/DetailProfile.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailProfile.tsx
@@ -0,0 +1,22 @@
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import { FeedData } from '@/Store/FeedData'
+
+export default function DetailProfile() {
+  //   const router = useRouter()
+  //   const { id } = router
+
+  //   const { feedData } = FeedData()
+
+  //   const post = feedData.find(post => post.boardId === Number(id))
+
+  //   if (!post) {
+  //     return <div>게시물이 삭제되었습니다.</div>
+  //   }
+
+  return (
+    <>
+      {/* <Image src={post.userImage} width={20} height={20} alt="profile" /> */}
+    </>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedContent.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedContent.tsx
@@ -1,61 +1,82 @@
-import Image from "next/image"
-import IconStore, { IconStyle } from "../Atoms/Icon/IconStore"
+import Image from 'next/image'
+import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
 
-
-
-export default function FeedContent({boardId, createDate, likeCount, likelist, weather, images, nickName, temperature, weatherIcon}:FEEDATA) {
-
-    return (
-        <div className=" bg-E4E4E6 rounded-xl mx-2 my-2 w-[179px] h-[340px]">
-            <div className="flex justify-between m-auto w-[90%] py-2">
-                <div className="flex">
-                    <div className=" relative w-[40px] h-[40px]">
-                        <Image
-                        src={"https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90"}
-                        alt="프로필 사진"
-                        fill
-                        className="rounded-full"
-                        />
-                    </div>
-                    <div>
-                        <p className=" font-Cafe24SsurroundAir text-[13px]">{nickName}</p>
-                        <p className=" font-NanumSquareRound text-[10px]">{createDate}</p>
-                    </div>
-                </div>
-                <div>
-                    <IconStore iconStyle={IconStyle.ETC} size={30}/>
-                </div>
-            </div>
-            <div className=" relative m-auto w-[90%] h-[218px]">
-                <Image 
-                src={images}
-                alt="코디 사진"
-                fill
-                className="border border-black rounded-xl"
-                />
-            </div>
-            <div className="flex justify-between m-auto w-[90%] py-2">
-                <div className="flex">
-                    <div className="relative">
-                        <IconStore iconStyle={IconStyle.LIKE} size={25} style="relative top-[26%]"/>
-                    </div>
-                    <div className="relative font-Cafe24SsurroundAir text-[13px]">
-                        <p className=" absolute top-[50%] translate-y-[-50%] w-[100%] h-auto">{likeCount}</p>
-                    </div>
-                </div>
-                <div>
-                    <Image  
-                    src={`https://openweathermap.org/img/wn/${weatherIcon}.png`}
-                    alt="weatherIcon"
-                    width={40}
-                    height={40}
-                    loading="lazy"
-                    />
-                    <div>
-                        <p className="font-Cafe24SsurroundAir text-xs text-center">{temperature}℃</p>
-                    </div>
-                </div>
-            </div>
+export default function FeedContent({
+  boardId,
+  createDate,
+  likeCount,
+  likelist,
+  weather,
+  images,
+  nickName,
+  temperature,
+  weatherIcon,
+}: FEEDATA) {
+  return (
+    <div className=" bg-E4E4E6 rounded-xl mx-2 my-2 w-[179px] h-[340px]">
+      <div className="flex justify-between m-auto w-[90%] py-2">
+        <div className="flex">
+          <div className=" relative w-[40px] h-[40px]">
+            <Image
+              src={
+                'https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90'
+              }
+              alt="프로필 사진"
+              fill
+              className="rounded-full"
+            />
+          </div>
+          <div>
+            <p className=" font-Cafe24SsurroundAir text-[13px]">{nickName}</p>
+            <p className=" font-NanumSquareRound text-[10px]">{createDate}</p>
+          </div>
+        </div>
+        <div>
+          <IconStore iconStyle={IconStyle.ETC} size={30} />
+        </div>
+      </div>
+      <Link href={`/detail/${boardId}`}>
+        <div className=" relative m-auto w-[90%] h-[218px]">
+          <Image
+            src={images[0]}
+            alt="코디 사진"
+            fill
+            className="border border-black rounded-xl"
+          />
+        </div>
+      </Link>
+      <div className="flex justify-between m-auto w-[90%] py-2">
+        <div className="flex">
+          <div className="relative">
+            <IconStore
+              iconStyle={IconStyle.LIKE}
+              size={25}
+              style="relative top-[26%]"
+            />
+          </div>
+          <div className="relative font-Cafe24SsurroundAir text-[13px]">
+            <p className=" absolute top-[50%] translate-y-[-50%] w-[100%] h-auto">
+              {likeCount}
+            </p>
+          </div>
+        </div>
+        <div>
+          <Image
+            src={`https://openweathermap.org/img/wn/${weatherIcon}.png`}
+            alt="weatherIcon"
+            width={40}
+            height={40}
+            loading="lazy"
+          />
+          <div>
+            <p className="font-Cafe24SsurroundAir text-xs text-center">
+              {temperature}℃
+            </p>
+          </div>
         </div>
-    )
-}
+      </div>
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/Header.tsx b/weatherfit_refactoring/src/Components/Molecules/Header.tsx
@@ -23,7 +23,7 @@ export default function Header({
   onClickFunction2,
 }: Props) {
   return (
-    <div className="flex items-center justify-between h-[50px] my-[10px]">
+    <div className="relative flex items-center justify-between h-[50px] my-1 pb-1">
       <IconStore
         iconStyle={IconStyle.PREV2}
         size={20}
@@ -32,9 +32,9 @@ export default function Header({
       />
       <BoxStore
         boxStyle={BoxStyle.BOX_BLUE}
-        children={title}
-        style="px-2 h-[30px] font-neurimboGothic text-[22px] pb-[5px] shadow-[7px_7px_1px] flex items-center"
-      />
+        style="absolute left-1/2 transform -translate-x-1/2 px-2 h-[30px] font-neurimboGothic text-[22px] pb-[7px] shadow-[7px_7px_1px] flex items-center">
+        {title}
+      </BoxStore>
       {iconStyleCase ? (
         <IconStore
           iconStyle={iconStyleCase}
@@ -49,7 +49,9 @@ export default function Header({
           btnText={btnText}
           onClickFunction={onClickFunction}
         />
-      ) : null}
+      ) : (
+        <div style={{ visibility: 'hidden' }}></div>
+      )}
     </div>
   )
 }