Skip to content

Commit

Permalink
Merge pull request #138 from ASAP-Lettering/fix/#132
Browse files Browse the repository at this point in the history
  • Loading branch information
@yyypearl
yyypearl authored Jan 31, 2025
2 parents fc33078 + dfa4dac commit c86ca13
Show file tree
Hide file tree
Showing 11 changed files with 422 additions and 804 deletions.
18 changes: 8 additions & 10 deletions src/api/login/user.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { RegisterDataType } from "@/types/user";
import client, { authClient } from "../client";
import { getRefreshToken, setTokens } from "@/utils/storage";
import { RegisterDataType } from '@/types/user';
import client, { authClient } from '../client';
import { getRefreshToken, setTokens } from '@/utils/storage';

// 로그인
export const login = async (loginType: string, accessToken: string) => {
return await client.post(`/api/v1/auth/login/${loginType}`, {
accessToken: accessToken,
accessToken: accessToken
});
};

Expand All @@ -14,25 +14,23 @@ export const signup = async ({
servicePermission,
privatePermission,
marketingPermission,
birthday,
realName,
realName
}: RegisterDataType) => {
return await client.post(`/api/v1/users`, {
registerToken: registerToken,
servicePermission: servicePermission,
privatePermission: privatePermission,
marketingPermission: marketingPermission,
birthday: birthday,
realName: realName,
realName: realName
});
};

//Refresh 재발급
export const getNewTokens = async () => {
const storedRefreshToken = getRefreshToken();
if (storedRefreshToken) {
const response = await client.post("/api/v1/auth/reissue", {
refreshToken: storedRefreshToken,
const response = await client.post('/api/v1/auth/reissue', {
refreshToken: storedRefreshToken
});
const { accessToken, refreshToken } = response.data;
setTokens(accessToken, refreshToken);
Expand Down
202 changes: 121 additions & 81 deletions src/app/mypage/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
"use client";

import { getLetterCount } from "@/api/letter/letter";
import { getUserInfo, logout } from "@/api/mypage/user";
import Button from "@/components/common/Button";
import Loader, { LoaderContainer } from "@/components/common/Loader";
import NavigatorBar from "@/components/common/NavigatorBar";
import { theme } from "@/styles/theme";
import { clearOnboarding, clearTokens, getRefreshToken } from "@/utils/storage";
import { useRouter } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
import styled from "styled-components";
'use client';

import { getLetterCount } from '@/api/letter/letter';
import { getUserInfo, logout } from '@/api/mypage/user';
import Button from '@/components/common/Button';
import Loader, { LoaderContainer } from '@/components/common/Loader';
import NavigatorBar from '@/components/common/NavigatorBar';
import { theme } from '@/styles/theme';
import { clearOnboarding, clearTokens, getRefreshToken } from '@/utils/storage';
import { useRouter } from 'next/navigation';
import { Suspense, useEffect, useState } from 'react';
import styled from 'styled-components';

const MyPage = () => {
const router = useRouter();
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [planetCount, setPlanetCount] = useState(0);
const [letterCount, setLetterCount] = useState(0);
const [loading, setLoading] = useState(true);

const goToProfile = () => {
router.push("/profile");
router.push('/profile');
};

useEffect(() => {
Expand All @@ -35,7 +35,7 @@ const MyPage = () => {
}, [name, email]);

const goToLetterType = () => {
router.push("/mypage/lettertype");
router.push('/mypage/lettertype');
};

const handleLogout = async () => {
Expand All @@ -47,28 +47,28 @@ const MyPage = () => {
console.log(res.data);
clearTokens();
clearOnboarding();
router.push("/login");
router.push('/login');
})
.catch((err) => console.log(err));
}
};

const goToSendedLetter = () => {
router.push("/mypage/send");
router.push('/mypage/send');
};

const goToAcountDelete = () => {
router.push("/mypage/delete");
router.push('/mypage/delete');
};

const fetchUserInfo = async () => {
try {
const response = await getUserInfo();
setName(response.data.name);
setEmail(response.data.email);
console.log("회원정보 조회 성공:", response.data);
console.log('회원정보 조회 성공:', response.data);
} catch (error) {
console.error("회원정보 조회 실패:", error);
console.error('회원정보 조회 실패:', error);
}
};

Expand All @@ -78,7 +78,7 @@ const MyPage = () => {
setLetterCount(response.data.letterCount);
setPlanetCount(response.data.spaceCount);
} catch (error) {
console.error("편지수, 행성수 조회 실패:", error);
console.error('편지수, 행성수 조회 실패:', error);
}
};

Expand All @@ -96,63 +96,61 @@ const MyPage = () => {
<MainContainer>
<MainWrapper>
<ProfileHeader>
<ProfileImage src="/assets/profile/img_profile_letter.png" />
<ProfileInfo>
<ProfileName>{name}님의 프로필</ProfileName>
<ProfileName>{name}님의 스페이스</ProfileName>
<ProfileEmail>
<img src="/assets/icons/ic_kakao_profile.svg" />
<div>{email}</div>
</ProfileEmail>
<CountRaw>
<CountTitle>행성</CountTitle>
<CountValue>{planetCount}개</CountValue>
<CountDivider />
<CountTitle>편지</CountTitle>
<CountValue>{letterCount}개</CountValue>
</CountRaw>
</ProfileInfo>
<ProfileBtn
src="/assets/icons/ic_arrow_profile.svg"
onClick={goToProfile}
/>
</ProfileHeader>
<CountContainer>
<CountRaw>
<CountTitle>내 편지</CountTitle>
<CountValue>총 {letterCount}개</CountValue>
</CountRaw>
<CountRaw>
<CountTitle>내 행성</CountTitle>
<CountValue>총 {planetCount}개</CountValue>
</CountRaw>
</CountContainer>
<Button
buttonType="secondary"
size="large"
icon={true}
text="보낸 편지함 보기"
onClick={goToSendedLetter}
/>
<MenuWrapper onClick={goToSendedLetter}>
<TitleWrapper>
<MenuTitle>
<img src="/assets/icons/ic_letter.svg" />
내가 보낸 편지
</MenuTitle>
<ProfileBtn src="/assets/icons/ic_arrow_profile.svg" />
</TitleWrapper>
</MenuWrapper>
</MainWrapper>
<Line />
<DivDivder />
<SettingWrapper>
<SettingContainer>
<SettingTitle>설정</SettingTitle>
<MenuWrapper onClick={goToLetterType}>
<div>
<MenuTitle>편지 날짜 보기</MenuTitle>
<MenuSubTitle>
편지 이름과 날짜를 함께 확인할 수 있어요
</MenuSubTitle>
</div>
<ProfileBtn src="/assets/icons/ic_arrow_profile.svg" />
<SettingTitle>설정</SettingTitle>
<TitleWrapper>
<MenuTitle>
<TextWrapper>
편지 날짜 보기
<MenuSubTitle>
편지 이름과 날짜를 함께 확인할 수 있어요
</MenuSubTitle>
</TextWrapper>
</MenuTitle>
<ProfileBtn src="/assets/icons/ic_arrow_profile.svg" />
</TitleWrapper>
</MenuWrapper>
</SettingContainer>
<SettingContainer>
<SettingTitle>내 계정</SettingTitle>
<MenuWrapper onClick={handleLogout}>
<div>
<MenuWrapper>
<SettingTitle>내 계정</SettingTitle>
<TitleWrapper onClick={handleLogout}>
<MenuTitle>로그아웃</MenuTitle>
</div>
<ProfileBtn src="/assets/icons/ic_arrow_profile.svg" />
</MenuWrapper>
<MenuWrapper onClick={goToAcountDelete}>
<div>
<MenuTitle>탈퇴</MenuTitle>
</div>
<ProfileBtn src="/assets/icons/ic_arrow_profile.svg" />
<ProfileBtn src="/assets/icons/ic_arrow_profile.svg" />
</TitleWrapper>
<TitleWrapper onClick={goToAcountDelete}>
<MenuTitle>회원탈퇴</MenuTitle>
<ProfileBtn src="/assets/icons/ic_arrow_profile.svg" />
</TitleWrapper>
</MenuWrapper>
</SettingContainer>
</SettingWrapper>
Expand Down Expand Up @@ -182,6 +180,7 @@ export default function MyPagePaging() {
const Container = styled.div`
display: flex;
flex-direction: column;
overflow-x: hidden;
height: 100%;
min-height: 100%;
max-height: 100%;
Expand All @@ -199,6 +198,7 @@ const MainContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
padding: 24px;
overflow-y: auto;
box-sizing: border-box;
Expand Down Expand Up @@ -228,11 +228,27 @@ const ProfileHeader = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;

const ProfileImage = styled.img`
width: 100%;
height: auto;
@media (max-height: 760px) {
width: 180px;
}
@media (max-width: 400px) {
width: 130px;
height: 130px;
}
`;

const ProfileInfo = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
`;

Expand Down Expand Up @@ -264,21 +280,27 @@ const ProfileBtn = styled.img`
}
`;

const CountContainer = styled.div`
border-radius: 8px;
background-color: ${(props: any) => props.theme.colors.gray900};
display: flex;
flex-direction: column;
padding: 14px 20px;
gap: 10px;
margin-top: 24px;
margin-bottom: 12px;
`;

const CountRaw = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 8px;
align-items: center; /* 세로 중앙 정렬 */
`;

const CountDivider = styled.div`
width: 1px;
height: 16px;
background-color: ${(props: any) => props.theme.colors.gray400};
margin: 0 8px;
`;

const DivDivder = styled.div`
width: 100vw;
height: 2px;
flex-shrink: 0;
margin-top: 40px;
margin-bottom: 20px;
background-color: ${(props: any) => props.theme.colors.gray900};
`;

const CountTitle = styled.div`
Expand Down Expand Up @@ -314,7 +336,7 @@ const SettingWrapper = styled.div`
`;

const SettingTitle = styled.div`
${(props: any) => props.theme.fonts.body07};
${(props: any) => props.theme.fonts.body08};
color: ${(props: any) => props.theme.colors.gray100};
margin-bottom: 10px;
Expand All @@ -324,6 +346,10 @@ const SettingTitle = styled.div`
`;

const MenuTitle = styled.div`
display: flex;
gap: 11px;
text-align: left;
align-items: center;
${(props: any) => props.theme.fonts.body06};
color: ${(props: any) => props.theme.colors.white};
Expand All @@ -332,6 +358,17 @@ const MenuTitle = styled.div`
}
`;

const TextWrapper = styled.div`
display: flex;
flex-direction: column;
`;

const TitleWrapper = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
`;

const MenuSubTitle = styled.div`
${(props: any) => props.theme.fonts.caption04};
color: ${(props: any) => props.theme.colors.gray500};
Expand All @@ -343,9 +380,12 @@ const MenuSubTitle = styled.div`

const MenuWrapper = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px 0;
flex-direction: column;
box-sizing: border-box;
border-radius: 8px;
gap: 10px;
padding: 19px;
background-color: ${(props: any) => props.theme.colors.gray800};
cursor: pointer;
`;

Expand All @@ -355,7 +395,7 @@ const SettingContainer = styled.div`

const VersionText = styled.div`
margin-top: 4px;
color: var(--gray-700, #2E3040);
color: var(--gray-700, #2e3040);
font-family: Pretendard;
font-size: 11.844px;
font-style: normal;
Expand Down
Loading

0 comments on commit c86ca13

Please sign in to comment.