온보딩 selectbox 기본값 설정 (#301)

* fix: 온보딩 페이지 select option값 빈 값 없애고 default 문자열 넣기 * fix: 버튼 크기 바뀌는 문제 해결 * fix: 버튼 div위치 absolute대신 spacing컴포넌트 적용
Guzzing · Dec 3, 2023 · f62ce18 · f62ce18
1 parent 7a656b7
commit f62ce18
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 14 deletions.
diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
@@ -41,8 +41,8 @@ const Button = ({
         } ${BUTTON_TEXT_COLOR['blue500']} ${BUTTON_BORDER_COLOR['blue500']}`
       : buttonType === 'Plain-disabled'
       ? `${BUTTON_RADIUS['middle']} ${
-          fullWidth ? 'w-full' : width ? 'w-[317px]' : BUTTON_WIDTH[width]
-        } ${height ? 'h-[43px]' : BUTTON_HEIGHT[height]} ${
+          fullWidth ? 'w-full' : width ? 'w-[343px]' : BUTTON_WIDTH[width]
+        } ${height ? 'h-[56px]' : BUTTON_HEIGHT[height]} ${
           BUTTON_BG_COLOR['white0']
         } ${BUTTON_TEXT_COLOR['gray500']} ${BUTTON_BORDER_COLOR['gray500']}`
       : buttonType === 'Plain-red'

diff --git a/src/components/common/inputbox/input/Input.tsx b/src/components/common/inputbox/input/Input.tsx
@@ -21,22 +21,19 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const [inputValue, setInputValue] = useState('')
     const [searchInputValue, setSearchInputValue] = useState('')
-
     return inputType === 'Default' ? (
       <div className={'my-[10px]'}>
         <input
           type={'text'}
           className={`${
             fullWidth ? 'w-full h-[52px]' : 'w-[323px] h-[52px]'
           } rounded-[10px] ${
-            field === 'email' &&
-            !validate('email', inputValue) &&
+            (field === 'email' ||
+              field === 'nickname' ||
+              field === 'childname') &&
+            !validate(field, inputValue) &&
             inputValue !== ''
               ? 'border border-red-600'
-              : field === 'nickname' &&
-                !validate('nickname', inputValue) &&
-                inputValue !== ''
-              ? 'border border-red-600'
               : 'border border-blue-350'
           }  px-[20px] font-nsk text-black-800 bg-white-200 body-18 placeholder:text-gray-600 outline-none`}
           value={inputValue}
@@ -54,8 +51,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         />
         <p className={'font-nsk caption-13 text-red-600 px-3 mt-1'}>
           {field === 'email' &&
-          !validate('email', inputValue) &&
-          inputValue !== ''
+          inputValue !== '' &&
+          !validate('email', inputValue)
             ? (errorMessage = '잘못된 이메일입니다')
             : field === 'nickname' &&
               !validate('nickname', inputValue) &&

diff --git a/src/pages/onboarding/OnbardingPage.tsx b/src/pages/onboarding/OnbardingPage.tsx
@@ -140,6 +140,7 @@ const Onboarding = () => {
                 ref={selectRef}
                 onChange={handleSelectChange}
                 value={selectValue}
+                placeholder={'아이 학년을 선택해주세요'}
               />
             ) : (
               <Input
@@ -160,7 +161,8 @@ const Onboarding = () => {
           </div>
         ))}
       </div>
-      <ul className={'absolute bottom-[15px] w-full text-center'}>
+      <Spacing size={220} />
+      <ul className={'w-full text-center'}>
         {PAGE_CONTENT[currentPage].buttonType.map(
           (buttonLabel, i) =>
             buttonLabel && (
@@ -180,7 +182,6 @@ const Onboarding = () => {
                         : 'Round-blue-500'
                     }
                     onClick={() => {
-                      // 아무것도 입력을 하지 않았을 때!
                       if (
                         inputRef.current?.value === '' ||
                         selectRef.current?.value === ''

diff --git a/src/pages/onboarding/constants.ts b/src/pages/onboarding/constants.ts
@@ -85,7 +85,6 @@ export const PAGE_CONTENT = [
 ]
 
 export const CHILD_GRADE = [
-  '',
   '초등학교 1학년',
   '초등학교 2학년',
   '초등학교 3학년',