From a6f1b981ad4898a040635f74058825e9f6173bb5 Mon Sep 17 00:00:00 2001 From: hyeiis Date: Thu, 15 Feb 2024 22:13:42 +0900 Subject: [PATCH] =?UTF-8?q?[Fix]=20#28=20=EC=88=98=EC=A0=95=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{Best3Codi.tsx => BestThreeCodi.tsx} | 2 +- .../Components/Molecules/DetailCategory.tsx | 8 +- .../Components/Molecules/DetailContent.tsx | 16 ++- .../src/Components/Molecules/DetailImge.tsx | 16 ++- .../Components/Molecules/DetailProfile.tsx | 6 +- .../src/Components/Molecules/EditWeather.tsx | 8 +- .../src/Components/Molecules/FeedSearch.tsx | 113 +++++++++--------- .../src/Components/Molecules/Select.tsx | 8 +- .../Components/Molecules/TextAreaMolecule.tsx | 22 ++-- .../Components/Organisms/DetailOrganism.tsx | 29 +++-- .../src/Components/Organisms/EditHeader.tsx | 71 ++++++----- .../src/Components/Organisms/EditOrganism.tsx | 18 ++- .../src/Components/Organisms/ImageUpload.tsx | 22 +++- .../src/Components/Organisms/MainOrganism.tsx | 6 +- .../Components/Organisms/SelectCategory.tsx | 28 ++--- .../src/Components/Organisms/UploadHeader.tsx | 13 +- .../src/Components/data/CategoryList.ts | 8 +- weatherfit_refactoring/src/Store/Store.ts | 22 ++-- 18 files changed, 220 insertions(+), 196 deletions(-) rename weatherfit_refactoring/src/Components/Molecules/{Best3Codi.tsx => BestThreeCodi.tsx} (89%) diff --git a/weatherfit_refactoring/src/Components/Molecules/Best3Codi.tsx b/weatherfit_refactoring/src/Components/Molecules/BestThreeCodi.tsx similarity index 89% rename from weatherfit_refactoring/src/Components/Molecules/Best3Codi.tsx rename to weatherfit_refactoring/src/Components/Molecules/BestThreeCodi.tsx index 145c44d..4c62309 100644 --- a/weatherfit_refactoring/src/Components/Molecules/Best3Codi.tsx +++ b/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 } diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx index b3e43c4..175cfe2 100644 --- a/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx +++ b/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 = data.category.reduce( + const categoryGroups: Record = category.reduce( (groups: Record, 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 index a21e386..8df3858 100644 --- a/weatherfit_refactoring/src/Components/Molecules/DetailContent.tsx +++ b/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( {/* 추후에 더보기 접기 버튼 넣어야 할 듯 */} - {data.nickName} - {extractAndStyleHashtags(data.content)} + {nickName} + {extractAndStyleHashtags(content)} ) } diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx index 5170ab2..ec59632 100644 --- a/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx +++ b/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx @@ -5,18 +5,22 @@ 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 (
- {data.images.length > 1 && ( + {images.length > 1 && (
-

{data.nickName}

+

{nickName}

@user_one

{/*

여기 아이디 들어가면 되려나

*/}
diff --git a/weatherfit_refactoring/src/Components/Molecules/EditWeather.tsx b/weatherfit_refactoring/src/Components/Molecules/EditWeather.tsx index 2ed0801..18dbc1a 100644 --- a/weatherfit_refactoring/src/Components/Molecules/EditWeather.tsx +++ b/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 (

업로드 당시 날씨

날씨 {} - const [hashValue, setHval] = useState(""); - const searchCancle = () => { - setHval(""); - } - - const searchHashTag:ChangeEventHandler = (e:React.ChangeEvent) => { - console.log("검색할 내용", e.target.value); - setHval(e.target.value); - } - - useEffect(()=>{ - - console.log("검색할려고 하는 태그", hashValue); - hashToArray(); + const [hashValue, setHval] = useState('') - },[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 { + setHval('') + } + + const searchHashTag: ChangeEventHandler = ( + e: React.ChangeEvent, + ) => { + 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( -
-
- - -
- - 취소 - -
- ) + console.log('검색 url', url) + } + + return ( +
+
+ + +
+ + 취소 + +
+ ) } diff --git a/weatherfit_refactoring/src/Components/Molecules/Select.tsx b/weatherfit_refactoring/src/Components/Molecules/Select.tsx index 4a806d6..f1c1c5e 100644 --- a/weatherfit_refactoring/src/Components/Molecules/Select.tsx +++ b/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) } diff --git a/weatherfit_refactoring/src/Components/Molecules/TextAreaMolecule.tsx b/weatherfit_refactoring/src/Components/Molecules/TextAreaMolecule.tsx index a971809..d5e1a02 100644 --- a/weatherfit_refactoring/src/Components/Molecules/TextAreaMolecule.tsx +++ b/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(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) } } diff --git a/weatherfit_refactoring/src/Components/Organisms/DetailOrganism.tsx b/weatherfit_refactoring/src/Components/Organisms/DetailOrganism.tsx index b7d61a7..09e063d 100644 --- a/weatherfit_refactoring/src/Components/Organisms/DetailOrganism.tsx +++ b/weatherfit_refactoring/src/Components/Organisms/DetailOrganism.tsx @@ -7,15 +7,15 @@ 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', @@ -23,28 +23,33 @@ export default async function DetailOrganism({ boardId }: BOARDID) { '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 (
- +
- + - +
- +
) } diff --git a/weatherfit_refactoring/src/Components/Organisms/EditHeader.tsx b/weatherfit_refactoring/src/Components/Organisms/EditHeader.tsx index 807a4ed..2f7fdbc 100644 --- a/weatherfit_refactoring/src/Components/Organisms/EditHeader.tsx +++ b/weatherfit_refactoring/src/Components/Organisms/EditHeader.tsx @@ -7,49 +7,54 @@ import { useStore } from '../../Store/Store' export default function EditHeader(boardId: BOARDID) { const { content, - hashTags, + hashTag, selectedImages, selectedSubCategories, deletedImages, } = useStore() - const subCategoriesOnly = Object.values(selectedSubCategories).flat() // 하위 카테고리들만 저장 + const category = Object.values(selectedSubCategories).flat() // 하위 카테고리들만 저장 const handleOnClick = async () => { try { - const formData = new FormData() - const boardData = { - hashTag: hashTags, - category: subCategoriesOnly, - content, - deletedImages, - } + console.log('content: ', content) + console.log('hashTag: ', hashTag) + console.log('images: ', selectedImages) + console.log('category: ', category) + console.log('deletedImages_id', deletedImages) + // const formData = new FormData() + // const boardData = { + // hashTag, + // category, + // content, + // deletedImages, + // } - formData.append('board', JSON.stringify(boardData)) - selectedImages.forEach(image => { - formData.append('images', image) - }) + // formData.append('board', JSON.stringify(boardData)) + // selectedImages.forEach(image => { + // formData.append('images', image) + // }) - 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', - }, - }, - ) + // 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) - console.log('hashTag: ', hashTags) - const images = formData.getAll('images') - console.log('images: ', images) - console.log('selected categories', subCategoriesOnly) + // console.log(response) + // console.log('수정 버튼 클릭') + // console.log('content: ', content) + // console.log('hashTag: ', hashTag) + // const images = formData.getAll('images') + // console.log('images: ', images) + // console.log('category', category) } catch (error) { console.error(error) } diff --git a/weatherfit_refactoring/src/Components/Organisms/EditOrganism.tsx b/weatherfit_refactoring/src/Components/Organisms/EditOrganism.tsx index ffc6734..9b143b0 100644 --- a/weatherfit_refactoring/src/Components/Organisms/EditOrganism.tsx +++ b/weatherfit_refactoring/src/Components/Organisms/EditOrganism.tsx @@ -1,10 +1,3 @@ -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' @@ -20,17 +13,20 @@ export default async function EditOrganism({ boardId }: BOARDID) { ) const data: FEEDDATA_detail = await response.json() + // data 전체 넘겨주지 말고 필요한 것만 넘겨주기 + return (
- - + +
- +
- + + {/* */}
) diff --git a/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx b/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx index 7d760e5..78c0c22 100644 --- a/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx +++ b/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx @@ -5,13 +5,23 @@ import { ChangeEvent, useCallback, useEffect, useState } from 'react' import { useStore } from '../../Store/Store' import ArrayImage from '../Molecules/ArrayImage' -export default function ImageUpload({ data }: { data?: FEEDDATA_detail }) { - const { selectedImages, setSelectedImages, setDeletedImages } = useStore() - const [existingImages, setExistingImages] = useState([]) - const initialImages = data?.images +export default function ImageUpload({ + images, +}: { + images?: FEEDDATA_detail['images'] +}) { + const { + selectedImages, + setSelectedImages, + existingImages, + setExistingImages, + setDeletedImages, + } = useStore() + // const [existingImages, setExistingImages] = useState([]) + const initialImages = images useEffect(() => { - if (data && initialImages) { + if (initialImages) { setExistingImages(initialImages) } }, [initialImages]) @@ -38,7 +48,7 @@ export default function ImageUpload({ data }: { data?: FEEDDATA_detail }) { } } - const removeImage = (index: number, id?: number) => { + const removeImage = (index: number) => { if (selectedImages) { const newImages = [...selectedImages] newImages.splice(index, 1) diff --git a/weatherfit_refactoring/src/Components/Organisms/MainOrganism.tsx b/weatherfit_refactoring/src/Components/Organisms/MainOrganism.tsx index c3c2a0a..81ea0fa 100644 --- a/weatherfit_refactoring/src/Components/Organisms/MainOrganism.tsx +++ b/weatherfit_refactoring/src/Components/Organisms/MainOrganism.tsx @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react' import { WeatherTempMax } from '@/Store/WeatherMaxTemp' import { WeatherTempMin } from '@/Store/WeatherMinTemp' -import Best3Codi from '../Molecules/Best3Codi' +import BestThreeCodi from '../Molecules/BestThreeCodi' export default function MainOrganism() { const { temperatureMax } = WeatherTempMax() @@ -30,9 +30,11 @@ export default function MainOrganism() { getBestCodi() }, [temperatureMax, temperatureMin]) + console.log(temperatureMax, temperatureMin) + return ( <> - + ) } diff --git a/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx b/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx index f4206c9..52e49e3 100644 --- a/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx +++ b/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx @@ -2,15 +2,15 @@ import Select from '../Molecules/Select' import { categories } from '@/Components/data/CategoryList' -import { useCallback, useEffect } from 'react' +import { useCallback } from 'react' import { useStore } from '../../Store/Store' -export default function SelectCategory({ data }: { data?: FEEDDATA_detail }) { - const { - initialSubCategories, - setInitialSubCategories, - setSelectedSubCategories, - } = useStore() +export default function SelectCategory({ + initCategory, +}: { + initCategory?: FEEDDATA_detail['category'] +}) { + const { setSelectedSubCategories } = useStore() const handleCategorySelect = useCallback( (category: string, subCategories: string[]) => { @@ -19,24 +19,14 @@ export default function SelectCategory({ data }: { data?: FEEDDATA_detail }) { [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) => ( + {Object.entries(categories).map(([category, subCategories]) => (