diff --git a/src/components/common/atomComponents/Button.tsx b/src/components/common/atomComponents/Button.tsx index 84feed9c..be292d48 100644 --- 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 index 2b418669..e0f02082 100644 --- 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 {page === 'createMeeting' ? ( - - - * - - - 확정 후 비밀번호는 수정할 수 없으며, 비밀번호가 있어야 방장 페이지에 접속할 수 있으니 - 반드시 기억해주세요! - - + <> + {value.length > 8 && ( + + + 최대 8자리까지 입력 가능해요{' '} + + + )} + + + + * + + + 확정 후 비밀번호는 수정할 수 없으며, 비밀번호가 있어야 방장 페이지에 접속할 수 있으니 + 반드시 기억해주세요! + + + ) : ( 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 index 29a31097..6ecdee34 100644 --- 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) => { 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 ( @@ -65,7 +70,7 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { @@ -73,16 +78,8 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { diff --git a/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx b/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx index f1d83cbe..f2286b5e 100644 --- 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';