diff --git a/src/views/Mypage/components/Main.tsx b/src/views/Mypage/components/Main.tsx
index a243d74..b272367 100644
--- a/src/views/Mypage/components/Main.tsx
+++ b/src/views/Mypage/components/Main.tsx
@@ -4,39 +4,28 @@ import { ArrowRightIcon } from '@/assets/icon';
import { ProfileImg } from '@/assets/image';
import { COLORS, FONTS } from '@/styles/constants';
-import { currentTabType } from '../pages/Mypage';
-
-interface TabItemType {
- name: string;
- tab: currentTabType;
-}
+import { MYPAGE_TAB_CONTENTS } from '../constants/text';
interface MainProps {
- handleSetCurrentTab: (clicked: currentTabType) => void;
+ handleSetCurrentTab: (clicked: string) => void;
}
-const MYPAGE_TAB_ITEM: TabItemType[] = [
- { name: '개인정보 조회 및 변경', tab: 'personalInfo' },
- { name: '저장한 여행지 목록', tab: 'favoritePlace' },
- { name: '여행자 유형 설정', tab: 'travelerType' },
-];
-
function Main(props: MainProps) {
const { handleSetCurrentTab } = props;
+
return (
-
서아람
- {MYPAGE_TAB_ITEM.map((item) => (
+ {Object.entries(MYPAGE_TAB_CONTENTS).map(([key, name]) => (
- handleSetCurrentTab(item.tab)}>
-
{item.name}
+ key={key}
+ onClick={() => handleSetCurrentTab(name)}>
+ {name}
))}
@@ -50,15 +39,6 @@ function Main(props: MainProps) {
export default Main;
-const header = css`
- width: 100%;
- padding: 1rem;
-
- color: ${COLORS.brand1};
-
- ${FONTS.H4};
-`;
-
const profileSection = css`
display: flex;
align-items: center;
diff --git a/src/views/Mypage/components/MypageHeader.tsx b/src/views/Mypage/components/MypageHeader.tsx
deleted file mode 100644
index e601841..0000000
--- a/src/views/Mypage/components/MypageHeader.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { css } from '@emotion/react';
-
-import { HeaderBackIcon } from '@/assets/icon';
-import { COLORS, FONTS } from '@/styles/constants';
-
-import { currentTabType } from '../pages/Mypage';
-
-interface HeaderProps {
- handleSetCurrentTab: ((clicked: currentTabType) => void) | undefined;
- state: string;
-}
-
-const HEADER_CONTENTS = [
- { state: 'personalInfo', content: '개인정보 조회 및 변경' },
- { state: 'favorite', content: '저장한 여행지 목록' },
- { state: 'travelerType', content: '' },
-];
-
-const MypageHeader = (props: HeaderProps) => {
- const { handleSetCurrentTab, state } = props;
-
- const content = HEADER_CONTENTS.find((item) => item.state === state)?.content;
-
- return (
-
- {
- handleSetCurrentTab && handleSetCurrentTab('main');
- }}
- />
- {content}
-
- );
-};
-
-export default MypageHeader;
-
-const header = css`
- display: flex;
- gap: 1rem;
- align-items: center;
-
- width: 100%;
- height: 5rem;
- padding: 1.2rem 0;
-
- color: ${COLORS.brand1};
-
- ${FONTS.H4};
-`;
diff --git a/src/views/Mypage/components/PersonalInfo.tsx b/src/views/Mypage/components/PersonalInfo.tsx
index ad9af52..413c1fd 100644
--- a/src/views/Mypage/components/PersonalInfo.tsx
+++ b/src/views/Mypage/components/PersonalInfo.tsx
@@ -1,25 +1,14 @@
import { css } from '@emotion/react';
+import { useState } from 'react';
-import SelectRegion from '@/components/SelectRegion';
+import SelectRegion, { Region } from '@/components/SelectRegion';
import { COLORS, FONTS } from '@/styles/constants';
-import { currentTabType } from '../pages/Mypage';
-import MypageHeader from './MypageHeader';
-
-interface PersonalInfoProps {
- handleSetCurrentTab: (clicked: currentTabType) => void;
-}
-
-const PersonalInfo = (props: PersonalInfoProps) => {
- const { handleSetCurrentTab } = props;
+const PersonalInfo = () => {
+ const [region, setRegion] = useState({ city: '', town: '' });
return (
<>
-
-
-
- 성별
-
-
-
-
+
-
>
);
@@ -63,6 +44,7 @@ const PersonalInfoContainter = css`
width: 100%;
height: calc(100dvh - 6.2rem);
+ overflow-y: hidden;
`;
const itemList = css`
@@ -72,6 +54,9 @@ const itemList = css`
flex-direction: column;
width: 100%;
+ height: 100%;
+ overflow-y: hidden;
+
padding-top: 2.7rem;
`;
@@ -114,16 +99,3 @@ const birth = (variant: string) => css`
${inputDefault};
width: ${variant === 'year' ? '38%' : '28%'};
`;
-
-const submitBtn = css`
- width: 100%;
- padding: 1.7rem 0;
- border-radius: 1.2rem;
-
- background-color: ${COLORS.brand1};
-
- color: ${COLORS.white};
- text-align: center;
-
- ${FONTS.Body2};
-`;
diff --git a/src/views/Mypage/constants/text.ts b/src/views/Mypage/constants/text.ts
new file mode 100644
index 0000000..2ce4647
--- /dev/null
+++ b/src/views/Mypage/constants/text.ts
@@ -0,0 +1,5 @@
+export const MYPAGE_TAB_CONTENTS = {
+ PERSONAL_INFO: '개인정보 조회 및 변경',
+ FAVORITE_TRAVEL_LIST: '찜한 여행지 목록',
+ TRAVELER_TYPE: '여행자 유형 설정',
+};
diff --git a/src/views/Mypage/pages/Mypage.tsx b/src/views/Mypage/pages/Mypage.tsx
index a42f171..972f04e 100644
--- a/src/views/Mypage/pages/Mypage.tsx
+++ b/src/views/Mypage/pages/Mypage.tsx
@@ -1,41 +1,45 @@
import { css } from '@emotion/react';
import { useState } from 'react';
+import { HeaderBackIcon } from '@/assets/icon';
+import BottomButton from '@/components/BottomButton';
+import Header from '@/components/Header';
import MenuBar from '@/components/MenuBar';
-import SelectTravelerType from '@/components/SelectTravelerType';
+import TravelerType from '@/components/TravelerType';
import Favorite from '../components/Favorite';
import Main from '../components/Main';
import PersonalInfo from '../components/PersonalInfo';
-
-export type currentTabType =
- | 'main'
- | 'personalInfo'
- | 'favoritePlace'
- | 'travelerType';
+import { MYPAGE_TAB_CONTENTS } from '../constants/text';
const Mypage = () => {
- const [currentTab, setCurrentTab] = useState
('main');
+ const [currentTab, setCurrentTab] = useState('main');
+ const [travelerTypes, setTravelerTypes] = useState([]);
+
+ const backToMainTab = () => {
+ setCurrentTab('main');
+ };
- const handleSetCurrentTab = (clicked: currentTabType) => {
- setCurrentTab(clicked);
+ const handleSetCurrentTab = (clickedTab: string) => {
+ setCurrentTab(clickedTab);
};
- const renderComponent = (state: currentTabType) => {
+ const handleData = () => {};
+
+ const renderComponent = (state: string) => {
switch (state) {
case 'main':
return ;
- case 'personalInfo':
- return ;
- case 'favoritePlace':
- return ;
- case 'travelerType':
+ case MYPAGE_TAB_CONTENTS.PERSONAL_INFO:
+ return ;
+ case MYPAGE_TAB_CONTENTS.FAVORITE_TRAVEL_LIST:
+ return ;
+ case MYPAGE_TAB_CONTENTS.TRAVELER_TYPE:
return (
-
- 저장
-
+
);
default:
return null;
@@ -43,15 +47,23 @@ const Mypage = () => {
};
return (
-
- {renderComponent(currentTab)}
-
- {currentTab === 'main' && (
-
+ <>
+ {currentTab === 'main' ? (
+
+ ) : (
+
+ )}
+
{renderComponent(currentTab)}
+ {currentTab === 'main' ? (
+
+ ) : (
+
)}
-
+ >
);
};
@@ -62,12 +74,8 @@ const mypageContainer = css`
flex-direction: column;
width: 100dvw;
- height: 100dvh;
+ height: calc(100dvh - 8rem - 4.8rem);
padding: 0 2rem;
background-color: white;
`;
-
-const footer = css`
- margin-left: -2rem;
-`;