[Feat] kdt-8-4#3 kdt-8-4#14 kdt-8-4#22 수정 페이지 관련 업로드 기능 수정 및 메인 베스트 코…

…디 3 코드 구현중
hyeiis · Feb 13, 2024 · 9d3e729 · 9d3e729
1 parent 07c91a6
commit 9d3e729
Show file tree

Hide file tree

Showing 17 changed files with 244 additions and 92 deletions.
diff --git a/weatherfit_refactoring/next.config.js b/weatherfit_refactoring/next.config.js
@@ -9,9 +9,6 @@ module.exports = {
       'openweathermap.org',
       'cdn.peacedoorball.blog',
       'cdnimg.melon.co.kr',
-      // 외부 url 이미지 로드
-      'postfiles.pstatic.net',
-      'i.pinimg.com',
     ],
   },
 }
diff --git a/weatherfit_refactoring/src/Components/Molecules/Best3Codi.tsx b/weatherfit_refactoring/src/Components/Molecules/Best3Codi.tsx
@@ -0,0 +1,28 @@
+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 }) {
+  if (!data || !data.images) {
+    return null
+  }
+
+  return (
+    <>
+      {data.images.map((image, index) => (
+        <Link href={`/detail/${data.boardId}`}>
+          <BoxStore boxStyle={BoxStyle.BOX_IMAGE} key={index}>
+            <Image
+              src={image.imageUrl}
+              alt={`Image ${index}`}
+              width={100}
+              height={100}
+              className="w-full h-full object-cover border rounded-2xl"
+            />
+          </BoxStore>
+        </Link>
+        // 유저 정보 넣어야 함
+      ))}
+    </>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx
@@ -19,6 +19,7 @@ export default function DetailImage({ data }: { data: FEEDDATA_detail }) {
           src={data.images[index].imageUrl}
           layout="fill"
           objectFit="cover"
+          sizes="auto"
           alt={`image-${index}`}
           className="rounded-xl m-2"
         />

diff --git a/weatherfit_refactoring/src/Components/Molecules/EditWeather.tsx b/weatherfit_refactoring/src/Components/Molecules/EditWeather.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import Image from 'next/image'
+
+export default function EditWeather({ data }: { data: FEEDDATA_detail }) {
+  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}
+        alt="날씨"
+        width={20}
+        height={20}
+        loading="lazy"
+      />
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedSearch.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedSearch.tsx
@@ -1,33 +1,28 @@
-"use client"
+'use client'
 
-import IconStore, { IconStyle } from "../Atoms/Icon/IconStore";
-import InputStore, { InputStyle } from "../Atoms/Input/InputStore";
-import ButtonStore, { ButtonStyle } from "../Atoms/Button/ButtonStore";
+import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+import InputStore, { InputStyle } from '../Atoms/Input/InputStore'
+import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
 
-export default function FeedSearch(){
+export default function FeedSearch() {
+  const searchCancle = () => {}
 
-    const searchCancle = () => {
-
-    }
-
-    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"/>
-                <IconStore 
-                    iconStyle={IconStyle.SEARCH} 
-                    size={16} 
-                    style="mr-[10px]"/>
-            </div>
-            <ButtonStore 
-                buttonStyle={ButtonStyle.CANCLE_BTN} 
-                style="font-NanumSquareRound text-gray-500 text-[16px] w-[70px]" 
-                onClickFunction={searchCancle}>
-                취소
-            </ButtonStore>
-        </div>
-    )
-}
+  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"
+        />
+        <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>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/Select.tsx b/weatherfit_refactoring/src/Components/Molecules/Select.tsx
@@ -3,7 +3,7 @@
 
 import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
 import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useStore } from '../../Store/Store'
 
 interface Props {
@@ -13,11 +13,22 @@ interface Props {
   onSelect: (subCategory: string[]) => void
 }
 
-export default function Select({ category, subCategories, onSelect }: Props) {
+export default function Select({
+  category,
+  subCategories,
+  initialSelectedSubCategories,
+  onSelect,
+}: Props) {
   const { selectedSubCategories, setSelectedSubCategories } = useStore()
   const [dropDown, setDropDown] = useState(false) // 로컬 상태 사용
   const [imageFlipped, setImageFlipped] = useState(false) // 로컬 상태 사용
 
+  useEffect(() => {
+    if (initialSelectedSubCategories) {
+      setSelectedSubCategories(category, initialSelectedSubCategories)
+    }
+  }, [category, initialSelectedSubCategories, setSelectedSubCategories])
+
   const toggleDropDown = () => {
     setDropDown(!dropDown)
     setImageFlipped(!imageFlipped)

diff --git a/weatherfit_refactoring/src/Components/Molecules/TextAreaMolecule.tsx b/weatherfit_refactoring/src/Components/Molecules/TextAreaMolecule.tsx
@@ -1,17 +1,24 @@
+'use client'
+
 import { useEffect, useRef } from 'react'
 import TextArea from '../Atoms/TextArea'
 import { useStore } from '../../Store/Store'
 import { extractHashtags } from '@/utils/function/utilFunction'
 
-export default function TextAreaMolecule() {
+export default function TextAreaMolecule({ data }: { data?: FEEDDATA_detail }) {
   const { content, setContent, setHashTags } = useStore()
   const textAreaRef = useRef<HTMLTextAreaElement>(null)
 
+  // useEffect(() => {
+  //   setContent(content)
+  // }, [content])
+
   useEffect(() => {
-    setContent(content)
-  }, [content])
+    if (data && data.content) {
+      setContent(data.content)
+    }
+  }, [data, setContent])
 
-  // 현재 textarea에 갓 있으면,
   const handleChange = () => {
     if (textAreaRef.current) {
       const newContent = textAreaRef.current.value || ''

diff --git a/weatherfit_refactoring/src/Components/Molecules/UploadWeather.tsx b/weatherfit_refactoring/src/Components/Molecules/UploadWeather.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { WeatherIcon } from '@/Store/WeatherIcon'
 import Image from 'next/image'
 

diff --git a/weatherfit_refactoring/src/Components/Organisms/EditHeader.tsx b/weatherfit_refactoring/src/Components/Organisms/EditHeader.tsx
@@ -4,7 +4,7 @@ import { ButtonStyle } from '../Atoms/Button/ButtonStore'
 import Header from '../Molecules/Header'
 import { useStore } from '../../Store/Store'
 
-export default function UploadHeader() {
+export default function EditHeader(boardId: BOARDID) {
   const {
     content,
     hashTags,
@@ -29,21 +29,24 @@ export default function UploadHeader() {
         formData.append('images', image)
       })
 
-      const response = await fetch(`https://www.jerneithe.site/board/edit/1`, {
-        method: 'PATCH',
-        body: formData,
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          // Authorization: 'Bearer ' + logintoken,
-          Authorization:
-            'Bearer eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDU2NjMwNDMsImV4cCI6MTcwNTY3Mzg0Mywic3ViIjoi7YWM7Iqk7YSwNTUifQ.3I1pZDJYZO2a7lOypu6DegBZ5DuzKYQttbP49U9g1Oo',
+      const response = await fetch(
+        `https://www.jerneithe.site/board/edit/${boardId}`,
+        {
+          method: 'PATCH',
+          body: formData,
+          headers: {
+            'Content-Type': 'multipart/form-data',
+            // Authorization: 'Bearer ' + logintoken,
+            Authorization:
+              'Bearer eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDU2NjMwNDMsImV4cCI6MTcwNTY3Mzg0Mywic3ViIjoi7YWM7Iqk7YSwNTUifQ.3I1pZDJYZO2a7lOypu6DegBZ5DuzKYQttbP49U9g1Oo',
+          },
         },
-      })
+      )
 
       console.log(response)
       console.log('수정 버튼 클릭')
-      console.log('content: ', content) //ok
-      console.log('hashTag: ', hashTags) //ok
+      console.log('content: ', content)
+      console.log('hashTag: ', hashTags)
       const images = formData.getAll('images')
       console.log('images: ', images)
       console.log('selected categories', subCategoriesOnly)

diff --git a/weatherfit_refactoring/src/Components/Organisms/EditOrganism.tsx b/weatherfit_refactoring/src/Components/Organisms/EditOrganism.tsx
@@ -0,0 +1,37 @@
+import DetailContent from '@/Components/Molecules/DetailContent'
+import DetailImage from '@/Components/Molecules/DetailImge'
+import DetailCategory from '../Molecules/DetailCategory'
+import LikeAndComment from '../Molecules/LikeAndComment'
+import DetailProfile from '../Molecules/DetailProfile'
+import DetailEtc from '../Molecules/DetailEtc'
+import NotFound from '@/app/not-found'
+import EditWeather from '../Molecules/EditWeather'
+import TextAreaMolecule from '../Molecules/TextAreaMolecule'
+import EditHeader from './EditHeader'
+import ImageUpload from './ImageUpload'
+import SelectCategory from './SelectCategory'
+
+export default async function EditOrganism({ boardId }: BOARDID) {
+  const response = await fetch(
+    `https://www.jerneithe.site/board/detail/${boardId}`,
+    {
+      method: 'GET',
+    },
+  )
+  const data: FEEDDATA_detail = await response.json()
+
+  return (
+    <div className="h-screen">
+      <EditHeader boardId={boardId} />
+      <div className="mx-5 h-full">
+        <div className="flex-col items-center justify-center mb-7">
+          <EditWeather data={data} />
+          <ImageUpload data={data} />
+        </div>
+        <TextAreaMolecule data={data} />
+        <hr />
+        <SelectCategory data={data} />
+      </div>
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx b/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx
@@ -1,10 +1,20 @@
+'use client'
+
 import InputStore, { InputStyle } from '../Atoms/Input/InputStore'
-import { ChangeEvent, useCallback, useState } from 'react'
+import { ChangeEvent, useCallback, useEffect, useState } from 'react'
 import { useStore } from '../../Store/Store'
 import ArrayImage from '../Molecules/ArrayImage'
 
-export default function ImageUpload() {
+export default function ImageUpload({ data }: { data?: FEEDDATA_detail }) {
   const { selectedImages, setSelectedImages, setDeletedImages } = useStore()
+  const [existingImages, setExistingImages] = useState<IMAGE[]>([])
+  const initialImages = data?.images
+
+  useEffect(() => {
+    if (data && initialImages) {
+      setExistingImages(initialImages)
+    }
+  }, [initialImages])
 
   const handleImagesSelected = useCallback((files: File[] | null) => {
     setSelectedImages(files ? Array.from(files) : [])
@@ -35,36 +45,36 @@ export default function ImageUpload() {
       setSelectedImages(newImages)
       handleImagesSelected(newImages)
     }
-    // else if (existingImages) {
-    //   if (id != undefined) {
-    //     setDeletedImages(id) // 상위 컴포넌트에 삭제된 이미지의 URL 전달
-    //   }
-    //   const newImages = [...existingImages]
-    //   newImages.splice(index, 1)
-    //   setExistingImages(newImages)
-    //   onExistingImagesSelected?.(newImages)
-    // }
+  }
+
+  const removeExistingImage = (index: number, id: number) => {
+    if (existingImages) {
+      setDeletedImages(id)
+      const newImages = [...existingImages]
+      newImages.splice(index, 1)
+      setExistingImages(newImages)
+    }
   }
 
   return (
     <div>
       <div className="flex items-center w-full overflow-x-auto overflow-y-hidden whitespace-nowrap">
-        {/* {existingImages &&
+        {existingImages &&
           Array.from(existingImages).map((image, index) => (
             <ArrayImage
               key={index}
               index={index}
               imageUrl={image.imageUrl}
-              removeImage={removeImage}
+              removeImage={() => removeExistingImage(index, image.imageId)}
             />
-          ))} */}
+          ))}
         {selectedImages &&
           Array.from(selectedImages).map((image, index) => (
             <ArrayImage
               key={index}
               index={index}
               imageUrl={URL.createObjectURL(image)}
-              removeImage={removeImage}
+              removeImage={() => removeImage(index)}
             />
           ))}
         <InputStore

diff --git a/weatherfit_refactoring/src/Components/Organisms/MainOrganism.tsx b/weatherfit_refactoring/src/Components/Organisms/MainOrganism.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { WeatherTempMax } from '@/Store/WeatherMaxTemp'
+import { WeatherTempMin } from '@/Store/WeatherMinTemp'
+import Best3Codi from '../Molecules/Best3Codi'
+
+export default function MainOrganism() {
+  const { temperatureMax } = WeatherTempMax()
+  const { temperatureMin } = WeatherTempMin()
+
+  const [data, setData] = useState<FEEDDATA_detail | undefined>(undefined)
+
+  useEffect(() => {
+    const getBestCodi = async () => {
+      try {
+        const response = await fetch(
+          `https://www.jerneithe.site/board/tops?temp_min=${temperatureMax}&temp_max=${temperatureMin}`,
+          {
+            method: 'GET',
+          },
+        )
+
+        const data = await response.json()
+        setData(data)
+      } catch (error) {
+        console.error(error)
+      }
+    }
+    getBestCodi()
+  }, [temperatureMax, temperatureMin])
+
+  return (
+    <>
+      <Best3Codi data={data} />
+    </>
+  )
+}