Skip to content

Commit f33d1fb

Browse files
Seoje1405Seoje1405
committed
design: 마이페이지 UI 수정
1 parent 7b79d09 commit f33d1fb

9 files changed

Lines changed: 63 additions & 46 deletions

‎src/app/me/page.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ export default function MyPage() {
1212
return (
1313
<main className="mx-auto min-h-screen max-w-2xl bg-white pb-20">
1414
{/* 헤더 */}
15-
<header className="sticky top-0 z-20 flex h-14 items-center justify-center border-b border-gray-100 bg-white">
16-
<h1 className="text-lg font-bold">마이페이지</h1>
15+
<header className="sticky top-0 z-20 flex h-16 items-center justify-center bg-white">
16+
<h1 className="mt-6 text-3xl leading-normal font-semibold">
17+
마이페이지
18+
</h1>
1719
</header>
1820
<div>
1921
{/* 프로필 섹션 */}

‎src/components/mypage/customer-service-section.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,16 @@ const customerServiceItems = [
2222
export default function CustomerServiceSection() {
2323
return (
2424
<div className="border-t border-gray-200">
25-
<h2 className="px-5 py-4 text-lg font-bold">고객센터</h2>
26-
<div className="mx-5 rounded-lg border border-gray-200 px-5 py-5">
27-
<div className="flex justify-center gap-8">
25+
<h2 className="border-y border-black px-7 py-8 text-3xl leading-normal font-semibold">
26+
고객센터
27+
</h2>
28+
<div className="mx-5 my-10 rounded-lg border border-black px-5 py-10">
29+
<div className="flex items-center justify-center gap-14">
2830
{customerServiceItems.map((item) => (
2931
<Link
3032
key={item.label}
3133
href={item.href}
32-
className="flex flex-col items-center gap-2"
34+
className="flex max-w-20 flex-col items-center gap-2"
3335
>
3436
<div className="flex h-12 w-12 items-center justify-center">
3537
<Image
@@ -39,7 +41,7 @@ export default function CustomerServiceSection() {
3941
height={48}
4042
/>
4143
</div>
42-
<span className="text-center text-xs font-medium whitespace-pre-wrap text-gray-700">
44+
<span className="text-center text-lg leading-normal font-normal text-balance whitespace-pre-wrap">
4345
{item.label}
4446
</span>
4547
</Link>

‎src/components/mypage/my-shopping-section.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@ const shoppingMenuItems = [
1616

1717
export default function MyShoppingSection() {
1818
return (
19-
<div className="border-t border-gray-200">
20-
<h2 className="px-5 py-4 text-lg font-bold">내 쇼핑</h2>
21-
<div className="mx-5 rounded-lg border border-gray-200 px-5 py-5">
22-
<div className="flex justify-center gap-12">
19+
<div className="flex flex-col gap-10">
20+
<h2 className="border-b border-black px-7 py-8 text-3xl leading-normal font-semibold">
21+
내 쇼핑
22+
</h2>
23+
<div className="mx-5 mb-10 rounded-lg border border-black px-10 py-14">
24+
<div className="flex items-center justify-center gap-[122px]">
2325
{shoppingMenuItems.map((item) => (
2426
<Link
2527
key={item.label}
@@ -35,7 +37,7 @@ export default function MyShoppingSection() {
3537
height={48}
3638
/>
3739
</div>
38-
<span className="text-xs font-medium text-gray-700">
40+
<span className="text-lg leading-normal font-normal">
3941
{item.label}
4042
</span>
4143
</Link>

‎src/components/mypage/payment-section.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Link from 'next/link';
2-
import { CreditCard, Ticket, PiggyBank } from 'lucide-react';
2+
import Image from 'next/image';
33

44
const paymentMenuItems = [
55
{
@@ -14,31 +14,35 @@ const paymentMenuItems = [
1414
},
1515
{
1616
icon: 'icons/mission.svg',
17-
label: '미션 후\n적립금',
17+
label: '미션 후 적립금',
1818
href: '/me/mission-points',
1919
},
2020
];
2121

2222
export default function PaymentSection() {
2323
return (
24-
<div className="border-t border-gray-200">
25-
<h2 className="px-5 py-4 text-lg font-bold">결제 및 할인</h2>
26-
<div className="mx-5 rounded-lg border border-gray-200 px-5 py-5">
27-
<div className="flex justify-center gap-8">
24+
<div>
25+
<h2 className="border-y border-black px-7 py-8 text-3xl leading-normal font-semibold">
26+
결제 및 할인
27+
</h2>
28+
<div className="mx-5 my-10 rounded-lg border border-black px-5 py-10">
29+
<div className="flex items-center justify-center gap-14">
2830
{paymentMenuItems.map((item) => (
2931
<Link
3032
key={item.label}
3133
href={item.href}
32-
className="flex flex-col items-center gap-2"
34+
className="flex max-w-20 flex-col items-center gap-2"
3335
>
3436
<div className="flex h-12 w-12 items-center justify-center">
35-
<img
37+
<Image
3638
src={`/${item.icon}`}
3739
alt={item.label}
3840
className="h-full w-full"
41+
width={48}
42+
height={48}
3943
/>
4044
</div>
41-
<span className="text-center text-xs font-medium whitespace-pre-wrap text-gray-700">
45+
<span className="text-center text-lg leading-normal font-normal text-balance whitespace-pre-wrap">
4246
{item.label}
4347
</span>
4448
</Link>

‎src/components/mypage/point-section.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ export default async function PointSection() {
77
const formattedPoints = user.points.toLocaleString();
88

99
return (
10-
<div className="mx-5 rounded-lg border border-gray-200 px-5 py-4">
10+
<div className="mx-5 rounded-lg border border-black py-4">
1111
<div className="text-center">
12-
<p className="mb-2 text-base font-medium text-gray-700">내 포인트</p>
13-
<p className="text-2xl font-bold">
14-
{formattedPoints}P <span className="text-xl">🪙</span>
12+
<p className="mb-1 text-2xl leading-normal font-medium">내 포인트</p>
13+
<p className="text-2xl leading-9 font-bold">
14+
{formattedPoints}P <span>🪙</span>
1515
</p>
1616
</div>
1717
</div>

‎src/components/mypage/profile-section.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,22 @@ export default async function ProfileSection() {
1111
}
1212

1313
return (
14-
<div className="flex items-center gap-4 px-5 py-6">
14+
<div className="mt-4 flex items-center gap-5 px-4 py-6">
1515
<div className="relative">
1616
<div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-full bg-gray-100">
1717
<Profile session={session} />
1818
</div>
1919
</div>
2020

2121
<div className="flex flex-col gap-2">
22-
<span className="text-xl font-semibold">
22+
<span className="text-xl leading-normal font-medium">
2323
{session.user.nickName || '사용자'}님
2424
</span>
2525
<Link
2626
href="/me/edit"
27-
className="bg-ongil-mint text-ongil-teal inline-flex items-center justify-center rounded-full px-4 py-1.5 text-sm font-medium"
27+
className="bg-ongil-teal flex items-center justify-center rounded-md px-4 py-1 text-xl font-medium text-white"
2828
>
29-
내 정보 수정
29+
<span>내 정보 수정</span>
3030
</Link>
3131
</div>
3232
</div>

‎src/components/mypage/quick-menu-section.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const menuItems = [
2525

2626
export default function QuickMenuSection() {
2727
return (
28-
<div className="mt-6 border-t border-gray-200 px-5 py-5">
28+
<div className="mt-6 border-y border-black px-5 py-5">
2929
<div className="grid grid-cols-4 gap-4">
3030
{menuItems.map((item) => (
3131
<Link
@@ -40,7 +40,7 @@ export default function QuickMenuSection() {
4040
className="h-full w-full"
4141
/>
4242
</div>
43-
<span className="text-xs font-medium text-gray-700">
43+
<span className="text-lg leading-normal font-normal">
4444
{item.label}
4545
</span>
4646
</Link>

‎src/components/mypage/review-request-card.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,23 @@ export default function ReviewRequestCard({
1212
reviewId,
1313
}: ReviewRequestCardProps) {
1414
return (
15-
<div className="mx-5 mt-4 rounded-lg border border-gray-200 px-5 py-5">
16-
<div className="text-center">
17-
<p className="mb-1 text-sm text-gray-700">
15+
<div className="mx-5 mt-4 rounded-lg border border-black px-5 py-5">
16+
<div className="text-center text-xl leading-normal font-medium">
17+
<p className="mb-1">
1818
{productName} 제품을
1919
<br />
2020
구매한지 한달이 지나셨네요!
2121
</p>
22-
<p className="mb-4 mt-3 text-sm text-gray-700">
22+
<p className="mt-3 mb-4">
2323
한달 후 후기를 작성하고 {reviewPoints}p
2424
<br />
2525
받으러 가실까요?
2626
</p>
2727
<Link
2828
href={reviewId ? `/review/write/${reviewId}` : '/review/write'}
29-
className="inline-flex items-center justify-center rounded-full bg-ongil-teal px-6 py-2 text-sm font-medium text-white"
29+
className="bg-ongil-teal rounded-lg px-7 py-2 text-white"
3030
>
31-
받으러 가기
31+
<span>받으러가기</span>
3232
</Link>
3333
</div>
3434
</div>

‎src/components/mypage/settings-section.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import Link from 'next/link';
44
import { signOut } from 'next-auth/react';
5+
import Image from 'next/image';
56

67
const settingsItems = [
78
{
@@ -36,9 +37,11 @@ export default function SettingsSection() {
3637

3738
return (
3839
<div className="border-t border-gray-200">
39-
<h2 className="px-5 py-4 text-lg font-bold">설정</h2>
40-
<div className="mx-5 rounded-lg border border-gray-200 px-5 py-5">
41-
<div className="grid grid-cols-2 gap-6">
40+
<h2 className="border-y border-black px-7 py-8 text-3xl leading-normal font-semibold">
41+
설정
42+
</h2>
43+
<div className="mx-5 my-10 rounded-lg border border-black px-5 py-4">
44+
<div className="grid grid-flow-col grid-rows-2 items-center justify-between gap-10">
4245
{settingsItems.map((item) =>
4346
item.type === 'logout' ? (
4447
<button
@@ -47,13 +50,15 @@ export default function SettingsSection() {
4750
className="flex flex-col items-center gap-2"
4851
>
4952
<div className="flex h-12 w-12 items-center justify-center">
50-
<img
51-
src={item.icon}
53+
<Image
54+
src={`/${item.icon}`}
5255
alt={item.label}
5356
className="h-full w-full"
57+
width={48}
58+
height={48}
5459
/>
5560
</div>
56-
<span className="text-xs font-medium text-gray-700">
61+
<span className="text-center text-lg leading-normal font-normal">
5762
{item.label}
5863
</span>
5964
</button>
@@ -64,13 +69,15 @@ export default function SettingsSection() {
6469
className="flex flex-col items-center gap-2"
6570
>
6671
<div className="flex h-12 w-12 items-center justify-center">
67-
<img
68-
src={item.icon}
72+
<Image
73+
src={`/${item.icon}`}
6974
alt={item.label}
7075
className="h-full w-full"
76+
width={48}
77+
height={48}
7178
/>
7279
</div>
73-
<span className="text-xs font-medium text-gray-700">
80+
<span className="text-center text-lg leading-normal font-normal">
7481
{item.label}
7582
</span>
7683
</Link>

0 commit comments

Comments
 (0)