✨Feat : MyPage 작업

src/pages/mypage/components/PostcardContainer.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import Image from 'next/image';
+import { cn } from '@/shared/lib';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+interface PostcardContainerProps {
+  postcards: string[];
+  onClickCard?: (index: number) => void;
+  className?: string;
+  bordered?: boolean;
+}
+
+const postcardContainerStyle = cva(
+  `
+  layout-grid w-full
+  rounded-[20px] border bg-pink-50 border-pink-200
+  p-[1.2rem] gap-[0.6rem]
+  overflow-y-hidden no-scrollbar
+  transition-all
+  `,
+  {
+    variants: {
+      bordered: {
+        false: 'border-none',
+      },
+    },
+    defaultVariants: {
+      bordered: true,
+    },
+  },
+);
+
+const postcardGridStyle = `
+ grid grid-rows-2 grid-flow-col
+auto-cols-[minmax(70px,70px)]
+gap-[0.6rem]
+ `;
+
+const postcardCardStyle = cva(
+  `
+  flex aspect-square rounded-[8px]
+  border border-pink-200 overflow-hidden
+  bg-gray-100 transition
+  `,
+  {
+    variants: {
+      interactive: {
+        true: 'cursor-pointer hover:opacity-80',
+        false: 'cursor-default',
+      },
+    },
+    defaultVariants: {
+      interactive: true,
+    },
+  },
+);
+
+export default function PostcardContainer({
+  postcards = [],
+  onClickCard,
+  className,
+  bordered,
+}: PostcardContainerProps) {
+  // 엽서 기본 8개 (null placeholder유지) + 9개 부터는 가로 스크롤
+  const totalSlots = Math.max(postcards.length, 8);
+  const filledSlots = Array(totalSlots)
+    .fill(null)
+    .map((_, i) => postcards[i] ?? null);
+
+  return (
+  <div
+    className={cn(
+      postcardContainerStyle({ bordered }),
+      className,
+      postcards.length > 8 && 'overflow-x-auto',
+    )}
+  >
+    <div
+      className={cn(
+        postcardGridStyle,
+        postcards.length <= 8 && 'justify-center',
+      )}
+    >
+      {filledSlots.map((src, idx) => (
+        <button
+          key={idx}
+          onClick={() => src && onClickCard?.(idx)}
+          disabled={!src}
+          aria-disabled={!src}
+          className={cn(
+            postcardCardStyle({ interactive: !!src }),
+            !src && 'items-center justify-center bg-gray-200',
+          )}
+        >
+          {src && (
+            <Image
+              src={src}
+              alt={`엽서 ${idx + 1}`}
+              width={200}
+              height={200}
+              className="w-full h-full object-cover"
+            />
+          )}
+        </button>
+      ))}
+    </div>
+  </div>
+);
+
+}

src/pages/mypage/components/ProfilePhoto.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { Icon } from '@/shared/icons';
+import { cn } from '@/shared/lib';
+
+interface ProfilePhotoProps {
+  src?: string;
+  className?: string;
+}
+
+export default function ProfilePhoto({
+  src,
+  className,
+}: ProfilePhotoProps) {
+  const baseStyle = `
+    flex items-center justify-center
+    h-[14.6rem] w-[14.6rem]
+    rounded-[20px]
+    border border-gray-300
+    bg-gray-100
+    overflow-hidden
+  `;
+
+  return (
+    <div className={cn(baseStyle, className)}>
+      {src ? (
+        <img src={src} className='w-full h-full object-cover' />
+      ) : (
+        <div className='p-[6.1rem] flex items-center justify-center'>
+          <Icon name='User' size={24} color='gray-500' />
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/mypage/index.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React, { useState } from 'react';
+import ProfilePhoto from '@/pages/mypage/components/ProfilePhoto';
+import PostcardContainer from '@/pages/mypage/components/PostcardContainer';
+import { EventCard, BottomNav, PopupSet } from '@/shared/components';
+
+export default function MyPage() {
+ const [showLogoutPopup, setShowLogoutPopup] = useState(false); 
+  const handleLogout = () => {
+    setShowLogoutPopup(true);
+  };
+
+  return (
+    <main className='w-full min-h-screen bg-white flex flex-col items-center'>
+      <div className='w-full flex flex-col items-center px-[2.3rem] pb-[2rem]'>
+        {/* 프로필 */}
+        <section className='w-full flex flex-col items-center mt-[2.4rem] gap-[1.0rem]'>
+          <ProfilePhoto/>
+          <p className='text-title-md'>이름</p>
+        </section>
+
+        {/* 저장한 행사 */}
+        <section className='w-full mt-[1.6rem]'>
+          <p className='text-label-lg mb-[1rem] pl-[1rem]'>저장한 행사</p>
+          <div className='max-h-[18rem] overflow-y-auto no-scrollbar space-y-[1rem]'>
+            <EventCard
+              name='골반 통신 이상 감지'
+              address='우리집'
+              description='내 골반이 멈추지 않아서 일까?'
+              variant='gray'
+              size='large'
+              imageSrc=''
+            />
+            <EventCard
+              name='이혼 숙려 캠프'
+              address='우리집'
+              description='앙 이라는 감정'
+              variant='gray'
+              size='large'
+              imageSrc=''
+            />
+          </div>
+        </section>
+
+        {/* 저장한 엽서 */}
+        <section className='w-full mt-[1.8rem]'>
+          <p className='text-label-lg mb-[0.6rem] pl-[1rem]'>저장한 엽서</p>
+          <PostcardContainer postcards={[]} />
+        </section>
+
+        {/* 로그아웃 */}
+        <button
+          type='button'
+          onClick={handleLogout}
+          className='mt-[2.1em] text-label-md text-gray-400 cursor-pointer underline underline-offset-[0.25rem]'
+        >
+          로그아웃
+        </button>
+      </div>
+      <BottomNav />
+
+       {showLogoutPopup && (
+        <PopupSet
+          text="로그아웃 하시겠습니까?"
+          onClose={() => {
+            setShowLogoutPopup(false);
+          }}
+        />
+      )}
+    </main>
+  );
+}

src/shared/components/index.ts

@@ -2,3 +2,10 @@ export { default as Header } from './header/Header';
 export { default as ControlBar } from './header/ControlBar';
 export { default as Tag } from './tag/Tag';
 export { DatePicker } from './datePicker/DatePicker';
+export { default as LocationBubbleSet } from './set/LocationBubbleSet';
+export { default as PopupSet } from './set/PopupSet';
+export { default as LocationCard } from './container/LocationCard';
+export { default as EventCard } from './container/EventCard';
+export { default as AddressCopy } from './button/AddressCopy';
+export { default as CommonButton } from './button/CommonButton';
+export { BottomNav } from './tab/BottomNav';

src/styles/globals.css

@@ -219,3 +219,5 @@ html, body {
 @utility max-w-mobile { max-width: var(--max-w-mobile); }
 @utility min-w-100 { min-width: var(--min-w-100); }
 
+.no-scrollbar::-webkit-scrollbar { display: none; }
+.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }