Skip to content

Commit 65af6e6

Browse files
yyypearlyyypearl
authored
Merge pull request #106 from ASAP-Lettering/feat/#105
[Feat] 온보딩 API 연동
2 parents d077d88 + e49be57 commit 65af6e6

File tree

8 files changed

+156
-117
lines changed

8 files changed

+156
-117
lines changed

‎src/api/mypage/user.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,29 @@ export const deleteUser = async () => {
1212
return await authClient.delete(`/api/v1/users`);
1313
};
1414

15-
//화원 정보 조회
15+
// 회원 정보 조회
1616
export const getUserInfo = async () => {
1717
return await authClient.get(`/api/v1/users/info/me`);
1818
};
1919

20-
//생일 수정
20+
// 생일 수정
2121
export const putUserBirthday = async (birthday: string) => {
2222
return await authClient.put(`/api/v1/users/info/me/birthday`, {
2323
birthday: birthday,
2424
});
2525
};
2626

27-
//보낸 편지함 목록
27+
// 보낸 편지함 목록
2828
export const getSentLetter = async () => {
2929
return await authClient.get(`/api/v1/letters/send`);
3030
};
3131

32-
//보낸 편지함 상세
32+
// 보낸 편지함 상세
3333
export const getSentLetterDetail = async (letterId: string) => {
3434
return await authClient.get(`/api/v1/letters/send/${letterId}`);
3535
};
3636

37-
//보낸 편지 삭제 (1개 이상)
37+
// 보낸 편지 삭제 (1개 이상)
3838
export const deleteSentLetters = async (letterIds: string[]) => {
3939
return await authClient.delete(`/api/v1/letters/send`, {
4040
data: {
@@ -43,7 +43,12 @@ export const deleteSentLetters = async (letterIds: string[]) => {
4343
});
4444
};
4545

46-
//보낸 편지 삭제 (1개)
46+
// 보낸 편지 삭제 (1개)
4747
export const deleteSentLetter = async (letterId: string) => {
4848
return await authClient.delete(`/api/v1/letters/send/${letterId}`);
4949
};
50+
51+
// 온보딩
52+
export const putOnboarding = async () => {
53+
return await authClient.put(`/api/v1/users/info/onboarding`, {});
54+
};

‎src/app/login/kakao/page.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@
33
import { login } from "@/api/login/user";
44
import Loader from "@/components/common/Loader";
55
import { signupState } from "@/recoil/signupStore";
6-
import { clearLetterUrl, getLetterUrl, setTokens } from "@/utils/storage";
6+
import {
7+
clearLetterUrl,
8+
getLetterUrl,
9+
setOnboarding,
10+
setTokens,
11+
} from "@/utils/storage";
712
import axios from "axios";
813
import { useRouter } from "next/navigation";
914
import { useEffect, useState } from "react";
@@ -55,6 +60,8 @@ const Auth = () => {
5560
.then((res) => {
5661
console.log("accessToken", res.data.accessToken);
5762
setTokens(res.data.accessToken, res.data.refreshToken);
63+
/* 온보딩 여부 저장 */
64+
setOnboarding(res.data.isProcessedOnboarding);
5865
if (storeUrl) {
5966
router.push(`/verify/letter?url=${storeUrl}`);
6067
clearLetterUrl();

‎src/app/mypage/delete/page.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@ import Dropdown from "@/components/common/Dropdown";
77
import Input from "@/components/common/Input";
88
import Loader, { LoaderContainer } from "@/components/common/Loader";
99
import NavigatorBar from "@/components/common/NavigatorBar";
10-
import { clearTokens, getRefreshToken, removeCookie } from "@/utils/storage";
10+
import {
11+
clearOnboarding,
12+
clearTokens,
13+
getRefreshToken,
14+
removeCookie,
15+
} from "@/utils/storage";
1116
import { useRouter } from "next/navigation";
1217
import { Suspense, useEffect, useState } from "react";
1318
import styled from "styled-components";
@@ -49,7 +54,7 @@ const DeleteAccount = () => {
4954
.then((res) => {
5055
console.log(res.data);
5156
clearTokens();
52-
removeCookie("letter-onboard");
57+
clearOnboarding();
5358
router.push("/login");
5459
})
5560
.catch((err) => {

‎src/app/mypage/page.tsx‎

Lines changed: 89 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { getUserInfo, logout } from "@/api/mypage/user";
55
import Button from "@/components/common/Button";
66
import Loader, { LoaderContainer } from "@/components/common/Loader";
77
import NavigatorBar from "@/components/common/NavigatorBar";
8-
import { clearTokens, getRefreshToken } from "@/utils/storage";
8+
import { clearOnboarding, clearTokens, getRefreshToken } from "@/utils/storage";
99
import { useRouter } from "next/navigation";
1010
import { Suspense, useEffect, useState } from "react";
1111
import styled from "styled-components";
@@ -45,6 +45,7 @@ const MyPage = () => {
4545
.then((res) => {
4646
console.log(res.data);
4747
clearTokens();
48+
clearOnboarding();
4849
router.push("/login");
4950
})
5051
.catch((err) => console.log(err));
@@ -176,148 +177,148 @@ export default function MyPagePaging() {
176177
}
177178

178179
const Container = styled.div`
179-
display: flex;
180-
flex-direction: column;
181-
height: 100%;
182-
min-height: 100%;
183-
max-height: 100%;
184-
//justify-content: space-between;
185-
color: white;
186-
background:${(props) => props.theme.colors.bg};
180+
display: flex;
181+
flex-direction: column;
182+
height: 100%;
183+
min-height: 100%;
184+
max-height: 100%;
185+
//justify-content: space-between;
186+
color: white;
187+
background: ${(props) => props.theme.colors.bg};
187188
`;
188189

189190
const MainContainer = styled.div`
190-
display: flex;
191-
flex-direction: column;
192-
align-items: center;
193-
padding: 24px;
194-
overflow-y: auto;
195-
box-sizing: border-box;
196-
width: 100%;
197-
&::-webkit-scrollbar {
198-
width: 5px; /* Width of the scrollbar */
199-
}
200-
201-
&::-webkit-scrollbar-track {
202-
background: ${(props: any) => props.theme.colors.gray800};
203-
border-radius: 10px; /* Rounded corners */
204-
}
205-
206-
&::-webkit-scrollbar-thumb {
207-
background: ${(props: any) => props.theme.colors.gray600};
208-
border-radius: 10px; /* Rounded corners */
209-
}
191+
display: flex;
192+
flex-direction: column;
193+
align-items: center;
194+
padding: 24px;
195+
overflow-y: auto;
196+
box-sizing: border-box;
197+
width: 100%;
198+
&::-webkit-scrollbar {
199+
width: 5px; /* Width of the scrollbar */
200+
}
201+
202+
&::-webkit-scrollbar-track {
203+
background: ${(props: any) => props.theme.colors.gray800};
204+
border-radius: 10px; /* Rounded corners */
205+
}
206+
207+
&::-webkit-scrollbar-thumb {
208+
background: ${(props: any) => props.theme.colors.gray600};
209+
border-radius: 10px; /* Rounded corners */
210+
}
210211
`;
211212

212213
const MainWrapper = styled.div`
213-
display: flex;
214-
width: 100%;
215-
flex-direction: column;
214+
display: flex;
215+
width: 100%;
216+
flex-direction: column;
216217
`;
217218

218219
const ProfileHeader = styled.div`
219-
display: flex;
220-
flex-direction: row;
221-
justify-content: space-between;
220+
display: flex;
221+
flex-direction: row;
222+
justify-content: space-between;
222223
`;
223224

224225
const ProfileInfo = styled.div`
225-
display: flex;
226-
flex-direction: column;
227-
gap: 4px;
226+
display: flex;
227+
flex-direction: column;
228+
gap: 4px;
228229
`;
229230

230231
const ProfileName = styled.div`
231-
${(props: any) => props.theme.fonts.title01};
232-
color: ${(props: any) => props.theme.colors.white};
232+
${(props: any) => props.theme.fonts.title01};
233+
color: ${(props: any) => props.theme.colors.white};
233234
`;
234235

235236
const ProfileEmail = styled.div`
236-
${(props: any) => props.theme.fonts.body09};
237-
color: ${(props: any) => props.theme.colors.gray400};
238-
display: flex;
239-
flex-direction: row;
240-
justify-content: flex-start;
241-
gap: 7px;
237+
${(props: any) => props.theme.fonts.body09};
238+
color: ${(props: any) => props.theme.colors.gray400};
239+
display: flex;
240+
flex-direction: row;
241+
justify-content: flex-start;
242+
gap: 7px;
242243
`;
243244

244245
const ProfileBtn = styled.img`
245-
width: 24px;
246-
height: auto;
247-
cursor: pointer;
246+
width: 24px;
247+
height: auto;
248+
cursor: pointer;
248249
`;
249250

250251
const CountContainer = styled.div`
251-
border-radius: 8px;
252-
background-color: ${(props: any) => props.theme.colors.gray900};
253-
display: flex;
254-
flex-direction: column;
255-
padding: 14px 20px;
256-
gap: 10px;
257-
margin-top: 24px;
258-
margin-bottom: 12px;
252+
border-radius: 8px;
253+
background-color: ${(props: any) => props.theme.colors.gray900};
254+
display: flex;
255+
flex-direction: column;
256+
padding: 14px 20px;
257+
gap: 10px;
258+
margin-top: 24px;
259+
margin-bottom: 12px;
259260
`;
260261

261262
const CountRaw = styled.div`
262-
display: flex;
263-
flex-direction: row;
264-
justify-content: space-between;
263+
display: flex;
264+
flex-direction: row;
265+
justify-content: space-between;
265266
`;
266267

267268
const CountTitle = styled.div`
268-
${(props: any) => props.theme.fonts.body09};
269-
color: ${(props: any) => props.theme.colors.gray300};
269+
${(props: any) => props.theme.fonts.body09};
270+
color: ${(props: any) => props.theme.colors.gray300};
270271
`;
271272

272273
const CountValue = styled.div`
273-
${(props: any) => props.theme.fonts.body08};
274-
color: ${(props: any) => props.theme.colors.white};
274+
${(props: any) => props.theme.fonts.body08};
275+
color: ${(props: any) => props.theme.colors.white};
275276
`;
276277

277278
const Line = styled.hr`
278-
height: 2px;
279-
background-color: ${(props) => props.theme.colors.gray800};
280-
border: none;
281-
margin: 0;
282-
margin-top : 11px;
279+
height: 2px;
280+
background-color: ${(props) => props.theme.colors.gray800};
281+
border: none;
282+
margin: 0;
283+
margin-top: 11px;
283284
`;
284285

285286
const SettingWrapper = styled.div`
286-
display: flex;
287-
flex-direction: column;
288-
width: 100%;
287+
display: flex;
288+
flex-direction: column;
289+
width: 100%;
289290
`;
290291

291292
const SettingTitle = styled.div`
292-
${(props: any) => props.theme.fonts.body07};
293-
color: ${(props: any) => props.theme.colors.gray100};
294-
margin-bottom: 10px;
293+
${(props: any) => props.theme.fonts.body07};
294+
color: ${(props: any) => props.theme.colors.gray100};
295+
margin-bottom: 10px;
295296
`;
296297

297298
const MenuTitle = styled.div`
298-
${(props: any) => props.theme.fonts.body06};
299-
color: ${(props: any) => props.theme.colors.white};
299+
${(props: any) => props.theme.fonts.body06};
300+
color: ${(props: any) => props.theme.colors.white};
300301
`;
301302

302303
const MenuSubTitle = styled.div`
303-
${(props: any) => props.theme.fonts.caption04};
304-
color: ${(props: any) => props.theme.colors.gray500};
304+
${(props: any) => props.theme.fonts.caption04};
305+
color: ${(props: any) => props.theme.colors.gray500};
305306
`;
306307

307308
const MenuWrapper = styled.div`
308-
display: flex;
309-
flex-direction: row;
310-
justify-content: space-between;
311-
padding: 10px 0;
312-
cursor: pointer;
309+
display: flex;
310+
flex-direction: row;
311+
justify-content: space-between;
312+
padding: 10px 0;
313+
cursor: pointer;
313314
`;
314315

315316
const SettingContainer = styled.div`
316-
padding: 10px 0;
317+
padding: 10px 0;
317318
`;
318319

319320
const Wrapper = styled.div`
320-
display: flex;
321-
width: 100%;
322-
padding: 24px;
321+
display: flex;
322+
width: 100%;
323+
padding: 24px;
323324
`;

‎src/app/onboarding/page.tsx‎

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

3+
import { putOnboarding } from "@/api/mypage/user";
34
import Bottom from "@/components/common/Bottom";
45
import Button from "@/components/common/Button";
56
import Loader from "@/components/common/Loader";
@@ -8,6 +9,7 @@ import Tag from "@/components/common/Tag";
89
import Pagination from "@/components/letter/Pagination";
910
import { Orbit } from "@/constants/orbit";
1011
import { theme } from "@/styles/theme";
12+
import { setOnboarding } from "@/utils/storage";
1113
import { useRouter } from "next/navigation";
1214
import { Suspense, useEffect, useState } from "react";
1315
import styled from "styled-components";
@@ -62,6 +64,10 @@ const Onboarding = () => {
6264
},
6365
]);
6466
}
67+
if (step === 4) {
68+
putOnboarding();
69+
setOnboarding("true");
70+
}
6571
}, [step]);
6672

6773
const overlayLineImage = `/assets/onboarding/onboardingline${step}.svg`;

‎src/app/planet/page.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
getAccessToken,
2626
getCookie,
2727
getInitUserToast,
28+
getOnboarding,
2829
setCookie,
2930
setInitUserToast,
3031
} from "@/utils/storage";
@@ -241,14 +242,10 @@ const PlanetPage = () => {
241242
}
242243
};
243244

244-
/* 토스트 메세지 */
245-
/* 편지 등록 개수 3개 미만일 경우*/
245+
/* 온보딩 여부 조회 */
246246
useEffect(() => {
247-
if (countLetter < 1) {
248-
if (getCookie("letter-onboard") === null) {
249-
setCookie("letter-onboard", "exist", 30);
250-
router.push("/onboarding");
251-
}
247+
if (getOnboarding() === "false") {
248+
router.push("/onboarding");
252249
}
253250
}, []);
254251

0 commit comments

Comments
 (0)