Merge pull request #138 from Onion-City/dev

Feat: 멤버 프로필 초기 설정 custom hook (useMemberProfileMutation)
Onion-City · Aug 15, 2024 · 901fd8a · 901fd8a
2 parents b115d79 + 74903b0
commit 901fd8a
Show file tree

Hide file tree

Showing 11 changed files with 344 additions and 222 deletions.
diff --git a/src/app/user/onboarding/page.tsx b/src/app/user/onboarding/page.tsx
@@ -1,8 +1,13 @@
 import SetupUserOnboarding from "@/features/user/onboarding/SetupUserOnboarding";
+import { Suspense } from "react";
 
 const UserOnboarding = () => {
-    // 모임 가입 온보딩 페이지
-    return <SetupUserOnboarding />;
-}
+  // 모임 가입 온보딩 페이지
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <SetupUserOnboarding />
+    </Suspense>
+  );
+};
 
-export default UserOnboarding;
+export default UserOnboarding;
diff --git a/src/components/molecules/headerInfo/HeaderInfo.tsx b/src/components/molecules/headerInfo/HeaderInfo.tsx
@@ -48,7 +48,8 @@ export function HeaderInfo({
   const { data: loadData, isError, error } = useMemberAuthQuery();
   if (isError) {
     console.log(error.response?.status);
-    if (error.response?.status) router.push('/user/onboarding');
+    if (error.response?.status)
+      router.push("/user/onboarding?policy=REAL_NAME");
   }
   if (loadData === undefined) return;
   const clubInfo = saveData.memberId === -1 ? loadData.data : saveData;

diff --git a/src/features/info/club/modify/components/ClubInfoModify.css b/src/features/info/club/modify/components/ClubInfoModify.css
@@ -1,5 +1,5 @@
 .clubInfoModify {
-  padding-bottom: 5.5rem;
+  padding-bottom: 11rem;
 }
 
 .register__content {

diff --git a/src/features/info/club/modify/components/ClubInfoModifyForm.tsx b/src/features/info/club/modify/components/ClubInfoModifyForm.tsx
@@ -80,7 +80,7 @@ const ClubInfoModifyForm = () => {
     const { mutate } = useClubsInfoMutation()
     const submitModifyInfo = (data: ClubModifyFormData) => {
       const imageIsChanged = infoData?.data.clubProfileImage !== data.clubProfileImage;
-      console.log(data);
+      console.log(data, imageIsChanged);
       mutate({
         data: data,
         imageIsChanged: imageIsChanged

diff --git a/src/features/user/onboarding/SetupUserOnboarding.tsx b/src/features/user/onboarding/SetupUserOnboarding.tsx
@@ -1,21 +1,17 @@
 "use client";
 
-import { useState } from "react";
+import { useSearchParams } from "next/navigation";
 import NicknameOnboarding from "./components/NicknameOnboarding";
 import RealnameOnboarding from "./components/RealnameOnboarding";
 
-export default function SetupUserOnboarding(
-    ) {
-    // 유저 모임 가입 온보딩 페이지
-    const [method, setMethod] = useState(2); // 1: nickname, 2: realname
+export default function SetupUserOnboarding() {
+  // 유저 모임 가입 온보딩 페이지
+  const searchParams = useSearchParams();
+  const policy = searchParams.get("policy");
 
-    return (
-        <>
-            {method === 1 ? (
-                <NicknameOnboarding />
-            ) : (
-                <RealnameOnboarding />
-            )}
-        </>
-    );
+  return (
+    <>
+      {policy === "NICK_NAME" ? <NicknameOnboarding /> : <RealnameOnboarding />}
+    </>
+  );
 }
diff --git a/src/features/user/onboarding/components/NicknameOnboarding.tsx b/src/features/user/onboarding/components/NicknameOnboarding.tsx
@@ -1,65 +1,127 @@
+import AddPic from "@/assets/images/AddPic.png";
 import { Button } from "@/components/atoms/button";
-import { FileUpload } from "@/components/atoms/fileUpload";
 import { Text } from "@/components/atoms/text";
 import { InputBox } from "@/components/molecules/inputBox";
 import { Wrapper } from "@/components/organisms/Wrapper";
-import { COLORS } from "@/styles";
-import React from "react";
+import { MEMBERPROFILE_TITLE } from "@/features/member/profileEdit/constants/const";
+import { useMemberProfileMutation } from "@/hook/member/useMemberProfileMutation";
+import Image from "next/image";
+import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 import { ONBOARDING_BTN, ONBOARDING_INPUT_ARR } from "../constants/const";
+
 import "./NicknameOnboarding.css";
 
 interface FormData {
-    nickname: string;
-    introduce: string;
-    emailPublic: boolean;
-    mobilePublic: boolean;
+  memberName: string;
+  memberIntro: string;
+  profileImage: string | File;
+  isEmailPublic: boolean;
+  isPhonePublic: boolean;
 }
 
 const NicknameOnboarding = () => {
-    const methods = useForm<FormData>({
-        mode: 'onChange'
-    });
+  const { control, handleSubmit, setValue } = useForm<FormData>({
+    mode: "onChange",
+    defaultValues: {
+      memberName: "",
+      memberIntro: "",
+      profileImage: "",
+      isEmailPublic: false,
+      isPhonePublic: false,
+    },
+  });
+  const [imageUrl, setImageUrl] = useState<string | undefined>();
+  const handleChangeImage = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    const selectedFile = files[0];
+    const newImageUrl = URL.createObjectURL(selectedFile);
+    setImageUrl(newImageUrl);
+    setValue("profileImage", selectedFile);
+  };
 
-    const { handleSubmit, control } = methods;
+  const postFormData = (propData: FormData) => {
+    const resData = new FormData();
+    resData.append("memberName", propData.memberName);
+    resData.append("memberIntro", propData.memberIntro);
+    resData.append("isEmailPublic", String(propData.isEmailPublic));
+    resData.append("isPhonePublic", String(propData.isPhonePublic));
+    resData.append("profileImage", propData.profileImage);
 
-    const submitOnboarding = (data: FormData) => {
-        console.log(data);
-    }
-    return (
-        <form onSubmit={handleSubmit(submitOnboarding)}>
-            <Wrapper isHeader={true}>
-                <div className="register__content">
-                    <div className="register__content__img">
-                        <Text
-                            color={COLORS.white}
-                            fontSize="1.0625rem"
-                            fontWeight="700"
-                        >프로필 사진</Text>
-                        <FileUpload />
-                    </div>
-                    {ONBOARDING_INPUT_ARR.nickname.map((box, index) => (
-                        <React.Fragment key={index}>
-                            <InputBox 
-                                title={box.title && box.title}
-                                maxCnt={box.maxCnt && box.maxCnt}
-                                type={box.type && box.type}
-                                subtitle={box.subtitle && box.subtitle}
-                                essential={box.essential && box.essential}
-                                name={box.name && box.name}
-                                control={control}
-                            />
-                        </React.Fragment>
-                    ))} 
-                </div>
-                <div className="register__btn">
-                    <Button
-                        type="submit"
-                    >{ONBOARDING_BTN}</Button>
+    return resData;
+  };
+
+  const { mutate } = useMemberProfileMutation();
+  const submitOnboarding = (data: FormData) => {
+    console.log(data);
+    const PostData = postFormData(data);
+    console.log(PostData);
+    mutate(PostData);
+  };
+  return (
+    <form onSubmit={handleSubmit(submitOnboarding)}>
+      <Wrapper isHeader={true}>
+        <div className="register__content">
+          <div className="register__content__img">
+            <Text color="#fff" fontSize="1.0625rem" fontWeight="700">
+              {MEMBERPROFILE_TITLE}
+            </Text>
+            <>
+              <label htmlFor="first-upload-input">
+                <div className="fileUpload__box">
+                  {imageUrl ? (
+                    <Image
+                      src={imageUrl}
+                      alt="pic"
+                      className="fileUpload__box__img default"
+                      placeholder="blur"
+                      blurDataURL="@/assets/images/AddPic.png"
+                      width={115}
+                      height={115}
+                    />
+                  ) : (
+                    <Image
+                      src={AddPic}
+                      alt="pic"
+                      className="fileUpload__box__img"
+                      placeholder="blur"
+                      blurDataURL="@/assets/images/AddPic.png"
+                      width={115}
+                      height={115}
+                    />
+                  )}
                 </div>
-            </Wrapper>
-        </form>
-    )
-}
+              </label>
+              <input
+                id="first-upload-input"
+                type="file"
+                accept="image/*"
+                name="profileImage"
+                onChange={handleChangeImage}
+              />
+            </>
+          </div>
+          {ONBOARDING_INPUT_ARR.nickname.map((box, index) => (
+            <React.Fragment key={index}>
+              <InputBox
+                title={box.title && box.title}
+                maxCnt={box.maxCnt && box.maxCnt}
+                type={box.type && box.type}
+                subtitle={box.subtitle && box.subtitle}
+                essential={box.essential && box.essential}
+                name={box.name && box.name}
+                control={control}
+              />
+            </React.Fragment>
+          ))}
+        </div>
+        <div className="register__btn">
+          <Button type="submit">{ONBOARDING_BTN}</Button>
+        </div>
+      </Wrapper>
+    </form>
+  );
+};
 
-export default NicknameOnboarding;
+export default NicknameOnboarding;