Skip to content

design: 마이페이지 UI 수정 #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Seoje1405 merged 2 commits into from
Feb 11, 2026
Merged

design: 마이페이지 UI 수정 #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f33d1fb
design: 마이페이지 UI 수정
Seoje1405 Feb 10, 2026
e89b769
fix: 코드래빗 반영
Seoje1405 Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/me/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ export default function MyPage() {
return (
<main className="mx-auto min-h-screen max-w-2xl bg-white pb-20">
{/* 헤더 */}
<header className="sticky top-0 z-20 flex h-14 items-center justify-center border-b border-gray-100 bg-white">
<h1 className="text-lg font-bold">마이페이지</h1>
<header className="sticky top-0 z-20 flex h-20 items-center justify-center bg-white">
<h1 className="text-3xl leading-normal font-semibold">마이페이지</h1>
</header>
<div>
{/* 프로필 섹션 */}
Expand Down
12 changes: 7 additions & 5 deletions src/components/mypage/customer-service-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,16 @@ const customerServiceItems = [
export default function CustomerServiceSection() {
return (
<div className="border-t border-gray-200">
<h2 className="px-5 py-4 text-lg font-bold">고객센터</h2>
<div className="mx-5 rounded-lg border border-gray-200 px-5 py-5">
<div className="flex justify-center gap-8">
<h2 className="border-y border-black px-7 py-8 text-3xl leading-normal font-semibold">
고객센터
</h2>
<div className="mx-5 my-10 rounded-lg border border-black px-5 py-10">
<div className="flex items-center justify-center gap-14">
{customerServiceItems.map((item) => (
<Link
key={item.label}
href={item.href}
className="flex flex-col items-center gap-2"
className="flex max-w-20 flex-col items-center gap-2"
>
<div className="flex h-12 w-12 items-center justify-center">
<Image
Expand All @@ -39,7 +41,7 @@ export default function CustomerServiceSection() {
height={48}
/>
</div>
<span className="text-center text-xs font-medium whitespace-pre-wrap text-gray-700">
<span className="text-center text-lg leading-normal font-normal text-balance whitespace-pre-wrap">
{item.label}
</span>
</Link>
Expand Down
12 changes: 7 additions & 5 deletions src/components/mypage/my-shopping-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@ const shoppingMenuItems = [

export default function MyShoppingSection() {
return (
<div className="border-t border-gray-200">
<h2 className="px-5 py-4 text-lg font-bold">내 쇼핑</h2>
<div className="mx-5 rounded-lg border border-gray-200 px-5 py-5">
<div className="flex justify-center gap-12">
<div className="flex flex-col gap-10">
<h2 className="border-b border-black px-7 py-8 text-3xl leading-normal font-semibold">
내 쇼핑
</h2>
<div className="mx-5 mb-10 rounded-lg border border-black px-10 py-14">
<div className="flex items-center justify-center gap-[122px]">
{shoppingMenuItems.map((item) => (
<Link
key={item.label}
Expand All @@ -35,7 +37,7 @@ export default function MyShoppingSection() {
height={48}
/>
</div>
<span className="text-xs font-medium text-gray-700">
<span className="text-lg leading-normal font-normal">
{item.label}
</span>
</Link>
Expand Down
22 changes: 13 additions & 9 deletions src/components/mypage/payment-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Link from 'next/link';
import { CreditCard, Ticket, PiggyBank } from 'lucide-react';
import Image from 'next/image';

const paymentMenuItems = [
{
Expand All @@ -14,31 +14,35 @@ const paymentMenuItems = [
},
{
icon: 'icons/mission.svg',
label: '미션 후\n적립금',
label: '미션 후 적립금',
href: '/me/mission-points',
},
];

export default function PaymentSection() {
return (
<div className="border-t border-gray-200">
<h2 className="px-5 py-4 text-lg font-bold">결제 및 할인</h2>
<div className="mx-5 rounded-lg border border-gray-200 px-5 py-5">
<div className="flex justify-center gap-8">
<div>
<h2 className="border-y border-black px-7 py-8 text-3xl leading-normal font-semibold">
결제 및 할인
</h2>
<div className="mx-5 my-10 rounded-lg border border-black px-5 py-10">
<div className="flex items-center justify-center gap-14">
{paymentMenuItems.map((item) => (
<Link
key={item.label}
href={item.href}
className="flex flex-col items-center gap-2"
className="flex max-w-20 flex-col items-center gap-2"
>
<div className="flex h-12 w-12 items-center justify-center">
<img
<Image
src={`/${item.icon}`}
alt={item.label}
className="h-full w-full"
width={48}
height={48}
/>
</div>
<span className="text-center text-xs font-medium whitespace-pre-wrap text-gray-700">
<span className="text-center text-lg leading-normal font-normal text-balance whitespace-pre-wrap">
{item.label}
</span>
</Link>
Expand Down
8 changes: 4 additions & 4 deletions src/components/mypage/point-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ export default async function PointSection() {
const formattedPoints = user.points.toLocaleString();

return (
<div className="mx-5 rounded-lg border border-gray-200 px-5 py-4">
<div className="mx-5 rounded-lg border border-black py-4">
<div className="text-center">
<p className="mb-2 text-base font-medium text-gray-700">내 포인트</p>
<p className="text-2xl font-bold">
{formattedPoints}P <span className="text-xl">🪙</span>
<p className="mb-1 text-2xl leading-normal font-medium">내 포인트</p>
<p className="text-2xl leading-9 font-bold">
{formattedPoints}P <span>🪙</span>
</p>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/mypage/profile-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,22 @@ export default async function ProfileSection() {
}

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

<div className="flex flex-col gap-2">
<span className="text-xl font-semibold">
<span className="text-xl leading-normal font-medium">
{session.user.nickName || '사용자'}님
</span>
<Link
href="/me/edit"
className="bg-ongil-mint text-ongil-teal inline-flex items-center justify-center rounded-full px-4 py-1.5 text-sm font-medium"
className="bg-ongil-teal flex items-center justify-center rounded-md px-4 py-1 text-xl font-medium text-white"
>
내 정보 수정
<span>내 정보 수정</span>
</Link>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/mypage/quick-menu-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const menuItems = [

export default function QuickMenuSection() {
return (
<div className="mt-6 border-t border-gray-200 px-5 py-5">
<div className="mt-6 border-y border-black px-5 py-5">
<div className="grid grid-cols-4 gap-4">
{menuItems.map((item) => (
<Link
Expand All @@ -40,7 +40,7 @@ export default function QuickMenuSection() {
className="h-full w-full"
/>
</div>
<span className="text-xs font-medium text-gray-700">
<span className="text-lg leading-normal font-normal">
{item.label}
</span>
</Link>
Expand Down
12 changes: 6 additions & 6 deletions src/components/mypage/review-request-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,23 @@ export default function ReviewRequestCard({
reviewId,
}: ReviewRequestCardProps) {
return (
<div className="mx-5 mt-4 rounded-lg border border-gray-200 px-5 py-5">
<div className="text-center">
<p className="mb-1 text-sm text-gray-700">
<div className="mx-5 mt-4 rounded-lg border border-black px-5 py-5">
<div className="text-center text-xl leading-normal font-medium">
<p className="mb-1">
{productName} 제품을
<br />
구매한지 한달이 지나셨네요!
</p>
<p className="mb-4 mt-3 text-sm text-gray-700">
<p className="mt-3 mb-4">
한달 후 후기를 작성하고 {reviewPoints}p
<br />
받으러 가실까요?
</p>
<Link
href={reviewId ? `/review/write/${reviewId}` : '/review/write'}
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

reviewId가 0일 때 falsy로 평가되어 fallback 경로로 빠집니다.

reviewId?: number이므로 0이 유효한 ID라면 조건문이 의도와 다르게 동작합니다. 실제 ID 체계에서 0이 불가능하다면 무시해도 됩니다.

🛡️ 엄격한 undefined 체크 
-          href={reviewId ? `/review/write/${reviewId}` : '/review/write'}
+          href={reviewId !== undefined ? `/review/write/${reviewId}` : '/review/write'}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
href={reviewId ? `/review/write/${reviewId}` : '/review/write'}
href={reviewId !== undefined ? `/review/write/${reviewId}` : '/review/write'}
🤖 Prompt for AI Agents 
In `@src/components/mypage/review-request-card.tsx` at line 28, The ternary for
the href treats reviewId as falsy (so 0 falls back incorrectly); change the
conditional to explicitly check for undefined/null (e.g., use reviewId != null
or reviewId !== undefined) when building the path so a valid 0 ID is
preserved—update the expression where href is set (the ternary using reviewId)
in the review-request-card component to use an explicit null/undefined check.

className="inline-flex items-center justify-center rounded-full bg-ongil-teal px-6 py-2 text-sm font-medium text-white"
className="bg-ongil-teal inline-block rounded-lg px-7 py-2 text-white"
>
받으러 가기
받으러가기
</Link>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</div>
</div>
Expand Down
25 changes: 16 additions & 9 deletions src/components/mypage/settings-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import Link from 'next/link';
import { signOut } from 'next-auth/react';
import Image from 'next/image';

const settingsItems = [
{
Expand Down Expand Up @@ -36,9 +37,11 @@ export default function SettingsSection() {

return (
<div className="border-t border-gray-200">
<h2 className="px-5 py-4 text-lg font-bold">설정</h2>
<div className="mx-5 rounded-lg border border-gray-200 px-5 py-5">
<div className="grid grid-cols-2 gap-6">
<h2 className="border-y border-black px-7 py-8 text-3xl leading-normal font-semibold">
설정
</h2>
<div className="mx-5 my-10 rounded-lg border border-black px-5 py-4">
<div className="grid grid-flow-col grid-rows-2 items-center justify-between gap-10">
{settingsItems.map((item) =>
item.type === 'logout' ? (
<button
Expand All @@ -47,13 +50,15 @@ export default function SettingsSection() {
className="flex flex-col items-center gap-2"
>
<div className="flex h-12 w-12 items-center justify-center">
<img
src={item.icon}
<Image
src={`/${item.icon}`}
alt={item.label}
className="h-full w-full"
width={48}
height={48}
/>
</div>
<span className="text-xs font-medium text-gray-700">
<span className="text-center text-lg leading-normal font-normal">
{item.label}
</span>
</button>
Expand All @@ -64,13 +69,15 @@ export default function SettingsSection() {
className="flex flex-col items-center gap-2"
>
<div className="flex h-12 w-12 items-center justify-center">
<img
src={item.icon}
<Image
src={`/${item.icon}`}
alt={item.label}
className="h-full w-full"
width={48}
height={48}
/>
</div>
<span className="text-xs font-medium text-gray-700">
<span className="text-center text-lg leading-normal font-normal">
{item.label}
</span>
</Link>
Expand Down