[Feat] #3 #14 업로드 페이지 수정 및 상세 페이지 기능 추가

kdt-8-4 · Feb 1, 2024 · 1fc87a9 · 1fc87a9
1 parent dab30be
commit 1fc87a9
Show file tree

Hide file tree

Showing 16 changed files with 243 additions and 63 deletions.
diff --git a/weatherfit_refactoring/@types/feed/index.d.ts b/weatherfit_refactoring/@types/feed/index.d.ts
@@ -9,6 +9,10 @@ interface IMAGE {
   imageUrl: string
 }
 
+interface BOARDID {
+  boardId: string | string[] | undefined
+}
+
 interface FEEDATA {
   boardId: number
   images: 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/public/dummy_data/feed.json b/weatherfit_refactoring/public/dummy_data/feed.json
@@ -17,8 +17,8 @@
       "temperature": -6,
       "weather": "clear sky",
       "weatherIcon": "01d",
-      "content": "안녕 안녕 #hi 헬로",
-      "hashTag": "hi",
+      "content": "안녕 안녕 #hi 헬로 #하이 ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ 가나다라마바사아자차카타파하 abcdefghijklmnopqrstuvwxyz",
+      "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
@@ -71,15 +71,15 @@ export default function ButtonStore({
       case ButtonStyle.CATEGORY_BTN_Y:
         return (
           <button
-            className={`${style} bg-yellow-200 border border-black rounded-2xl 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>

diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import feedDummy from '../../../public/dummy_data/feed.json'
+import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
+import { categories } from '../data/CategoryList'
+
+export default function DetailCategory(boardId: BOARDID) {
+  const id = boardId.boardId
+  const post = feedDummy.feed_data.find(post => post.boardId === Number(id))
+
+  if (!post) {
+    return <div>게시물이 삭제되었습니다.</div>
+  }
+
+  const findParentCategory = (subCategory: string): string | null => {
+    for (const [parentCategory, subCategories] of Object.entries(categories)) {
+      if (subCategories.includes(subCategory)) {
+        return parentCategory
+      }
+    }
+    return null
+  }
+
+  const categoryGroups: Record<string, string[]> = post.category.reduce(
+    (groups: Record<string, string[]>, subCategory) => {
+      const parentCategory = findParentCategory(subCategory)
+      if (parentCategory && !groups[parentCategory]) {
+        groups[parentCategory] = []
+      }
+      if (parentCategory) {
+        groups[parentCategory].push(subCategory)
+      }
+      return groups
+    },
+    {},
+  )
+
+  const handleSelectCategory = () => {
+    // 카테고리 선택한 거 누르면 검색된 페이지로 이동하게
+  }
+
+  return (
+    <div className="font-NanumSquareRound flex w-screen justify-center bg-stone-200 flex-col p-3">
+      {Object.entries(categoryGroups).map(
+        ([parentCategory, subCategories], index) => (
+          <div key={index} className="m-2 flex items-center">
+            <span className="font-bold text-[16px] mr-3">{parentCategory}</span>
+            {subCategories.map((subCategory, index) => (
+              <ButtonStore
+                key={index}
+                onClickFunction={handleSelectCategory}
+                buttonStyle={ButtonStyle.CATEGORY_BTN_Y}
+                style="mr-2">
+                {subCategory}
+              </ButtonStore>
+            ))}
+          </div>
+        ),
+      )}
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailContent.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailContent.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import feedDummy from '../../../public/dummy_data/feed.json'
+
+export default function DetailContent(boardId: BOARDID) {
+  const id = boardId.boardId
+  const post = feedDummy.feed_data.find(post => post.boardId === Number(id))
+
+  if (!post) {
+    return <div>게시물이 삭제되었습니다.</div>
+  }
+
+  const handleHashTagClick = (hashTag: string) => {
+    console.log('Clicked hashtag:', hashTag)
+  }
+
+  const extractAndStyleHashtags = (content: string) => {
+    const hashTagRegex = /#[^\s#]+/g
+    const splitContent = content.split(hashTagRegex)
+    const matchedHashTags = content.match(hashTagRegex) || []
+
+    const result: (string | JSX.Element)[] = []
+
+    splitContent.forEach((current, index) => {
+      const replacedContent = current
+        .replace(/\n/g, '<br />')
+        .replace(/ /g, '&nbsp;')
+
+      result.push(
+        <span
+          key={`content-${index}`}
+          className="break-all"
+          dangerouslySetInnerHTML={{ __html: replacedContent }} // HTML 문자열을 설정하여 줄바꿈 인식
+        />,
+      )
+
+      if (index !== splitContent.length - 1) {
+        const currentHashTag = matchedHashTags[index]
+        const tagIndex = post.hashTag.indexOf(currentHashTag.slice(1))
+
+        result.push(
+          <span
+            key={`hashtag-${index}`}
+            className={
+              tagIndex !== -1 ? 'text-blue-400 cursor-pointer break-all' : ''
+            }
+            onClick={() => handleHashTagClick(currentHashTag)}>
+            {currentHashTag}
+          </span>,
+        )
+      }
+    })
+
+    return result
+  }
+
+  return (
+    <div className="font-NanumSquareRound flex">
+      <div className="mr-3 font-semibold">{post.nickName}</div>
+      {/* 추후에 더보기 접기 버튼 넣어야 할 듯 */}
+      <div>{extractAndStyleHashtags(post.content)}</div>
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx
@@ -0,0 +1,26 @@
+import Image from 'next/image'
+import feedDummy from '../../../public/dummy_data/feed.json'
+
+export default function DetailImage(boardId: BOARDID) {
+  const id = boardId.boardId
+  const post = feedDummy.feed_data.find(post => post.boardId === Number(id))
+
+  if (!post) {
+    return <div>게시물이 삭제되었습니다.</div>
+  }
+
+  return (
+    <div className="flex justify-center">
+      {post.images.map((image, index) => (
+        <Image
+          key={index}
+          src={image}
+          width={100}
+          height={200}
+          alt={`image-${index}`}
+          className="rounded-xl m-2"
+        />
+      ))}
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailProfile.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailProfile.tsx
@@ -1,22 +1,30 @@
-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
+'use client'
 
-  //   const { feedData } = FeedData()
+import Image from 'next/image'
+import feedDummy from '../../../public/dummy_data/feed.json'
 
-  //   const post = feedData.find(post => post.boardId === Number(id))
+export default function DetailProfile(boardId: BOARDID) {
+  const id = boardId.boardId
+  const post = feedDummy.feed_data.find(post => post.boardId === Number(id))
 
-  //   if (!post) {
-  //     return <div>게시물이 삭제되었습니다.</div>
-  //   }
+  if (!post) {
+    return <div>게시물이 삭제되었습니다.</div>
+  }
 
   return (
-    <>
-      {/* <Image src={post.userImage} width={20} height={20} alt="profile" /> */}
-    </>
+    <div className="flex items-center font-NanumSquareRound mt-5">
+      <Image
+        src={post.userImage}
+        width={50}
+        height={50}
+        alt="profile"
+        className="rounded-full"
+      />
+      <div className="flex-col ml-3 pb-1">
+        <p className="text-lg">{post.nickName}</p>
+        <p className="text-xs text-gray-400">@user_one</p>
+        {/* <p className="text-xs text-gray-400">여기 아이디 들어가면 되려나</p> */}
+      </div>
+    </div>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Molecules/Header.tsx b/weatherfit_refactoring/src/Components/Molecules/Header.tsx
@@ -27,7 +27,7 @@ export default function Header({
       <IconStore
         iconStyle={IconStyle.PREV2}
         size={20}
-        style={'ml-[10px] cursor-pointer'}
+        style="ml-[10px] cursor-pointer"
         onClickFunction={() => window.history.back()}
       />
       <BoxStore
@@ -39,18 +39,18 @@ export default function Header({
         <IconStore
           iconStyle={iconStyleCase}
           size={17}
-          style={'mr-[10px] cursor-pointer'}
+          style="mr-[10px] cursor-pointer"
           onClickFunction={onClickFunction2}
         />
       ) : buttonStyleCase ? (
         <ButtonStore
           buttonStyle={buttonStyleCase}
-          style={'mr-[10px] font-NanumSquareRound text-xs'}
+          style="mr-[10px] font-NanumSquareRound text-xs"
           btnText={btnText}
           onClickFunction={onClickFunction}
         />
       ) : (
-        <div style={{ visibility: 'hidden' }}></div>
+        <div className="hidden"></div>
       )}
     </div>
   )

diff --git a/weatherfit_refactoring/src/Components/Molecules/Select.tsx b/weatherfit_refactoring/src/Components/Molecules/Select.tsx
@@ -63,9 +63,9 @@ export default function Select({ category, subCategories, onSelect }: Props) {
               }
               key={index}
               style="mr-2 my-1.5"
-              children={subCategory}
-              onClickFunction={() => selectSubCategory(subCategory)}
-            />
+              onClickFunction={() => selectSubCategory(subCategory)}>
+              {subCategory}
+            </ButtonStore>
           ))}
         </div>
       )}

diff --git a/weatherfit_refactoring/src/Components/Molecules/UploadWeather.tsx b/weatherfit_refactoring/src/Components/Molecules/UploadWeather.tsx
@@ -3,18 +3,17 @@ import Image from 'next/image'
 
 export default function UploadWeather() {
   const { weatherIcon } = WeatherIcon()
+
   return (
     <div className="flex mb-3 items-center w-fit">
       <p className="font-gmarketsans pt-[5px] mr-3 text-sm">업로드 날씨</p>
-      {weatherIcon && (
-        <Image
-          src={`https://openweathermap.org/img/wn/${weatherIcon}.png`}
-          alt="날씨"
-          width={10}
-          height={10}
-          loading="lazy"
-        />
-      )}
+      <Image
+        src={`https://openweathermap.org/img/wn/${weatherIcon}.png`}
+        alt="날씨"
+        width={20}
+        height={20}
+        loading="lazy"
+      />
     </div>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Organisms/DetailOrganism.tsx b/weatherfit_refactoring/src/Components/Organisms/DetailOrganism.tsx
@@ -0,0 +1,19 @@
+import DetailContent from '@/Components/Molecules/DetailContent'
+import DetailImage from '@/Components/Molecules/DetailImge'
+import DetailProfile from '@/Components/Molecules/DetailProfile'
+import DetailCategory from '../Molecules/DetailCategory'
+import feedDummy from '../../../public/dummy_data/feed.json'
+
+export default function DetailOrganism({ boardId }: BOARDID) {
+  return (
+    <div className="h-screen space-y-5">
+      <div className="mx-5 space-y-5">
+        <DetailProfile boardId={boardId} />
+        <DetailImage boardId={boardId} />
+        {/* 좋아요 & 댓글 */}
+        <DetailContent boardId={boardId} />
+      </div>
+      <DetailCategory boardId={boardId} />
+    </div>
+  )
+}