From 60f6c30d7583b9f3deff4980ac84bf7d69db0fc2 Mon Sep 17 00:00:00 2001 From: cla6shade Date: Sat, 16 Dec 2023 11:56:03 +0900 Subject: [PATCH 01/12] Design: font modification on all components --- src/components/button/Button.tsx | 2 +- src/components/input/LoginCheckbox.tsx | 2 +- src/components/navbar/Navbar.tsx | 2 +- src/pages/findId/FindIdPage.tsx | 8 ++++---- src/pages/findId/FindIdResult.tsx | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx index bf8b610..8804d5d 100644 --- a/src/components/button/Button.tsx +++ b/src/components/button/Button.tsx @@ -10,7 +10,7 @@ const Button = ({label, disabled, ...rest}: ButtonProps) => { `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 `; + focus:ring-grey-200 `; btnClass += disabled? 'bg-light_grey text-grey' : 'bg-primary text-white'; return ( + focus:ring focus:ring-blue-200'>인증 완료 ) : ( )} @@ -88,7 +88,7 @@ const FindIdPage = () => { @@ -102,7 +102,7 @@ const FindIdPage = () => { ) : ( + text-[18px]'>확인 ) } diff --git a/src/pages/findId/FindIdResult.tsx b/src/pages/findId/FindIdResult.tsx index b54d447..de41143 100644 --- a/src/pages/findId/FindIdResult.tsx +++ b/src/pages/findId/FindIdResult.tsx @@ -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]'>비밀번호 찾기 @@ -65,7 +65,7 @@ const FindIdResult = () => { From 56e3b5e21fb48f09c9731ebdc35cad27f381f017 Mon Sep 17 00:00:00 2001 From: cla6shade Date: Sat, 16 Dec 2023 11:59:09 +0900 Subject: [PATCH 02/12] Chore: add font: Pretendard Variable --- index.html | 2 ++ tailwind.config.js | 1 + 2 files changed, 3 insertions(+) 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/tailwind.config.js b/tailwind.config.js index b5fb40d..175857e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,6 +8,7 @@ export default { extend: { fontFamily: { 'apple': ['Apple SD Gothic Neo', 'sans-serif'], + 'pretendard': ['Pretendard Variable', 'sans-serif'], }, colors: { 'middle_grey': 'rgba(229, 229, 234, 1)', From 4076dd8954b8accf6a45e136827787916e77cad6 Mon Sep 17 00:00:00 2001 From: cla6shade Date: Sat, 16 Dec 2023 12:46:10 +0900 Subject: [PATCH 03/12] Design: Input design modification MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 기존에 mb-[8px]를 넣어놨었는데 이는 다른 곳에서의 재활용성을 저해하는 요인임 --- src/components/input/Input.tsx | 2 +- src/pages/LoginPage.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) 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 && } ) => { From 4c41d96695eb15dd069083f3d0d7903246a530f0 Mon Sep 17 00:00:00 2001 From: cla6shade Date: Sat, 16 Dec 2023 12:46:36 +0900 Subject: [PATCH 04/12] Design: Login Checkbox MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 추후에 테두리 수정 예정 --- src/components/input/LoginCheckbox.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/input/LoginCheckbox.tsx b/src/components/input/LoginCheckbox.tsx index e790282..78b80af 100644 --- a/src/components/input/LoginCheckbox.tsx +++ b/src/components/input/LoginCheckbox.tsx @@ -16,13 +16,14 @@ const LoginCheckbox = ({checked, onChange, label}: CheckboxProps) => { Date: Sat, 16 Dec 2023 12:46:58 +0900 Subject: [PATCH 05/12] Design: set root font of the document --- src/css/index.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/css/index.css b/src/css/index.css index bffbe76..45a421b 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -2,6 +2,9 @@ @tailwind components; @tailwind utilities; +body { + @apply font-pretendard; +} ::-webkit-scrollbar-track { background: transparent; } From 5734af5b0071ae8bba83a3c887b7b6bacf1138b1 Mon Sep 17 00:00:00 2001 From: cla6shade Date: Sat, 16 Dec 2023 12:47:06 +0900 Subject: [PATCH 06/12] Design: modify color of checkbox --- src/assets/icons/check.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 @@ - + From 6823617248cd6c2460f5c482d2f15da61a88c937 Mon Sep 17 00:00:00 2001 From: cla6shade Date: Sat, 16 Dec 2023 12:50:12 +0900 Subject: [PATCH 07/12] Feat: Smaller Button Component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 기존에 사용되던 버튼의 작은 버전을 만들었습니다. Button에다가 height를 지정할 수 있도록 할까 생각도 해봤는데 별로 땡기지 않아서 그냥 이렇게 해봤습니다. --- src/components/button/Button.tsx | 10 ++-------- src/components/button/ButtonProps.ts | 7 +++++++ src/components/button/SmallButton.tsx | 17 +++++++++++++++++ 3 files changed, 26 insertions(+), 8 deletions(-) create mode 100644 src/components/button/ButtonProps.ts create mode 100644 src/components/button/SmallButton.tsx diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx index 8804d5d..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 `; + text-[18px] focus:outline-none focus:ring-grey-200 `; btnClass += disabled? 'bg-light_grey text-grey' : 'bg-primary text-white'; return ( + ); +}; + +export default SmallButton; From bc68f470396cd7e3609b0e73d3bb6d25bd72154b Mon Sep 17 00:00:00 2001 From: cla6shade Date: Sat, 16 Dec 2023 12:55:50 +0900 Subject: [PATCH 08/12] Design: Apply modifications of components --- src/pages/findId/FindIdPage.tsx | 42 +++++++++++-------------------- src/pages/findId/FindIdResult.tsx | 4 +-- 2 files changed, 16 insertions(+), 30 deletions(-) diff --git a/src/pages/findId/FindIdPage.tsx b/src/pages/findId/FindIdPage.tsx index 3ba7078..9f8ae4f 100644 --- a/src/pages/findId/FindIdPage.tsx +++ b/src/pages/findId/FindIdPage.tsx @@ -7,6 +7,7 @@ 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'; const FindIdPage = () => { const [/* name */, setName] = useState(''); @@ -46,7 +47,7 @@ const FindIdPage = () => {

이메일

-
+
) => { @@ -55,19 +56,12 @@ const FindIdPage = () => { limitInputNumber(e, 10); }}>
-
- {isConfirmed ? ( - ) : ( - - )} +
+ {isConfirmed ? + () : + ( setIsSended(true)}/>)}
@@ -85,26 +79,18 @@ const FindIdPage = () => { }}>
- + setIsConfirmed(true)} + />
)}
- { - isConfirmed ? ( - - ) : ( - - ) - } +
) diff --git a/src/pages/findId/FindIdResult.tsx b/src/pages/findId/FindIdResult.tsx index de41143..e974fcc 100644 --- a/src/pages/findId/FindIdResult.tsx +++ b/src/pages/findId/FindIdResult.tsx @@ -28,7 +28,7 @@ const FindIdResult = () => { -
+
@@ -58,7 +58,7 @@ const FindIdResult = () => {
-
+
From 16307a0a0163dd9deaf0e3183541f48bad83d54e Mon Sep 17 00:00:00 2001 From: cla6shade Date: Sat, 16 Dec 2023 13:40:01 +0900 Subject: [PATCH 09/12] Design: Apply letter-spacing --- src/css/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/index.css b/src/css/index.css index 45a421b..4965552 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -3,7 +3,7 @@ @tailwind utilities; body { - @apply font-pretendard; + @apply font-pretendard tracking-[-.025rem]; } ::-webkit-scrollbar-track { background: transparent; From ab7f619c9e1bfbae65e222fffc51fee8f31e8c7b Mon Sep 17 00:00:00 2001 From: cla6shade Date: Sat, 16 Dec 2023 13:40:27 +0900 Subject: [PATCH 10/12] Feat: PageCaption Component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 페이지 캡션(페이지 제목 등)을 작성할 때 필요한 컴포넌트 작성 --- src/components/text/PageCaption.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/components/text/PageCaption.tsx 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; From 235ae863fb273e7b999a0fb2813fb2587f4f0368 Mon Sep 17 00:00:00 2001 From: cla6shade Date: Sat, 16 Dec 2023 13:43:07 +0900 Subject: [PATCH 11/12] Feat: Add PageCaption Component --- src/components/button/SmallButton.tsx | 2 +- src/pages/findId/FindIdPage.tsx | 14 ++++---- src/pages/register/steps/Authorization.tsx | 33 +++++++++++-------- src/pages/register/steps/InformationInput.tsx | 6 ++-- src/pages/register/steps/TypeSelection.tsx | 8 ++--- src/pages/register/steps/UserAgreement.tsx | 8 ++--- 6 files changed, 35 insertions(+), 36 deletions(-) diff --git a/src/components/button/SmallButton.tsx b/src/components/button/SmallButton.tsx index 6c02278..2c043e3 100644 --- a/src/components/button/SmallButton.tsx +++ b/src/components/button/SmallButton.tsx @@ -2,7 +2,7 @@ import ButtonProps from '@components/button/ButtonProps.ts'; const SmallButton = ({label, disabled, ...rest}: ButtonProps) => { let btnClass = - `h-[40px] px-5 rounded-md + `h-[40px] px-4 rounded-md transition duration-300 ease-in-out hover:bg-primary-transition text-[15px] focus:outline-none focus:ring-grey-200 `; btnClass += disabled? 'bg-light_grey text-grey' : 'bg-primary text-white'; diff --git a/src/pages/findId/FindIdPage.tsx b/src/pages/findId/FindIdPage.tsx index 9f8ae4f..16fd88b 100644 --- a/src/pages/findId/FindIdPage.tsx +++ b/src/pages/findId/FindIdPage.tsx @@ -8,6 +8,7 @@ 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(''); @@ -28,13 +29,10 @@ const FindIdPage = () => { isSuccesed ? ( ) : ( -
-
-

아이디를 찾기 위해

-

본인 인증을 진행해 주세요.

-
-
-
+
+ +
+

이름

) => { @@ -87,7 +85,7 @@ const FindIdPage = () => {
)}
-
+