Skip to content

Commit 010eeae

Browse files
yeonjin719yeonjin719
committed
fix: 최종 반영
1 parent 889ac65 commit 010eeae

8 files changed

Lines changed: 81 additions & 43 deletions

File tree

‎src/components/common/modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default function Modal({ isOpen = true, title, children, onClose, positio
3333
<div className="font-heading2 text-default-gray-800">{title}</div>
3434
<GraySvgButton type="cancle" onClick={onClose} />
3535
</div>
36-
<div className="flex">{children}</div>
36+
<div className="flex px-[12px]">{children}</div>
3737
</div>
3838
</div>
3939
</div>

‎src/components/home/dateRecommend.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ function DateRecommend() {
9999
<div className="flex flex-col sm:px-[40px] px-[20px] py-[40px] justify-center h-full gap-[30px] sm:gap-[20px] w-full">
100100
{/* 상단 텍스트 */}
101101
<div className="flex items-center justify-between sm:flex-row flex-col">
102-
<div className="text-2xl font-bold whitespace-nowrap">이번 주 {forecastData?.result?.region?.regionName ?? '지역'} 데이트 추천</div>
102+
<div className="text-2xl font-bold break-keep text-center">이번 주 {forecastData?.result?.region?.regionName ?? '지역'} 데이트 추천</div>
103103
<button
104104
type="button"
105105
className="sm:mt-1 mt-4 text-sm text-black underline sm:self-center self-end"

‎src/components/modal/SettingModal.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import InfoSetting from '@/components/settingTab/InfoSetting';
88
import MembershipSetting from '@/components/settingTab/MembershipSetting';
99

1010
import Modal from '../common/modal';
11+
import MobileSettingTab from '../settingTab/mobileSettingTab';
1112

1213
import LogoutSvg from '@/assets/icons/Logout_Blank.svg?react';
1314

@@ -38,35 +39,36 @@ export default function SettingsModal({ onClose, defaultTab = '알람' }: ISetti
3839

3940
return (
4041
<Modal onClose={onClose} position="main" title="설정">
41-
{/* 좌측 탭 메뉴 */}
42-
<div className="w-[130px] sm:w-[170px] flex flex-col justify-between pr-4 sm:pr-6">
43-
<div className="flex flex-col space-y-3">
44-
{['알람', '멤버십', '정보'].map((tab) => (
45-
<button
46-
key={tab}
47-
onClick={() => setActiveTab(tab as '알람' | '멤버십' | '정보')}
48-
className={`w-full h-[35px] px-4 rounding-16 font-body1 text-left transition
42+
<div className="sm:flex-row flex-col flex min-w-[300px]">
43+
<div className="w-[130px] sm:w-[170px] hidden sm:flex flex-col justify-between pr-4 sm:pr-6">
44+
<div className="flex flex-col space-y-3">
45+
{['알람', '멤버십', '정보'].map((tab) => (
46+
<button
47+
key={tab}
48+
onClick={() => setActiveTab(tab as '알람' | '멤버십' | '정보')}
49+
className={`w-full h-[35px] px-4 rounding-16 font-body1 text-left transition
4950
${activeTab === tab ? 'bg-primary-500 text-white' : 'bg-default-gray-400 text-default-gray-700'}`}
50-
>
51-
{tab} 설정
52-
</button>
53-
))}
54-
</div>
55-
56-
<button
57-
onClick={handleLogout}
58-
disabled={logoutPending}
59-
className="font-body2 text-default-gray-800 cursor-pointer flex items-center space-x-2 mt-6 disabled:opacity-60"
60-
>
61-
<LogoutSvg className="w-4 h-4" fill="none" stroke="CurrentColor" />
62-
<span>{logoutPending ? '로그아웃 중...' : '로그아웃'}</span>
63-
</button>
64-
</div>
51+
>
52+
{tab} 설정
53+
</button>
54+
))}
55+
</div>
6556

66-
<div className="flex-1 pl-6 overflow-y-auto">
67-
{activeTab === '알람' && <AlarmSetting />}
68-
{activeTab === '멤버십' && <MembershipSetting />}
69-
{activeTab === '정보' && <InfoSetting />}
57+
<button
58+
onClick={handleLogout}
59+
disabled={logoutPending}
60+
className="font-body2 text-default-gray-800 cursor-pointer flex items-center space-x-2 mt-6 disabled:opacity-60"
61+
>
62+
<LogoutSvg className="w-4 h-4" fill="none" stroke="CurrentColor" />
63+
<span>{logoutPending ? '로그아웃 중...' : '로그아웃'}</span>
64+
</button>
65+
</div>
66+
<MobileSettingTab setActiveTab={setActiveTab} activeTab={activeTab} handleLogout={handleLogout} logoutPending={logoutPending} />
67+
<div className="flex-1 sm:pl-6 overflow-y-auto min-w-[298px]">
68+
{activeTab === '알람' && <AlarmSetting />}
69+
{activeTab === '멤버십' && <MembershipSetting />}
70+
{activeTab === '정보' && <InfoSetting />}
71+
</div>
7072
</div>
7173
</Modal>
7274
);

‎src/components/modal/deleteBookmarkModal.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ function DeleteBookmarkModal({ onClose, isOpen, changeState }: TDeleteBookmarkMo
1515
}, [isOpen]);
1616

1717
const handleDelete = () => {
18-
// Logic to delete the bookmarked date course
1918
changeState(false);
2019
onClose();
2120
};

‎src/components/settingTab/AlarmSetting.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,9 @@ export default function AlarmSetting() {
6464
];
6565

6666
return (
67-
<div className="mt-5 flex flex-col gap-10 p-8">
67+
<div className="mt-5 flex flex-col gap-10">
6868
{items.map(({ label, key }) => (
69-
<div key={key} className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-6 w-full">
69+
<div key={key} className="flex sm:items-center justify-between gap-3 sm:gap-6 w-full sm:px-0 px-[20px]">
7070
<p className="font-heading3 text-default-gray-800 truncate overflow-hidden">{label}</p>
7171
<ToggleSwitch value={alarmSetting[key]} onChange={() => handleToggle(key)} onLabel="ON" offLabel="OFF" />
7272
</div>

‎src/components/settingTab/InfoSetting.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default function InfoSetting() {
8181
};
8282

8383
return (
84-
<div className="mt-5 flex flex-col items-start gap-5 p-5">
84+
<div className="mt-5 flex flex-col items-start gap-5">
8585
{/* 닉네임 */}
8686
<EditableInputBox
8787
mode="nickname"
@@ -95,14 +95,18 @@ export default function InfoSetting() {
9595
/>
9696

9797
{/* 이메일 */}
98-
<EditableInputBox
99-
label="이메일"
100-
value={infoLoading ? '불러오는 중' : infoError ? '' : email}
101-
readOnly
102-
onChange={() => {}}
103-
className="pointer-events-none"
104-
placeholder="이메일"
105-
/>
98+
<div className={`w-full max-w-[360px] flex flex-col`}>
99+
<p className="font-body1 text-default-gray-700 mb-1">{'이메일'}</p>
100+
<div
101+
className="text-ellipsis overflow-hidden whitespace-nowrap
102+
max-w-[360px] text-center flex items-center
103+
w-full pl-4 border border-primary-500 rounding-16
104+
text-base font-medium h-12 pr-16 text-black
105+
caret-primary-500"
106+
>
107+
{infoLoading ? '불러오는 중' : infoError ? '' : email}
108+
</div>
109+
</div>
106110

107111
{/* 비밀번호 변경 */}
108112
<PasswordEditSection />

‎src/components/settingTab/MembershipSetting.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,14 @@ export default function MembershipSetting() {
4747
};
4848

4949
return (
50-
<div className="mt-5 flex flex-col gap-4 p-6">
50+
<div className="mt-5 flex flex-col gap-4">
5151
<p className="font-heading3">
5252
현재 등급은 <span className="text-primary-700 font-heading2">{gradeText}</span> 입니다.
5353
</p>
5454

5555
<p className="font-body1 text-default-gray-700">다음 결제 예정일 : 2025.06.14</p>
5656

57-
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-6 mt-6">
57+
<div className="flex flex-row sm:items-center gap-2 sm:gap-6 mt-6">
5858
<p className="font-heading3 text-default-gray-800">자동 결제</p>
5959
<ToggleSwitch value={autoPay} onChange={setAutoPay} onLabel="ON" offLabel="OFF" />
6060
</div>

‎src/components/settingTab/mobileSettingTab.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import LogoutSvg from '@/assets/icons/Logout_Blank.svg?react';
2+
3+
type TMobileSettingTab = {
4+
setActiveTab: (activeTab: '알람' | '멤버십' | '정보') => void;
5+
activeTab: '알람' | '멤버십' | '정보';
6+
handleLogout: () => void;
7+
logoutPending: boolean;
8+
};
9+
export default function MobileSettingTab({ setActiveTab, activeTab, handleLogout, logoutPending }: TMobileSettingTab) {
10+
return (
11+
<div className="sm:hidden max-w-full flex items-center gap-2 pr-4 overflow-x-scroll">
12+
{['알람', '멤버십', '정보'].map((tab) => (
13+
<button
14+
key={tab}
15+
onClick={() => setActiveTab(tab as '알람' | '멤버십' | '정보')}
16+
className={`w-fit whitespace-nowrap h-[35px] px-4 rounding-16 font-body1 text-left transition
17+
${activeTab === tab ? 'bg-primary-500 text-white' : 'bg-default-gray-400 text-default-gray-700'}`}
18+
>
19+
{tab} 설정
20+
</button>
21+
))}
22+
23+
<button
24+
onClick={handleLogout}
25+
disabled={logoutPending}
26+
className={`bg-default-gray-400 text-default-gray-700 w-fit whitespace-nowrap h-[35px] px-4 rounding-16 font-body1 text-left transition flex flex-row gap-[5px] items-center justify-center}`}
27+
>
28+
<LogoutSvg className="w-4 h-4" fill="none" stroke="CurrentColor" />
29+
<span>{logoutPending ? '로그아웃 중...' : '로그아웃'}</span>
30+
</button>
31+
</div>
32+
);
33+
}

0 commit comments

Comments
 (0)