From 9d3e729b3aa441fb7ad67c077e8aa56505e616f5 Mon Sep 17 00:00:00 2001 From: hyeiis Date: Tue, 13 Feb 2024 12:29:27 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20#3=20#14=20#22=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B4=80=EB=A0=A8=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=EB=A9=94=EC=9D=B8=20=EB=B2=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BD=94=EB=94=94=203=20=EC=BD=94=EB=93=9C=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- weatherfit_refactoring/next.config.js | 3 - .../src/Components/Molecules/Best3Codi.tsx | 28 ++++++++++ .../src/Components/Molecules/DetailImge.tsx | 1 + .../src/Components/Molecules/EditWeather.tsx | 18 ++++++ .../src/Components/Molecules/FeedSearch.tsx | 55 +++++++++---------- .../src/Components/Molecules/Select.tsx | 15 ++++- .../Components/Molecules/TextAreaMolecule.tsx | 15 +++-- .../Components/Molecules/UploadWeather.tsx | 2 + .../src/Components/Organisms/EditHeader.tsx | 27 +++++---- .../src/Components/Organisms/EditOrganism.tsx | 37 +++++++++++++ .../src/Components/Organisms/ImageUpload.tsx | 40 +++++++++----- .../src/Components/Organisms/MainOrganism.tsx | 38 +++++++++++++ .../Components/Organisms/SelectCategory.tsx | 22 +++++++- weatherfit_refactoring/src/Store/Store.ts | 13 ++--- .../src/app/detail/[id]/edit/page.tsx | 19 ++----- .../src/app/detail/[id]/page.tsx | 1 - weatherfit_refactoring/src/app/page.tsx | 2 + 17 files changed, 244 insertions(+), 92 deletions(-) create mode 100644 weatherfit_refactoring/src/Components/Molecules/Best3Codi.tsx create mode 100644 weatherfit_refactoring/src/Components/Molecules/EditWeather.tsx create mode 100644 weatherfit_refactoring/src/Components/Organisms/EditOrganism.tsx create mode 100644 weatherfit_refactoring/src/Components/Organisms/MainOrganism.tsx diff --git a/weatherfit_refactoring/next.config.js b/weatherfit_refactoring/next.config.js index 1add844..a1648b6 100644 --- 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 new file mode 100644 index 0000000..145c44d --- /dev/null +++ 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) => ( + + + {`Image + + + // 유저 정보 넣어야 함 + ))} + + ) +} diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx index 81d7b78..5170ab2 100644 --- 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 new file mode 100644 index 0000000..2ed0801 --- /dev/null +++ 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 ( +
+

업로드 당시 날씨

+ 날씨 +
+ ) +} diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedSearch.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedSearch.tsx index ba9f83d..197e88b 100644 --- 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( -
-
- - -
- - 취소 - -
- ) -} \ No newline at end of file + return ( +
+
+ + +
+ + 취소 + +
+ ) +} diff --git a/weatherfit_refactoring/src/Components/Molecules/Select.tsx b/weatherfit_refactoring/src/Components/Molecules/Select.tsx index 5255c62..4a806d6 100644 --- 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 index 76b4493..a971809 100644 --- 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(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 index 32c19a2..908fd17 100644 --- 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 index e0fd01e..807a4ed 100644 --- 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 new file mode 100644 index 0000000..ffc6734 --- /dev/null +++ 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 ( +
+ +
+
+ + +
+ +
+ +
+
+ ) +} diff --git a/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx b/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx index 35d9724..7d760e5 100644 --- 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([]) + 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 (
- {/* {existingImages && + {existingImages && Array.from(existingImages).map((image, index) => ( removeExistingImage(index, image.imageId)} /> - ))} */} + ))} {selectedImages && Array.from(selectedImages).map((image, index) => ( removeImage(index)} /> ))} (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 ( + <> + + + ) +} diff --git a/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx b/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx index 947a68b..f4206c9 100644 --- a/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx +++ b/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx @@ -1,10 +1,16 @@ +'use client' + import Select from '../Molecules/Select' import { categories } from '@/Components/data/CategoryList' -import { useCallback } from 'react' +import { useCallback, useEffect } from 'react' import { useStore } from '../../Store/Store' -export default function SelectCategory() { - const { initialSubCategories, setSelectedSubCategories } = useStore() +export default function SelectCategory({ data }: { data?: FEEDDATA_detail }) { + const { + initialSubCategories, + setInitialSubCategories, + setSelectedSubCategories, + } = useStore() const handleCategorySelect = useCallback( (category: string, subCategories: string[]) => { @@ -13,6 +19,16 @@ export default function SelectCategory() { [setSelectedSubCategories], ) + useEffect(() => { + if (data && data.category) { + setInitialSubCategories(data.category.map(item => [item])) + data.category.forEach((category, index) => { + setSelectedSubCategories(category, initialSubCategories[index]) + }) + } + console.log('선택된 값: ', initialSubCategories) + }, [data, setInitialSubCategories, setSelectedSubCategories]) + return (
{Object.entries(categories).map(([category, subCategories], index) => ( diff --git a/weatherfit_refactoring/src/Store/Store.ts b/weatherfit_refactoring/src/Store/Store.ts index be58921..d4c2823 100644 --- a/weatherfit_refactoring/src/Store/Store.ts +++ b/weatherfit_refactoring/src/Store/Store.ts @@ -11,11 +11,10 @@ interface State { selectedSubCategories: { [category: string]: string[] } setSelectedSubCategories: (category: string, subCategories: string[]) => void initialSubCategories: string[][] - setInitialSubCategories: () => void + // initialSubCategories: string[] + setInitialSubCategories: (initialSubCategories: string[][]) => void deletedImages: number[] setDeletedImages: (imageId: number) => void - // existingImages: Image[] - // setExistingImages: (images: Image[]) => void } export const useStore = create(set => ({ @@ -37,10 +36,11 @@ export const useStore = create(set => ({ }, })), initialSubCategories: [], - setInitialSubCategories: () => + setInitialSubCategories: (initialSubCategories: string[][]) => set(state => ({ ...state, - initialSubCategories: Array(Object.entries(categories).length).fill([]), + // initialSubCategories: Array(Object.entries(categories).length).fill([]), + initialSubCategories, })), deletedImages: [], setDeletedImages(imageId: number) { @@ -48,7 +48,4 @@ export const useStore = create(set => ({ deletedImages: [...state.deletedImages, imageId], })) }, - // existingImages: [], - // setExistingImages: (existingImages: Image[]) => - // set(state => ({ ...state, existingImages })), })) diff --git a/weatherfit_refactoring/src/app/detail/[id]/edit/page.tsx b/weatherfit_refactoring/src/app/detail/[id]/edit/page.tsx index 7f0135c..45fa452 100644 --- a/weatherfit_refactoring/src/app/detail/[id]/edit/page.tsx +++ b/weatherfit_refactoring/src/app/detail/[id]/edit/page.tsx @@ -1,20 +1,11 @@ -import EditHeader from '@/Components/Organisms/EditHeader' +import EditOrganism from '@/Components/Organisms/EditOrganism' + +export default function Edit({ params }: { params: { id: string } }) { + const { id: boardId } = params -export default function Edit() { return (
- {/* 헤더 들어가야 함*/} - - {/* 디자인에 있는 날씨 바 없어도 될 듯..?*/} -
-
- {/* */} - {/* */} -
- {/* */} -
- {/* */} -
+
) } diff --git a/weatherfit_refactoring/src/app/detail/[id]/page.tsx b/weatherfit_refactoring/src/app/detail/[id]/page.tsx index dd1063a..7aadf0c 100644 --- a/weatherfit_refactoring/src/app/detail/[id]/page.tsx +++ b/weatherfit_refactoring/src/app/detail/[id]/page.tsx @@ -1,7 +1,6 @@ import Header from '@/Components/Molecules/Header' import WeatherNavbar from '@/Components/Molecules/WeatherNavbar' import DetailOrganism from '@/Components/Organisms/DetailOrganism' -import NotFound from '@/app/not-found' export default function Detail({ params }: { params: { id: string } }) { const { id: boardId } = params diff --git a/weatherfit_refactoring/src/app/page.tsx b/weatherfit_refactoring/src/app/page.tsx index 2694d61..7646147 100644 --- a/weatherfit_refactoring/src/app/page.tsx +++ b/weatherfit_refactoring/src/app/page.tsx @@ -2,6 +2,7 @@ import IconStore, { IconStyle } from '../Components/Atoms/Icon/IconStore' import InputStore, { InputStyle } from '@/Components/Atoms/Input/InputStore' import ButtonStore, { ButtonStyle } from '@/Components/Atoms/Button/ButtonStore' import ImageUpload from '@/Components/Organisms/ImageUpload' +import MainOrganism from '@/Components/Organisms/MainOrganism' export default function Home() { return ( @@ -45,6 +46,7 @@ export default function Home() { style="font-neurimboGothic text-[32px]" btnText="회원가입" /> + ) }