Skip to content

Commit 9951202

Browse files
iOdiO89iOdiO89
authored
Merge pull request #20 from team-Ollie/11-feature-MyPage-API
feat: 마이페이지 API 연결
2 parents 1885faa + c8aa169 commit 9951202

File tree

20 files changed

+611
-93
lines changed

20 files changed

+611
-93
lines changed

‎apis/hooks/mypage.ts‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { useQuery, useMutation } from "@tanstack/react-query";
2+
import {
3+
getMyInfo,
4+
patchLogout,
5+
patchNicknameChange,
6+
patchPasswordChange,
7+
patchQuitAccount,
8+
postNicknameCheck,
9+
} from "../mypage";
10+
import { useRouter } from "next/router";
11+
import { InputError } from "@/pages/mypage/password";
12+
13+
function useGetMyInfo() {
14+
const { data } = useQuery({
15+
queryKey: ["getMyInfo"],
16+
queryFn: getMyInfo,
17+
});
18+
19+
return { data };
20+
}
21+
22+
function usePatchLogout() {
23+
const router = useRouter();
24+
const { mutate } = useMutation({
25+
mutationKey: ["patchLogout"],
26+
mutationFn: patchLogout,
27+
onSuccess: () => {
28+
localStorage.removeItem("access_token");
29+
router.push("/main");
30+
},
31+
onError: () => router.push("/404"),
32+
});
33+
34+
return { mutate };
35+
}
36+
37+
function usePatchQuitAccount(
38+
setPwError: React.Dispatch<React.SetStateAction<InputError>>,
39+
) {
40+
const router = useRouter();
41+
const { mutate } = useMutation({
42+
mutationKey: ["patchQuitAccount"],
43+
mutationFn: (password: string) => patchQuitAccount(password),
44+
onSuccess: () => {
45+
localStorage.removeItem("access_token");
46+
router.push("/main");
47+
},
48+
onError: () =>
49+
setPwError({ status: true, text: "비밀번호가 올바르지 않습니다." }),
50+
});
51+
52+
return { mutate };
53+
}
54+
55+
function usePatchPasswordChange() {
56+
const router = useRouter();
57+
const { mutate } = useMutation({
58+
mutationKey: ["patchPasswordChange"],
59+
mutationFn: (body: { password: string; newPassword: string }) =>
60+
patchPasswordChange(body),
61+
onSuccess: () => router.push("/mypage/password/success"),
62+
onError: () => router.push("/404"),
63+
});
64+
65+
return { mutate };
66+
}
67+
68+
function usePatchNicknameChange(nickname: string) {
69+
const router = useRouter();
70+
const { mutate } = useMutation({
71+
mutationKey: ["postNicknameCheck", nickname],
72+
mutationFn: () => patchNicknameChange(nickname),
73+
onSuccess: () => router.push("/mypage/nickname/success"),
74+
onError: () => router.push("/404"),
75+
});
76+
77+
return { mutate };
78+
}
79+
80+
function usePostNicknameCheck(
81+
nickname: string,
82+
setNameError: React.Dispatch<React.SetStateAction<InputError>>,
83+
) {
84+
const { mutate } = useMutation({
85+
mutationKey: ["postNicknameCheck", nickname],
86+
mutationFn: () => postNicknameCheck(nickname),
87+
onSuccess: () => setNameError({ status: false, text: "" }),
88+
onError: () => {
89+
setNameError({ status: true, text: "이미 사용 중인 닉네임입니다." });
90+
},
91+
});
92+
93+
return { mutate };
94+
}
95+
96+
export {
97+
useGetMyInfo,
98+
usePatchLogout,
99+
usePatchQuitAccount,
100+
usePatchPasswordChange,
101+
usePatchNicknameChange,
102+
usePostNicknameCheck,
103+
};

‎apis/mypage.ts‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import client, { ResponseBody } from "./client";
2+
3+
interface GetMyInfoResponse extends ResponseBody {
4+
result: {
5+
nickname: string;
6+
level: number;
7+
loginId: string;
8+
isAdmin: boolean;
9+
};
10+
}
11+
12+
interface PatchResponse {
13+
isSuccess: boolean;
14+
message: string;
15+
}
16+
17+
interface QuitAccountResponseBody {
18+
timestamp: string;
19+
status: number;
20+
error: string;
21+
code: string;
22+
message: string;
23+
}
24+
25+
async function getMyInfo(): Promise<GetMyInfoResponse> {
26+
const { data } = await client.get(`/users/myPage`);
27+
return data;
28+
}
29+
30+
async function patchLogout(): Promise<PatchResponse> {
31+
const { data } = await client.patch(`/users/logout`);
32+
return data;
33+
}
34+
35+
async function patchQuitAccount(
36+
password: string,
37+
): Promise<QuitAccountResponseBody> {
38+
const { data } = await client.patch(`/users/signout`, { password });
39+
return data;
40+
}
41+
42+
async function patchPasswordChange(body: {
43+
password: string;
44+
newPassword: string;
45+
}): Promise<PatchResponse> {
46+
const { data } = await client.patch(`/users/editPassword`, body);
47+
return data;
48+
}
49+
50+
async function patchNicknameChange(
51+
nickname: string,
52+
): Promise<QuitAccountResponseBody> {
53+
const { data } = await client.patch(`/users/editNickname`, { nickname });
54+
return data;
55+
}
56+
57+
async function postNicknameCheck(
58+
nickname: string,
59+
): Promise<QuitAccountResponseBody> {
60+
const { data } = await client.post(`/users/nickname`, { nickname });
61+
return data;
62+
}
63+
64+
export {
65+
getMyInfo,
66+
patchLogout,
67+
patchQuitAccount,
68+
patchPasswordChange,
69+
patchNicknameChange,
70+
postNicknameCheck,
71+
};

‎components/HeadFunction.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
22
import FlexBox from "./Flexbox";
33
import Image from "next/image";
44
import Head from "next/head";
5+
import LeftArrowIcon from "@/public/svgs/LeftArrow.svg";
56

67
interface Props {
78
leftIcon?: boolean;
@@ -26,7 +27,7 @@ export default function HeadFunction({
2627
className="w-5 h-5 shrink-0 items-center align-center"
2728
onClick={router.back}
2829
>
29-
<Image src="/svgs/LeftArrow.svg" width={20} height={20} />
30+
<LeftArrowIcon width={20} height={20} />
3031
</div>
3132
<FlexBox className="w-full h-full justify-center">
3233
<div className="h2">{title}</div>

‎components/NavBar.tsx‎

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import MypageIcon from "@/public/svgs/MypageIcon.svg";
44
import { useRouter } from "next/router";
55
import NavBarItem from "./NavBarItem";
66
import { useEffect } from "react";
7+
import FlexBox from "./Flexbox";
78

89
const NavBar = () => {
910
const router = useRouter();
@@ -18,40 +19,43 @@ const NavBar = () => {
1819
}, []);
1920

2021
return (
21-
<div
22-
className="flex flex-basis h-[4rem] w-full absolute inset-x-0 bottom-0 "
23-
style={{
24-
borderTop: "0.5px solid rgba(112, 115, 124, 0.16)",
25-
backgroundColor: "#ffffff",
26-
}}
27-
>
28-
<div className="flex flex-basis h-full w-full flex-row justify-between items-center ">
29-
<NavBarItem
30-
isActive={pathname === "/"}
31-
text="홈"
32-
onClick={() => handleNavigate("/")}
33-
iconType="home"
34-
>
35-
<HomeIcon />
36-
</NavBarItem>
37-
<NavBarItem
38-
isActive={pathname === "/calendar"}
39-
text="캘린더"
40-
onClick={() => handleNavigate("/calendar")}
41-
iconType="calendar"
42-
>
43-
<CalenderIcon />
44-
</NavBarItem>
45-
<NavBarItem
46-
isActive={pathname === "/mypage"}
47-
text="마이페이지"
48-
onClick={() => handleNavigate("/mypage")}
49-
iconType="mypage"
50-
>
51-
<MypageIcon />
52-
</NavBarItem>
22+
<>
23+
<div className="w-full min-h-[4rem]" />
24+
<div
25+
className="flex flex-basis h-[4rem] w-full fixed inset-x-0 bottom-0 "
26+
style={{
27+
borderTop: "0.5px solid rgba(112, 115, 124, 0.16)",
28+
backgroundColor: "#ffffff",
29+
}}
30+
>
31+
<FlexBox className="w-full justify-between">
32+
<NavBarItem
33+
isActive={pathname === "/"}
34+
text="홈"
35+
onClick={() => handleNavigate("/")}
36+
iconType="home"
37+
>
38+
<HomeIcon />
39+
</NavBarItem>
40+
<NavBarItem
41+
isActive={pathname === "/calendar"}
42+
text="캘린더"
43+
onClick={() => handleNavigate("/calendar")}
44+
iconType="calendar"
45+
>
46+
<CalenderIcon />
47+
</NavBarItem>
48+
<NavBarItem
49+
isActive={pathname === "/mypage"}
50+
text="마이페이지"
51+
onClick={() => handleNavigate("/mypage")}
52+
iconType="mypage"
53+
>
54+
<MypageIcon />
55+
</NavBarItem>
56+
</FlexBox>
5357
</div>
54-
</div>
58+
</>
5559
);
5660
};
5761

‎components/mypage/NicknameInput.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { ChangeEvent, HTMLInputTypeAttribute, useState } from "react";
2+
3+
export interface TextInputProps {
4+
value: string;
5+
setValue: React.Dispatch<React.SetStateAction<string>>;
6+
isError: boolean;
7+
errorText?: string;
8+
isSuccess: boolean;
9+
placeholder?: string;
10+
}
11+
12+
export default function NicknameInput({
13+
value,
14+
setValue,
15+
isError,
16+
errorText,
17+
isSuccess,
18+
placeholder = "",
19+
}: TextInputProps) {
20+
const onChangeText = (e: ChangeEvent<HTMLInputElement>) => {
21+
setValue(e.target.value);
22+
};
23+
24+
const borderStyle = () => {
25+
if (isSuccess) return "border-green-600";
26+
else if (isError) return "border-red-500";
27+
return "border-transparent";
28+
};
29+
30+
return (
31+
<div className="w-full relative">
32+
<div
33+
className={`w-full border ${borderStyle()} bg-gray-100 rounded-lg p-2`}
34+
>
35+
<input
36+
className="w-full outline-none border-none bg-gray-100 h4"
37+
value={value}
38+
onChange={(event) => onChangeText(event)}
39+
placeholder={placeholder}
40+
/>
41+
</div>
42+
{!isSuccess && isError && (
43+
<div className="text-red-500 h5 px-2 absolute">{errorText}</div>
44+
)}
45+
{isSuccess && (
46+
<div className="text-green-600 h5 px-2 absolute">
47+
사용 가능한 닉네임입니다.
48+
</div>
49+
)}
50+
</div>
51+
);
52+
}

‎components/mypage/profile.tsx‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,56 @@
11
import Image from "next/image";
22
import FlexBox from "../Flexbox";
33
import { useRouter } from "next/router";
4+
import RightArrowIcon from "@/public/svgs/RightArrow.svg";
5+
import Level1Icon from "@/public/svgs/badges/1.svg";
6+
import Level2Icon from "@/public/svgs/badges/2.svg";
7+
import Level3Icon from "@/public/svgs/badges/3.svg";
8+
import Level4Icon from "@/public/svgs/badges/4.svg";
9+
import Level5Icon from "@/public/svgs/badges/5.svg";
10+
import Level6Icon from "@/public/svgs/badges/6.svg";
411

5-
export default function Profile() {
12+
interface ProfileProps {
13+
nickname: string;
14+
level: number;
15+
}
16+
17+
export default function Profile({ nickname, level }: ProfileProps) {
618
const router = useRouter();
19+
20+
const returnBadge = () => {
21+
switch (level) {
22+
case 1:
23+
return <Level1Icon width={24} height={24} />;
24+
break;
25+
case 2:
26+
return <Level2Icon width={24} height={24} />;
27+
break;
28+
case 3:
29+
return <Level3Icon width={24} height={24} />;
30+
break;
31+
case 4:
32+
return <Level4Icon width={24} height={24} />;
33+
break;
34+
case 5:
35+
return <Level5Icon width={24} height={24} />;
36+
break;
37+
case 6:
38+
default:
39+
return <Level6Icon width={24} height={24} />;
40+
break;
41+
}
42+
};
743
return (
844
<FlexBox
945
className="w-full py-7 px-6 justify-between"
1046
onClick={() => router.push("/mypage/profile")}
1147
>
1248
<FlexBox className="gap-2">
1349
<div className="w-10 h-10 rounded-full bg-gray-200" />
14-
<div className="h2">서울복지관 관리자</div>
15-
<Image src={"/svgs/badges/3.svg"} width={24} height={24} />
50+
<div className="h2">{nickname}</div>
51+
{returnBadge()}
1652
</FlexBox>
17-
<Image src={"/svgs/RightArrow.svg"} width={20} height={20} />
53+
<RightArrowIcon width={20} height={20} />
1854
</FlexBox>
1955
);
2056
}

0 commit comments

Comments
 (0)