From 5174e00648ebda49047e357a58a39df414cbbbfc Mon Sep 17 00:00:00 2001 From: chaem03 Date: Thu, 14 Nov 2024 14:12:17 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[Chore]-=20navigateBar=20path2=20=EC=A3=BC?= =?UTF-8?q?=EC=86=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/navigateBar/NavigateBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/navigateBar/NavigateBar.jsx b/src/components/common/navigateBar/NavigateBar.jsx index 3ab8cf1..5b63ebb 100644 --- a/src/components/common/navigateBar/NavigateBar.jsx +++ b/src/components/common/navigateBar/NavigateBar.jsx @@ -14,7 +14,7 @@ export const NavigateBar = () => { path = `/nugu/${Cookies.get("uuid")}`; break; case 2: - path = `/intro/${Cookies.get("uuid")}`; + path = `/nuguIntro/${Cookies.get("uuid")}`; break; case 3: path = isTokenAvailable ? "/test" : "/challenge"; From 9400e1b09297d041118a67adfe9e90340fd3bcbb Mon Sep 17 00:00:00 2001 From: chaem03 Date: Thu, 14 Nov 2024 20:11:05 +0900 Subject: [PATCH 2/4] =?UTF-8?q?[Feature]-=20=EB=88=84=EA=B5=AC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20=EB=B0=8F=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/nuguPatch.js | 28 ++++++++ src/pages/nugu/Nugu.jsx | 8 ++- src/pages/nuguIntro/WriteIntro.jsx | 81 ++++++++++++---------- src/pages/nuguPatch/NuguPatch.jsx | 70 +++++++++++++++++++ src/pages/nuguPatch/_hooks/useNuguPatch.js | 27 ++++++++ src/pages/nuguPatch/_hooks/usePatchChip.js | 39 +++++++++++ src/pages/nuguPatch/styled.js | 48 +++++++++++++ src/router.jsx | 5 ++ 8 files changed, 267 insertions(+), 39 deletions(-) create mode 100644 src/apis/nuguPatch.js create mode 100644 src/pages/nuguPatch/NuguPatch.jsx create mode 100644 src/pages/nuguPatch/_hooks/useNuguPatch.js create mode 100644 src/pages/nuguPatch/_hooks/usePatchChip.js create mode 100644 src/pages/nuguPatch/styled.js diff --git a/src/apis/nuguPatch.js b/src/apis/nuguPatch.js new file mode 100644 index 0000000..22ce39d --- /dev/null +++ b/src/apis/nuguPatch.js @@ -0,0 +1,28 @@ +import { instance } from "./instance"; +export const patchNuguInfo = async ({ + nickname, + mbti, + org, + insta_url, + intro, + keyword1, + keyword2, + keyword3, +}) => { + try { + const response = await instance.patch("/user", { + nickname, + mbti, + org, + insta_url, + intro, + keyword1, + keyword2, + keyword3, + }); + console.log("patch된 정보", response); + return response; + } catch (err) { + throw err; + } +}; diff --git a/src/pages/nugu/Nugu.jsx b/src/pages/nugu/Nugu.jsx index c2211e9..0aa62f9 100644 --- a/src/pages/nugu/Nugu.jsx +++ b/src/pages/nugu/Nugu.jsx @@ -3,12 +3,16 @@ import { Layout } from "@components/common/layout/Layout"; import { NavigateBar } from "@components/common/navigateBar/NavigateBar"; import { Chip } from "@components/chip/Chip"; -import { useParams } from "react-router-dom"; +import { useParams, useNavigate } from "react-router-dom"; import { useNuguInfo } from "./_hooks/useNuguInfo"; export const Nugu = () => { const { uuid } = useParams(); const { data, isAdmin } = useNuguInfo(uuid); + const navigate = useNavigate(); + const moveOnPatch = () => { + navigate(`/nugu/patch/${uuid}`); + }; return ( { {isAdmin && ( 누구 공유하기 - 수정하기 + moveOnPatch()}>수정하기 )} diff --git a/src/pages/nuguIntro/WriteIntro.jsx b/src/pages/nuguIntro/WriteIntro.jsx index f24f31f..0146c67 100644 --- a/src/pages/nuguIntro/WriteIntro.jsx +++ b/src/pages/nuguIntro/WriteIntro.jsx @@ -5,6 +5,7 @@ import { Input } from "@components/input/Input"; import { Button } from "@components/common/button/Button"; import { Chip } from "@components/chip/Chip"; import { CHIP_DATA } from "@constants/chip"; +import { Layout } from "@components/common/layout/Layout"; import { useNavigate } from "react-router-dom"; import { useIntroForm } from "./_hooks/useIntroForm"; @@ -34,49 +35,55 @@ export const WriteIntro = () => { keyword3, uuid, }); - + navigate(-1); return response; } catch (err) { throw err; } }; return ( - - - - + + + + + - - 나를 표현하는 키워드 - 나와 어울리는 키워드 3개를 선택해주세요 - - {CHIP_DATA.map((text, index) => ( - handleClickStatus(index)} - $backgroundColor={ - selectedChip[index] ? theme.colors.blue200 : "white" - } - > - {text} - - ))} - - - - - + + 나를 표현하는 키워드 + 나와 어울리는 키워드 3개를 선택해주세요 + + {CHIP_DATA.map((text, index) => ( + handleClickStatus(index)} + $backgroundColor={ + selectedChip[index] ? theme.colors.blue200 : "white" + } + > + {text} + + ))} + + + + + + ); }; diff --git a/src/pages/nuguPatch/NuguPatch.jsx b/src/pages/nuguPatch/NuguPatch.jsx new file mode 100644 index 0000000..49b7724 --- /dev/null +++ b/src/pages/nuguPatch/NuguPatch.jsx @@ -0,0 +1,70 @@ +import * as S from "./styled"; +import { useRecoilState } from "recoil"; +import { Layout } from "@components/common/layout/Layout"; +import { ProgressBar } from "@components/progressBar/ProgreesBar"; +import { SIGN_UP_FIELDS } from "@constants/signUp"; +import { Input } from "@components/input/Input"; +import { theme } from "@styles/theme"; +import { signUpState } from "@atoms/signUpState"; +import { usePatchChip } from "./_hooks/usePatchChip"; +import { Chip } from "@components/chip/Chip"; +import { CHIP_DATA } from "@constants/chip"; +import { Button } from "@components/common/button/Button"; +import { useNuguPatch } from "./_hooks/useNuguPatch"; +export const NuguPatch = () => { + const [updateData, setUpdateData] = useRecoilState(signUpState); + const { handleSubmit } = useNuguPatch(); + const { selectedChip, handleClickStatus, selectedCount } = usePatchChip(); + + const handleInputChange = (name, value) => { + setUpdateData((prevData) => ({ + ...prevData, + [name]: value, + })); + }; + + return ( + + + + + {[...SIGN_UP_FIELDS[1], ...SIGN_UP_FIELDS[2]].map((data, index) => ( + handleInputChange(data.name, e.target.value)} + type={data.type} + /> + ))} + + + 나를 표현하는 키워드 + 나와 어울리는 키워드 3개를 선택해주세요 + + {CHIP_DATA.map((text, index) => ( + handleClickStatus(index)} + $backgroundColor={ + selectedChip[index] ? theme.colors.blue200 : "white" + } + > + {text} + + ))} + + + + + + + ); +}; diff --git a/src/pages/nuguPatch/_hooks/useNuguPatch.js b/src/pages/nuguPatch/_hooks/useNuguPatch.js new file mode 100644 index 0000000..a42df2d --- /dev/null +++ b/src/pages/nuguPatch/_hooks/useNuguPatch.js @@ -0,0 +1,27 @@ +import { patchNuguInfo } from "@apis/nuguPatch"; +import { useRecoilState } from "recoil"; +import { signUpState } from "@atoms/signUpState"; + +export const useNuguPatch = () => { + const [updateData, setUpdateData] = useRecoilState(signUpState); + const handleSubmit = async () => { + console.log(updateData); + try { + const response = await patchNuguInfo({ + nickname: updateData.nickname, + mbti: updateData.mbti, + org: updateData.org, + insta_url: updateData.insta_url, + intro: updateData.intro, + keyword1: updateData.keyword1, + keyword2: updateData.keyword2, + keyword3: updateData.keyword3, + }); + // navigate(-1); + return response; + } catch (err) { + throw err; + } + }; + return { handleSubmit }; +}; diff --git a/src/pages/nuguPatch/_hooks/usePatchChip.js b/src/pages/nuguPatch/_hooks/usePatchChip.js new file mode 100644 index 0000000..8871acc --- /dev/null +++ b/src/pages/nuguPatch/_hooks/usePatchChip.js @@ -0,0 +1,39 @@ +import { useState } from "react"; +import { useRecoilState } from "recoil"; +import { signUpState } from "@atoms/signUpState"; +import { CHIP_DATA } from "@constants/chip"; +export const usePatchChip = () => { + const [updateData, setUpdateData] = useRecoilState(signUpState); + const [selectedChip, setSelectedChip] = useState( + CHIP_DATA.map( + (chip) => + updateData.keyword1 === chip || + updateData.keyword2 === chip || + updateData.keyword3 === chip + ) + ); + const selectedCount = selectedChip.filter((chip) => chip).length; + + const handleClickStatus = (index) => { + const updatedChip = [...selectedChip]; + updatedChip[index] = !updatedChip[index]; + if (updatedChip.filter((chip) => chip).length > 3) { + return; + } + setSelectedChip(updatedChip); + const selectedKeywords = updatedChip + .map((isSelected, idx) => (isSelected ? CHIP_DATA[idx] : null)) + .filter((keyword) => keyword !== null); + + if (selectedKeywords.length === 3) { + setUpdateData((prevData) => ({ + ...prevData, + keyword1: selectedKeywords[0], + keyword2: selectedKeywords[1], + keyword3: selectedKeywords[2], + })); + } + }; + + return { selectedChip, handleClickStatus, selectedCount }; +}; diff --git a/src/pages/nuguPatch/styled.js b/src/pages/nuguPatch/styled.js new file mode 100644 index 0000000..e4249ec --- /dev/null +++ b/src/pages/nuguPatch/styled.js @@ -0,0 +1,48 @@ +import styled from "styled-components"; +export const PatchWrapper = styled.div` + display: flex; + width: 100%; + padding: 2rem 0 4rem 0; + flex-direction: column; + align-items: center; + justify-content: space-between; + gap: 2rem; +`; + +export const TopWrapper = styled.div` + width: 90%; + display: flex; + align-items: center; + flex-direction: column; + gap: 1.875rem; +`; +export const TitleWrapper = styled.div` + width: 304px; + display: flex; + flex-direction: column; +`; + +export const Title = styled.p` + color: ${({ theme }) => theme.colors.blue300}; + ${({ theme }) => theme.fonts.pretendardB4}; +`; + +export const SubTitle = styled.p` + color: ${({ theme }) => theme.colors.blue300}; + ${({ theme }) => theme.fonts.pretendardB1}; +`; + +export const ChipWrapper = styled.div` + width: 100%; + + display: grid; + grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(3, 1fr); + justify-content: center; + place-items: center; + + row-gap: 0.625rem; + column-gap: 1rem; + + margin-top: 1rem; +`; diff --git a/src/router.jsx b/src/router.jsx index 219f67d..850b940 100644 --- a/src/router.jsx +++ b/src/router.jsx @@ -13,6 +13,7 @@ import { NuguTestPage } from "@pages/nuguTest/NuguTest"; import { MakeNuguTest } from "@pages/nuguTest/MakeNuguTest"; import { NuguChallenge } from "@pages/nuguTest/NuguChallenge"; import { ChallengerTest } from "@pages/nuguTest/ChallengerTest"; +import { NuguPatch } from "@pages/nuguPatch/NuguPatch"; const router = createBrowserRouter([ { path: "/", @@ -69,6 +70,10 @@ const router = createBrowserRouter([ path: "/nugu/:uuid", element: , }, + { + path: "/nugu/patch", + element: , + }, ], }, ]); From b7d434cd56ba4488b5f27de8ff5e7791fecbda37 Mon Sep 17 00:00:00 2001 From: chaem03 Date: Thu, 14 Nov 2024 20:15:15 +0900 Subject: [PATCH 3/4] =?UTF-8?q?[Feature]-=EB=88=84=EA=B5=AC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95:=20=EB=B2=84=ED=8A=BC=20=ED=99=9C=EC=84=B1=ED=99=94?= =?UTF-8?q?=20=EC=97=AC=EB=B6=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/nuguPatch/NuguPatch.jsx | 7 +++++-- src/pages/nuguPatch/_hooks/useNuguPatch.js | 16 +++++++++++++++- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/pages/nuguPatch/NuguPatch.jsx b/src/pages/nuguPatch/NuguPatch.jsx index 49b7724..88b5847 100644 --- a/src/pages/nuguPatch/NuguPatch.jsx +++ b/src/pages/nuguPatch/NuguPatch.jsx @@ -13,7 +13,7 @@ import { Button } from "@components/common/button/Button"; import { useNuguPatch } from "./_hooks/useNuguPatch"; export const NuguPatch = () => { const [updateData, setUpdateData] = useRecoilState(signUpState); - const { handleSubmit } = useNuguPatch(); + const { handleSubmit, isFormValid } = useNuguPatch(); const { selectedChip, handleClickStatus, selectedCount } = usePatchChip(); const handleInputChange = (name, value) => { @@ -61,7 +61,10 @@ export const NuguPatch = () => { - diff --git a/src/pages/nuguPatch/_hooks/useNuguPatch.js b/src/pages/nuguPatch/_hooks/useNuguPatch.js index a42df2d..9688cff 100644 --- a/src/pages/nuguPatch/_hooks/useNuguPatch.js +++ b/src/pages/nuguPatch/_hooks/useNuguPatch.js @@ -23,5 +23,19 @@ export const useNuguPatch = () => { throw err; } }; - return { handleSubmit }; + + const isFormValid = () => { + const requiredFields = [ + updateData.nickname, + updateData.mbti, + updateData.org, + updateData.insta_url, + updateData.intro, + updateData.keyword1, + updateData.keyword2, + updateData.keyword3, + ]; + return requiredFields.every((field) => field !== ""); + }; + return { handleSubmit, isFormValid }; }; From 0b91c728569086396a7600a20bb5e7eb5c498e50 Mon Sep 17 00:00:00 2001 From: chaem03 Date: Thu, 14 Nov 2024 20:16:07 +0900 Subject: [PATCH 4/4] =?UTF-8?q?[Fix]-=EB=88=84=EA=B5=AC=20=EC=86=8C?= =?UTF-8?q?=EA=B0=9C=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20=EC=A3=BC=EC=86=8C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/router.jsx b/src/router.jsx index 850b940..0e9a4ab 100644 --- a/src/router.jsx +++ b/src/router.jsx @@ -71,7 +71,7 @@ const router = createBrowserRouter([ element: , }, { - path: "/nugu/patch", + path: "/nugu/patch/:uuid", element: , }, ],