feat(member): move github username from assignment to member

woowacourse · May 21, 2024 · c1dbac1 · c1dbac1
1 parent b66da7d
commit c1dbac1
Show file tree

Hide file tree

Showing 28 changed files with 232 additions and 189 deletions.
diff --git a/frontend/src/api/members.ts b/frontend/src/api/members.ts
@@ -47,21 +47,23 @@ type FetchVerifyAuthenticationCodeRequest = {
 type FetchVerifyAuthenticationCodeResponseData = void;
 
 export const fetchRegister = ({
-  name,
   email,
-  phoneNumber,
-  birthday,
   password,
   confirmPassword,
+  name,
+  birthday,
+  phoneNumber,
+  githubUsername,
   authenticationCode,
 }: FetchRegisterRequest) =>
   axios.post<FetchRegisterResponseData>("/api/members/register", {
-    name,
     email,
-    phoneNumber,
-    birthday: formatDate(birthday),
     password,
     confirmPassword,
+    name,
+    birthday: formatDate(birthday),
+    phoneNumber,
+    githubUsername,
     authenticationCode,
   });
 

diff --git a/frontend/src/constants/messages.ts b/frontend/src/constants/messages.ts
@@ -5,14 +5,15 @@ export const ERROR_MESSAGE = {
     PASSWORD: "영문, 숫자, 특수문자 포함하여 8자에서 20자 이내로 입력해 주세요.",
     PASSWORD_CAPSLOCK: "CapsLock이 켜져 있습니다.",
     CONFIRM_PASSWORD: "비밀번호를 확인해 주세요.",
-    PHONE_NUMBER: "정확한 전화번호를 입력해 주세요. ex) 010-1234-5678",
+    PHONE_NUMBER: "정확한 휴대전화 번호를 입력해 주세요. ex) 010-1234-5678",
     REQUIRED: "필수 정보입니다.",
     URL: "http(s)를 포함한 정확한 URL을 입력해 주세요.",
     TIMEOUT_EMAIL_AUTHENTICATION_CODE:
       "이메일 인증 코드 유효시간이 초과하였습니다. 이메일 인증 코드를 재발급해 주세요.",
     PULL_REQUEST_URL:
       "정확한 Pull Request 주소를 입력해 주세요. ex) https://github.com/woowacourse/java-baseball/pull/1",
-    GITHUB_USERNAME: "GitHub ID는 영어와 숫자 문자만 입력할 수 있습니다.",
+    GITHUB_USERNAME:
+      "GitHub 사용자 이름 정책에 따라 영문, 숫자, 하이픈 조합을 사용하여 최대 39자까지 가능합니다.",
     BIRTHDAY: "유효하지 않은 날짜입니다. 정확한 날짜를 입력해 주세요.",
   },
   API: {

diff --git a/frontend/src/hooks/useAssignmentForm.js b/frontend/src/hooks/useAssignmentForm.js
@@ -1,16 +1,13 @@
 import { useState } from "react";
 import { ERROR_MESSAGE } from "../constants/messages";
-import { isValidGithubUsername } from "../utils/validation/githubUsername";
 import { isValidPullRequestUrl } from "../utils/validation/pullRequestUrl";
 
 export const ASSIGNMENT_FORM_NAME = {
-  GITHUB_USERNAME: "githubUsername",
   PULL_REQUEST_URL: "pullRequestUrl",
   NOTE: "note",
 };
 
 const initialRequiredForm = {
-  [ASSIGNMENT_FORM_NAME.GITHUB_USERNAME]: "",
   [ASSIGNMENT_FORM_NAME.PULL_REQUEST_URL]: "",
   [ASSIGNMENT_FORM_NAME.NOTE]: "",
 };
@@ -47,15 +44,6 @@ const useAssignmentForm = () => {
     }));
   };
 
-  const handleChangeGithubUsername = ({ target }) => {
-    const errorMessage = isValidGithubUsername(target.value)
-      ? ""
-      : ERROR_MESSAGE.VALIDATION.GITHUB_USERNAME;
-
-    updateErrorMessage(ASSIGNMENT_FORM_NAME.GITHUB_USERNAME, errorMessage);
-    updateRequiredForm(ASSIGNMENT_FORM_NAME.GITHUB_USERNAME, target.value);
-  };
-
   const handleChangePullRequestUrl = ({ target }) => {
     const errorMessage = isValidPullRequestUrl(target.value)
       ? ""
@@ -74,7 +62,6 @@ const useAssignmentForm = () => {
     errorMessage,
     init,
     handleChanges: {
-      [ASSIGNMENT_FORM_NAME.GITHUB_USERNAME]: handleChangeGithubUsername,
       [ASSIGNMENT_FORM_NAME.PULL_REQUEST_URL]: handleChangePullRequestUrl,
       [ASSIGNMENT_FORM_NAME.NOTE]: handleChangeNote,
     },

diff --git a/frontend/src/hooks/useMyPageEditForm.js b/frontend/src/hooks/useMyPageEditForm.js
@@ -5,8 +5,9 @@ import { isValidPhoneNumber } from "../utils/validation/phoneNumber";
 
 export const MY_PAGE_EDIT_FORM_NAME = {
   EMAIL: "email",
-  PHONE_NUMBER: "phoneNumber",
   BIRTHDAY: "birthday",
+  PHONE_NUMBER: "phoneNumber",
+  GITHUB_USERNAME: "githubUsername",
 };
 
 const initialRequiredForm = {

diff --git a/frontend/src/hooks/useSignUpForm.js b/frontend/src/hooks/useSignUpForm.js
@@ -2,39 +2,43 @@ import { useState } from "react";
 import { ERROR_MESSAGE } from "../constants/messages";
 import { formatHyphen, PHONE_NUMBER_HYPHEN_IDX } from "../utils/format/phoneNumber";
 import { isValidEmail } from "../utils/validation/email";
+import { isValidGithubUsername } from "../utils/validation/githubUsername";
 import { isValidName } from "../utils/validation/name";
 import { isValidPassword } from "../utils/validation/password";
 import { isValidPhoneNumber } from "../utils/validation/phoneNumber";
 
 export const SIGN_UP_FORM_NAME = {
+  IS_TERM_AGREED: "isTermAgreed",
   EMAIL: "email",
   AUTHENTICATION_CODE: "authenticationCode",
-  NAME: "name",
-  PHONE_NUMBER: "phoneNumber",
   PASSWORD: "password",
   CONFIRM_PASSWORD: "confirmPassword",
+  NAME: "name",
   BIRTHDAY: "birthday",
-  IS_TERM_AGREED: "isTermAgreed",
+  PHONE_NUMBER: "phoneNumber",
+  GITHUB_USERNAME: "githubUsername",
 };
 
 const initialRequiredForm = {
+  [SIGN_UP_FORM_NAME.IS_TERM_AGREED]: false,
   [SIGN_UP_FORM_NAME.EMAIL]: "",
   [SIGN_UP_FORM_NAME.AUTHENTICATION_CODE]: "",
-  [SIGN_UP_FORM_NAME.NAME]: "",
-  [SIGN_UP_FORM_NAME.PHONE_NUMBER]: "",
   [SIGN_UP_FORM_NAME.PASSWORD]: "",
   [SIGN_UP_FORM_NAME.CONFIRM_PASSWORD]: "",
+  [SIGN_UP_FORM_NAME.NAME]: "",
   [SIGN_UP_FORM_NAME.BIRTHDAY]: null,
-  [SIGN_UP_FORM_NAME.IS_TERM_AGREED]: false,
+  [SIGN_UP_FORM_NAME.PHONE_NUMBER]: "",
+  [SIGN_UP_FORM_NAME.GITHUB_USERNAME]: "",
 };
 
 const initialErrorMessage = {
   [SIGN_UP_FORM_NAME.EMAIL]: "",
   [SIGN_UP_FORM_NAME.AUTHENTICATION_CODE]: "",
-  [SIGN_UP_FORM_NAME.NAME]: "",
-  [SIGN_UP_FORM_NAME.PHONE_NUMBER]: "",
   [SIGN_UP_FORM_NAME.PASSWORD]: "",
   [SIGN_UP_FORM_NAME.CONFIRM_PASSWORD]: "",
+  [SIGN_UP_FORM_NAME.NAME]: "",
+  [SIGN_UP_FORM_NAME.PHONE_NUMBER]: "",
+  [SIGN_UP_FORM_NAME.GITHUB_USERNAME]: "",
 };
 
 const useSignUpForm = () => {
@@ -62,6 +66,10 @@ const useSignUpForm = () => {
     }));
   };
 
+  const handleChangeIsTermAgreed = ({ target }) => {
+    updateRequiredForm(SIGN_UP_FORM_NAME.IS_TERM_AGREED, target.checked);
+  };
+
   const handleChangeEmail = ({ target }) => {
     const errorMessage = isValidEmail(target.value) ? "" : ERROR_MESSAGE.VALIDATION.EMAIL;
 
@@ -75,25 +83,6 @@ const useSignUpForm = () => {
     updateRequiredForm(SIGN_UP_FORM_NAME.AUTHENTICATION_CODE, result);
   };
 
-  const handleChangeName = ({ target }) => {
-    const errorMessage = isValidName(target.value) ? "" : ERROR_MESSAGE.VALIDATION.NAME;
-
-    updateErrorMessage(SIGN_UP_FORM_NAME.NAME, errorMessage);
-    updateRequiredForm(SIGN_UP_FORM_NAME.NAME, target.value);
-  };
-
-  const handleChangePhoneNumber = ({ nativeEvent: { data }, target: { value } }) => {
-    if (isNaN(data)) return;
-
-    const [firstHyphenIdx, secondHyphenIdx] = PHONE_NUMBER_HYPHEN_IDX;
-    const result = formatHyphen(value, firstHyphenIdx, secondHyphenIdx).trim();
-
-    const errorMessage = isValidPhoneNumber(result) ? "" : ERROR_MESSAGE.VALIDATION.PHONE_NUMBER;
-
-    updateErrorMessage(SIGN_UP_FORM_NAME.PHONE_NUMBER, errorMessage);
-    updateRequiredForm(SIGN_UP_FORM_NAME.PHONE_NUMBER, result);
-  };
-
   const handleChangePassword = ({ target }) => {
     const errorMessage = isValidPassword(target.value) ? "" : ERROR_MESSAGE.VALIDATION.PASSWORD;
 
@@ -115,12 +104,36 @@ const useSignUpForm = () => {
     updateRequiredForm(SIGN_UP_FORM_NAME.CONFIRM_PASSWORD, target.value);
   };
 
+  const handleChangeName = ({ target }) => {
+    const errorMessage = isValidName(target.value) ? "" : ERROR_MESSAGE.VALIDATION.NAME;
+
+    updateErrorMessage(SIGN_UP_FORM_NAME.NAME, errorMessage);
+    updateRequiredForm(SIGN_UP_FORM_NAME.NAME, target.value);
+  };
+
   const handleChangeBirthday = (date) => {
     updateRequiredForm(SIGN_UP_FORM_NAME.BIRTHDAY, date);
   };
 
-  const handleChangeIsTermAgreed = ({ target }) => {
-    updateRequiredForm(SIGN_UP_FORM_NAME.IS_TERM_AGREED, target.checked);
+  const handleChangePhoneNumber = ({ nativeEvent: { data }, target: { value } }) => {
+    if (isNaN(data)) return;
+
+    const [firstHyphenIdx, secondHyphenIdx] = PHONE_NUMBER_HYPHEN_IDX;
+    const result = formatHyphen(value, firstHyphenIdx, secondHyphenIdx).trim();
+
+    const errorMessage = isValidPhoneNumber(result) ? "" : ERROR_MESSAGE.VALIDATION.PHONE_NUMBER;
+
+    updateErrorMessage(SIGN_UP_FORM_NAME.PHONE_NUMBER, errorMessage);
+    updateRequiredForm(SIGN_UP_FORM_NAME.PHONE_NUMBER, result);
+  };
+
+  const handleChangeGithubUsername = ({ target }) => {
+    updateRequiredForm(SIGN_UP_FORM_NAME.GITHUB_USERNAME, target.value);
+
+    const errorMessage = isValidGithubUsername(target.value)
+      ? ""
+      : ERROR_MESSAGE.VALIDATION.GITHUB_USERNAME;
+    updateErrorMessage(SIGN_UP_FORM_NAME.GITHUB_USERNAME, errorMessage);
   };
 
   const handleCapsLockState = (name) => (event) => {
@@ -161,11 +174,12 @@ const useSignUpForm = () => {
       [SIGN_UP_FORM_NAME.IS_TERM_AGREED]: handleChangeIsTermAgreed,
       [SIGN_UP_FORM_NAME.EMAIL]: handleChangeEmail,
       [SIGN_UP_FORM_NAME.AUTHENTICATION_CODE]: handleChangeAuthenticationCode,
-      [SIGN_UP_FORM_NAME.NAME]: handleChangeName,
-      [SIGN_UP_FORM_NAME.PHONE_NUMBER]: handleChangePhoneNumber,
       [SIGN_UP_FORM_NAME.PASSWORD]: handleChangePassword,
       [SIGN_UP_FORM_NAME.CONFIRM_PASSWORD]: handleChangeConfirmPassword,
+      [SIGN_UP_FORM_NAME.NAME]: handleChangeName,
       [SIGN_UP_FORM_NAME.BIRTHDAY]: handleChangeBirthday,
+      [SIGN_UP_FORM_NAME.PHONE_NUMBER]: handleChangePhoneNumber,
+      [SIGN_UP_FORM_NAME.GITHUB_USERNAME]: handleChangeGithubUsername,
     },
   };
 };

diff --git a/frontend/src/pages/AssignmentSubmit/AssignmentSubmit.js b/frontend/src/pages/AssignmentSubmit/AssignmentSubmit.js
@@ -89,15 +89,6 @@ const AssignmentSubmit = () => {
   return (
     <Container title={currentMission?.title ?? ""} titleAlign={TITLE_ALIGN.LEFT}>
       <Form onSubmit={handleSubmit} className={styles.form}>
-        <MessageTextInput
-          label="GitHub ID"
-          name={ASSIGNMENT_FORM_NAME.GITHUB_USERNAME}
-          value={form[ASSIGNMENT_FORM_NAME.GITHUB_USERNAME]}
-          onChange={handleChanges[ASSIGNMENT_FORM_NAME.GITHUB_USERNAME]}
-          maxLength={FORM.GITHUB_USERNAME_MAX_LENGTH}
-          errorMessage={errorMessage[ASSIGNMENT_FORM_NAME.GITHUB_USERNAME]}
-          required
-        />
         <MessageTextInput
           label="Pull Request 주소"
           type="url"

diff --git a/frontend/src/pages/MyPage/MyPage.js b/frontend/src/pages/MyPage/MyPage.js
@@ -33,12 +33,22 @@ const MyPage = () => {
               <div className={styles["info-data"]}>{memberInfo?.email || ""}</div>
             </li>
             <li className={styles.info}>
-              <div className={styles["info-title"]}>전화번호</div>
+              <div className={styles["info-title"]}>생년월일</div>
+              <div className={styles["info-data"]}>{memberInfo?.birthday || ""}</div>
+            </li>
+            <li className={styles.info}>
+              <div className={styles["info-title"]}>
+                휴대전화 <br />
+                번호
+              </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"]}>{memberInfo?.birthday || ""}</div>
+              <div className={styles["info-title"]}>
+                GitHub <br />
+                사용자 이름
+              </div>
+              <div className={styles["info-data"]}>{memberInfo?.githubUsername || ""}</div>
             </li>
           </ul>
 

diff --git a/frontend/src/pages/MyPageEdit/MyPageEdit.js b/frontend/src/pages/MyPageEdit/MyPageEdit.js
@@ -62,18 +62,25 @@ const MyPageEdit = () => {
             value={memberInfo?.email || ""}
             disabled
           />
+          <BirthField
+            name={MY_PAGE_EDIT_FORM_NAME.BIRTHDAY}
+            value={new Date(memberInfo?.birthday || null)}
+            disabled
+          />
           <MessageTextInput
-            label="휴대폰 번호"
+            label="휴대전화 번호"
             type="tel"
             name={MY_PAGE_EDIT_FORM_NAME.PHONE_NUMBER}
             value={form[MY_PAGE_EDIT_FORM_NAME.PHONE_NUMBER]}
             onChange={handleChanges[MY_PAGE_EDIT_FORM_NAME.PHONE_NUMBER]}
             errorMessage={errorMessage[MY_PAGE_EDIT_FORM_NAME.PHONE_NUMBER]}
             maxLength={FORM.PHONE_NUMBER_MAX_LENGTH}
           />
-          <BirthField
-            name={MY_PAGE_EDIT_FORM_NAME.BIRTHDAY}
-            value={new Date(memberInfo?.birthday || null)}
+          <MessageTextInput
+            label="GitHub 사용자 이름"
+            name={MY_PAGE_EDIT_FORM_NAME.GITHUB_USERNAME}
+            className={styles.input}
+            value={memberInfo?.githubUsername || ""}
             disabled
           />
           <div className={styles.buttons}>

diff --git a/frontend/src/pages/SignUp/SignUp.js b/frontend/src/pages/SignUp/SignUp.js
@@ -77,7 +77,6 @@ const SignUp = () => {
             dangerouslySetInnerHTML={{ __html: agreementContent }}
           />
         </SummaryCheckField>
-
         <EmailField
           emailValue={form[SIGN_UP_FORM_NAME.EMAIL]}
           emailErrorMessage={errorMessage[SIGN_UP_FORM_NAME.EMAIL]}
@@ -90,29 +89,6 @@ const SignUp = () => {
           setEmailStatus={setEmailStatus}
           setErrorMessage={setErrorMessage}
         />
-
-        <MessageTextInput
-          label="이름"
-          placeholder="이름을 입력해 주세요."
-          name={SIGN_UP_FORM_NAME.NAME}
-          value={form[SIGN_UP_FORM_NAME.NAME]}
-          onChange={handleChanges[SIGN_UP_FORM_NAME.NAME]}
-          maxLength={FORM.NAME_MAX_LENGTH}
-          errorMessage={errorMessage[SIGN_UP_FORM_NAME.NAME]}
-          required
-        />
-        <MessageTextInput
-          label="휴대폰 번호"
-          placeholder="연락 가능한 휴대폰 번호를 입력해 주세요."
-          type="tel"
-          name={SIGN_UP_FORM_NAME.PHONE_NUMBER}
-          value={form[SIGN_UP_FORM_NAME.PHONE_NUMBER]}
-          onChange={handleChanges[SIGN_UP_FORM_NAME.PHONE_NUMBER]}
-          maxLength={FORM.PHONE_NUMBER_MAX_LENGTH}
-          errorMessage={errorMessage[SIGN_UP_FORM_NAME.PHONE_NUMBER]}
-          className={styles["input-box"]}
-          required
-        />
         <MessageTextInput
           label="비밀번호"
           placeholder="비밀번호를 입력해 주세요."
@@ -139,12 +115,44 @@ const SignUp = () => {
           maxLength={FORM.PASSWORD_MAX_LENGTH}
           required
         />
+        <MessageTextInput
+          label="이름"
+          placeholder="이름을 입력해 주세요."
+          name={SIGN_UP_FORM_NAME.NAME}
+          value={form[SIGN_UP_FORM_NAME.NAME]}
+          onChange={handleChanges[SIGN_UP_FORM_NAME.NAME]}
+          maxLength={FORM.NAME_MAX_LENGTH}
+          errorMessage={errorMessage[SIGN_UP_FORM_NAME.NAME]}
+          required
+        />
         <BirthField
           name={SIGN_UP_FORM_NAME.BIRTHDAY}
           value={form[SIGN_UP_FORM_NAME.BIRTHDAY]}
           onChange={handleChanges[SIGN_UP_FORM_NAME.BIRTHDAY]}
           required
         />
+        <MessageTextInput
+          label="휴대전화 번호"
+          placeholder="연락 가능한 휴대전화 번호를 입력해 주세요."
+          type="tel"
+          name={SIGN_UP_FORM_NAME.PHONE_NUMBER}
+          value={form[SIGN_UP_FORM_NAME.PHONE_NUMBER]}
+          onChange={handleChanges[SIGN_UP_FORM_NAME.PHONE_NUMBER]}
+          maxLength={FORM.PHONE_NUMBER_MAX_LENGTH}
+          errorMessage={errorMessage[SIGN_UP_FORM_NAME.PHONE_NUMBER]}
+          className={styles["input-box"]}
+          required
+        />
+        <MessageTextInput
+          label="GitHub 사용자 이름"
+          placeholder="GitHub 사용자 이름을 입력해 주세요."
+          name={SIGN_UP_FORM_NAME.GITHUB_USERNAME}
+          value={form[SIGN_UP_FORM_NAME.GITHUB_USERNAME]}
+          onChange={handleChanges[SIGN_UP_FORM_NAME.GITHUB_USERNAME]}
+          maxLength={FORM.GITHUB_USERNAME_MAX_LENGTH}
+          errorMessage={errorMessage[SIGN_UP_FORM_NAME.GITHUB_USERNAME]}
+          required
+        />
         <div className={styles.buttons}>
           <CancelButton />
           <Button disabled={!isValid || isEmpty}>가입하기</Button>