Skip to content

Commit db3eebb

Browse files
gihwan-devgihwan-dev
authored
Merge pull request #153 from imaginer-dev/124-회원가입-시-인증서-확인하는-페이지에서-체크-검증을-할-수-있다
124 회원가입 시 인증서 확인하는 페이지에서 체크 검증을 할 수 있다
2 parents b60215d + 0391ece commit db3eebb

11 files changed

+382
-64
lines changed

‎src/components/Join/JoinButton.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@ const JoinButton = () => {
7575
phone,
7676
email,
7777
password,
78-
pwCheck: '',
79-
useTermsCheck: false,
80-
privacyTermsCheck: false,
78+
pwCheck: pwCheck,
79+
useTermsCheck: true,
80+
privacyTermsCheck: true,
8181
},
8282
{
8383
onError: (error) => {
@@ -95,7 +95,7 @@ const JoinButton = () => {
9595

9696
return (
9797
<>
98-
<button type={'submit'} onClick={onClick} className="btn btn-outline btn-primary w-full">
98+
<button type={'button'} onClick={onClick} className="btn btn-outline btn-primary w-full">
9999
회원가입 하기
100100
</button>
101101
<Dialog ref={dialogRef} desc={dialogMessage}></Dialog>

‎src/components/Join/TermsCheckInput.tsx‎

Lines changed: 72 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,79 @@
1-
import { useJoinState } from '../../stores/joinStore.ts';
1+
import { useJoinState } from '@/stores/joinStore';
2+
import { useEffect, useRef, useState } from 'react';
3+
import Dialog from '../common/Dialog';
4+
import { PersonalInfoPage, UseConditionPage } from '@/pages/Policy';
25

36
const TermsCheckInput = () => {
4-
const { useTermsCheck, privacyTermsCheck, useTermsCheckHandler, privacyTermsCheckHandler } = useJoinState();
7+
interface DialogElement {
8+
openModal: () => void;
9+
closeModal: () => void;
10+
}
11+
12+
const [dialogMessage, setDialogMessage] = useState('');
13+
const { useTermsCheck, privacyTermsCheck } = useJoinState();
14+
const dialogRef = useRef<DialogElement | null>(null);
15+
16+
const useTermsClick = () => {
17+
setDialogMessage('이용약관 동의');
18+
dialogRef.current?.openModal();
19+
};
20+
21+
const privacyTermsClick = () => {
22+
setDialogMessage('개인정보 수집, 이용 동의');
23+
dialogRef.current?.openModal();
24+
};
25+
26+
useEffect(() => {
27+
dialogRef.current?.closeModal();
28+
}, [useTermsCheck, privacyTermsCheck]);
529

630
return (
7-
<label className="form-control mb-9 mt-5 w-full">
8-
<div className="flex flex-col">
9-
<label className="font-bold">약관 동의</label>
10-
</div>
11-
<div className="mt-2 flex items-center justify-between">
12-
<label htmlFor="termsOne">이용약관 동의 (필수)</label>
13-
<input
14-
type="radio"
15-
className="radio-primary radio"
16-
checked={useTermsCheck}
17-
onClick={useTermsCheckHandler}
18-
readOnly
19-
/>
20-
</div>
21-
{!useTermsCheck ? <span className="text-red-500">이용약관에 동의해 주세요.</span> : <span className="h-6"></span>}
22-
<div className="mt-2 flex items-center justify-between">
23-
<label htmlFor="termsTwo">개인정보 수집, 이용 동의 (필수)</label>
24-
<input
25-
type="radio"
26-
className="radio-primary radio"
27-
checked={privacyTermsCheck}
28-
onClick={privacyTermsCheckHandler}
29-
readOnly
30-
/>
31-
</div>
32-
{!privacyTermsCheck ? (
33-
<span className="text-red-500">개인정보 수집, 이용에 동의해 주세요.</span>
34-
) : (
35-
<span className="h-6"></span>
36-
)}
37-
</label>
31+
<>
32+
<label className="form-control mb-9 mt-5 w-full">
33+
<div className="flex flex-col">
34+
<label className="font-bold">약관 동의</label>
35+
</div>
36+
<div className="mt-2 flex items-center justify-between">
37+
<label className="hover:underline" htmlFor="termsOne" onClick={useTermsClick}>
38+
이용약관 동의 (필수)
39+
</label>
40+
<input
41+
type="radio"
42+
className="radio-primary radio"
43+
checked={useTermsCheck}
44+
onClick={useTermsClick}
45+
aria-label={'join-useTermsCheck-input'}
46+
readOnly
47+
/>
48+
</div>
49+
{!useTermsCheck ? (
50+
<span className="text-red-500">이용약관에 동의해 주세요.</span>
51+
) : (
52+
<span className="h-6"></span>
53+
)}
54+
<div className="mt-2 flex items-center justify-between">
55+
<label className="hover:underline" htmlFor="termsTwo" onClick={privacyTermsClick}>
56+
개인정보 수집, 이용 동의 (필수)
57+
</label>
58+
<input
59+
type="radio"
60+
className="radio-primary radio"
61+
checked={privacyTermsCheck}
62+
onClick={privacyTermsClick}
63+
aria-label={'join-privacyTermsCheck-input'}
64+
readOnly
65+
/>
66+
</div>
67+
{!privacyTermsCheck ? (
68+
<span className="text-red-500">개인정보 수집, 이용에 동의해 주세요.</span>
69+
) : (
70+
<span className="h-6"></span>
71+
)}
72+
</label>
73+
<Dialog ref={dialogRef} desc={dialogMessage}>
74+
{dialogMessage === '이용약관 동의' ? <UseConditionPage /> : <PersonalInfoPage />}
75+
</Dialog>
76+
</>
3877
);
3978
};
4079

‎src/components/Policy/PolicyButton.tsx‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/components/Policy/PolicyPersonalButton.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { useJoinState } from '@/stores/joinStore';
2+
3+
const PolicyPersonalButton = () => {
4+
const { privacyTermsCheckHandler } = useJoinState();
5+
6+
return (
7+
<div className="absolute bottom-12 w-10/12 md:w-11/12">
8+
<button
9+
type={'button'}
10+
onClick={privacyTermsCheckHandler}
11+
className="btn btn-outline btn-primary m-auto block w-full max-w-md"
12+
>
13+
동의하기
14+
</button>
15+
</div>
16+
);
17+
};
18+
19+
export default PolicyPersonalButton;

‎src/components/Policy/PolicyUseConditionButton.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { useJoinState } from '@/stores/joinStore';
2+
3+
const PolicyUseConditionButton = () => {
4+
const { useTermsCheckHandler } = useJoinState();
5+
6+
return (
7+
<div className="absolute bottom-12 w-10/12 md:w-11/12">
8+
<button
9+
type={'button'}
10+
onClick={useTermsCheckHandler}
11+
className="btn btn-outline btn-primary m-auto block w-full max-w-md"
12+
>
13+
동의하기
14+
</button>
15+
</div>
16+
);
17+
};
18+
19+
export default PolicyUseConditionButton;

‎src/layouts/PolicyPageLayout.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { FC, ReactNode } from 'react';
2-
import PolicyButton from '../components/Policy/PolicyButton';
3-
import HistoryBackButton from '../components/common/HistoryBackButton';
2+
import PolicyPersonalButton from '../components/Policy/PolicyPersonalButton';
43

54
interface Props {
65
children: ReactNode;
@@ -10,11 +9,10 @@ interface Props {
109
const PolicyPageLayout: FC<Props> = ({ children, title }) => {
1110
return (
1211
<main className={'relative m-auto h-screen w-fit p-8'}>
13-
<HistoryBackButton />
1412
<h2 className="my-5 text-xl font-semibold">{title}</h2>
1513
{/* <div className="card h-5/6 max-w-5xl bg-white">{children}</div> */}
1614
<div className="card h-3/4 max-w-5xl bg-white">{children}</div>
17-
<PolicyButton />
15+
<PolicyPersonalButton />
1816
</main>
1917
);
2018
};

‎src/layouts/UseTermsPageLayout.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { FC, ReactNode } from 'react';
2+
import PolicyUseConditionButton from '@/components/Policy/PolicyUseConditionButton';
3+
4+
interface Props {
5+
children: ReactNode;
6+
title: string;
7+
}
8+
9+
const UseTermsPageLayout: FC<Props> = ({ children, title }) => {
10+
return (
11+
<main className={'relative m-auto h-screen w-fit p-8'}>
12+
<h2 className="my-5 text-xl font-semibold">{title}</h2>
13+
{/* <div className="card h-5/6 max-w-5xl bg-white">{children}</div> */}
14+
<div className="card h-3/4 max-w-5xl bg-white">{children}</div>
15+
<PolicyUseConditionButton />
16+
</main>
17+
);
18+
};
19+
20+
export default UseTermsPageLayout;

‎src/pages/Policy/UseConditionPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { FC } from 'react';
2-
import PolicyPageLayout from '../../layouts/PolicyPageLayout';
32
import PolicyUseCondition from '../../components/Policy/PolicyUseCondition';
3+
import UseTermsPageLayout from '@/layouts/UseTermsPageLayout';
44

55
const UseConditionPage: FC = () => {
66
return (
7-
<PolicyPageLayout title="전자상거래 표준약관">
7+
<UseTermsPageLayout title="전자상거래 표준약관">
88
<PolicyUseCondition />
9-
</PolicyPageLayout>
9+
</UseTermsPageLayout>
1010
);
1111
};
1212

‎src/pages/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@ import LoginPage from './LoginPage';
55
import { NotFound } from './Notfound';
66
import MyCalendarPage from './MyCalendarPage';
77

8-
import * as Policy from './Policy/index';
8+
import * as Policy from './Policy';
99

1010
export { ResetPwPage as ResetPwPage, JoinPage, Loading, LoginPage, NotFound, Policy, MyCalendarPage };

0 commit comments

Comments
 (0)