From 4f140ec0516e3708e34ce81e444959cdbed349c1 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 18 Feb 2026 14:04:51 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=99=80=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/Router.tsx | 9 +++++++++ src/pages/my/MyPage.tsx | 5 +++++ src/pages/my/index.ts | 1 + src/shared/config/route.ts | 1 + 4 files changed, 16 insertions(+) create mode 100644 src/pages/my/MyPage.tsx create mode 100644 src/pages/my/index.ts diff --git a/src/app/Router.tsx b/src/app/Router.tsx index c724a61..6e7c933 100644 --- a/src/app/Router.tsx +++ b/src/app/Router.tsx @@ -43,6 +43,11 @@ const MyLinks = lazy(() => default: MyLinksPage, })) ); +const LazyMyPage = lazy(() => + import('@/pages/my').then(({ MyPage }) => ({ + default: MyPage, + })) +); const SelectGroup = lazy(() => import('@/pages/selectGroup').then(({ SelectGroupPage }) => ({ default: SelectGroupPage, @@ -88,6 +93,10 @@ function AppRouter() { path: ROUTE.myLinks, element: , }, + { + path: ROUTE.my, + element: , + }, { path: ROUTE.selectGroup, element: , diff --git a/src/pages/my/MyPage.tsx b/src/pages/my/MyPage.tsx new file mode 100644 index 0000000..13494f4 --- /dev/null +++ b/src/pages/my/MyPage.tsx @@ -0,0 +1,5 @@ +function MyPage() { + return
마이페이지
; +} + +export default MyPage; diff --git a/src/pages/my/index.ts b/src/pages/my/index.ts new file mode 100644 index 0000000..df4205f --- /dev/null +++ b/src/pages/my/index.ts @@ -0,0 +1 @@ +export { default as MyPage } from './MyPage'; diff --git a/src/shared/config/route.ts b/src/shared/config/route.ts index 4818d40..13d9382 100644 --- a/src/shared/config/route.ts +++ b/src/shared/config/route.ts @@ -5,6 +5,7 @@ export const ROUTE = { onboarding: '/onboarding', home: '/', myLinks: '/my-links', + my: '/my', createExpense: '/create-expense/:groupToken', selectGroup: '/select-group', groupSetup: '/group-setup', From 9e7e7ddf81a4e8ad56ec8d6a5a7b5e8cbe31e154 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 18 Feb 2026 14:10:48 +0900 Subject: [PATCH 02/13] =?UTF-8?q?style:=20=EC=9D=B4=EB=A6=84=20=EA=B2=B9?= =?UTF-8?q?=EC=B9=A8=20=EB=AC=B8=EC=A0=9C=EB=A5=BC=20=ED=95=B4=EA=B2=B0?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EC=9C=84=ED=95=B4=20lazy=20import?= =?UTF-8?q?=ED=95=98=EB=8A=94=20=EA=B3=B3=EC=97=90=20Lazy=20prefix?= =?UTF-8?q?=EB=A5=BC=20=EB=B6=99=EC=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/Router.tsx | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/app/Router.tsx b/src/app/Router.tsx index 6e7c933..c784e2c 100644 --- a/src/app/Router.tsx +++ b/src/app/Router.tsx @@ -7,38 +7,38 @@ import checkAuth from '@/entities/auth/lib/checkAuth'; import groupTokenUrlLoader from '@/entities/auth/lib/groupTokenUrlLoader'; import createExpensePageGuardLoader from '@/pages/CreateExpensePage/lib/createExpensePageGuardLoader'; -const ExpenseDetail = lazy(() => +const LazyExpenseDetail = lazy(() => import('@/pages/expenseDetail/').then(({ ExpenseDetailPage }) => ({ default: ExpenseDetailPage, })) ); -const CharacterShare = lazy(() => +const LazyCharacterShare = lazy(() => import('@/pages/characterShare').then(({ CharacterSharePage }) => ({ default: CharacterSharePage, })) ); -const CreateExpense = lazy(() => +const LazyCreateExpense = lazy(() => import('@/pages/CreateExpensePage').then(({ CreateExpensePage }) => ({ default: CreateExpensePage, })) ); -const GroupSetup = lazy(() => +const LazyGroupSetup = lazy(() => import('@/pages/groupSetup').then(({ GroupSetupPage }) => ({ default: GroupSetupPage, })) ); -const Home = lazy(() => +const LazyHome = lazy(() => import('@/pages/home').then(({ HomePage }) => ({ default: HomePage })) ); -const Login = lazy(() => +const LazyLogin = lazy(() => import('@/pages/login').then(({ LoginPage }) => ({ default: LoginPage })) ); -const Onboarding = lazy(() => +const LazyOnboarding = lazy(() => import('@/pages/onboarding').then(({ OnboardingPage }) => ({ default: OnboardingPage, })) ); -const MyLinks = lazy(() => +const LazyMyLinks = lazy(() => import('@/pages/myLinks').then(({ MyLinksPage }) => ({ default: MyLinksPage, })) @@ -48,12 +48,12 @@ const LazyMyPage = lazy(() => default: MyPage, })) ); -const SelectGroup = lazy(() => +const LazySelectGroup = lazy(() => import('@/pages/selectGroup').then(({ SelectGroupPage }) => ({ default: SelectGroupPage, })) ); -const NotFound = lazy(() => +const LazyNotFound = lazy(() => import('@/pages/notFound').then(({ NotFoundPage }) => ({ default: NotFoundPage, })) @@ -74,7 +74,7 @@ function AppRouter() { children: [ { path: ROUTE.login, - element: , + element: , }, { id: 'protected', @@ -83,15 +83,15 @@ function AppRouter() { children: [ { path: ROUTE.onboarding, - element: , + element: , }, { path: ROUTE.home, - element: , + element: , }, { path: ROUTE.myLinks, - element: , + element: , }, { path: ROUTE.my, @@ -99,15 +99,15 @@ function AppRouter() { }, { path: ROUTE.selectGroup, - element: , + element: , }, { path: ROUTE.groupSetup, - element: , + element: , }, { path: ROUTE.createExpense, - element: , + element: , loader: createExpensePageGuardLoader, }, ], @@ -115,17 +115,17 @@ function AppRouter() { // TODO : 로그인 기능으로 변경될 예정 { path: ROUTE.expenseDetail, - element: , + element: , loader: groupTokenUrlLoader, }, { path: ROUTE.characterShare, - element: , + element: , loader: groupTokenUrlLoader, }, { path: '*', - element: , + element: , }, ], }, From 18067ae0393804f5d9be187f3f576ada1272cfcf Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 18 Feb 2026 16:02:31 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20=EC=A0=95=EB=B3=B4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=99=80=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/Router.tsx | 9 +++++++++ src/pages/my-edit/MyEditPage.tsx | 5 +++++ src/pages/my-edit/index.ts | 1 + src/shared/config/route.ts | 1 + 4 files changed, 16 insertions(+) create mode 100644 src/pages/my-edit/MyEditPage.tsx create mode 100644 src/pages/my-edit/index.ts diff --git a/src/app/Router.tsx b/src/app/Router.tsx index c784e2c..d304af4 100644 --- a/src/app/Router.tsx +++ b/src/app/Router.tsx @@ -48,6 +48,11 @@ const LazyMyPage = lazy(() => default: MyPage, })) ); +const LazyMyEditPage = lazy(() => + import('@/pages/my-edit').then(({ MyEditPage }) => ({ + default: MyEditPage, + })) +); const LazySelectGroup = lazy(() => import('@/pages/selectGroup').then(({ SelectGroupPage }) => ({ default: SelectGroupPage, @@ -97,6 +102,10 @@ function AppRouter() { path: ROUTE.my, element: , }, + { + path: ROUTE.myEdit, + element: , + }, { path: ROUTE.selectGroup, element: , diff --git a/src/pages/my-edit/MyEditPage.tsx b/src/pages/my-edit/MyEditPage.tsx new file mode 100644 index 0000000..51a2d47 --- /dev/null +++ b/src/pages/my-edit/MyEditPage.tsx @@ -0,0 +1,5 @@ +function MyEditPage() { + return
정보 수정 페이지
; +} + +export default MyEditPage; diff --git a/src/pages/my-edit/index.ts b/src/pages/my-edit/index.ts new file mode 100644 index 0000000..f4f01be --- /dev/null +++ b/src/pages/my-edit/index.ts @@ -0,0 +1 @@ +export { default as MyEditPage } from './MyEditPage'; diff --git a/src/shared/config/route.ts b/src/shared/config/route.ts index 13d9382..a5db768 100644 --- a/src/shared/config/route.ts +++ b/src/shared/config/route.ts @@ -6,6 +6,7 @@ export const ROUTE = { home: '/', myLinks: '/my-links', my: '/my', + myEdit: '/my/edit', createExpense: '/create-expense/:groupToken', selectGroup: '/select-group', groupSetup: '/group-setup', From a91ab102e2f3b6af8747ccc107fb6979f412fb65 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 18 Feb 2026 22:14:04 +0900 Subject: [PATCH 04/13] =?UTF-8?q?fix:=20=EC=9D=BC=EB=B6=80=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=9D=98=20=ED=97=A4=EB=8D=94=20=EB=B0=B0?= =?UTF-8?q?=EA=B2=BD=EC=83=89=EC=9D=B4=20=EC=A0=81=EC=9A=A9=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 일부 컴포넌트에서 ColorKey를 이용헤서 배경색을 적용하던 것이 원인이었음. useTheme를 이용해서 직접 color를 넣어주는 식으로 통일함 --- src/pages/characterShare/CharacterSharePage.tsx | 6 +++--- src/pages/confirmStep/ConfirmStepPage.tsx | 4 +++- src/pages/expenseDetail/ExpenseDetailPage.tsx | 5 ++--- src/pages/myLinks/MyLinksPage.tsx | 12 ++++++------ src/pages/onboarding/OnboardingPage.tsx | 6 ++++-- src/shared/ui/Header/index.styles.ts | 2 +- 6 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/pages/characterShare/CharacterSharePage.tsx b/src/pages/characterShare/CharacterSharePage.tsx index 5675287..4b4f8e5 100644 --- a/src/pages/characterShare/CharacterSharePage.tsx +++ b/src/pages/characterShare/CharacterSharePage.tsx @@ -21,7 +21,7 @@ function CharacterSharePage() { const { groupToken } = useLoaderData(); const { data, isLoading, isError } = useGetCharacter(groupToken); const navigate = useNavigate(); - const { unit } = useTheme(); + const { unit, color } = useTheme(); const imageRef = useRef(null); const handleDownload = () => { @@ -60,7 +60,7 @@ function CharacterSharePage() { leftButtonOnClick={() => { navigate(-1); }} - bgColor="#F1F3F5" + bgColor={color.semantic.background.normal.alternative} /> @@ -87,7 +87,7 @@ function CharacterSharePage() { leftButtonOnClick={() => { navigate(-1); }} - bgColor="#F1F3F5" + bgColor="semantic.background.normal.alternative" /> diff --git a/src/pages/confirmStep/ConfirmStepPage.tsx b/src/pages/confirmStep/ConfirmStepPage.tsx index 0c32513..f9138ac 100644 --- a/src/pages/confirmStep/ConfirmStepPage.tsx +++ b/src/pages/confirmStep/ConfirmStepPage.tsx @@ -1,4 +1,5 @@ import { useLoaderData } from 'react-router'; +import { useTheme } from 'styled-components'; import { ArrowLeft } from '@/shared/assets/svgs/icon'; import Header from '@/shared/ui/Header'; import DescriptionField from '@/shared/ui/DescriptionField'; @@ -21,6 +22,7 @@ interface ConfirmStepProps { function ConfirmStepPage({ onNext, onBack, onEdit, onAdd }: ConfirmStepProps) { const { groupToken } = useLoaderData(); const { data, isLoading } = useGetAllExpense(groupToken); + const { color } = useTheme(); if (isLoading) { return
Loading...
; @@ -38,7 +40,7 @@ function ConfirmStepPage({ onNext, onBack, onEdit, onAdd }: ConfirmStepProps) { leftButtonOnClick={onBack} rightButtonContent={지출 추가} rightButtonOnClick={onAdd} - bgColor="#F1F3F5" + bgColor={color.semantic.background.normal.alternative} /> ('pending'); const [openBottomSheet, setOpenBottomSheet] = useState(false); - const theme = useTheme(); const { data: memberExpenseDetails } = useGetMemberExpenseDetails(groupToken); const [isChecked, setIsChecked] = useState(false); const navigate = useNavigate(); @@ -63,7 +62,7 @@ function ExpenseDetailPage() { 관리 } - bgColor={theme.color.semantic.background.normal.alternative} + bgColor={color.semantic.background.normal.alternative} /> } leftButtonOnClick={() => navigate(-1)} - bgColor={theme.color.semantic.background.normal.alternative} + bgColor={color.semantic.background.normal.alternative} /> 로딩중... @@ -48,7 +48,7 @@ function MyLinksPage() { title="링크 관리" leftButtonContent={} leftButtonOnClick={() => navigate(-1)} - bgColor={theme.color.semantic.background.normal.alternative} + bgColor="semantic.background.normal.alternative" /> {data?.links && data.links.length > 0 ? ( {data.links.map((link) => ( -
+
` min-width: 320px; max-height: 64px; height: 100%; - background-color: ${({ $bgColor }) => $bgColor || 'white'}; + background-color: ${({ $bgColor }) => $bgColor || 'inherit'}; `; export const LeftHeaderArea = styled(HeaderArea)` From 5c67ac890ca34c9d02d14fcb1fcfae7d4629c19d Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 18 Feb 2026 22:30:23 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=9C=A0=EC=A0=80=20=EC=A0=95=EB=B3=B4=20=EC=A1=B0=ED=9A=8C=20?= =?UTF-8?q?API=20=ED=9B=85=EA=B3=BC=20=EB=AA=A8=ED=82=B9=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 로그인 유저 정보를 위한 User 타입 추가 - 정보 조회 함수 추가 - msw 모킹 추가 - useGetUserInfo 훅 추가 --- src/entities/auth/api/auth.ts | 9 +++++++++ src/entities/auth/api/useGetUserInfo.ts | 9 +++++++++ src/entities/auth/model/user.type.ts | 6 ++++++ src/entities/auth/ui/index.ts | 1 + src/mocks/handlers/auth.ts | 14 ++++++++++++++ 5 files changed, 39 insertions(+) create mode 100644 src/entities/auth/api/useGetUserInfo.ts create mode 100644 src/entities/auth/model/user.type.ts create mode 100644 src/entities/auth/ui/index.ts diff --git a/src/entities/auth/api/auth.ts b/src/entities/auth/api/auth.ts index e955802..adb2a80 100644 --- a/src/entities/auth/api/auth.ts +++ b/src/entities/auth/api/auth.ts @@ -1,4 +1,5 @@ import axiosInstance from '@/shared/api/axios'; +import { User } from '../model/user.type'; // CHECK - 게스트 토큰 정책 제거 가능성 있음 export interface GuestTokenData { @@ -21,3 +22,11 @@ export const getAuth = async () => { }); return response.data; }; + +export const getUserInfo = async () => { + const response = await axiosInstance.get('/user/info', { + useMock: true, + }); + + return response.data; +}; diff --git a/src/entities/auth/api/useGetUserInfo.ts b/src/entities/auth/api/useGetUserInfo.ts new file mode 100644 index 0000000..7ca3fd6 --- /dev/null +++ b/src/entities/auth/api/useGetUserInfo.ts @@ -0,0 +1,9 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; +import { getUserInfo } from './auth'; + +export const useGetUserInfo = () => { + return useSuspenseQuery({ + queryKey: ['userInfo'], + queryFn: getUserInfo, + }); +}; diff --git a/src/entities/auth/model/user.type.ts b/src/entities/auth/model/user.type.ts new file mode 100644 index 0000000..940fb3f --- /dev/null +++ b/src/entities/auth/model/user.type.ts @@ -0,0 +1,6 @@ +export interface User { + id: number; + email: string; + name: string; + profileImageUrl?: string; +} diff --git a/src/entities/auth/ui/index.ts b/src/entities/auth/ui/index.ts new file mode 100644 index 0000000..d27e8b1 --- /dev/null +++ b/src/entities/auth/ui/index.ts @@ -0,0 +1 @@ +export { default as MyProfile } from './MyProfile'; diff --git a/src/mocks/handlers/auth.ts b/src/mocks/handlers/auth.ts index f3af13a..9230cba 100644 --- a/src/mocks/handlers/auth.ts +++ b/src/mocks/handlers/auth.ts @@ -1,3 +1,4 @@ +import { User } from '@/entities/auth/model/user.type'; import { http, HttpResponse, passthrough } from 'msw'; const authHandlers = [ @@ -22,6 +23,19 @@ const authHandlers = [ user: { id: 'mock-test-user-id' }, }); }), + + http.get('/api/v1/user/info', ({ request }) => { + const isMocked = request.headers.get('X-Mock-Request'); + if (!isMocked || isMocked !== 'true') return passthrough(); + + const mockUserInfo: User = { + id: 1, + profileImageUrl: '', + name: '김모또', + email: 'moddo@kakao.com', + }; + return HttpResponse.json(mockUserInfo); + }), ]; export default authHandlers; From e2c78fd68574829bfb5a1998ea5f1575780a15de Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 18 Feb 2026 22:31:13 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../auth/ui/MyProfile/index.styles.ts | 11 +++++ src/entities/auth/ui/MyProfile/index.tsx | 43 +++++++++++++++++++ src/pages/my/MyPage.tsx | 24 ++++++++++- 3 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 src/entities/auth/ui/MyProfile/index.styles.ts create mode 100644 src/entities/auth/ui/MyProfile/index.tsx diff --git a/src/entities/auth/ui/MyProfile/index.styles.ts b/src/entities/auth/ui/MyProfile/index.styles.ts new file mode 100644 index 0000000..d4be248 --- /dev/null +++ b/src/entities/auth/ui/MyProfile/index.styles.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +export const ProfileContainer = styled.div` + display: flex; + align-items: center; + padding: ${({ theme }) => theme.unit[20]}; + gap: ${({ theme }) => theme.unit[16]}; + min-height: 45px; + background-color: ${({ theme }) => + theme.color.semantic.background.normal.alternative}; +`; diff --git a/src/entities/auth/ui/MyProfile/index.tsx b/src/entities/auth/ui/MyProfile/index.tsx new file mode 100644 index 0000000..f3ba849 --- /dev/null +++ b/src/entities/auth/ui/MyProfile/index.tsx @@ -0,0 +1,43 @@ +import { Suspense } from 'react'; +import { useTheme } from 'styled-components'; +import { useGetUserInfo } from '@/entities/auth/api/useGetUserInfo'; +import MemberProfileImage from '@/shared/ui/MemberProfileImage'; +import Flex from '@/shared/ui/Flex'; +import Text from '@/shared/ui/Text'; +import Button from '@/shared/ui/Button'; +import * as S from './index.styles'; + +function MyProfile() { + const { data: profile } = useGetUserInfo(); + const theme = useTheme(); + + return ( + Loading...}> + + + + {profile.name} + {/* TODO: 디자인 시스템 정비 후 다시 디자인 확인이 필요합니다 (Opacity를 계속 쓰는지?) */} + + {profile.email} + + + {/* TODO: 현 피그마 디자인은 Chip이 Button으로 쓰이고 있는 상황이라 우선 button 컴포넌트 기준으로 구현했습니다. 디자인시스템 정리 후 다시 확인이 필요합니다! */} + + + + ); +} + +export default MyProfile; diff --git a/src/pages/my/MyPage.tsx b/src/pages/my/MyPage.tsx index 13494f4..130699d 100644 --- a/src/pages/my/MyPage.tsx +++ b/src/pages/my/MyPage.tsx @@ -1,5 +1,27 @@ +import { useNavigate } from 'react-router'; +import { useTheme } from 'styled-components'; +import { Menu } from '@/shared/assets/svgs/icon'; +import Header from '@/shared/ui/Header'; +import { ROUTE } from '@/shared/config/route'; +import { MyProfile } from '@/entities/auth/ui'; + function MyPage() { - return
마이페이지
; + const navigate = useNavigate(); + const { color } = useTheme(); + + return ( + <> + {/* TODO: 디자인 시스템 정리 + 헤더 컴포넌트 정비 후에 다시 스타일링이 필요합니다. */} +
} + rightButtonOnClick={() => navigate(ROUTE.myEdit)} + bgColor={color.semantic.background.normal.alternative} + /> + + + ); } export default MyPage; From dff04d236a291baab0c5e495ed42c51edcb42051 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 18 Feb 2026 22:57:46 +0900 Subject: [PATCH 07/13] =?UTF-8?q?fix:=20Suspense=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=EB=A5=BC=20=EC=9C=A0=ED=9A=A8=ED=95=9C=20=EA=B3=B3=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://github.com/moddo-kr/moddo-frontend/pull/23#discussion_r2822456627 --- src/entities/auth/ui/MyProfile/index.tsx | 47 +++++++++++------------- src/pages/my/MyPage.styles.ts | 11 ++++++ src/pages/my/MyPage.tsx | 6 ++- 3 files changed, 38 insertions(+), 26 deletions(-) create mode 100644 src/pages/my/MyPage.styles.ts diff --git a/src/entities/auth/ui/MyProfile/index.tsx b/src/entities/auth/ui/MyProfile/index.tsx index f3ba849..39a4122 100644 --- a/src/entities/auth/ui/MyProfile/index.tsx +++ b/src/entities/auth/ui/MyProfile/index.tsx @@ -1,4 +1,3 @@ -import { Suspense } from 'react'; import { useTheme } from 'styled-components'; import { useGetUserInfo } from '@/entities/auth/api/useGetUserInfo'; import MemberProfileImage from '@/shared/ui/MemberProfileImage'; @@ -12,31 +11,29 @@ function MyProfile() { const theme = useTheme(); return ( - Loading...}> - - - - {profile.name} - {/* TODO: 디자인 시스템 정비 후 다시 디자인 확인이 필요합니다 (Opacity를 계속 쓰는지?) */} - - {profile.email} - - - {/* TODO: 현 피그마 디자인은 Chip이 Button으로 쓰이고 있는 상황이라 우선 button 컴포넌트 기준으로 구현했습니다. 디자인시스템 정리 후 다시 확인이 필요합니다! */} - - - + {profile.email} + + + {/* TODO: 현 피그마 디자인은 Chip이 Button으로 쓰이고 있는 상황이라 우선 button 컴포넌트 기준으로 구현했습니다. 디자인시스템 정리 후 다시 확인이 필요합니다! */} + + ); } diff --git a/src/pages/my/MyPage.styles.ts b/src/pages/my/MyPage.styles.ts new file mode 100644 index 0000000..d4be248 --- /dev/null +++ b/src/pages/my/MyPage.styles.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +export const ProfileContainer = styled.div` + display: flex; + align-items: center; + padding: ${({ theme }) => theme.unit[20]}; + gap: ${({ theme }) => theme.unit[16]}; + min-height: 45px; + background-color: ${({ theme }) => + theme.color.semantic.background.normal.alternative}; +`; diff --git a/src/pages/my/MyPage.tsx b/src/pages/my/MyPage.tsx index 130699d..630d315 100644 --- a/src/pages/my/MyPage.tsx +++ b/src/pages/my/MyPage.tsx @@ -1,9 +1,11 @@ +import { Suspense } from 'react'; import { useNavigate } from 'react-router'; import { useTheme } from 'styled-components'; import { Menu } from '@/shared/assets/svgs/icon'; import Header from '@/shared/ui/Header'; import { ROUTE } from '@/shared/config/route'; import { MyProfile } from '@/entities/auth/ui'; +import * as S from './MyPage.styles'; function MyPage() { const navigate = useNavigate(); @@ -19,7 +21,9 @@ function MyPage() { rightButtonOnClick={() => navigate(ROUTE.myEdit)} bgColor={color.semantic.background.normal.alternative} /> - + Loading...}> + + ); } From 33402e9143372354e58e1bb2e7a7bbe0d7d2d939 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 18 Feb 2026 22:58:32 +0900 Subject: [PATCH 08/13] =?UTF-8?q?design:=20=EB=A1=9C=EB=94=A9=20=EC=A4=91?= =?UTF-8?q?=20=EB=A9=94=EC=8B=9C=EC=A7=80=EB=A5=BC=20=ED=95=9C=EA=B5=AD?= =?UTF-8?q?=EC=96=B4=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://github.com/moddo-kr/moddo-frontend/pull/23#discussion_r2822456633 --- src/pages/my/MyPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/my/MyPage.tsx b/src/pages/my/MyPage.tsx index 630d315..c010e48 100644 --- a/src/pages/my/MyPage.tsx +++ b/src/pages/my/MyPage.tsx @@ -21,7 +21,7 @@ function MyPage() { rightButtonOnClick={() => navigate(ROUTE.myEdit)} bgColor={color.semantic.background.normal.alternative} /> - Loading...}> + 로딩 중...}> From 3f338b3d8954f0282dff467346e4b8d7456ac77e Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 18 Feb 2026 23:00:48 +0900 Subject: [PATCH 09/13] =?UTF-8?q?feat:=20=EC=A0=95=EB=B3=B4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=97=90=20=EB=A7=81=ED=81=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://github.com/moddo-kr/moddo-frontend/pull/23#discussion_r2822456642 --- src/entities/auth/ui/MyProfile/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/entities/auth/ui/MyProfile/index.tsx b/src/entities/auth/ui/MyProfile/index.tsx index 39a4122..b87e012 100644 --- a/src/entities/auth/ui/MyProfile/index.tsx +++ b/src/entities/auth/ui/MyProfile/index.tsx @@ -1,5 +1,7 @@ +import { useNavigate } from 'react-router'; import { useTheme } from 'styled-components'; import { useGetUserInfo } from '@/entities/auth/api/useGetUserInfo'; +import { ROUTE } from '@/shared/config/route'; import MemberProfileImage from '@/shared/ui/MemberProfileImage'; import Flex from '@/shared/ui/Flex'; import Text from '@/shared/ui/Text'; @@ -8,6 +10,7 @@ import * as S from './index.styles'; function MyProfile() { const { data: profile } = useGetUserInfo(); + const navigate = useNavigate(); const theme = useTheme(); return ( @@ -27,6 +30,7 @@ function MyProfile() { {/* TODO: 현 피그마 디자인은 Chip이 Button으로 쓰이고 있는 상황이라 우선 button 컴포넌트 기준으로 구현했습니다. 디자인시스템 정리 후 다시 확인이 필요합니다! */}