From 61aef56fe552a9066618e497f04f5e33ab31d8d2 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Fri, 19 Jan 2024 21:23:11 +0900 Subject: [PATCH 1/6] =?UTF-8?q?asset:=20checkbox=20svg=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20#92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/icons/checkbox.svg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 public/assets/icons/checkbox.svg diff --git a/public/assets/icons/checkbox.svg b/public/assets/icons/checkbox.svg new file mode 100644 index 00000000..793c42ef --- /dev/null +++ b/public/assets/icons/checkbox.svg @@ -0,0 +1,4 @@ + + + + From dc47a87b3e6c8cdff0bf3a51f62701379dc2a3df Mon Sep 17 00:00:00 2001 From: seoyeong Date: Fri, 19 Jan 2024 21:26:43 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20checkbox=20icon=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20#92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/icons/Checkbox.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/components/icons/Checkbox.tsx diff --git a/src/components/icons/Checkbox.tsx b/src/components/icons/Checkbox.tsx new file mode 100644 index 00000000..e19e6f16 --- /dev/null +++ b/src/components/icons/Checkbox.tsx @@ -0,0 +1,19 @@ +import { Colors, colors } from '@styles/colorPalette'; + +interface CheckboxProps { + size?: number + color?: Colors +} + +function Checkbox({ + size = 19, color = 'gray100', +}:CheckboxProps) { + return ( + + + + + ); +} + +export default Checkbox; From 58833d19ac2975261c603b175fdc684645f5a9a7 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Fri, 19 Jan 2024 21:27:31 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20required-password=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=9C=EC=9E=91=20#92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/required-password/layout.tsx | 7 ++++ src/app/required-password/page.tsx | 53 ++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 src/app/required-password/layout.tsx create mode 100644 src/app/required-password/page.tsx diff --git a/src/app/required-password/layout.tsx b/src/app/required-password/layout.tsx new file mode 100644 index 00000000..5125a43f --- /dev/null +++ b/src/app/required-password/layout.tsx @@ -0,0 +1,7 @@ +function RequiredPasswordLayout({ children }: { children: React.ReactNode }) { + return ( +
{children}
+ ); +} + +export default RequiredPasswordLayout; diff --git a/src/app/required-password/page.tsx b/src/app/required-password/page.tsx new file mode 100644 index 00000000..a740bfcb --- /dev/null +++ b/src/app/required-password/page.tsx @@ -0,0 +1,53 @@ +/* eslint-disable @typescript-eslint/no-misused-promises */ + +'use client'; + +import { FieldValues, useForm } from 'react-hook-form'; + +import { useRouter } from 'next/navigation'; + +import Button from '@components/shared/button/Button'; +import Header from '@components/shared/header/Header'; +import Spacing from '@components/shared/spacing/Spacing'; +import TextField from '@components/shared/text-field/TextField'; +import Title from '@components/shared/title/Title'; +import VALIDATION_MESSAGE_MAP from '@constants/validationMessage'; + +function RequiredPasswordPage() { + const router = useRouter(); + const { register, handleSubmit, formState: { dirtyFields } } = useForm(); + + const onSubmit = (data: FieldValues) => { + const { password } = data; + // eslint-disable-next-line no-console + console.log(password); + + // API 호출 등의 비동기 작업 수행 + // 성공적인 경우 페이지 이동 + router.push('/withdraw'); + }; + + return ( + <> +
+ +
+ + <Spacing size={30} /> + <TextField + label="비밀번호" + required + placeholder="비밀번호" + {...register('password', { required: true })} + helpMessage={VALIDATION_MESSAGE_MAP.confirmPassword.message} + /> + <Spacing size={40} /> + <Button type="submit" disabled={!dirtyFields.password} size="medium" full> + 확인 + </Button> + </form> + </> + ); +} + +export default RequiredPasswordPage; From 4d0d02fe84445c2c26042b2afeee725fb842014c Mon Sep 17 00:00:00 2001 From: seoyeong <bsy0313@gmail.com> Date: Fri, 19 Jan 2024 21:28:09 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=ED=83=88?= =?UTF-8?q?=ED=87=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=9C=EC=9E=91=20?= =?UTF-8?q?#92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/withdraw/layout.tsx | 7 ++++ src/app/withdraw/page.tsx | 83 +++++++++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+) create mode 100644 src/app/withdraw/layout.tsx create mode 100644 src/app/withdraw/page.tsx diff --git a/src/app/withdraw/layout.tsx b/src/app/withdraw/layout.tsx new file mode 100644 index 00000000..08ed9df8 --- /dev/null +++ b/src/app/withdraw/layout.tsx @@ -0,0 +1,7 @@ +function WithdrawLayout({ children }: { children: React.ReactNode }) { + return ( + <div style={{ padding: '0 24px' }}>{children}</div> + ); +} + +export default WithdrawLayout; diff --git a/src/app/withdraw/page.tsx b/src/app/withdraw/page.tsx new file mode 100644 index 00000000..4e980c1e --- /dev/null +++ b/src/app/withdraw/page.tsx @@ -0,0 +1,83 @@ +/* eslint-disable jsx-a11y/label-has-associated-control */ + +'use client'; + +import { useState } from 'react'; + +import classNames from 'classnames/bind'; + +import Checkbox from '@components/icons/Checkbox'; +import Button from '@components/shared/button/Button'; +import Header from '@components/shared/header/Header'; +import Spacing from '@components/shared/spacing/Spacing'; +import Title from '@components/shared/title/Title'; +import useModal from '@contexts/ModalContext'; + +import styles from './page.module.scss'; + +const cx = classNames.bind(styles); + +function WithdrawPage() { + const [isChecked, setIsChecked] = useState(false); + const { open } = useModal(); + + // 모달에서는 회원탈퇴 로직 처리 + const handleWithdrawal = () => { + open({ + title: '회원 탈퇴', + description: '회원을 탈퇴하면 차량용품 추천 서비스를 제공받을 수 없습니다. 정말로 탈퇴하시겠습니까?', + topButtonLabel: '예', + bottomButtonLabel: '아니오', + onTopButtonClick: () => { + // 회원탈퇴 + }, + onBottomButtonClick: () => { + // 모달닫기 + }, + }); + }; + + return ( + <> + <Header isDisplayLogo={false} /> + <Spacing size={30} /> + <main className={cx('mainContainer')}> + <Title title="회원탈퇴" /> + <Spacing size={70} /> + <div className={cx('withdrawalAgreement')}> + 국정의 중요한 사항에 관한 대통령의 자문에 응하기 위하여 국가원로로 구성되는 국가원로자문회의를 둘 수 있다. + 국교는 인정되지 아니하며, 종교와 정치는 분리된다. + 행정권은 대통령을 수반으로 하는 정부에 속한다. + 법률이 정하는 주요방위산업체에 종사하는 근로자의 단체행동권은 법률이 정하는 바에 의하여 이를 제한하거나 인정하지 아니할 수 있다. + + 이 헌법공포 당시의 국회의원의 임기는 제1항에 의한 국회의 최초의 집회일 전일까지로 한다. + 누구든지 체포 또는 구속을 당한 때에는 적부의 심사를 법원에 청구할 권리를 가진다. + 헌법재판소의 조직과 운영 기타 필요한 사항은 법률로 정한다. + 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다. + + 타인의 범죄행위로 인하여 생명·신체에 대한 피해를 받은 국민은 법률이 정하는 바에 의하여 + 국가로부터 구조를 받을 수 있다. 감사원은 원장을 포함한 5인 이상 11인 이하의 감사위원으로 구성한다. + 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. + 누구든지 병역의무의 이행으로 인하여 불이익한 처우를 받지 아니한다. + + 정기회의 회기는 100일을, 임시회의 회기는 30일을 초과할 수 없다. + 법률이 헌법에 위반되는 여부가 재판의 전제가 된 경우에는 법원은 헌법재판소에 제청하여 그 심판에 의하여 재판한다. + 연소자의 근로는 특별한 보호를 받는다. + 대통령·국무총리·국무위원·행정각부의 장·헌법재판소 재판관·법관·중앙선거관리위원회 위원·감사원장·감사위원 + 기타 법률이 정한 공무원이 그 직무집행에 있어서 헌법이나 법률을 위배한 때에는 국회는 탄핵의 소추를 의결할 수 있다. + </div> + <input type="checkbox" id="agree" onClick={() => { return setIsChecked((prev) => { return !prev; }); }} /> + <label htmlFor="agree"> + <Checkbox color={isChecked ? 'primary' : 'gray100'} /> + 약관을 모두 확인하였으며 이에 동의합니다. + </label> + <Spacing size={110} /> + <Button disabled={!isChecked} onClick={handleWithdrawal} full> + 회원 탈퇴하기 + </Button> + </main> + </> + ); +} + +export default WithdrawPage; From 048678613902a86c684e63ad711551b6fa05c7a3 Mon Sep 17 00:00:00 2001 From: seoyeong <bsy0313@gmail.com> Date: Fri, 19 Jan 2024 21:28:27 +0900 Subject: [PATCH 5/6] =?UTF-8?q?design:=20=ED=9A=8C=EC=9B=90=ED=83=88?= =?UTF-8?q?=ED=87=B4=20CSS=20=EA=B5=AC=ED=98=84=20#92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/withdraw/page.module.scss | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/app/withdraw/page.module.scss diff --git a/src/app/withdraw/page.module.scss b/src/app/withdraw/page.module.scss new file mode 100644 index 00000000..0bdae00e --- /dev/null +++ b/src/app/withdraw/page.module.scss @@ -0,0 +1,24 @@ +.mainContainer { + .withdrawalAgreement { + box-sizing: border-box; + height: 250px; + margin-bottom: 15px; + padding: 16px 8px; + overflow: scroll; + border: 1px solid var(--gray-100); + border-radius: 10px; + color: var(--tertiary); + font-size: 14px; + } + + input { + display: none; + } + + label { + display: flex; + align-items: center; + font-size: 14px; + gap: 7px; + } +} From 33339cb79a28050c0ec2273f4c39b247fb7f9726 Mon Sep 17 00:00:00 2001 From: seoyeong <bsy0313@gmail.com> Date: Sat, 20 Jan 2024 12:28:53 +0900 Subject: [PATCH 6/6] =?UTF-8?q?refactor:=20=EC=BB=A8=EB=B2=A4=EC=85=98?= =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=88=98=EC=A0=95=20#92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/required-password/page.tsx | 10 +++++----- src/app/withdraw/page.tsx | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/app/required-password/page.tsx b/src/app/required-password/page.tsx index a740bfcb..9dff0a45 100644 --- a/src/app/required-password/page.tsx +++ b/src/app/required-password/page.tsx @@ -6,12 +6,12 @@ import { FieldValues, useForm } from 'react-hook-form'; import { useRouter } from 'next/navigation'; -import Button from '@components/shared/button/Button'; -import Header from '@components/shared/header/Header'; -import Spacing from '@components/shared/spacing/Spacing'; -import TextField from '@components/shared/text-field/TextField'; -import Title from '@components/shared/title/Title'; import VALIDATION_MESSAGE_MAP from '@constants/validationMessage'; +import Button from '@shared/button/Button'; +import Header from '@shared/header/Header'; +import Spacing from '@shared/spacing/Spacing'; +import TextField from '@shared/text-field/TextField'; +import Title from '@shared/title/Title'; function RequiredPasswordPage() { const router = useRouter(); diff --git a/src/app/withdraw/page.tsx b/src/app/withdraw/page.tsx index 4e980c1e..f39b81e9 100644 --- a/src/app/withdraw/page.tsx +++ b/src/app/withdraw/page.tsx @@ -7,11 +7,11 @@ import { useState } from 'react'; import classNames from 'classnames/bind'; import Checkbox from '@components/icons/Checkbox'; -import Button from '@components/shared/button/Button'; -import Header from '@components/shared/header/Header'; -import Spacing from '@components/shared/spacing/Spacing'; -import Title from '@components/shared/title/Title'; import useModal from '@contexts/ModalContext'; +import Button from '@shared/button/Button'; +import Header from '@shared/header/Header'; +import Spacing from '@shared/spacing/Spacing'; +import Title from '@shared/title/Title'; import styles from './page.module.scss';