fix: 방장 정보 입력 뷰 에러처리 변경

ASAP-as-soon-as-possible · Aug 24, 2024 · 735cbc9 · 735cbc9
1 parent 1793c99
commit 735cbc9
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 27 deletions.
diff --git a/src/components/common/atomComponents/Button.tsx b/src/components/common/atomComponents/Button.tsx
@@ -58,6 +58,7 @@ const buttonCSS = {
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.grey7};
     color: ${({ theme }) => theme.colors.grey4};
+    cursor: default;
   `,
   secondaryActive: css`
     ${buttonDefaultCSS.basicCss};

diff --git a/src/components/common/atomComponents/PasswordInput.tsx b/src/components/common/atomComponents/PasswordInput.tsx
@@ -25,7 +25,7 @@ function PasswordInput({ value, placeholder, passWordOnChange, page }: ValueProp
           placeholder={placeholder}
           value={value}
           onChange={passWordOnChange}
-          $iserror={value.length < 4}
+          $iserror={value.length < 4 || value.length > 8}
           type={inputType ? 'password' : `number`}
           inputMode="numeric"
         />
@@ -34,15 +34,25 @@ function PasswordInput({ value, placeholder, passWordOnChange, page }: ValueProp
         </IconContainer>
       </InputSection>
       {page === 'createMeeting' ? (
-        <SubTextSection>
-          <Text font={'body4'} color={`${theme.colors.sub1}`}>
-            *
-          </Text>
-          <Text font={'body4'} color={`${theme.colors.sub1}`}>
-            확정 후 비밀번호는 수정할 수 없으며, 비밀번호가 있어야 방장 페이지에 접속할 수 있으니
-            반드시 기억해주세요!
-          </Text>
-        </SubTextSection>
+        <>
+          {value.length > 8 && (
+            <InvalidPWTextSection>
+              <Text font={'body4'} color={theme.colors.red}>
+                최대 8자리까지 입력 가능해요{' '}
+              </Text>
+            </InvalidPWTextSection>
+          )}
+
+          <SubTextSection>
+            <Text font={'body4'} color={`${theme.colors.sub1}`}>
+              *
+            </Text>
+            <Text font={'body4'} color={`${theme.colors.sub1}`}>
+              확정 후 비밀번호는 수정할 수 없으며, 비밀번호가 있어야 방장 페이지에 접속할 수 있으니
+              반드시 기억해주세요!
+            </Text>
+          </SubTextSection>
+        </>
       ) : (
         undefined
       )}
@@ -117,3 +127,11 @@ const SubTextSection = styled.div`
     font-weight: 600;
   }
 `;
+
+const InvalidPWTextSection = styled.div`
+  margin-top: 0.9rem;
+
+  span {
+    font-weight: 600;
+  }
+`;
diff --git a/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx b/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx
@@ -23,11 +23,7 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
 
   const passWordOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setMeetingInfo((prev: MeetingInfo) => {
-      if (e.target.value.length < 9) {
-        return { ...prev, password: e.target.value };
-      }
-      alert('비밀번호는 8자리 이하로 설정해주세요.');
-      return { ...prev };
+      return { ...prev, password: e.target.value };
     });
   };
 
@@ -45,6 +41,15 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
     }
   };
 
+  const validateForm = () => {
+    return (
+      meetingInfo.name &&
+      meetingInfo.name.length <= 15 &&
+      meetingInfo.password.length >= 4 &&
+      meetingInfo.password.length <= 8
+    );
+  };
+
   return (
     <SetHostInfoWrapper>
       <HostInfoSection>
@@ -65,24 +70,16 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
           </Text>
           <PasswordInput
             value={meetingInfo.password}
-            placeholder={`숫자 4자리 이상`}
+            placeholder={`숫자 4자리 이상 8자리 이하`}
             passWordOnChange={passWordOnChange}
             page={'createMeeting'}
           />
         </HostNameSection>
       </HostInfoSection>
       <BottomBtnSection>
         <Button
-          typeState={
-            meetingInfo.name && meetingInfo.password.length >= 4
-              ? 'primaryActive'
-              : 'primaryDisabled'
-          }
-          onClick={
-            meetingInfo.name && meetingInfo.password.length >= 4
-              ? () => containsNonNumeric(meetingInfo.password)
-              : undefined
-          }
+          typeState={validateForm() ? 'primaryActive' : 'primaryDisabled'}
+          onClick={validateForm() ? () => containsNonNumeric(meetingInfo.password) : undefined}
         >
           <Text font={'button2'}>다음</Text>
         </Button>

diff --git a/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx b/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 
 import Text from 'components/common/atomComponents/Text';
 import { ExitIc } from 'components/Icon/icon';