refactor(member): rename user to member

frontend/.storybook/preview.js

@@ -4,7 +4,7 @@ import "../src/api/api";
 import "../src/App.css";
 import { ModalProvider } from "../src/hooks/useModalContext";
 import { RecruitmentContext } from "../src/hooks/useRecruitmentContext";
-import { UserInfoContext } from "../src/hooks/useUserInfoContext";
+import { MemberInfoContext } from "../src/hooks/useMemberInfoContext";
 import { recruitmentDummy, userInfoDummy } from "../src/mock/dummy";
 import { recruitmentFilter } from "../src/provider/RecruitmentProvider";
 import TokenProvider from "../src/provider/TokenProvider";
@@ -32,11 +32,11 @@ export const decorators = [
       }}
     >
       <TokenProvider>
-        <UserInfoContext.Provider value={{ userInfo: userInfoDummy }}>
+        <MemberInfoContext.Provider value={{ userInfo: userInfoDummy }}>
           <ModalProvider>
             <Story />
           </ModalProvider>
-        </UserInfoContext.Provider>
+        </MemberInfoContext.Provider>
       </TokenProvider>
     </RecruitmentContext.Provider>
   ),

frontend/src/App.js

@@ -21,7 +21,7 @@ import Recruits from "./pages/Recruits/Recruits";
 import SignUp from "./pages/SignUp/SignUp";
 import RecruitmentProvider from "./provider/RecruitmentProvider";
 import TokenProvider from "./provider/TokenProvider";
-import UserInfoProvider from "./provider/UserInfoProvider";
+import MemberInfoProvider from "./provider/MemberInfoProvider";
 import { ModalProvider } from "./hooks/useModalContext";
 
 const App = () => {
@@ -51,17 +51,17 @@ const App = () => {
                     <Route
                       path={PATH.MY_PAGE}
                       element={
-                        <UserInfoProvider>
+                        <MemberInfoProvider>
                           <MyPage />
-                        </UserInfoProvider>
+                        </MemberInfoProvider>
                       }
                     />
                     <Route
                       path={PATH.EDIT_MY_PAGE}
                       element={
-                        <UserInfoProvider>
+                        <MemberInfoProvider>
                           <MyPageEdit />
-                        </UserInfoProvider>
+                        </MemberInfoProvider>
                       }
                     />
                   </Route>

frontend/src/api/index.ts

@@ -1,3 +1,3 @@
-export * from "./user";
+export * from "./member";
 export * from "./recruitments";
 export * from "./applicationForms";

frontend/src/api/user.ts → frontend/src/api/member.ts

@@ -2,20 +2,20 @@ import axios from "axios";
 import { headers } from "./api";
 import { formatDate } from "../utils/format/date";
 import { RequestWithToken } from "../../types/utility";
-import { User } from "../../types/domains/user";
+import { Member } from "../../types/domains/member";
 
-type FetchRegisterRequest = Omit<User, "id"> & {
+type FetchRegisterRequest = Omit<Member, "id"> & {
   confirmPassword: string;
   authenticationCode: string;
 };
 
 type FetchRegisterResponseData = string;
 
-type FetchLoginRequest = Pick<User, "email" | "password">;
+type FetchLoginRequest = Pick<Member, "email" | "password">;
 
 type FetchLoginResponseData = string;
 
-type FetchPasswordFindRequest = Pick<User, "name" | "email" | "password" | "birthday">;
+type FetchPasswordFindRequest = Pick<Member, "name" | "email" | "password" | "birthday">;
 
 type FetchPasswordFindResponseData = void;
 
@@ -27,13 +27,13 @@ type FetchPasswordEditRequest = RequestWithToken<{
 
 type FetchPasswordEditResponseData = void;
 
-type FetchUserInfoRequest = RequestWithToken;
+type FetchMemberInfoRequest = RequestWithToken;
 
-type FetchUserInfoResponseData = Omit<User, "password">;
+type FetchMemberInfoResponseData = Omit<Member, "password">;
 
-type FetchUserInfoEditRequest = RequestWithToken<{ phoneNumber: string }>;
+type FetchMemberInfoEditRequest = RequestWithToken<{ phoneNumber: string }>;
 
-type FetchUserInfoEditResponseData = void;
+type FetchMemberInfoEditResponseData = void;
 
 type FetchAuthenticationCodeRequest = string;
 
@@ -56,7 +56,7 @@ export const fetchRegister = ({
   confirmPassword,
   authenticationCode,
 }: FetchRegisterRequest) =>
-  axios.post<FetchRegisterResponseData>("/api/users/register", {
+  axios.post<FetchRegisterResponseData>("/api/members/register", {
     name,
     email,
     phoneNumber,
@@ -68,10 +68,10 @@ export const fetchRegister = ({
   });
 
 export const fetchLogin = ({ email, password }: FetchLoginRequest) =>
-  axios.post<FetchLoginResponseData>("/api/users/login", { email, password });
+  axios.post<FetchLoginResponseData>("/api/members/login", { email, password });
 
 export const fetchPasswordFind = ({ name, email, birthday }: FetchPasswordFindRequest) =>
-  axios.post<FetchPasswordFindResponseData>("/api/users/reset-password", {
+  axios.post<FetchPasswordFindResponseData>("/api/members/reset-password", {
     name,
     email,
     birthday: formatDate(birthday),
@@ -84,28 +84,30 @@ export const fetchPasswordEdit = ({
   confirmPassword,
 }: FetchPasswordEditRequest) =>
   axios.post<FetchPasswordEditResponseData>(
-    "/api/users/edit-password",
+    "/api/members/edit-password",
     { oldPassword, password, confirmPassword },
     headers({ token })
   );
 
-export const fetchUserInfo = ({ token }: FetchUserInfoRequest) =>
-  axios.get<FetchUserInfoResponseData>("/api/users/me", headers({ token }));
+export const fetchMemberInfo = ({ token }: FetchMemberInfoRequest) =>
+  axios.get<FetchMemberInfoResponseData>("/api/members/me", headers({ token }));
 
-export const fetchUserInfoEdit = ({ token, phoneNumber }: FetchUserInfoEditRequest) =>
-  axios.patch<FetchUserInfoEditResponseData>(
-    "/api/users/information",
+export const fetchMemberInfoEdit = ({ token, phoneNumber }: FetchMemberInfoEditRequest) =>
+  axios.patch<FetchMemberInfoEditResponseData>(
+    "/api/members/information",
     { phoneNumber },
     headers({ token })
   );
 
 export const fetchAuthenticationCode = (email: FetchAuthenticationCodeRequest) =>
-  axios.post<FetchAuthenticationCodeResponseData>(`/api/users/authentication-code?email=${email}`);
+  axios.post<FetchAuthenticationCodeResponseData>(
+    `/api/members/authentication-code?email=${email}`
+  );
 
 export const fetchVerifyAuthenticationCode = ({
   email,
   authenticationCode,
 }: FetchVerifyAuthenticationCodeRequest) =>
   axios.post<FetchVerifyAuthenticationCodeResponseData>(
-    `/api/users/authenticate-email?email=${email}&authenticationCode=${authenticationCode}`
+    `/api/members/authenticate-email?email=${email}&authenticationCode=${authenticationCode}`
   );

frontend/src/constants/messages.ts

@@ -23,7 +23,7 @@ export const ERROR_MESSAGE = {
     LOGIN_FAILURE: "아이디(E-mail) 또는 비밀번호를 확인해 주세요.",
     EDIT_FAILURE: "변경에 실패했습니다. 잠시 후 다시 시도해 주세요.",
     TOKEN_EXPIRED: "로그인 정보가 만료되었습니다. 다시 로그인해 주세요.",
-    FETCHING_USER_INFO: "내 정보를 불러오는데 불러올 수 없습니다.",
+    FETCHING_MEMBER_INFO: "내 정보를 불러오는데 불러올 수 없습니다.",
     NOT_AUTHENTICATED: "이메일 인증을 완료해 주세요.",
     ALREADY_EXIST_EMAIL: "이미 가입된 이메일입니다.",
     INVALID_AUTHENTICATION_CODE: "인증 코드가 일치하지 않습니다.",
@@ -41,7 +41,7 @@ export const ERROR_MESSAGE = {
     CANNOT_FIND_FORM_CONTEXT: "FormContext가 존재하지 않습니다.",
     CANNOT_FIND_RECRUITMENT_CONTEXT: "recruitmentContext가 존재하지 않습니다",
     CANNOT_FIND_TOKEN_CONTEXT: "TokenContext가 존재하지 않습니다",
-    CANNOT_FIND_USER_INFO_CONTEXT: "UserInfoContext가 존재하지 않습니다",
+    CANNOT_FIND_MEMBER_INFO_CONTEXT: "MemberInfoContext가 존재하지 않습니다",
     CANNOT_FIND_MODAL_CONTEXT: "ModalContext가 존재하지 않습니다",
   },
 } as const;

frontend/src/hooks/useMemberInfoContext.js

@@ -0,0 +1,14 @@
+import { useContext, createContext } from "react";
+import { ERROR_MESSAGE } from "../constants/messages";
+
+export const MemberInfoContext = createContext();
+
+const useMemberInfoContext = () => {
+  const memberInfoContext = useContext(MemberInfoContext);
+
+  if (!memberInfoContext) throw Error(ERROR_MESSAGE.HOOKS.CANNOT_FIND_MEMBER_INFO_CONTEXT);
+
+  return memberInfoContext;
+};
+
+export default useMemberInfoContext;

frontend/src/mock/dummy.ts

@@ -544,7 +544,7 @@ export const missionsDummy = {
   ],
 };
 
-export const userInfoDummy = {
+export const memberInfoDummy = {
   id: 1,
   name: "썬",
   email: "[email protected]",

frontend/src/pages/MyPage/MyPage.js

@@ -4,13 +4,13 @@ import myPageImage from "../../assets/image/myPage.svg";
 import Button, { BUTTON_VARIANT } from "../../components/@common/Button/Button";
 import Container from "../../components/@common/Container/Container";
 import { PATH } from "../../constants/path";
-import useUserInfoContext from "../../hooks/useUserInfoContext";
+import useMemberInfoContext from "../../hooks/useMemberInfoContext";
 import styles from "./MyPage.module.css";
 
 const MyPage = () => {
   const navigate = useNavigate();
 
-  const { userInfo } = useUserInfoContext();
+  const { memberInfo } = useMemberInfoContext();
 
   const routeToPasswordEdit = () => {
     navigate(PATH.EDIT_PASSWORD);
@@ -21,7 +21,7 @@ const MyPage = () => {
   };
 
   return (
-    <Container title={`${userInfo?.name ?? ""} 님`}>
+    <Container title={`${memberInfo?.name ?? ""} 님`}>
       <div className={styles.box}>
         <div className={styles["illust-box"]}>
           <img src={myPageImage} alt="자기소개서 일러스트" />
@@ -30,15 +30,15 @@ const MyPage = () => {
           <ul>
             <li className={styles.info}>
               <div className={styles["info-title"]}>이메일</div>
-              <div className={styles["info-data"]}>{userInfo?.email || ""}</div>
+              <div className={styles["info-data"]}>{memberInfo?.email || ""}</div>
             </li>
             <li className={styles.info}>
               <div className={styles["info-title"]}>전화번호</div>
-              <div className={styles["info-data"]}>{userInfo?.phoneNumber || ""}</div>
+              <div className={styles["info-data"]}>{memberInfo?.phoneNumber || ""}</div>
             </li>
             <li className={styles.info}>
               <div className={styles["info-title"]}>생년월일</div>
-              <div className={styles["info-data"]}>{userInfo?.birthday || ""}</div>
+              <div className={styles["info-data"]}>{memberInfo?.birthday || ""}</div>
             </li>
           </ul>
 

frontend/src/pages/MyPageEdit/MyPageEdit.js

@@ -11,12 +11,12 @@ import { FORM } from "../../constants/form";
 import { ERROR_MESSAGE, SUCCESS_MESSAGE } from "../../constants/messages";
 import { PATH } from "../../constants/path";
 import useMyPageEditForm, { MY_PAGE_EDIT_FORM_NAME } from "../../hooks/useMyPageEditForm";
-import useUserInfoContext from "../../hooks/useUserInfoContext";
+import useMemberInfoContext from "../../hooks/useMemberInfoContext";
 import styles from "./MyPageEdit.module.css";
 
 const MyPageEdit = () => {
   const navigate = useNavigate();
-  const { userInfo, updateUserInfo } = useUserInfoContext();
+  const { memberInfo, updateMemberInfo } = useMemberInfoContext();
 
   const { form, errorMessage, init, handleChanges, isEmpty, isValid } = useMyPageEditForm();
 
@@ -30,7 +30,7 @@ const MyPageEdit = () => {
   const handleSubmit = async (event) => {
     event.preventDefault();
     try {
-      await updateUserInfo(form);
+      await updateMemberInfo(form);
       alert(SUCCESS_MESSAGE.API.EDIT_MY_PAGE);
       navigate(PATH.MY_PAGE);
     } catch (error) {
@@ -39,17 +39,17 @@ const MyPageEdit = () => {
   };
 
   useEffect(() => {
-    if (userInfo === null) return;
+    if (memberInfo === null) return;
 
     init({
       requiredForm: {
-        [MY_PAGE_EDIT_FORM_NAME.PHONE_NUMBER]: userInfo.phoneNumber,
+        [MY_PAGE_EDIT_FORM_NAME.PHONE_NUMBER]: memberInfo.phoneNumber,
       },
     });
-  }, [userInfo]);
+  }, [memberInfo]);
 
   return (
-    <Container title={`${userInfo?.name ?? ""} 님`}>
+    <Container title={`${memberInfo?.name ?? ""} 님`}>
       <div className={styles.box}>
         <div className={styles["illust-box"]}>
           <img src={myPageImage} alt="자기소개서 일러스트" />
@@ -59,7 +59,7 @@ const MyPageEdit = () => {
             label="이메일"
             name={MY_PAGE_EDIT_FORM_NAME.EMAIL}
             className={styles.input}
-            value={userInfo?.email || ""}
+            value={memberInfo?.email || ""}
             disabled
           />
           <MessageTextInput
@@ -73,7 +73,7 @@ const MyPageEdit = () => {
           />
           <BirthField
             name={MY_PAGE_EDIT_FORM_NAME.BIRTHDAY}
-            value={new Date(userInfo?.birthday || null)}
+            value={new Date(memberInfo?.birthday || null)}
             disabled
           />
           <div className={styles.buttons}>

frontend/src/pages/PasswordFind/PasswordFind.js

@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { fetchPasswordFind } from "../../api/user";
+import { fetchPasswordFind } from "../../api/member";
 import Button from "../../components/@common/Button/Button";
 import Container, { CONTAINER_SIZE } from "../../components/@common/Container/Container";
 import MessageTextInput from "../../components/@common/MessageTextInput/MessageTextInput";

frontend/src/provider/MemberInfoProvider.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from "react";
+
+import * as Api from "../api";
+import { ERROR_MESSAGE } from "../constants/messages";
+import useTokenContext from "../hooks/useTokenContext";
+import { MemberInfoContext } from "../hooks/useMemberInfoContext";
+
+const MemberInfoProvider = ({ children }) => {
+  const [memberInfo, setMemberInfo] = useState(null);
+  const { token } = useTokenContext();
+
+  const handleFetchError = (error) => {
+    if (!error) return;
+
+    alert(ERROR_MESSAGE.API.FETCHING_MEMBER_INFO);
+  };
+
+  const initMemberInfo = async () => {
+    try {
+      const { data } = await Api.fetchMemberInfo({ token });
+
+      setMemberInfo(data);
+    } catch (error) {
+      handleFetchError(error);
+    }
+  };
+
+  const updateMemberInfo = async (payload) => {
+    await Api.fetchMemberInfoEdit({ token, ...payload });
+    setMemberInfo((prev) => ({ ...prev, ...payload }));
+  };
+
+  useEffect(() => {
+    initMemberInfo();
+  }, [token]);
+
+  return (
+    <MemberInfoContext.Provider value={{ memberInfo, updateMemberInfo }}>
+      {children}
+    </MemberInfoContext.Provider>
+  );
+};
+
+export default MemberInfoProvider;