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';