[Feature]/#58- 누구 수정 페이지 UI 구현 및 API 연결

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;
+  }
+};

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";

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 (
     <Layout
       $backgroundColor={"blue200"}
@@ -42,7 +46,7 @@ export const Nugu = () => {
         {isAdmin && (
           <S.AdminWrapper>
             <S.ShareBtn>누구 공유하기</S.ShareBtn>
-            <S.EditBtn>수정하기</S.EditBtn>
+            <S.EditBtn onClick={() => moveOnPatch()}>수정하기</S.EditBtn>
           </S.AdminWrapper>
         )}
       </S.Wrapper>

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 (
-    <S.IntroContainer>
-      <ProgressBar title={"누구 소개하기"} $now={4} $total={4} />
-      <S.InfoWrapper>
-        <Input
-          title={"누구를 소개하자면?"}
-          name="content"
-          placeholder={"누구 소개를 입력해 주세요 (150자 이내)"}
-          value={content}
-          onChange={handleChangeContent}
-        />
+    <Layout
+      $backgroundColor={"gray200"}
+      $margin="3rem 0 0 0"
+      $justifyContent="start"
+    >
+      <S.IntroContainer>
+        <ProgressBar title={"누구 소개하기"} $now={4} $total={4} />
+        <S.InfoWrapper>
+          <Input
+            title={"누구를 소개하자면?"}
+            name="content"
+            placeholder={"누구 소개를 입력해 주세요 (150자 이내)"}
+            value={content}
+            onChange={handleChangeContent}
+          />
 
-        <S.TitleWrapper>
-          <S.Title>나를 표현하는 키워드</S.Title>
-          <S.SubTitle>나와 어울리는 키워드 3개를 선택해주세요</S.SubTitle>
-          <S.ChipWrapper>
-            {CHIP_DATA.map((text, index) => (
-              <Chip
-                key={index}
-                $index={index}
-                onClick={() => handleClickStatus(index)}
-                $backgroundColor={
-                  selectedChip[index] ? theme.colors.blue200 : "white"
-                }
-              >
-                {text}
-              </Chip>
-            ))}
-          </S.ChipWrapper>
-        </S.TitleWrapper>
-      </S.InfoWrapper>
-      <Button
-        disabled={selectedCount !== 3 || content.length === 0}
-        onClick={handleSubmit}
-      >
-        저장하기
-      </Button>
-    </S.IntroContainer>
+          <S.TitleWrapper>
+            <S.Title>나를 표현하는 키워드</S.Title>
+            <S.SubTitle>나와 어울리는 키워드 3개를 선택해주세요</S.SubTitle>
+            <S.ChipWrapper>
+              {CHIP_DATA.map((text, index) => (
+                <Chip
+                  key={index}
+                  $index={index}
+                  onClick={() => handleClickStatus(index)}
+                  $backgroundColor={
+                    selectedChip[index] ? theme.colors.blue200 : "white"
+                  }
+                >
+                  {text}
+                </Chip>
+              ))}
+            </S.ChipWrapper>
+          </S.TitleWrapper>
+        </S.InfoWrapper>
+        <Button
+          disabled={selectedCount !== 3 || content.length === 0}
+          onClick={handleSubmit}
+        >
+          저장하기
+        </Button>
+      </S.IntroContainer>
+    </Layout>
   );
 };

src/pages/nuguPatch/NuguPatch.jsx

@@ -0,0 +1,73 @@
+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, isFormValid } = useNuguPatch();
+  const { selectedChip, handleClickStatus, selectedCount } = usePatchChip();
+
+  const handleInputChange = (name, value) => {
+    setUpdateData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  return (
+    <Layout
+      $backgroundColor={"gray200"}
+      $margin="0 0 0 0"
+      $justifyContent="start"
+    >
+      <S.PatchWrapper>
+        <S.TopWrapper>
+          <ProgressBar title={"누구 수정하기"} $now={4} $total={4} />
+          {[...SIGN_UP_FIELDS[1], ...SIGN_UP_FIELDS[2]].map((data, index) => (
+            <Input
+              title={data.title}
+              key={index}
+              value={updateData[data.name] || ""}
+              onChange={(e) => handleInputChange(data.name, e.target.value)}
+              type={data.type}
+            />
+          ))}
+
+          <S.TitleWrapper>
+            <S.Title>나를 표현하는 키워드</S.Title>
+            <S.SubTitle>나와 어울리는 키워드 3개를 선택해주세요</S.SubTitle>
+            <S.ChipWrapper>
+              {CHIP_DATA.map((text, index) => (
+                <Chip
+                  key={index}
+                  $index={index}
+                  onClick={() => handleClickStatus(index)}
+                  $backgroundColor={
+                    selectedChip[index] ? theme.colors.blue200 : "white"
+                  }
+                >
+                  {text}
+                </Chip>
+              ))}
+            </S.ChipWrapper>
+          </S.TitleWrapper>
+        </S.TopWrapper>
+        <Button
+          disabled={selectedCount !== 3 || !isFormValid()}
+          onClick={handleSubmit}
+        >
+          저장하기
+        </Button>
+      </S.PatchWrapper>
+    </Layout>
+  );
+};

src/pages/nuguPatch/_hooks/useNuguPatch.js

@@ -0,0 +1,41 @@
+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;
+    }
+  };
+
+  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 };
+};

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 };
+};

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;
+`;

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: <Nugu />,
       },
+      {
+        path: "/nugu/patch/:uuid",
+        element: <NuguPatch />,
+      },
     ],
   },
 ]);