refactor: HELP_MESSAGES 객체 만들어서 방 생성 도움말 분리

woowacourse-teams · Dec 9, 2024 · 4b53294 · 4b53294
1 parent 4a42ef9
commit 4b53294
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/frontend/src/components/roomForm/RoomFormLayout.tsx b/frontend/src/components/roomForm/RoomFormLayout.tsx
@@ -145,7 +145,7 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
             <S.ContentLabel>
               깃허브 레포지토리 링크 <S.RequiredLabel>*</S.RequiredLabel>
             </S.ContentLabel>
-            <S.HelpText>.git 확장자가 아닌 링크를 넣어주세요.</S.HelpText>
+            <S.HelpText>{MESSAGES.HELP.REPOSITORY_LINK_INPUT}</S.HelpText>
             <S.ContentInput>
               <Input
                 name="repositoryLink"
@@ -167,12 +167,8 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
             <S.ContentLabel>
               레포지토리 공용 여부 <S.RequiredLabel>*</S.RequiredLabel>
             </S.ContentLabel>
-            <S.HelpText>
-              하나의 공용 레포지토리에 모두가 PR을 제출하는 형식이면 &apos;예&apos;
-            </S.HelpText>
-            <S.HelpText>
-              각자 개인 레포지토리로 PR을 제출하는 형식이면 &apos;아니요&apos;에 체크해주세요.
-            </S.HelpText>
+            <S.HelpText>{MESSAGES.HELP.ISPUBLIC_YES_INPUT}</S.HelpText>
+            <S.HelpText>{MESSAGES.HELP.ISPUBLIC_NO_INPUT}</S.HelpText>
             <S.ContentWrapper>
               <S.ContentRadioInput
                 type="radio"
@@ -244,7 +240,7 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
             <S.ContentLabel>
               방 상호 리뷰 인원 <S.RequiredLabel>*</S.RequiredLabel>
             </S.ContentLabel>
-            <S.HelpText>최소 1명, 최대 5명 가능해요.</S.HelpText>
+            <S.HelpText>{MESSAGES.HELP.MATCHING_SIZE_INPUT}</S.HelpText>
             <S.ContentInput>
               <Input
                 type="number"
@@ -372,9 +368,7 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
                     onChange={() => handleInputChange("managerMemberRole", "BOTH")}
                   />
                   <S.RadioLabel htmlFor="both">리뷰어, 리뷰이로 둘 다 참여</S.RadioLabel>
-                  <S.HelpText>
-                    상대방의 코드를 리뷰하면서 자신의 코드도 리뷰받고 싶은 경우 선택하세요.
-                  </S.HelpText>
+                  <S.HelpText>{MESSAGES.HELP.MANAGER_MEMBER_ROLE_INPUT}</S.HelpText>
                 </div>
                 <div>
                   <S.ContentRadioInput
@@ -386,7 +380,7 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
                   />
 
                   <S.RadioLabel htmlFor="reviewer">리뷰어로만 참여</S.RadioLabel>
-                  <S.HelpText>다른 사람의 코드만 리뷰하고 싶은 경우 선택하세요.</S.HelpText>
+                  <S.HelpText>{MESSAGES.HELP.MANAGER_MEMBER_ROLE_REVIEWER_INPUT}</S.HelpText>
                 </div>
               </S.ContentRadioWrapper>
             </S.RowContainer>
@@ -395,9 +389,7 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
               <S.ContentLabel>
                 원하는 상호 리뷰 인원 <S.RequiredLabel>*</S.RequiredLabel>
               </S.ContentLabel>
-              <S.HelpText>
-                리뷰할 사람 수는 자신의 학습 목표나 시간 여유에 맞춰 선택하세요.
-              </S.HelpText>
+              <S.HelpText>{MESSAGES.HELP.MANAGER_MATCHING_SIZE_INPUT}</S.HelpText>
               <S.ContentInput>
                 <Input
                   type="number"

diff --git a/frontend/src/constants/message.ts b/frontend/src/constants/message.ts
@@ -86,10 +86,23 @@ const SUCCESS_MESSAGES: Record<string, string> = {
   POST_REVIEW_URGE: "정상적으로 코드리뷰 재촉하기를 했습니다.",
 };
 
+const HELP_MESSAGES: Record<string, string> = {
+  REPOSITORY_LINK_INPUT: ".git 확장자가 아닌 링크를 넣어주세요.",
+  ISPUBLIC_YES_INPUT: "하나의 공용 레포지토리에 모두가 PR을 제출하는 형식이면 &apos;예&apos;",
+  ISPUBLIC_NO_INPUT:
+    "각자 개인 레포지토리로 PR을 제출하는 형식이면 &apos;아니요&apos;에 체크해주세요.",
+  MATCHING_SIZE_INPUT: "최소 1명, 최대 5명 가능해요.",
+  MANAGER_MEMBER_ROLE_BOTH_INPUT:
+    "상대방의 코드를 리뷰하면서 자신의 코드도 리뷰받고 싶은 경우 선택하세요.",
+  MANAGER_MEMBER_ROLE_REVIEWER_INPUT: "다른 사람의 코드만 리뷰하고 싶은 경우 선택하세요.",
+  MANAGER_MATCHING_SIZE_INPUT: "리뷰할 사람 수는 자신의 학습 목표나 시간 여유에 맞춰 선택하세요.",
+};
+
 const MESSAGES = {
   GUIDANCE: GUIDANCE_MESSAGES,
   ERROR: ERROR_MESSAGES,
   SUCCESS: SUCCESS_MESSAGES,
+  HELP: HELP_MESSAGES,
 };
 
 export default MESSAGES;