Skip to content

Commit c2687e8

Browse files
su-bin99rdd9223
su-bin99
authored and
rdd9223
committed
Refactor: join페이지 nextjs로 이동
1 parent 81619a4 commit c2687e8

10 files changed

Lines changed: 829 additions & 0 deletions

File tree

‎components/organisms/InterestModal/index.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { Modal } from 'components/atoms';
2+
import React from 'react';
3+
import { interestList } from 'resources/string';
4+
import { InterestButton, InterestButtonWrapper, ModalButton, ModalLabel, ModalWrapper } from './style';
5+
6+
interface IProps {
7+
isInterestModalOpen: boolean;
8+
setIsInterestModalOpen: (value: boolean) => void;
9+
handleInterestOnClick: (interest: string) => void;
10+
selectedInterest: string[];
11+
modalBtnHandler: () => void;
12+
}
13+
14+
function InterestModal({
15+
isInterestModalOpen,
16+
setIsInterestModalOpen,
17+
handleInterestOnClick,
18+
selectedInterest,
19+
modalBtnHandler,
20+
}: IProps): React.ReactElement {
21+
return (
22+
<Modal isOpen={isInterestModalOpen} setIsOpen={setIsInterestModalOpen} isBlur={true}>
23+
<ModalWrapper>
24+
<ModalLabel>관심있는 분야를 5개 선택해 주세요</ModalLabel>
25+
<InterestButtonWrapper>
26+
{interestList.map((interest, id) => {
27+
const handleOnClick = () => {
28+
handleInterestOnClick(interest);
29+
};
30+
return (
31+
<InterestButton
32+
key={id}
33+
onClick={handleOnClick}
34+
order={
35+
interest == selectedInterest[0]
36+
? 0
37+
: interest == selectedInterest[1]
38+
? 1
39+
: interest == selectedInterest[2]
40+
? 2
41+
: interest == selectedInterest[3]
42+
? 3
43+
: interest == selectedInterest[4]
44+
? 4
45+
: -1
46+
}
47+
>
48+
{interest}
49+
</InterestButton>
50+
);
51+
})}
52+
</InterestButtonWrapper>
53+
<ModalButton
54+
selectedInterest={selectedInterest}
55+
disabled={selectedInterest.length > 0 ? false : true}
56+
onClick={modalBtnHandler}
57+
>
58+
<div>확인 ({selectedInterest.length}/5)</div>
59+
</ModalButton>
60+
</ModalWrapper>
61+
</Modal>
62+
);
63+
}
64+
65+
export default InterestModal;

‎components/organisms/InterestModal/style.ts‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { Button, Label } from 'components/atoms';
2+
import Styled, { css } from 'styled-components';
3+
import { palette, theme } from 'styled-tools';
4+
5+
export const InterestButtonWrapper = Styled.div`
6+
display : flex;
7+
flex-direction : row;
8+
justify-content : center;
9+
flex-wrap: wrap;
10+
`;
11+
12+
export const InterestButton = Styled(Button)<{ order: number }>`
13+
${theme('font.subhead4')}
14+
border: solid 1px ${palette('grayscale', 4)};
15+
${(props) =>
16+
props.order == 0
17+
? css`
18+
background-color: ${palette('primary', 0)};
19+
border-color: ${palette('primary', 0)};
20+
`
21+
: props.order == 1
22+
? css`
23+
background-color: ${palette('primary', 3)};
24+
border-color: ${palette('primary', 3)};
25+
`
26+
: props.order == 2
27+
? css`
28+
background-color: ${palette('primary', 2)};
29+
border-color: ${palette('primary', 2)};
30+
`
31+
: props.order == 3
32+
? css`
33+
background-color: ${palette('primary', 5)};
34+
border-color: ${palette('primary', 5)};
35+
`
36+
: props.order == 4
37+
? css`
38+
background-color: ${palette('primary', 4)};
39+
border-color: ${palette('primary', 4)};
40+
`
41+
: css`
42+
background-color: ${palette('grayscale', 0)};
43+
border-color: ${palette('grayscale', 4)};
44+
`}};
45+
padding : 12px 30px;
46+
margin : 12px 5px;
47+
height : 48px;
48+
border-radius: 60px;
49+
${(props) =>
50+
props.order == -1
51+
? css`
52+
color: ${palette('grayscale', 4)};
53+
`
54+
: css`
55+
color: ${palette('grayscale', 0)};
56+
`};
57+
;
58+
`;
59+
60+
export const ModalButton = Styled(Button)<{ selectedInterest: string[] }>`
61+
width: 406px;
62+
height: 60px;
63+
padding: 19px 172px 19px 170px;
64+
border-radius: 4px;
65+
background-color : ${palette('grayscale', 1)};
66+
${theme('font.subhead3')}
67+
color : ${palette('grayscale', 0)};
68+
margin-top : 38px;
69+
${(props) =>
70+
props.selectedInterest.length > 0
71+
? css`
72+
background-color: ${palette('grayscale', 9)};
73+
`
74+
: css`
75+
background-color: ${palette('grayscale', 1)};
76+
`};
77+
`;
78+
79+
export const ModalLabel = Styled(Label)`
80+
${theme('font.h1')}
81+
color : ${palette('grayscale', 9)};
82+
margin-bottom : 38px;
83+
`;
84+
85+
export const ModalWrapper = Styled.div`
86+
position : fixed;
87+
top : 0;
88+
left : 0;
89+
right : 0;
90+
bottom : 0;
91+
margin : auto;
92+
width : 1030px;
93+
height : 614px;
94+
border-radius: 16px;
95+
padding: 40px 90px;
96+
box-shadow: -4px 11px 24px 0 rgba(13, 12, 63, 0.1);
97+
background-color : ${palette('grayscale', 0)};
98+
display : flex;
99+
flex-direction : column;
100+
align-items : center;
101+
`;

‎components/organisms/JoinCheck/index.tsx‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import { CheckAllOffIcon, CheckAllOnIcon, CheckOffIcon, CheckOnIcon, ModalCloseIcon } from 'public/assets/images';
2+
import { Button, Modal } from 'components/atoms';
3+
import React, { useEffect, useState } from 'react';
4+
import { IUserDataType } from 'types/user.type';
5+
import {
6+
BiggerCheckBox,
7+
BiggerLabel,
8+
CheckAllImg,
9+
CheckImg,
10+
CloseImage,
11+
Content,
12+
FlexContainer,
13+
Label,
14+
Line,
15+
ModalContainer,
16+
MoreBtn,
17+
PolicyCheck,
18+
SmallerCheckBox,
19+
Titie,
20+
Wrapper,
21+
} from './style';
22+
23+
export interface IProps {
24+
className?: string;
25+
setUserData: (value: IUserDataType) => void;
26+
userData: IUserDataType;
27+
}
28+
29+
function JoinCheck({ setUserData, userData }: IProps): React.ReactElement {
30+
const [checkAll, setCheckAll] = useState(false);
31+
const [isChecked, setIsChecked] = useState({
32+
check1: false,
33+
check2: false,
34+
check3: false,
35+
});
36+
const [isPolicyOpen, setIsPolicyOpen] = useState(false);
37+
const handleCheckAll = (): void => {
38+
if (!checkAll) {
39+
setCheckAll(true);
40+
setIsChecked({
41+
check1: true,
42+
check2: true,
43+
check3: true,
44+
});
45+
}
46+
if (checkAll) {
47+
setCheckAll(false);
48+
setIsChecked({
49+
check1: false,
50+
check2: false,
51+
check3: false,
52+
});
53+
}
54+
};
55+
const handleCheck = (e: React.ChangeEvent<HTMLInputElement>): void => {
56+
switch (e.target.name) {
57+
case 'policy1':
58+
setIsChecked({
59+
...isChecked,
60+
check1: !isChecked.check1,
61+
});
62+
break;
63+
case 'policy2':
64+
setIsChecked({
65+
...isChecked,
66+
check2: !isChecked.check2,
67+
});
68+
break;
69+
case 'policy3':
70+
setIsChecked({
71+
...isChecked,
72+
check3: !isChecked.check3,
73+
});
74+
break;
75+
}
76+
};
77+
const modalHandler = (): void => {
78+
setIsPolicyOpen(!isPolicyOpen);
79+
};
80+
81+
useEffect(() => {
82+
setUserData({ ...userData, marpolicy: isChecked.check3 });
83+
}, [isChecked.check3]);
84+
useEffect(() => {
85+
if (isChecked.check1 && isChecked.check2) {
86+
setUserData({ ...userData, policyMust: true });
87+
} else {
88+
setUserData({ ...userData, policyMust: false });
89+
}
90+
}, [isChecked.check1, isChecked.check2]);
91+
useEffect(() => {
92+
if (isChecked.check1 && isChecked.check2 && isChecked.check3) setCheckAll(true);
93+
else setCheckAll(false);
94+
}, [isChecked.check1, isChecked.check2, isChecked.check3]);
95+
96+
interface Policy {
97+
title: string;
98+
content: string;
99+
}
100+
101+
const policyList: Policy[] = [
102+
{
103+
//리스트 인덱스에 따라 내용다르게,
104+
//content 꾸미는건 내용 확정돼서 나오면 그때 수정할 것
105+
title: '서비스 이용약관',
106+
content: `*제1조(목적)
107+
108+
본 약관은 디긴 투자정보서비스 (이하 회사라고 합니다)가 제공하는 인터넷 기반의 모바일 어플리케이션 디긴(DIGIN) 서비스의 이용과 관련하여 회원과 회사 간에 필요한 사항을 규정하기 위함을 목적으로 합니다.
109+
110+
*제2조(용어의 정의)
111+
112+
① 본 약관에서 사용하는 용어의 정의는 다음과 같습니다.
113+
1. “서비스”라 함은 회사가 개발하여 인터넷을 통하여 서비스하고 있는 서비스 및 기타 서비스 일체를 의미합니다.
114+
2. “회원”이라 함은 회사가 운영하는 사이트에 접속하여 본 약관에 동의하고 회원 가입을 한 자로서, 회사와 서비스 이용 계약을 체결하고 서비스 이용 아이디와 비밀번호를 부여 받아 서비스를 이용하는 고객을 말합니다.
115+
3. "아이디"라 함은 회원의 식별과 회원의 서비스 이용을 위하여 "회원"이 가입 시 사용한 이메일 주소를 말한다.
116+
② 본 약관에서 사용하는 용어의 정의에 대하여 본 조 제1항에서 정하는 것을 제외하고는 관계법령 및 서비스별 정책에서 정하는 바에 의하며, 관계법령과 서비스별 정책에서 정하지 아니한 것은 일반적인 상관례에 의합니다.
117+
118+
*제3조(약관의 게시와 개정)
119+
120+
① 회사는 본 약관의 내용을 회원이 쉽게 확인할 수 있도록 서비스 내 또는 연결화면을 통하여 게시합니다.
121+
① 회사는 본 약관의 내용을 회원이 쉽게 확인할 수 있도록 서비스 내 또는 연결화면을 통하여 게시합니다.
122+
① 회사는 본 약관의 내용을 회원이 쉽게 확인할 수 있도록 서비스 내 또는 연결화면을 통하여 게시합니다.
123+
`,
124+
},
125+
];
126+
127+
return (
128+
<Wrapper>
129+
<div>
130+
<FlexContainer>
131+
<BiggerCheckBox checked={checkAll} onChange={handleCheckAll} id="policyAll" />
132+
<BiggerLabel htmlFor="policyAll">
133+
<CheckAllImg src={checkAll ? CheckAllOnIcon : CheckAllOffIcon} />
134+
전체 동의 (선택 정보 포함)
135+
</BiggerLabel>
136+
</FlexContainer>
137+
<Line />
138+
<PolicyCheck>
139+
<FlexContainer>
140+
<SmallerCheckBox checked={isChecked.check1} name="policy1" onChange={handleCheck} id="policy1" />
141+
<Label htmlFor="policy1">
142+
<CheckImg src={isChecked.check1 ? CheckOnIcon : CheckOffIcon} />
143+
(필수) 서비스 이용약관 동의
144+
</Label>
145+
</FlexContainer>
146+
<MoreBtn onClick={modalHandler}>보기</MoreBtn>
147+
</PolicyCheck>
148+
<PolicyCheck>
149+
<FlexContainer>
150+
<SmallerCheckBox checked={isChecked.check2} name="policy2" onChange={handleCheck} id="policy2" />
151+
<Label htmlFor="policy2">
152+
<CheckImg src={isChecked.check2 ? CheckOnIcon : CheckOffIcon} />
153+
(필수) 개인정보 수집 이용 동의
154+
</Label>
155+
</FlexContainer>
156+
<MoreBtn onClick={modalHandler}>보기</MoreBtn>
157+
</PolicyCheck>
158+
<PolicyCheck>
159+
<FlexContainer>
160+
<SmallerCheckBox checked={isChecked.check3} name="policy3" onChange={handleCheck} id="policy3" />
161+
<Label htmlFor="policy3">
162+
<CheckImg src={isChecked.check3 ? CheckOnIcon : CheckOffIcon} />
163+
(선택) 광고성 정보 수신 및 마케팅 활용 동의
164+
</Label>
165+
</FlexContainer>
166+
<MoreBtn onClick={modalHandler}>보기</MoreBtn>
167+
</PolicyCheck>
168+
</div>
169+
<Modal isOpen={isPolicyOpen} setIsOpen={setIsPolicyOpen} isBlur={true}>
170+
<ModalContainer>
171+
<Button onClick={modalHandler}>
172+
<CloseImage src={ModalCloseIcon}></CloseImage>
173+
</Button>
174+
<Titie>{policyList[0].title}</Titie>
175+
<Content>{policyList[0].content}</Content>
176+
</ModalContainer>
177+
</Modal>
178+
</Wrapper>
179+
);
180+
}
181+
182+
export default JoinCheck;

0 commit comments

Comments
 (0)