diff --git a/index.html b/index.html index cabc5e9..c52bcd5 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,8 @@ + Vite + React + TS diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg index 202d2f5..1b7d7a6 100644 --- a/src/assets/icons/check.svg +++ b/src/assets/icons/check.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx index bf8b610..13565c0 100644 --- a/src/components/button/Button.tsx +++ b/src/components/button/Button.tsx @@ -1,16 +1,10 @@ -import {ButtonHTMLAttributes} from 'react'; - -interface ButtonProps extends ButtonHTMLAttributes { - label: string; - disabled?: boolean; -} +import ButtonProps from '@components/button/ButtonProps.ts'; const Button = ({label, disabled, ...rest}: ButtonProps) => { let btnClass = `h-[52px] px-5 rounded-md transition duration-300 ease-in-out hover:bg-primary-transition - text-[18px] focus:outline-none - focus:ring-grey-200 font-apple `; + text-[18px] focus:outline-none focus:ring-grey-200 `; btnClass += disabled? 'bg-light_grey text-grey' : 'bg-primary text-white'; return ( + ); +}; + +export default SmallButton; diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx index bbc56b0..f188606 100644 --- a/src/components/input/Input.tsx +++ b/src/components/input/Input.tsx @@ -6,7 +6,7 @@ interface InputProps extends InputHTMLAttributes { } const Input = ({label, errorMessage, ...rest}: InputProps) => { - return
+ 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}
-

+

{props.title}

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} />
-