+ return
{label &&
}
-
+
{label && label}
>
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index 66c49e5..6b92531 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -24,7 +24,7 @@ const Navbar = (props: NavbarProps) => {
}}> : null}
diff --git a/src/components/text/PageCaption.tsx b/src/components/text/PageCaption.tsx
new file mode 100644
index 0000000..671c9b9
--- /dev/null
+++ b/src/components/text/PageCaption.tsx
@@ -0,0 +1,12 @@
+interface PageCaptionProps {
+ lines: string[];
+}
+const PageCaption = ({lines}: PageCaptionProps) => {
+ const getLines = () => {
+ return lines.map((line) =>
{line}
);
+ };
+ return
+ {getLines()}
+
;
+};
+export default PageCaption;
diff --git a/src/css/index.css b/src/css/index.css
index bffbe76..4965552 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -2,6 +2,9 @@
@tailwind components;
@tailwind utilities;
+body {
+ @apply font-pretendard tracking-[-.025rem];
+}
::-webkit-scrollbar-track {
background: transparent;
}
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index cda6579..840c0bc 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -41,7 +41,11 @@ const LoginPage = (): ReactNode => {
setUserId(inputId);
limitInputNumber(e, 10); // ID의 최대 글자수 제한: 10글자.
// 사용자 정보 db 스키마가 정의되면 상수로서 정의하는 것이 좋을 것 같음
- }}>
+ }}
+ style={{
+ marginBottom: '8px',
+ }}
+ >
) => {
diff --git a/src/pages/findId/FindIdPage.tsx b/src/pages/findId/FindIdPage.tsx
index bc5debf..16fd88b 100644
--- a/src/pages/findId/FindIdPage.tsx
+++ b/src/pages/findId/FindIdPage.tsx
@@ -7,6 +7,8 @@ import {limitInputNumber} from '@/utils';
import Input from '@components/input/Input.tsx';
import Button from '@components/button/Button.tsx';
import FindIdResult from '@pages/findId/FindIdResult.tsx';
+import SmallButton from '@components/button/SmallButton.tsx';
+import PageCaption from '@components/text/PageCaption.tsx';
const FindIdPage = () => {
const [/* name */, setName] = useState('');
@@ -27,13 +29,10 @@ const FindIdPage = () => {
isSuccesed ? (
) : (
-
-
-
아이디를 찾기 위해
-
본인 인증을 진행해 주세요.
-
-
-
+
+
+
+
이름
) => {
@@ -46,7 +45,7 @@ const FindIdPage = () => {
이메일
-
+
) => {
@@ -55,19 +54,12 @@ const FindIdPage = () => {
limitInputNumber(e, 10);
}}>
-
- {isConfirmed ? (
- ) : (
-
- )}
+
+ {isConfirmed ?
+ () :
+ ( setIsSended(true)}/>)}
@@ -85,26 +77,18 @@ const FindIdPage = () => {
}}>
-
+ setIsConfirmed(true)}
+ />
)}
-
- {
- isConfirmed ? (
-
- ) : (
-
- )
- }
+
+
)
diff --git a/src/pages/findId/FindIdResult.tsx b/src/pages/findId/FindIdResult.tsx
index b54d447..e974fcc 100644
--- a/src/pages/findId/FindIdResult.tsx
+++ b/src/pages/findId/FindIdResult.tsx
@@ -28,7 +28,7 @@ const FindIdResult = () => {
-
+
@@ -36,7 +36,7 @@ const FindIdResult = () => {
border-primary border h-[52px] rounded-md
transition duration-300 ease-in-out
hover:bg-primary-transition
- text-[18px] font-apple'>비밀번호 찾기
+ text-[18px]'>비밀번호 찾기
@@ -58,14 +58,14 @@ const FindIdResult = () => {
-
+
diff --git a/src/pages/register/steps/Authorization.tsx b/src/pages/register/steps/Authorization.tsx
index 0c1deb1..7c5048d 100644
--- a/src/pages/register/steps/Authorization.tsx
+++ b/src/pages/register/steps/Authorization.tsx
@@ -5,6 +5,7 @@ import Button from '@components/button/Button.tsx';
import {limitInputNumber} from '@/utils';
import {setRegisterInfo} from '@modules/registerReducer.ts';
import {RootState} from '@/modules';
+import PageCaption from '@components/text/PageCaption.tsx';
const Authorization = () => {
const registerState = useSelector((state: RootState) => state.register);
@@ -16,8 +17,9 @@ const Authorization = () => {
const [nameErrorMessage, setNameErrorMessage] =
useState
(undefined);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
- const [sendDisabled, setSendDisabled] =
- useState(true);
+ const [firstSendComplete, setFirstSendComplete] =
+ useState(false);
+ const [sendDisabled, setSendDisabled] = useState(true);
const [authnumErrorMessage/* setAuthnumErrorMessage*/] =
useState(undefined);
@@ -25,16 +27,22 @@ const Authorization = () => {
useState(registerState.authorized);
return (<>
-
-
서비스 이용을 위해
-
본인 인증을 진행해주세요.
-
-
+
+
이름
{
limitInputNumber(e, 8);
+ if (! e.target.validity.valid) {
+ if (nameErrorMessage === undefined) {
+ setNameErrorMessage('올바른 이름을 입력해 주세요.');
+ }
+ } else {
+ setNameErrorMessage(undefined);
+ }
}} defaultValue={registerState.name ?? registerState.name}
- errorMessage={nameErrorMessage} />
+ errorMessage={nameErrorMessage}
+ pattern={'[가-힣a-zA-Z0-9]{2,10}'}
+ />
이메일
@@ -58,13 +66,13 @@ const Authorization = () => {
defaultValue={registerState.email ?? registerState.email}
/>
-