[Fix] #3 #14 업로드 및 상세 페이지 코드 수정

kdt-8-4 · Feb 3, 2024 · 2c2fc9e · 2c2fc9e
1 parent f864566
commit 2c2fc9e
Show file tree

Hide file tree

Showing 14 changed files with 233 additions and 209 deletions.
diff --git a/weatherfit_refactoring/@types/feed/index.d.ts b/weatherfit_refactoring/@types/feed/index.d.ts
@@ -14,22 +14,22 @@ interface BOARDID {
 }
 
 interface FEEDDATA {
-    boardId: number;
-    nickName: string;
-    likeCount: number;
-    temperature: number;
-    images: IMAGE;
-    category: string[];
-    hashTag: string[];
-    weatherIcon: string;
-    likelist: LIKE[];
-    createDate: string;
-    modifiedDate: string;
-  }
+  boardId: number
+  nickName: string
+  likeCount: number
+  temperature: number
+  images: IMAGE
+  category: string[]
+  hashTag: string[]
+  weatherIcon: string
+  likelist: LIKE[]
+  createDate: string
+  modifiedDate: string
+}
 
 interface FEEDDATA_detail {
   boardId: number
-  images: string
+  images: IMAGE[]
   createDate: string
   likeCount: number
   likelist: LIKE[]

diff --git a/weatherfit_refactoring/src/Components/Atoms/Box/BoxStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Box/BoxStore.tsx
@@ -1,4 +1,3 @@
-import Image from 'next/image'
 import { MouseEventHandler } from 'react'
 
 export enum BoxStyle {
@@ -12,7 +11,7 @@ interface Props {
   title?: string
   boxStyle: BoxStyle
   style?: string
-  onClickFunction?: MouseEventHandler<HTMLButtonElement> | undefined
+  onClickFunction?: () => void
   children?: React.ReactNode
 }
 
@@ -39,7 +38,11 @@ export default function BoxStore({
         )
       case BoxStyle.BOX_BLUE:
         return (
-          <div className={`${style} bg-blue-300 rounded-2xl`}>{children}</div>
+          <div
+            className={`${style} bg-blue-300 rounded-2xl`}
+            onClick={onClickFunction}>
+            {children}
+          </div>
         )
       case BoxStyle.BOX_IMAGE:
         return (

diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx
@@ -1,17 +1,9 @@
 '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>
-  }
-
+export default function DetailCategory({ data }: { data: FEEDDATA_detail }) {
   const findParentCategory = (subCategory: string): string | null => {
     for (const [parentCategory, subCategories] of Object.entries(categories)) {
       if (subCategories.includes(subCategory)) {
@@ -21,7 +13,7 @@ export default function DetailCategory(boardId: BOARDID) {
     return null
   }
 
-  const categoryGroups: Record<string, string[]> = post.category.reduce(
+  const categoryGroups: Record<string, string[]> = data.category.reduce(
     (groups: Record<string, string[]>, subCategory) => {
       const parentCategory = findParentCategory(subCategory)
       if (parentCategory && !groups[parentCategory]) {

diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailContent.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailContent.tsx
@@ -1,15 +1,6 @@
 '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>
-  }
-
+export default function DetailContent({ data }: { data: FEEDDATA_detail }) {
   const handleHashTagClick = (hashTag: string) => {
     console.log('Clicked hashtag:', hashTag)
   }
@@ -36,7 +27,7 @@ export default function DetailContent(boardId: BOARDID) {
 
       if (index !== splitContent.length - 1) {
         const currentHashTag = matchedHashTags[index]
-        const tagIndex = post.hashTag.indexOf(currentHashTag.slice(1))
+        const tagIndex = data.hashTag.indexOf(currentHashTag.slice(1))
 
         result.push(
           <span
@@ -53,12 +44,10 @@ export default function DetailContent(boardId: BOARDID) {
   }
 
   return (
-    <div className="font-NanumSquareRound flex space-x-3">
-      <div className="font-semibold">{post.nickName}</div>
+    <div className="font-NanumSquareRound px-1 break-all text-justify w-full">
       {/* 추후에 더보기 접기 버튼 넣어야 할 듯 */}
-      <div className="break-all text-justify w-full">
-        {extractAndStyleHashtags(post.content)}
-      </div>
+      <span className="font-extrabold mr-2">{data.nickName}</span>
+      {extractAndStyleHashtags(data.content)}
     </div>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailEtc.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailEtc.tsx
@@ -3,15 +3,13 @@
 import { useState } from 'react'
 import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
 import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
-import { deleteAlert } from '@/utils/function/utilFunction'
-import { useRouter, usePathname } from 'next/navigation'
-import Swal from 'sweetalert2'
+import { usePathname, useRouter } from 'next/navigation'
+import { deleteAlert, deleteOkAlert } from '@/utils/function/utilFunction'
 
 export default function DetailEtc(boardId: BOARDID) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const router = useRouter()
   const currentUrl = usePathname()
-
   const handleEdit = () => {
     router.push(`${currentUrl}/edit`)
   }
@@ -34,19 +32,7 @@ export default function DetailEtc(boardId: BOARDID) {
           const data = await response.json()
           console.log(data.result)
           if (response.ok) {
-            Swal.fire({
-              title: '삭제 완료',
-              text: '게시물이 성공적으로 삭제되었습니다.',
-              icon: 'success',
-              confirmButtonColor: '#3085d6',
-              confirmButtonText: '확인',
-              customClass: {
-                // popup: 'w-[275px] font-NanumSquareRound',
-                // icon: 'size-13',
-                // title: 'text-xl',
-                // 커스텀 하기
-              },
-            }).then(() => {
+            deleteOkAlert().then(() => {
               router.push('/feed')
             })
           }

diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx
@@ -1,38 +1,29 @@
 'use client'
 
 import Image from 'next/image'
-import feedDummy from '../../../public/dummy_data/feed.json'
 import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
 import { useState } from 'react'
 import { handlePrevious, handleNext } from '@/utils/function/utilFunction'
 
-export default function DetailImage(boardId: BOARDID) {
-  const id = boardId.boardId
-  const post = feedDummy.feed_data.find(post => post.boardId === Number(id))
+export default function DetailImage({ data }: { data: FEEDDATA_detail }) {
   const [index, setIndex] = useState(0)
 
-  if (!post) {
-    return <div>게시물이 삭제되었습니다.</div>
-  }
-
-  const onPreviousClick = () => handlePrevious(setIndex, post.images.length)
-  const onNextClick = () => handleNext(setIndex, post.images.length)
+  const onPreviousClick = () => handlePrevious(setIndex, data.images.length)
+  const onNextClick = () => handleNext(setIndex, data.images.length)
 
   return (
     <div className="flex justify-center items-center">
       <div className="relative w-[250px] h-[350px]">
         <Image
-          key={post.images[index]}
-          src={post.images[index]}
+          key={data.images[index].imageId}
+          src={data.images[index].imageUrl}
           layout="fill"
           objectFit="cover"
-          // width={100}
-          // height={100}
           alt={`image-${index}`}
           className="rounded-xl m-2"
         />
       </div>
-      {post.images.length > 1 && (
+      {data.images.length > 1 && (
         <div className="absolute flex w-full cursor-pointer px-10 flex justify-between items-center">
           <IconStore
             iconStyle={IconStyle.PREV}

diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailProfile.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailProfile.tsx
@@ -1,27 +1,25 @@
 'use client'
 
 import Image from 'next/image'
-import feedDummy from '../../../public/dummy_data/feed.json'
-
-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>
-  }
 
+export default function DetailProfile({
+  data,
+  userData,
+}: {
+  data: FEEDDATA_detail
+  userData: FEEDDATA_detail
+}) {
   return (
     <div className="flex items-center font-NanumSquareRound mt-5">
       <Image
-        src={post.userImage}
+        src={userData.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-lg">{data.nickName}</p>
         <p className="text-xs text-gray-400">@user_one</p>
         {/* <p className="text-xs text-gray-400">여기 아이디 들어가면 되려나</p> */}
       </div>