feat: [55] 마이페이지, 회원탈퇴 구현

web/package.json

@@ -19,7 +19,6 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
-    "@lukemorales/query-key-factory": "^1.3.4",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@reduxjs/toolkit": "^2.2.6",

web/src/App.tsx

@@ -30,6 +30,15 @@ const router = createBrowserRouter([
           };
         },
       },
+      {
+        path: 'mypage',
+        lazy: async () => {
+          const { default: MyPage } = await import('@/pages/my-page');
+          return {
+            Component: MyPage,
+          };
+        },
+      },
       {
         path: 'myevent',
         lazy: async () => {
@@ -86,7 +95,7 @@ export default function App() {
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>
         <GlobalStyles />
-        <Toaster position="top-center" richColors />
+        <Toaster position="bottom-center" richColors />
         <RouterProvider router={router} />
       </QueryClientProvider>
     </Provider>

web/src/components/auth/sign-in.tsx

@@ -78,9 +78,9 @@ export const SignIn = () => {
         </form>
       </Form>
       <div className="signin-config">
-        <span>비밀번호 찾기</span>
+        <p>아이디 찾기</p>
         <div className="sep" />
-        <span>아이디 찾기</span>
+        <p>비밀번호 찾기</p>
         <div className="sep" />
         <Link to="/auth?authType=up" className="signup">
           회원가입

web/src/components/auth/sign-up1.tsx

@@ -1,16 +1,16 @@
+import { AppDispatch, RootState } from '@/store';
+import { toggleCheck } from '@/store/signup/terms';
+import { body1Style, head1Style } from '@/styles/global-styles';
+import { COLORS } from '@/theme';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { Subtitle } from '../common/Subtitle';
-import { body1Style, head1Style } from '@/styles/global-styles';
-import { COLORS } from '@/theme';
-import { toggleCheck } from '@/store/signup/terms';
-import { AppDispatch, RootState } from '@/store';
 
+import { useNavigate } from 'react-router-dom';
 import checkRound from '../../assets/checkRound.png';
-import uncheckRound from '../../assets/uncheckRound.png';
 import rightArrow from '../../assets/rigth.png';
-import { useNavigate } from 'react-router-dom';
+import uncheckRound from '../../assets/uncheckRound.png';
 
 export const SignUp1: React.FC = () => {
   const dispatch = useDispatch<AppDispatch>();
@@ -98,7 +98,7 @@ export const SignUp1: React.FC = () => {
             <img src={rightArrow} width="18px" height="18px" />
           </TermItem>
         </TermsContainer>
-        <NextButton onClick={handleNextClick} enabled={isButtonEnabled}>
+        <NextButton onClick={handleNextClick} $enabled={isButtonEnabled}>
           다음으로
         </NextButton>
       </Container>
@@ -183,17 +183,17 @@ const Total = styled.div`
 `;
 
 interface NextButtonProps {
-  enabled: boolean;
+  $enabled: boolean;
 }
 
 const NextButton = styled.button<NextButtonProps>`
   width: 100%;
   padding: 10px;
-  background-color: ${props => (props.enabled ? COLORS.Main : COLORS.Gray3)};
+  background-color: ${props => (props.$enabled ? COLORS.Main : COLORS.Gray3)};
   color: #fff;
   border: none;
   border-radius: 10px;
-  cursor: ${props => (props.enabled ? 'pointer' : 'not-allowed')};
+  cursor: ${props => (props.$enabled ? 'pointer' : 'not-allowed')};
   font-size: 16px;
   font-weight: bold;
   margin-top: 200px;

web/src/components/auth/sign-up2.tsx

@@ -20,11 +20,11 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import styled from 'styled-components';
 import { Subtitle } from '../common/Subtitle';
 import { Label } from '../common/label';
-import { useNavigate } from 'react-router-dom';
 
 export const SignUp2 = () => {
   const dispatch = useDispatch<AppDispatch>();
@@ -171,7 +171,7 @@ export const SignUp2 = () => {
                 </div>
               </div>
             </div>
-            <NextButton as="button" type="submit" enabled={isEmailVerified}>
+            <NextButton as="button" type="submit" $enabled={isEmailVerified}>
               다음으로
             </NextButton>
           </form>
@@ -251,17 +251,17 @@ const Confirm1 = styled.button`
 `;
 
 interface NextButtonProps {
-  enabled: boolean;
+  $enabled: boolean;
 }
 
 const NextButton = styled.button<NextButtonProps>`
   width: 100%;
   padding: 10px;
-  background-color: ${props => (props.enabled ? COLORS.Main : COLORS.Gray3)};
+  background-color: ${props => (props.$enabled ? COLORS.Main : COLORS.Gray3)};
   color: #fff;
   border: none;
   border-radius: 10px;
-  cursor: ${props => (props.enabled ? 'pointer' : 'not-allowed')};
+  cursor: ${props => (props.$enabled ? 'pointer' : 'not-allowed')};
   font-size: 16px;
   font-weight: bold;
   margin-top: 80px;

web/src/components/common/header/header.styles.ts

@@ -6,6 +6,7 @@ export const HeaderWrapper = styled.header`
   padding: 0 1.25rem;
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   h1 {
     font-weight: bold;

web/src/components/common/header/index.tsx

@@ -1,8 +1,37 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, useEffect, useState } from 'react';
 import { HeaderWrapper } from './header.styles';
+import styled from 'styled-components';
+import btnMypage from '@/assets/btn_mypage.png';
+import { useNavigate } from 'react-router-dom';
 
 type HeaderProps = ComponentProps<'header'>;
 
 export const Header = ({ children }: HeaderProps) => {
-  return <HeaderWrapper>{children}</HeaderWrapper>;
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      setIsLoggedIn(true);
+    }
+  }, []);
+
+  const moveMyPage = () => {
+    navigate('/mypage');
+  };
+
+  return (
+    <HeaderWrapper>
+      {children}
+      {isLoggedIn && (
+        <MypageIcon src={btnMypage} alt="My Page" onClick={moveMyPage} />
+      )}
+    </HeaderWrapper>
+  );
 };
+
+const MypageIcon = styled.img`
+  width: 38px;
+  cursor: pointer;
+`;

web/src/components/mypage/DeleteModal.tsx

@@ -0,0 +1,15 @@
+import { useDeleteUser } from '@/services/queries/user.mutation';
+
+export const DeleteModal = () => {
+  const { deleteUserAccount, isDeleting } = useDeleteUser();
+
+  const handleDelete = () => {
+    deleteUserAccount().then(() => onClose());
+  };
+
+  return (
+    <>
+      <div>탈퇴</div>
+    </>
+  );
+};

web/src/components/mypage/user-info.styles.ts

@@ -0,0 +1,28 @@
+import { body1Style } from '@/styles/global-styles';
+import { COLORS } from '@/theme';
+import styled from 'styled-components';
+
+export const Information = styled.div`
+  ${body1Style}
+  color: ${COLORS.Gray1};
+  border-bottom: 1px solid ${COLORS.Gray5};
+  padding: 30px 0px 30px 0px;
+`;
+
+export const BasicInfo = styled.div`
+  margin-bottom: 20px;
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  gap: 27px;
+`;
+export const Info = styled.p`
+  ${body1Style}
+  color: ${COLORS.Gray2};
+`;
+
+export const Id = styled.a`
+  color: ${COLORS.Gray2};
+  text-decoration: none;
+`;

web/src/components/mypage/user-info.tsx

@@ -0,0 +1,28 @@
+import { UserInfoType } from '@/types/user';
+import {
+  BasicInfo,
+  Id,
+  Info,
+  InfoContainer,
+  Information,
+} from './user-info.styles';
+
+export const UserInfo = ({ user }: { user: UserInfoType }) => {
+  return (
+    <Information>
+      <BasicInfo>기본 정보</BasicInfo>
+      <InfoContainer>
+        <Info>아이디</Info>
+        <Id>{user.userId}</Id>
+      </InfoContainer>
+      <InfoContainer>
+        <Info>휴대폰</Info>
+        <Id>{user.phoneNumber}</Id>
+      </InfoContainer>
+      <InfoContainer>
+        <Info>이메일</Info>
+        <Id>{user.email}</Id>
+      </InfoContainer>
+    </Information>
+  );
+};

web/src/lib/query-keys.ts

@@ -1,7 +1,7 @@
-import { createQueryKeyStore } from '@lukemorales/query-key-factory';
+const USER = 'user';
 
-export const queries = createQueryKeyStore({
+export const queries = {
   user: {
-    all: null,
+    DEFAULT: [USER],
   },
-});
+};

web/src/lib/schema/auth.schema.ts

@@ -61,3 +61,11 @@ export const signinSchema = z.object({
 export type SignupOneStepType = z.infer<typeof signupOneStepSchema>;
 export type SignupTwoStepType = z.infer<typeof signupTwoStepSchema>;
 export type SigninType = z.infer<typeof signinSchema>;
+export type SignupPayload = {
+  userId: string;
+  name: string;
+  password: string;
+  email: string;
+  phone: string;
+  verificationCode: string;
+};