게스트 모집글, 크루 생성 페이지 qa 피드백 반영 (#322)

* fix: 게스트 최소인원 2명으로 수정 * fix: 중복된 크루 이름 에러처리 수정 * feat: 서울시(mvp) 이외의 지역 선택시 에러처리 추가 * refactor: TextArea 선택 props로 defaultValue 추가 * style: StyledInput에 padding-left 추가 * feat: 게스트 모집글 생성 페이지 상세설명란에 기본값 추가 * feat: 최대 크루 횟수 초과시 에러처리 추가 * style: 크루, 게임 생성 페이지 스타일 수정 * feat: ToggleButton 값이 '없음' 일경우 다른 값 선택 불가하게 수정 * fix: async 제거
Java-and-Script · Nov 24, 2023 · 3cd2119 · 3cd2119
1 parent ef8b2ee
commit 3cd2119
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 11 deletions.
diff --git a/src/components/ConditionalFormInput/ConditionalFormInput.styles.ts b/src/components/ConditionalFormInput/ConditionalFormInput.styles.ts
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 export const StyledInput = styled.input<{ height?: number | string }>`
+  padding-left: 10px;
   width: 100%;
   height: 30px;
   height: ${({ height }) =>

diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
@@ -7,12 +7,14 @@ import { StyledSubTitle, StyledTextArea } from './TextArea.styles';
 type textAreaProps = {
   title: string;
   inputLabel: string;
+  defaultValue?: string;
   inputOnChange?: (item: string) => void;
 };
 
 export const TextArea = ({
   title,
   inputLabel,
+  defaultValue,
   inputOnChange,
 }: textAreaProps) => {
   const { register } = useForm();
@@ -27,6 +29,7 @@ export const TextArea = ({
       <StyledTextArea
         {...register(inputLabel)}
         maxLength={1000}
+        defaultValue={defaultValue}
         onChange={(event) => inputOnChange && inputOnChange(event.target.value)}
       />
     </>

diff --git a/src/components/shared/ToggleButton/ToggleButtons.hook.ts b/src/components/shared/ToggleButton/ToggleButtons.hook.ts
@@ -21,9 +21,13 @@ export const useToggleButtons = <T>({
     }
 
     const updatedItems = isMultipleSelect
-      ? selectedItems.includes(value)
+      ? value === '없음'
+        ? [value]
+        : selectedItems.includes(value)
         ? selectedItems.filter((item) => item !== value)
-        : [...selectedItems, value]
+        : [...selectedItems.filter((item) => item !== '없음'), value]
+      : value === '없음'
+      ? []
       : [value];
 
     setSelectedItems(updatedItems);

diff --git a/src/pages/CreateCrewPage/CreateCrewPage.styles.ts b/src/pages/CreateCrewPage/CreateCrewPage.styles.ts
@@ -7,6 +7,7 @@ import { ToggleButton } from '@components/shared/ToggleButton';
 
 export const PageLayout = styled.div`
   ${({ theme }) => theme.STYLES.LAYOUT}
+  min-height: 100dvh;
   background-color: ${({ theme }) => theme.PALETTE.GRAY_100};
 `;
 

diff --git a/src/pages/CreateCrewPage/useCreateCrewPage.ts b/src/pages/CreateCrewPage/useCreateCrewPage.ts
@@ -35,22 +35,26 @@ export const useCreateCrewPage = () => {
   const [selectedLocation, setSelectedLocation] = useState<string[]>();
 
   const onSubmit = () => {
-    const data: PostCrewRequest = {
+    const crewData: PostCrewRequest = {
       name,
       content,
       maxMemberCount: parseInt(maxMemberCount),
       addressDepth1: '서울시',
       addressDepth2: selectedLocation![0],
     };
 
-    mutate(data, {
+    mutate(crewData, {
       onSuccess: ({ crewId }) => {
         navigate(PATH_NAME.GET_CREWS_PATH(String(crewId)));
       },
-      onError: (data) => {
-        if (data instanceof AxiosError) {
-          data.response?.data.code === 'CRE-002' &&
-            toast.error('중복된 크루 이름 입니다.');
+      onError: (error) => {
+        if (error instanceof AxiosError) {
+          if (error.response?.data.code === 'CRE-012') {
+            return toast.error('최대 크루 생성 횟수 3회를 초과했습니다.');
+          }
+          if (error.response?.data.code === 'CRE-002') {
+            return toast.error('중복된 크루 이름 입니다.');
+          }
         }
       },
     });

diff --git a/src/pages/CreateGamePage/CreateGamePage.styles.ts b/src/pages/CreateGamePage/CreateGamePage.styles.ts
@@ -2,13 +2,13 @@ import styled from '@emotion/styled';
 
 export const PageLayout = styled.div`
   ${({ theme }) => theme.STYLES.LAYOUT}
+  min-height: 100dvh;
   background-color: ${({ theme }) => theme.PALETTE.GRAY_100};
 `;
 
 export const PageWrapper = styled.div`
   padding-top: 1rem;
-  display: flex;
-  flex-direction: column;
+  ${({ theme }) => theme.STYLES.FLEX_DIRECTION_COLUMN}
 `;
 
 export const StyledTitle = styled.div`

diff --git a/src/pages/CreateGamePage/CreateGamePage.tsx b/src/pages/CreateGamePage/CreateGamePage.tsx
@@ -191,6 +191,7 @@ export const CreateGamePage = () => {
               title={CREATE_GAME_STRINGS.CONTENT}
               inputLabel="content"
               inputOnChange={setContent}
+              defaultValue="같이 즐거운 경기해요~!"
             />
             <Button
               width="100%"

diff --git a/src/pages/CreateGamePage/consts/createGameOptions.ts b/src/pages/CreateGamePage/consts/createGameOptions.ts
@@ -1,5 +1,4 @@
 export const MAX_MEMBER_COUNT_LIST = [
-  '1명',
   '2명',
   '3명',
   '4명',

diff --git a/src/pages/CreateGamePage/useCreateGamePage.ts b/src/pages/CreateGamePage/useCreateGamePage.ts
@@ -1,7 +1,10 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
+import { AxiosError } from 'axios';
+
 import { useGameMutation } from '@hooks/mutations/useGameMutation';
 
 import { useLoginInfoStore } from '@stores/loginInfo.store';
@@ -56,6 +59,12 @@ export const useCreateGamePage = () => {
       onSuccess: ({ gameId }) => {
         navigate(PATH_NAME.GET_GAMES_PATH(String(gameId)));
       },
+      onError: (error) => {
+        if (error instanceof AxiosError) {
+          error.response?.data.code === 'ADD-001' &&
+            toast.error('서울시만 서비스중입니다.');
+        }
+      },
     });
   };