Feature/myprofile

src/components/common/card/MyCard.tsx

@@ -33,10 +33,10 @@ export function MyCard({ rating, timeAgo, title, review, rightSlot, className }:
       </div>
 
       {/* 제목 */}
-      <h3 className='text-md font-semibold text-gray-900'>{title}</h3>
+      <h3 className='custom-text-md-medium md:custom-text-lg-medium text-gray-300'>{title}</h3>
 
       {/* 리뷰 내용 */}
-      <p className='text-sm text-gray-700'>{review}</p>
+      <p className='custom-text-md-regular md:custom-text-lg-regular text-gray-800'>{review}</p>
     </div>
   );
 }

src/components/common/dropdown/MenuDropdown.tsx

@@ -28,7 +28,7 @@ interface MenuDropdownProps {
 
 export default function MenuDropdown({ options, onSelect, trigger }: MenuDropdownProps) {
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       {/* 드롭다운 트리거 버튼 */}
       <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
       {/* 드롭다운 메뉴 영역 */}

src/pages/myprofile/Profile.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+
+import { useForm, type SubmitHandler } from 'react-hook-form';
+
+import Input from '@/components/common/Input';
+import { Button } from '@/components/ui/button';
+
+interface ProfileProps {
+  nickname: string; // 현재 사용자 닉네임 (초기값으로 사용)
+  profileImageUrl: string; // 프로필 이미지 URL (이미지 표시용)
+}
+
+interface FormValues {
+  nickname: string; // 폼에서 입력할 닉네임 값
+}
+
+export default function Profile({ nickname, profileImageUrl }: ProfileProps) {
+  // useForm 훅 초기화
+  const {
+    register, // input 등록용 함수
+    handleSubmit, // 폼 제출 핸들러 래퍼
+    watch, // 특정 필드 값 관찰
+    reset, // 폼 상태 초기화
+    formState: { isSubmitting }, // 제출 중 상태
+  } = useForm<FormValues>({
+    defaultValues: { nickname }, // 초기값으로 기존 닉네임 설정
+    mode: 'onChange', // 입력 시마다 유효성 검사 실행
+  });
+
+  // 현재 입력된 값을 관찰
+  const current = watch('nickname');
+  // 기존 닉네임과 다르고 비어있지 않을 때만 true
+  const isChanged = current.trim().length > 0 && current !== nickname;
+
+  // 폼 제출 시 호출되는 함수
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      // 실제 API 연결 시 axios/fetch 호출로 교체
+      await new Promise((r) => setTimeout(r, 1000));
+      console.log(`닉네임 변경: ${nickname} → ${data.nickname}`);
+
+      // 제출 성공 후 폼 상태를 새 기본값으로 초기화
+      reset({ nickname: data.nickname });
+    } catch (e) {
+      // 에러 UI 없이 콘솔에만 출력
+      console.error('닉네임 변경 오류:', e);
+    }
+  };
+
+  return (
+    <div className='p-5 flex flex-col gap-5 rounded-xl border bg-white xl:justify-between xl:py-7 xl:h-[530px] shadow-md'>
+      {/* 프로필 섹션: 이미지 & 현재 닉네임 */}
+      <div className='flex items-center gap-4 xl:flex-col xl:gap-8'>
+        <div className='w-16 h-16 rounded-full overflow-hidden xl:w-40 xl:h-40'>
+          {/* 추후 이미지 업로드 기능 추가 필요 */}
+          <img src={profileImageUrl} alt='프로필 이미지' className='w-full h-full object-cover' />
+        </div>
+        <div className='custom-text-xl-bold text-gray-800 md:custom-text-2xl-bold'>{nickname}</div>
+      </div>
+
+      {/* 닉네임 변경 폼 */}
+      <form
+        onSubmit={handleSubmit(onSubmit)} // react-hook-form 제출 처리
+        className='flex flex-col items-end gap-1.5 md:flex-row xl:flex-col'
+      >
+        {/* 입력 필드 그룹 */}
+        <div className='flex flex-col w-full gap-[10px]'>
+          <label
+            htmlFor='nickname'
+            className='custom-text-md-medium text-gray-800 md:custom-text-lg-medium'
+          >
+            닉네임
+          </label>
+          <Input
+            id='nickname'
+            type='text'
+            variant='name'
+            placeholder='새 닉네임을 입력하세요'
+            defaultValue={nickname} // 초기값 설정
+            {...register('nickname', {
+              required: '닉네임을 입력해주세요.',
+              minLength: { value: 2, message: '최소 2자 이상 입력하세요.' },
+              maxLength: { value: 20, message: '최대 20자까지 가능합니다.' },
+            })}
+            onInvalid={(e: React.FormEvent<HTMLInputElement>) =>
+              // 브라우저 유효성 오류를 콘솔에만 출력
+              console.error(
+                '닉네임 유효성 오류:',
+                (e.currentTarget as HTMLInputElement).validationMessage,
+              )
+            }
+          />
+        </div>
+
+        {/* 제출 버튼: 버튼이 좀 이상해서 api 연결 후 수정해보겠습니다다 */}
+        <Button
+          type='submit'
+          variant='purpleDark'
+          className='min-w-[89px] md:min-w-[116px] xl:min-w-[96px]'
+          size='sm'
+          fontSize='md'
+          disabled={!isChanged || isSubmitting} // 변경된 상태 && 제출 중 아님
+        >
+          {isSubmitting ? '변경 중…' : '변경하기'} {/* 제출 중 텍스트 토글 */}
+        </Button>
+      </form>
+    </div>
+  );
+}

src/pages/myprofile/ReviewList.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { useQuery } from '@tanstack/react-query';
+
+import DotIcon from '@/assets/icons/dot.svg';
+import { MyCard } from '@/components/common/card/MyCard';
+import MenuDropdown from '@/components/common/dropdown/MenuDropdown';
+import { Badge } from '@/components/ui/badge';
+
+import { mockMyReviewsPage1 } from './mockUser';
+
+/**
+ * Review 타입 정의 (mock 데이터에서 추론)
+ */
+type Review = (typeof mockMyReviewsPage1.list)[number];
+
+/**
+ * 데이터 가져오는 함수 (현재는 mock, 추후 API 호출로 교체)
+ * 데이터 패치 내용은 무한스크롤 훅 구현 후 수정될 예정입니다
+ */
+async function fetchReviews(): Promise<Review[]> {
+  return mockMyReviewsPage1.list;
+}
+
+/**
+ * ReviewList 컴포넌트
+ * - React Query의 useQuery 훅을 사용해 리뷰 데이터를 패칭
+ * - 로딩 및 에러 상태를 처리한 뒤, MyCard 컴포넌트로 리스트를 렌더링
+ */
+export function ReviewList() {
+  // React Query로 리뷰 데이터 요청
+  const {
+    data: items = [],
+    isLoading,
+    isError,
+  } = useQuery<Review[], Error>({
+    queryKey: ['myReviews'],
+    queryFn: fetchReviews,
+  });
+
+  // 로딩 중 표시
+  if (isLoading) {
+    return <p className='text-center py-4'>리뷰 불러오는 중…</p>;
+  }
+
+  // 에러 시 표시
+  if (isError) {
+    return <p className='text-center py-4'>리뷰 불러오기 실패</p>;
+  }
+
+  // 실제 리뷰 리스트 렌더링
+  return (
+    <div className='space-y-4 mt-4'>
+      {items.map((review) => (
+        <MyCard
+          key={review.id}
+          // 별점 뱃지
+          rating={
+            <Badge variant='star'>
+              <span className='inline-block w-full h-full pt-[2px]'>
+                ★ {review.rating.toFixed(1)}
+              </span>
+            </Badge>
+          }
+          // 작성일
+          timeAgo={new Date(review.createdAt).toLocaleDateString()}
+          // 작성자 닉네임
+          title={review.user.nickname}
+          // 리뷰 내용
+          review={review.content}
+          // dot 아이콘 클릭 시 드롭다운 오픈
+          rightSlot={
+            <MenuDropdown
+              trigger={
+                <button className='w-6 h-6 text-gray-500 hover:text-primary transition-colors'>
+                  <DotIcon />
+                </button>
+              }
+              options={[
+                { label: '수정하기', value: 'edit' },
+                { label: '삭제하기', value: 'delete' },
+              ]}
+              onSelect={(value) => console.log(`${value} clicked for review id: ${review.id}`)}
+            />
+          }
+        />
+      ))}
+    </div>
+  );
+}

src/pages/myprofile/Tab.tsx

@@ -0,0 +1,33 @@
+type Tab = 'reviews' | 'wines';
+
+interface TabNavProps {
+  current: Tab;
+  onChange: (t: Tab) => void;
+  reviewsCount: number;
+  winesCount: number;
+}
+
+export function TabNav({ current, onChange, reviewsCount, winesCount }: TabNavProps) {
+  const count = current === 'reviews' ? reviewsCount : winesCount;
+
+  return (
+    <nav className='flex justify-between items-center'>
+      <div className='flex justify-start gap-4'>
+        {(['reviews', 'wines'] as Tab[]).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => onChange(tab)}
+            className={`text-center custom-text-2lg-bold md:custom-text-xl-bold ${
+              current === tab ? 'text-gray-800' : 'text-gray-500'
+            }`}
+          >
+            {tab === 'reviews' ? '내가 쓴 후기' : '내가 등록한 와인'}
+          </button>
+        ))}
+      </div>
+      <span className='custom-text-xs-regular text-primary md:custom-text-md-regular '>
+        총 {count}개
+      </span>
+    </nav>
+  );
+}

src/pages/myprofile/WineList.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import { useQuery } from '@tanstack/react-query';
+
+import DotIcon from '@/assets/icons/dot.svg';
+import { ImageCard } from '@/components/common/card/ImageCard';
+import MenuDropdown from '@/components/common/dropdown/MenuDropdown';
+import { Badge } from '@/components/ui/badge';
+
+import { mockMyWinesPage1 } from './mockUser';
+
+/**
+ * Wine 타입 정의 (mock 데이터에서 추론)
+ */
+type Wine = (typeof mockMyWinesPage1.list)[number];
+
+/**
+ * 데이터 가져오는 함수 (현재는 mock, 추후 API 호출로 교체)
+ * 데이터 패치 내용은 무한스크롤 훅 구현 후 수정될 예정입니다
+ */
+async function fetchWines(): Promise<Wine[]> {
+  return mockMyWinesPage1.list;
+}
+
+/**
+ * WineList 컴포넌트
+ * - React Query의 useQuery 훅을 사용해 리뷰 데이터를 패칭
+ * - 로딩 및 에러 상태를 처리한 뒤, ImageCard 컴포넌트로 리스트를 렌더링
+ */
+export function WineList() {
+  // React Query로 와인 목록 패칭
+  const {
+    data: items = [],
+    isLoading,
+    isError,
+  } = useQuery<Wine[], Error>({
+    queryKey: ['myWines'],
+    queryFn: fetchWines,
+  });
+
+  // 로딩 중 표시
+  if (isLoading) {
+    return <p className='text-center py-4'>와인 불러오는 중…</p>;
+  }
+
+  // 에러 시 표시
+  if (isError) {
+    return <p className='text-center py-4'>와인 불러오기 실패</p>;
+  }
+
+  return (
+    <div className='flex flex-col mt-9 space-y-9 md:space-y-16 md:mt-16'>
+      {items.map((w) => (
+        <ImageCard
+          key={w.id}
+          className='relative pl-24 min-h-[164px] md:min-h-[228px] md:pl-44 md:pt-10'
+          imageSrc={w.image}
+          imageClassName='object-contain absolute left-3 bottom-0 h-[185px] md:h-[270px] md:left-12'
+          rightSlot={
+            // dot 아이콘 클릭 시 드롭다운 오픈
+            <MenuDropdown
+              trigger={
+                <button className='w-6 h-6 text-gray-500 hover:text-primary transition-colors'>
+                  <DotIcon />
+                </button>
+              }
+              options={[
+                { label: '수정하기', value: 'edit' },
+                { label: '삭제하기', value: 'delete' },
+              ]}
+              onSelect={(value) => console.log(`${value} clicked for wine id: ${w.id}`)}
+            />
+          }
+        >
+          {/* 카드 내부: 와인 정보 */}
+          <div className='flex flex-col items-start justify-center h-full'>
+            <h4 className='text-xl/6 font-semibold text-gray-800 mb-4 md:text-3xl md:mb-5'>
+              {w.name} {/* 와인 이름 */}
+            </h4>
+            <p className='custom-text-md-legular text-gray-500 mb-2 md:custom-text-lg-legular md:mb-4'>
+              {w.region} {/* 생산 지역 */}
+            </p>
+            <Badge variant='priceBadge'>
+              <span className='inline-block w-full h-full pt-[3px]'>
+                {/* 가격 표시 */}₩ {w.price.toLocaleString()}
+              </span>
+            </Badge>
+          </div>
+        </ImageCard>
+      ))}
+    </div>
+  );
+}

src/pages/myprofile/index.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+
+import { mockMyReviewsPage1, mockMyWinesPage1 } from './mockUser';
+import Profile from './Profile';
+import { ReviewList } from './ReviewList';
+import { TabNav } from './Tab';
+import { WineList } from './WineList';
+
+export default function MyProfile() {
+  // 탭 상태: 'reviews' | 'wines'
+  const [tab, setTab] = useState<'reviews' | 'wines'>('reviews');
+
+  return (
+    <div className='min-h-screen'>
+      <main className='max-w-6xl mx-auto p-4 gap-6 flex flex-col xl:flex-row'>
+        {/* 프로필 섹션 */}
+        <Profile nickname='홍길동' profileImageUrl='https://picsum.photos/64' />
+
+        {/* 탭 & 리스트 섹션 */}
+        <div className='flex flex-col flex-1'>
+          <TabNav
+            current={tab}
+            onChange={setTab}
+            reviewsCount={mockMyReviewsPage1.totalCount}
+            winesCount={mockMyWinesPage1.totalCount}
+          />
+
+          {/* 탭에 따라 ReviewList 또는 WineList에 props 전달 */}
+          {tab === 'reviews' ? <ReviewList /> : <WineList />}
+        </div>
+      </main>
+    </div>
+  );
+}