[Fix] #28 수정 페이지 코드 수정

weatherfit_refactoring/src/Components/Molecules/Best3Codi.tsx → weatherfit_refactoring/src/Components/Molecules/BestThreeCodi.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import BoxStore, { BoxStyle } from '../Atoms/Box/BoxStore'
 import Image from 'next/image'
 
-export default function Best3Codi({ data }: { data?: FEEDDATA_detail }) {
+export default function BestThreeCodi({ data }: { data?: FEEDDATA_detail }) {
   if (!data || !data.images) {
     return null
   }

weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx

@@ -3,7 +3,11 @@
 import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
 import { categories } from '../data/CategoryList'
 
-export default function DetailCategory({ data }: { data: FEEDDATA_detail }) {
+export default function DetailCategory({
+  category,
+}: {
+  category: FEEDDATA_detail['category']
+}) {
   const findParentCategory = (subCategory: string): string | null => {
     for (const [parentCategory, subCategories] of Object.entries(categories)) {
       if (subCategories.includes(subCategory)) {
@@ -13,7 +17,7 @@ export default function DetailCategory({ data }: { data: FEEDDATA_detail }) {
     return null
   }
 
-  const categoryGroups: Record<string, string[]> = data.category.reduce(
+  const categoryGroups: Record<string, string[]> = category.reduce(
     (groups: Record<string, string[]>, subCategory) => {
       const parentCategory = findParentCategory(subCategory)
       if (parentCategory && !groups[parentCategory]) {

weatherfit_refactoring/src/Components/Molecules/DetailContent.tsx

@@ -1,6 +1,14 @@
 'use client'
 
-export default function DetailContent({ data }: { data: FEEDDATA_detail }) {
+export default function DetailContent({
+  nickName,
+  content,
+  hashTag,
+}: {
+  nickName: string
+  content: FEEDDATA_detail['content']
+  hashTag: FEEDDATA_detail['hashTag']
+}) {
   const handleHashTagClick = (hashTag: string) => {
     console.log('Clicked hashtag:', hashTag)
   }
@@ -27,7 +35,7 @@ export default function DetailContent({ data }: { data: FEEDDATA_detail }) {
 
       if (index !== splitContent.length - 1) {
         const currentHashTag = matchedHashTags[index]
-        const tagIndex = data.hashTag.indexOf(currentHashTag.slice(1))
+        const tagIndex = hashTag.indexOf(currentHashTag.slice(1))
 
         result.push(
           <span
@@ -46,8 +54,8 @@ export default function DetailContent({ data }: { data: FEEDDATA_detail }) {
   return (
     <div className="font-NanumSquareRound px-1 break-all text-justify w-full">
       {/* 추후에 더보기 접기 버튼 넣어야 할 듯 */}
-      <span className="font-extrabold mr-2">{data.nickName}</span>
-      {extractAndStyleHashtags(data.content)}
+      <span className="font-extrabold mr-2">{nickName}</span>
+      {extractAndStyleHashtags(content)}
     </div>
   )
 }

weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx

@@ -5,26 +5,30 @@ import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
 import { useState } from 'react'
 import { handlePrevious, handleNext } from '@/utils/function/utilFunction'
 
-export default function DetailImage({ data }: { data: FEEDDATA_detail }) {
+export default function DetailImage({
+  images,
+}: {
+  images: FEEDDATA_detail['images']
+}) {
   const [index, setIndex] = useState(0)
 
-  const onPreviousClick = () => handlePrevious(setIndex, data.images.length)
-  const onNextClick = () => handleNext(setIndex, data.images.length)
+  const onPreviousClick = () => handlePrevious(setIndex, images.length)
+  const onNextClick = () => handleNext(setIndex, images.length)
 
   return (
     <div className="flex justify-center items-center">
       <div className="relative w-[250px] h-[350px]">
         <Image
-          key={data.images[index].imageId}
-          src={data.images[index].imageUrl}
+          key={images[index].imageId}
+          src={images[index].imageUrl}
           layout="fill"
           objectFit="cover"
           sizes="auto"
           alt={`image-${index}`}
           className="rounded-xl m-2"
         />
       </div>
-      {data.images.length > 1 && (
+      {images.length > 1 && (
         <div className="absolute flex w-full cursor-pointer px-10 flex justify-between items-center">
           <IconStore
             iconStyle={IconStyle.PREV}

weatherfit_refactoring/src/Components/Molecules/DetailProfile.tsx

@@ -3,10 +3,10 @@
 import Image from 'next/image'
 
 export default function DetailProfile({
-  data,
+  nickName,
   userData,
 }: {
-  data: FEEDDATA_detail
+  nickName: string
   userData: FEEDDATA_detail
 }) {
   return (
@@ -19,7 +19,7 @@ export default function DetailProfile({
         className="rounded-full"
       />
       <div className="flex-col ml-3 pb-1">
-        <p className="text-lg">{data.nickName}</p>
+        <p className="text-lg">{nickName}</p>
         <p className="text-xs text-gray-400">@user_one</p>
         {/* <p className="text-xs text-gray-400">여기 아이디 들어가면 되려나</p> */}
       </div>

weatherfit_refactoring/src/Components/Molecules/EditWeather.tsx

@@ -2,12 +2,16 @@
 
 import Image from 'next/image'
 
-export default function EditWeather({ data }: { data: FEEDDATA_detail }) {
+export default function EditWeather({
+  weatherIcon,
+}: {
+  weatherIcon: FEEDDATA_detail['weatherIcon']
+}) {
   return (
     <div className="flex mb-3 items-center w-fit">
       <p className="font-gmarketsans pt-[5px] mr-3 text-sm">업로드 당시 날씨</p>
       <Image
-        src={data.weatherIcon}
+        src={weatherIcon}
         alt="날씨"
         width={20}
         height={20}

weatherfit_refactoring/src/Components/Molecules/FeedSearch.tsx

@@ -1,67 +1,62 @@
 'use client'
 
-import IconStore, { IconStyle } from "../Atoms/Icon/IconStore";
-import InputStore, { InputStyle } from "../Atoms/Input/InputStore";
-import ButtonStore, { ButtonStyle } from "../Atoms/Button/ButtonStore";
-import { ChangeEventHandler, useEffect, useState } from "react";
+import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+import InputStore, { InputStyle } from '../Atoms/Input/InputStore'
+import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
+import { ChangeEventHandler, useEffect, useState } from 'react'
 
 export default function FeedSearch() {
-  const searchCancle = () => {}
-  const [hashValue, setHval] = useState<string>("");
-  const searchCancle = () => {
-        setHval("");
-    }
-
-    const searchHashTag:ChangeEventHandler<HTMLInputElement> = (e:React.ChangeEvent<HTMLInputElement>) => {
-        console.log("검색할 내용", e.target.value);
-        setHval(e.target.value);
-    }
-
-    useEffect(()=>{
-
-        console.log("검색할려고 하는 태그", hashValue);
-        hashToArray();
+  const [hashValue, setHval] = useState<string>('')
 
-    },[hashValue]);
-
-    const hashToArray = () => {
-        const searchHashtagData:string[] = hashValue.split('#').filter(Boolean);
-        console.log('해시태그 검색 배열', searchHashtagData);
-
-        let url = "https://www.jerneithe.site/board/search?categories="
-
-        if(searchHashtagData.length != 0) {
-            for(let i=0 ; i<searchHashtagData.length ; i++) {
-                url += searchHashtagData[i];
-            }
-        }
-
-        console.log("검색 url", url);
+  const searchCancle = () => {
+    setHval('')
+  }
+
+  const searchHashTag: ChangeEventHandler<HTMLInputElement> = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    console.log('검색할 내용', e.target.value)
+    setHval(e.target.value)
+  }
+
+  useEffect(() => {
+    console.log('검색할려고 하는 태그', hashValue)
+    hashToArray()
+  }, [hashValue])
+
+  const hashToArray = () => {
+    const searchHashtagData: string[] = hashValue.split('#').filter(Boolean)
+    console.log('해시태그 검색 배열', searchHashtagData)
+
+    let url = 'https://www.jerneithe.site/board/search?categories='
+
+    if (searchHashtagData.length != 0) {
+      for (let i = 0; i < searchHashtagData.length; i++) {
+        url += searchHashtagData[i]
+      }
     }
 
-
-
-    return(
-        <div className=" flex py-[10px] px-[10px]">
-            <div className="flex border rounded-[9px] mx-1">
-                <InputStore 
-                    inputStyle={InputStyle.INPUT_SEARCH} 
-                    placeholderContents="#해시태그를 입력하세요" 
-                    style="font-gmarketsans font-thin outline-none text-[14px] w-[65vw] h-[38px] mx-1"
-                    value={hashValue}
-                    onChageFunction={searchHashTag}
-                    />
-                <IconStore 
-                    iconStyle={IconStyle.SEARCH} 
-                    size={16} 
-                    style="mr-[10px]"/>
-            </div>
-            <ButtonStore 
-                buttonStyle={ButtonStyle.CANCEL_BTN} 
-                style="font-NanumSquareRound text-gray-500 text-[16px] w-[70px]" 
-                onClickFunction={searchCancle}>
-                취소
-            </ButtonStore>
-        </div>
-    )
+    console.log('검색 url', url)
+  }
+
+  return (
+    <div className=" flex py-[10px] px-[10px]">
+      <div className="flex border rounded-[9px] mx-1">
+        <InputStore
+          inputStyle={InputStyle.INPUT_SEARCH}
+          placeholderContents="#해시태그를 입력하세요"
+          style="font-gmarketsans font-thin outline-none text-[14px] w-[65vw] h-[38px] mx-1"
+          value={hashValue}
+          onChageFunction={searchHashTag}
+        />
+        <IconStore iconStyle={IconStyle.SEARCH} size={16} style="mr-[10px]" />
+      </div>
+      <ButtonStore
+        buttonStyle={ButtonStyle.CANCEL_BTN}
+        style="font-NanumSquareRound text-gray-500 text-[16px] w-[70px]"
+        onClickFunction={searchCancle}>
+        취소
+      </ButtonStore>
+    </div>
+  )
 }

weatherfit_refactoring/src/Components/Molecules/Select.tsx

@@ -1,5 +1,4 @@
 'use client'
-// 리액트 use 들어간 hook에는 use client 써야함
 
 import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
 import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
@@ -27,7 +26,7 @@ export default function Select({
     if (initialSelectedSubCategories) {
       setSelectedSubCategories(category, initialSelectedSubCategories)
     }
-  }, [category, initialSelectedSubCategories, setSelectedSubCategories])
+  }, [initialSelectedSubCategories, setSelectedSubCategories, category])
 
   const toggleDropDown = () => {
     setDropDown(!dropDown)
@@ -37,13 +36,14 @@ export default function Select({
   const selectSubCategory = (subCategory: string) => {
     const selected = selectedSubCategories[category] || []
     const index = selected.indexOf(subCategory)
-    let updatedSubCategories: string[] = []
 
+    let updatedSubCategories
     if (index === -1) {
-      updatedSubCategories = [...selected, subCategory]
+      updatedSubCategories = Array.from(new Set([...selected, subCategory]))
     } else {
       updatedSubCategories = selected.filter(item => item !== subCategory)
     }
+
     setSelectedSubCategories(category, updatedSubCategories)
     onSelect(updatedSubCategories)
   }

weatherfit_refactoring/src/Components/Molecules/TextAreaMolecule.tsx

@@ -5,26 +5,26 @@ import TextArea from '../Atoms/TextArea'
 import { useStore } from '../../Store/Store'
 import { extractHashtags } from '@/utils/function/utilFunction'
 
-export default function TextAreaMolecule({ data }: { data?: FEEDDATA_detail }) {
-  const { content, setContent, setHashTags } = useStore()
+export default function TextAreaMolecule({
+  initContent,
+}: {
+  initContent?: FEEDDATA_detail['content']
+}) {
+  const { content, setContent, setHashTag } = useStore()
   const textAreaRef = useRef<HTMLTextAreaElement>(null)
 
-  // useEffect(() => {
-  //   setContent(content)
-  // }, [content])
-
   useEffect(() => {
-    if (data && data.content) {
-      setContent(data.content)
+    if (initContent) {
+      setContent(initContent)
     }
-  }, [data, setContent])
+  }, [setContent])
 
   const handleChange = () => {
     if (textAreaRef.current) {
       const newContent = textAreaRef.current.value || ''
-      const hashTags = extractHashtags(newContent) // 해시태그 추출
+      const hashTag = extractHashtags(newContent) // 해시태그 추출
       setContent(newContent)
-      setHashTags(hashTags)
+      setHashTag(hashTag)
     }
   }
 

weatherfit_refactoring/src/Components/Organisms/DetailOrganism.tsx

@@ -7,44 +7,49 @@ import DetailEtc from '../Molecules/DetailEtc'
 import NotFound from '@/app/not-found'
 
 export default async function DetailOrganism({ boardId }: BOARDID) {
-  const response = await fetch(
+  const fetchBoardDataResponse = await fetch(
     `https://www.jerneithe.site/board/detail/${boardId}`,
     {
       method: 'GET',
     },
   )
-  const data: FEEDDATA_detail = await response.json()
+  const fetchBoardData = await fetchBoardDataResponse.json()
 
-  const userResponse = await fetch(
+  const fetchUserDataResponse = await fetch(
     `https://www.jerneithe.site/user/api/userinfo`,
     {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        nickName: data.nickName,
+        nickName: fetchBoardData.nickName,
       }),
     },
   )
+  const fetchUserData = await fetchUserDataResponse.json()
 
-  const userData = await userResponse.json()
-  console.log('userData: ', userData)
-
-  if (!data.boardId) return NotFound()
+  if (!fetchBoardData.boardId) NotFound()
   else
     return (
       <div className="space-y-5">
         <div className="mx-5 space-y-3">
           <div className="flex justify-between">
-            <DetailProfile data={data} userData={userData} />
+            <DetailProfile
+              nickName={fetchBoardData.nickName}
+              userData={fetchUserData}
+            />
             <DetailEtc boardId={boardId} />
           </div>
-          <DetailImage data={data} />
+          <DetailImage images={fetchBoardData.images} />
           <LikeAndComment />
-          <DetailContent data={data} />
+          <DetailContent
+            nickName={fetchBoardData.nickName}
+            content={fetchBoardData.content}
+            hashTag={fetchBoardData.hashTag}
+          />
         </div>
-        <DetailCategory data={data} />
+        <DetailCategory category={fetchBoardData.category} />
       </div>
     )
 }