Skip to content

Commit 796d898

Browse files
yyypearlyyypearl
committed
design(#141): 회원가입 페이지 UX 라이팅 수정 및 버튼 disabled 적용
1 parent 623d9b9 commit 796d898

4 files changed

Lines changed: 46 additions & 42 deletions

File tree

‎src/app/signup/complete/page.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
"use client";
1+
'use client';
22

3-
import Button from "@/components/common/Button";
4-
import Loader, { LoaderContainer } from "@/components/common/Loader";
5-
import NavigatorBar from "@/components/common/NavigatorBar";
6-
import { useRouter, useSearchParams } from "next/navigation";
7-
import { Suspense } from "react";
8-
import styled from "styled-components";
3+
import Button from '@/components/common/Button';
4+
import Loader, { LoaderContainer } from '@/components/common/Loader';
5+
import NavigatorBar from '@/components/common/NavigatorBar';
6+
import { useRouter, useSearchParams } from 'next/navigation';
7+
import { Suspense } from 'react';
8+
import styled from 'styled-components';
99

1010
const Signup = () => {
1111
const router = useRouter();
1212
const searchParams = useSearchParams();
13-
const url = searchParams.get("url");
13+
const url = searchParams.get('url');
1414

1515
const handleButtonClick = () => {
1616
if (url) {
1717
router.push(`/verify/letter?url=${url}`);
1818
} else {
19-
router.push("/onboarding");
19+
router.push('/onboarding');
2020
}
2121
};
2222
return (
@@ -29,7 +29,7 @@ const Signup = () => {
2929
<br /> 레터링에 오신 걸 환영해요
3030
</HeaderTitle>
3131
<HeaderSubTitle>
32-
편지에 담긴 진심으로 나만의 우주를 채워보세요!
32+
편지에 담긴 진심으로 나의 스페이스를 채워보세요!
3333
</HeaderSubTitle>
3434
</Header>
3535
<ImageWrapper>
@@ -39,7 +39,7 @@ const Signup = () => {
3939
<Wrapper>
4040
<Button
4141
buttonType="primary"
42-
text={url ? "나에게 온 편지 열기" : "나의 스페이스에 접속하기"}
42+
text={url ? '나에게 온 편지 열기' : '나의 스페이스에 접속하기'}
4343
onClick={handleButtonClick}
4444
></Button>
4545
</Wrapper>
@@ -72,7 +72,7 @@ const Container = styled.div`
7272
flex-direction: column;
7373
//overflow: scroll;
7474
justify-content: space-between;
75-
background-image: url("/assets/signup/signup_bg.png");
75+
background-image: url('/assets/signup/signup_bg.png');
7676
background-size: cover;
7777
background-position: center;
7878
background-repeat: no-repeat;

‎src/app/signup/page.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use client';
22

3+
import { theme } from '@/styles/theme';
34
import styled from 'styled-components';
45

56
export default function Signup() {
@@ -10,6 +11,6 @@ const Container = styled.div`
1011
display: flex;
1112
min-height: 100%;
1213
padding: 20px;
13-
color: white;
14-
background: #060812;
14+
color: ${theme.colors.white};
15+
background: ${theme.colors.bg};
1516
`;

‎src/app/signup/step1/page.tsx‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
"use client";
1+
'use client';
22

3-
import Button from "@/components/common/Button";
4-
import Check from "@/components/common/Check";
5-
import { Suspense, useState } from "react";
6-
import styled from "styled-components";
7-
import { useRouter, useSearchParams } from "next/navigation";
8-
import NavigatorBar from "@/components/common/NavigatorBar";
9-
import { userInfo } from "@/recoil/signupStore";
10-
import { useRecoilState } from "recoil";
11-
import { links } from "@/styles/theme";
12-
import Loader, { LoaderContainer } from "@/components/common/Loader";
13-
import { useToast } from "@/hooks/useToast";
3+
import Button from '@/components/common/Button';
4+
import Check from '@/components/common/Check';
5+
import { Suspense, useState } from 'react';
6+
import styled from 'styled-components';
7+
import { useRouter, useSearchParams } from 'next/navigation';
8+
import NavigatorBar from '@/components/common/NavigatorBar';
9+
import { userInfo } from '@/recoil/signupStore';
10+
import { useRecoilState } from 'recoil';
11+
import { links } from '@/styles/theme';
12+
import Loader, { LoaderContainer } from '@/components/common/Loader';
13+
import { useToast } from '@/hooks/useToast';
1414

1515
const SignupStep1 = () => {
1616
const router = useRouter();
1717
const { showToast } = useToast();
1818
const searchParams = useSearchParams();
19-
const url = searchParams.get("url");
19+
const url = searchParams.get('url');
2020
const [user, setUser] = useRecoilState(userInfo);
2121
const [isAllChecked, setIsAllChecked] = useState(false);
2222
const [isSerivceChecked, setIsServiceChecked] = useState(false);
@@ -28,34 +28,34 @@ const SignupStep1 = () => {
2828
if (url) {
2929
router.push(`/signup/step2?url=${url}`);
3030
} else {
31-
router.push("/signup/step2");
31+
router.push('/signup/step2');
3232
}
3333

3434
setUser({
3535
...user,
3636
marketingPermission: isMarketingChecked,
3737
servicePermission: isSerivceChecked,
38-
privatePermission: isPersonalChecked,
38+
privatePermission: isPersonalChecked
3939
});
4040
} else {
41-
showToast("필수 항목에 동의해주세요!", {
41+
showToast('필수 항목에 동의해주세요!', {
4242
icon: true,
4343
close: false,
44-
bottom: "120px",
44+
bottom: '120px'
4545
});
4646
}
4747
};
4848

4949
const handleCheckChange = (type: string) => {
5050
switch (type) {
51-
case "all":
51+
case 'all':
5252
const newAllChecked = !isAllChecked;
5353
setIsAllChecked(newAllChecked);
5454
setIsServiceChecked(newAllChecked);
5555
setIsPersonalChecked(newAllChecked);
5656
setIsMarketingChecked(newAllChecked);
5757
break;
58-
case "service":
58+
case 'service':
5959
const newServiceChecked = !isSerivceChecked;
6060
setIsServiceChecked(newServiceChecked);
6161
updateAllChecked(
@@ -64,7 +64,7 @@ const SignupStep1 = () => {
6464
isMarketingChecked
6565
);
6666
break;
67-
case "personal":
67+
case 'personal':
6868
const newPersonalChecked = !isPersonalChecked;
6969
setIsPersonalChecked(newPersonalChecked);
7070
updateAllChecked(
@@ -73,7 +73,7 @@ const SignupStep1 = () => {
7373
isMarketingChecked
7474
);
7575
break;
76-
case "marketing":
76+
case 'marketing':
7777
const newMarketingChecked = !isMarketingChecked;
7878
setIsMarketingChecked(newMarketingChecked);
7979
updateAllChecked(
@@ -113,7 +113,7 @@ const SignupStep1 = () => {
113113
<Check
114114
checkType="box"
115115
checked={isAllChecked}
116-
onChange={() => handleCheckChange("all")}
116+
onChange={() => handleCheckChange('all')}
117117
label="약관 전체 동의"
118118
sublabel="(선택사항 포함)"
119119
/>
@@ -122,7 +122,7 @@ const SignupStep1 = () => {
122122
<Check
123123
checkType="default"
124124
checked={isSerivceChecked}
125-
onChange={() => handleCheckChange("service")}
125+
onChange={() => handleCheckChange('service')}
126126
label="서비스 이용 약관"
127127
sublabel="(필수)"
128128
/>
@@ -137,7 +137,7 @@ const SignupStep1 = () => {
137137
<Check
138138
checkType="default"
139139
checked={isPersonalChecked}
140-
onChange={() => handleCheckChange("personal")}
140+
onChange={() => handleCheckChange('personal')}
141141
label="개인정보 수집 및 이용 동의"
142142
sublabel="(필수)"
143143
/>
@@ -152,7 +152,7 @@ const SignupStep1 = () => {
152152
<Check
153153
checkType="default"
154154
checked={isMarketingChecked}
155-
onChange={() => handleCheckChange("marketing")}
155+
onChange={() => handleCheckChange('marketing')}
156156
label="마케팅 수신 동의"
157157
sublabel="(선택)"
158158
/>
@@ -169,6 +169,7 @@ const SignupStep1 = () => {
169169
<Button
170170
buttonType="primary"
171171
text="다음"
172+
disabled={!isSerivceChecked || !isPersonalChecked}
172173
onClick={handleButtonClick}
173174
></Button>
174175
</Container>

‎src/app/signup/step2/page.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ const SignupStep2 = () => {
103103
isOpen={isBottomUp}
104104
handleOpen={handleBottomUpChange}
105105
onConfirm={handleLoginClick}
106+
confirmText="네, 맞아요"
106107
/>
107108
)}
108109
<MainWrapper>
@@ -111,18 +112,18 @@ const SignupStep2 = () => {
111112
<HeaderTitle>
112113
회원가입을 하기 전
113114
<br />
114-
먼저 본인 인증이 필요해요
115+
먼저 실명 입력이 필요해요
115116
</HeaderTitle>
116117
<HeaderSubTitle>
117-
별명이 아닌 정확한 실명을 입력해주세요
118+
반드시 ‘성+이름’의 실명으로 작성해주세요
118119
</HeaderSubTitle>
119120
</Header>
120121
<InputWrapper>
121122
<Input
122123
inputType="signup"
123124
value={name}
124125
onChange={setName}
125-
placeholder="ex)홍길동"
126+
placeholder="ex) 홍길동"
126127
isValid={isVaild}
127128
isValidChange={setIsVaild}
128129
errorMessage="단독 자음, 모음만 쓸 수 없어요 (ex) ㄱ, ㅏ)"
@@ -136,6 +137,7 @@ const SignupStep2 = () => {
136137
<Button
137138
buttonType="primary"
138139
text="다음"
140+
disabled={!name}
139141
onClick={handleButtonClick}
140142
></Button>
141143
</ButtonWrapper>

0 commit comments

Comments
 (0)