From 4178c7ea33960c85c75596667cf4a428a07121e3 Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Tue, 11 Feb 2025 13:06:21 +0900
Subject: [PATCH 01/10] =?UTF-8?q?Feat:=20Calendar,=20User=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Icon/assets/Calendar.tsx           |  4 ++--
 src/components/common/Icon/assets/User.tsx    | 24 +++++++++++++++++++
 src/components/common/Icon/assets/index.ts    |  6 +++++
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/Icon/assets/User.tsx

diff --git a/src/components/common/Icon/assets/Calendar.tsx b/src/components/common/Icon/assets/Calendar.tsx
index 9ebd1125..08cf03d3 100644
--- a/src/components/common/Icon/assets/Calendar.tsx
+++ b/src/components/common/Icon/assets/Calendar.tsx
@@ -10,13 +10,13 @@ const Calendar = ({
     <svg
       width={width}
       height={height}
-      viewBox='0 0 20 20'
+      viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M5.62433 2.49526V4.37026M14.3746 2.49414V4.36914M2.49805 15.618V6.24288C2.49805 5.2074 3.33755 4.36797 4.37313 4.36797H15.623C16.6585 4.36797 17.498 5.2074 17.498 6.24289V15.618M2.49805 15.618C2.49805 16.6535 3.33755 17.493 4.37313 17.493H15.623C16.6585 17.493 17.498 16.6535 17.498 15.618M2.49805 15.618V9.36829C2.49805 8.3328 3.33755 7.49337 4.37313 7.49337H15.623C16.6585 7.49337 17.498 8.3328 17.498 9.36829V15.618M11.873 10.6182H13.748M6.24802 12.4932H9.99802M9.9998 10.6182H10.0045V10.6229H9.9998V10.6182ZM9.9992 14.3684H10.0039V14.3731H9.9992V14.3684ZM8.1239 14.369H8.12859V14.3737H8.1239V14.369ZM6.24862 14.3684H6.2533V14.3731H6.24862V14.3684ZM11.8739 12.4963H11.8786V12.501H11.8739V12.4963ZM11.8745 14.369H11.8792V14.3737H11.8745V14.369ZM13.7498 12.4951H13.7545V12.4998H13.7498V12.4951Z'
+        d='M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.25736 4.00736 5.25 5.25 5.25H18.75C19.9926 5.25 21 6.25736 21 7.5V18.75M3 18.75C3 19.9926 4.00736 21 5.25 21H18.75C19.9926 21 21 19.9926 21 18.75M3 18.75V11.25C3 10.0074 4.00736 9 5.25 9H18.75C19.9926 9 21 10.0074 21 11.25V18.75'
         stroke={color}
         strokeWidth='1.5'
         strokeLinecap='round'
diff --git a/src/components/common/Icon/assets/User.tsx b/src/components/common/Icon/assets/User.tsx
new file mode 100644
index 00000000..76edb071
--- /dev/null
+++ b/src/components/common/Icon/assets/User.tsx
@@ -0,0 +1,24 @@
+import React, { SVGProps } from 'react';
+
+const User = ({ width, height, color, ...props }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M15 19.1276C15.8329 19.37 16.7138 19.5 17.625 19.5C19.1037 19.5 20.5025 19.1576 21.7464 18.5478C21.7488 18.4905 21.75 18.4329 21.75 18.375C21.75 16.0968 19.9031 14.25 17.625 14.25C16.2069 14.25 14.956 14.9655 14.2136 16.0552M15 19.1276V19.125C15 18.0121 14.7148 16.9658 14.2136 16.0552M15 19.1276C15 19.1632 14.9997 19.1988 14.9991 19.2343C13.1374 20.3552 10.9565 21 8.625 21C6.29353 21 4.11264 20.3552 2.25092 19.2343C2.25031 19.198 2.25 19.1615 2.25 19.125C2.25 15.6042 5.10418 12.75 8.625 12.75C11.0329 12.75 13.129 14.085 14.2136 16.0552M12 6.375C12 8.23896 10.489 9.75 8.625 9.75C6.76104 9.75 5.25 8.23896 5.25 6.375C5.25 4.51104 6.76104 3 8.625 3C10.489 3 12 4.51104 12 6.375ZM20.25 8.625C20.25 10.0747 19.0747 11.25 17.625 11.25C16.1753 11.25 15 10.0747 15 8.625C15 7.17525 16.1753 6 17.625 6C19.0747 6 20.25 7.17525 20.25 8.625Z'
+        stroke={color}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default User;
diff --git a/src/components/common/Icon/assets/index.ts b/src/components/common/Icon/assets/index.ts
index 959f2ed6..c22f3a2a 100644
--- a/src/components/common/Icon/assets/index.ts
+++ b/src/components/common/Icon/assets/index.ts
@@ -24,6 +24,7 @@ import Show from '@/components/common/Icon/assets/Show';
 import Time from '@/components/common/Icon/assets/Time';
 import TrendDown from '@/components/common/Icon/assets/TrendDown';
 import TrendUp from '@/components/common/Icon/assets/TrendUp';
+import User from '@/components/common/Icon/assets/User';
 import WarnCircle from '@/components/common/Icon/assets/WarnCircle';
 import Xmark from '@/components/common/Icon/assets/Xmark';
 import { colors } from '@/styles/colors';
@@ -54,6 +55,10 @@ export const iconMap: Record<string, IconMapEntry> = {
     type: 'stroke',
     file: Dashboard,
   },
+  user: {
+    type: 'stroke',
+    file: User,
+  },
   auto: { type: 'stroke', file: Auto },
   chart: { type: 'stroke', file: Chart },
   logout: {
@@ -164,6 +169,7 @@ export const COLORS = {
   grey: colors.grey[200],
   grey500: colors.grey[500],
   green500: colors.green[500],
+  grey900: colors.grey[900],
   //---
   // 기존 아이콘 색상
   white: colors.white[100],

From c09dea15111a7bca58b33690ee66234e18416fe7 Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Tue, 11 Feb 2025 13:18:02 +0900
Subject: [PATCH 02/10] =?UTF-8?q?Feat:=20=EB=A9=94=EC=9D=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B0=94=EB=94=94=EC=83=81=EB=8B=A8=20?=
 =?UTF-8?q?=EB=A6=AC=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(root)/layout.tsx                     |  2 +-
 .../common/Typography/Typography.variant.tsx  |  1 +
 src/components/common/Typography/index.tsx    | 20 ++++++
 src/components/feature/MainHome/index.tsx     |  2 +-
 src/components/shared/Main/Body/index.tsx     | 18 ++---
 .../Main/Cards/MainTopCard/Card/index.tsx     | 41 ++++-------
 .../Main/Cards/MainTopCard/Item/index.tsx     |  8 +--
 .../shared/Main/Cards/MainTopCard/index.tsx   | 19 +++--
 .../shared/Main/Cards/MiniCard/index.tsx      | 71 +++++++------------
 src/components/shared/Main/Header/index.tsx   | 12 ++--
 src/constants/_detailSurvey.ts                | 11 ++-
 11 files changed, 103 insertions(+), 102 deletions(-)

diff --git a/src/app/(root)/layout.tsx b/src/app/(root)/layout.tsx
index a7637095..d398982b 100644
--- a/src/app/(root)/layout.tsx
+++ b/src/app/(root)/layout.tsx
@@ -6,7 +6,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
     <div className='flex min-h-screen'>
       <Header />
       <Navbar />
-      <main className='flex-grow bg-white-200 pl-8 pt-[104px]'>{children}</main>
+      <main className='flex-grow bg-white-200 pt-[104px]'>{children}</main>
     </div>
   );
 };
diff --git a/src/components/common/Typography/Typography.variant.tsx b/src/components/common/Typography/Typography.variant.tsx
index ad24cd4f..a008fb64 100644
--- a/src/components/common/Typography/Typography.variant.tsx
+++ b/src/components/common/Typography/Typography.variant.tsx
@@ -57,6 +57,7 @@ export const typographyVariants = cva('whitespace-pre-line text-wrap', {
       grey100: 'text-grey-100',
       grey200: 'text-grey-200',
       grey500: 'text-grey-500',
+      grey600: 'text-grey-600',
       grey900: 'text-grey-900',
 
       // 리디자인 후 삭제
diff --git a/src/components/common/Typography/index.tsx b/src/components/common/Typography/index.tsx
index 44064c75..d87b86d8 100644
--- a/src/components/common/Typography/index.tsx
+++ b/src/components/common/Typography/index.tsx
@@ -23,11 +23,26 @@ const customTypography = (
   return Typography;
 };
 
+export const H1Black = customTypography('span', {
+  type: 'H1',
+  color: 'black',
+});
+
 export const H2Black = customTypography('span', {
   type: 'H2',
   color: 'black',
 });
 
+export const H4Black = customTypography('span', {
+  type: 'H4',
+  color: 'black',
+});
+
+export const H5Black = customTypography('span', {
+  type: 'H5',
+  color: 'black',
+});
+
 export const Body3Grey500 = customTypography('span', {
   type: 'Body3',
   color: 'grey500',
@@ -58,6 +73,11 @@ export const Body3Blue = customTypography('span', {
   color: 'blue',
 });
 
+export const Body3Grey600 = customTypography('span', {
+  type: 'Body3',
+  color: 'grey600',
+});
+
 export const SubTitle1Black = customTypography('span', {
   type: 'Subtitle1',
   color: 'black',
diff --git a/src/components/feature/MainHome/index.tsx b/src/components/feature/MainHome/index.tsx
index f60e7d54..0f7a5434 100644
--- a/src/components/feature/MainHome/index.tsx
+++ b/src/components/feature/MainHome/index.tsx
@@ -3,7 +3,7 @@ import MainPageHeader from '@/components/shared/Main/Header';
 
 const MainHome = () => {
   return (
-    <div className='flex flex-col gap-6'>
+    <div className='flex flex-col gap-6 pl-8 pr-10'>
       <MainPageHeader />
       <MainPageBody />
     </div>
diff --git a/src/components/shared/Main/Body/index.tsx b/src/components/shared/Main/Body/index.tsx
index ae3d53ea..bc1dc4e8 100644
--- a/src/components/shared/Main/Body/index.tsx
+++ b/src/components/shared/Main/Body/index.tsx
@@ -21,7 +21,6 @@ import { useGetSurveyList } from '@/hooks/survey/useGetSurveyList';
 import useNavigate from '@/hooks/useNavigate';
 
 const SURVEY_LIST_SIZE = 5;
-// TODO: ** 설문 좋아요/싫어요 top3 메뉴 API 연결
 const { likedMenusTop3, satisfactionDistribution } = DETAIL_SURVEY_DATA;
 
 const MainPageBody = () => {
@@ -92,27 +91,22 @@ const MainPageBody = () => {
 
   return (
     <div className='flex flex-col gap-5'>
-      <div className='flex gap-3'>
+      <div className='flex gap-6'>
         <MiniCard
-          title='관리 중인 식단'
-          icon='time'
-          color='active'
+          title='관리 중 식단'
+          icon='calendar'
           count={currentMenuCount}
           upDownPercent={upDownPlanPercent}
           type='plan'
         />
         <MiniCard
-          title='진행 중인 설문'
-          icon='group'
-          color='success'
+          title='진행 중 설문'
+          icon='user'
           count={surveyTotalItems}
           upDownPercent={upDownSurveyPercent}
           type='survey'
         />
-        <MainTopCard
-          title='최근 마감한 설문 좋아요 Top3 메뉴'
-          top3Data={likedMenusTop3}
-        />
+        <MainTopCard title='인기 식단 Top3' top3Data={likedMenusTop3} />
       </div>
       <div className='flex gap-3'>
         <div className='flex w-1/2 flex-col gap-3 rounded border border-gray-300 bg-white-100 p-5'>
diff --git a/src/components/shared/Main/Cards/MainTopCard/Card/index.tsx b/src/components/shared/Main/Cards/MainTopCard/Card/index.tsx
index 7e08aae5..8b2189ed 100644
--- a/src/components/shared/Main/Cards/MainTopCard/Card/index.tsx
+++ b/src/components/shared/Main/Cards/MainTopCard/Card/index.tsx
@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import Badge from '@/components/common/Badge';
+import { Label1Black } from '@/components/common/Typography';
 import Item from '@/components/shared/Main/Cards/MainTopCard/Item';
 
 export interface MealData {
@@ -6,37 +7,23 @@ export interface MealData {
   menu: string[];
 }
 
-const Card = ({ meal }: { meal: MealData }) => {
-  const [isHovered, setIsHovered] = useState(false);
-
+const Card = ({ meal, index }: { meal: MealData; index: number }) => {
   return (
-    <div className='flex w-full flex-col items-center gap-2 rounded border border-gray-300 p-2 transition-all duration-300'>
-      <span className='text-lg font-semibold underline'>{meal.date}</span>
-      <div
-        className={`grid w-full grid-cols-3 gap-x-2 gap-y-1 overflow-hidden transition-all duration-300 ${
-          isHovered ? 'max-h-full' : 'max-h-[30px]'
-        }`}
-      >
+    <div className='flex w-full flex-col items-center gap-4'>
+      <div className='flex w-full items-center gap-6'>
+        <Badge
+          text={`Top ${index + 1}`}
+          textType='subtitle'
+          variant='default'
+          size='m'
+        />
+        <Label1Black>{meal.date}</Label1Black>
+      </div>
+      <div className='flex w-full flex-col items-center'>
         {meal.menu.map((menu, idx) => (
           <Item key={`${menu}-${idx}`} menu={menu} />
         ))}
       </div>
-      {!isHovered && meal.menu.length > 3 && (
-        <div
-          className='cursor-pointer text-gray-500 underline hover:text-gray-600'
-          onMouseDown={() => setIsHovered(!isHovered)}
-        >
-          +{meal.menu.length - 3} 더보기...
-        </div>
-      )}
-      {isHovered && meal.menu.length > 3 && (
-        <div
-          className='cursor-pointer text-gray-500 underline hover:text-gray-600'
-          onMouseDown={() => setIsHovered(!isHovered)}
-        >
-          최소화
-        </div>
-      )}
     </div>
   );
 };
diff --git a/src/components/shared/Main/Cards/MainTopCard/Item/index.tsx b/src/components/shared/Main/Cards/MainTopCard/Item/index.tsx
index 49a71434..f30b1ee5 100644
--- a/src/components/shared/Main/Cards/MainTopCard/Item/index.tsx
+++ b/src/components/shared/Main/Cards/MainTopCard/Item/index.tsx
@@ -1,9 +1,9 @@
+import { Body2Black } from '@/components/common/Typography';
+
 const Item = ({ menu }: { menu: string }) => {
   return (
-    <div className='max-w-24'>
-      <span className='block overflow-hidden text-ellipsis whitespace-nowrap text-center'>
-        {menu}
-      </span>
+    <div className='w-full text-center'>
+      <Body2Black>{menu}</Body2Black>
     </div>
   );
 };
diff --git a/src/components/shared/Main/Cards/MainTopCard/index.tsx b/src/components/shared/Main/Cards/MainTopCard/index.tsx
index 9f47b157..5ede7bba 100644
--- a/src/components/shared/Main/Cards/MainTopCard/index.tsx
+++ b/src/components/shared/Main/Cards/MainTopCard/index.tsx
@@ -1,4 +1,5 @@
-import { CardTitle } from '@/components/common/Typography';
+import { cn } from '@/utils/core';
+import { SubTitle1Black } from '@/components/common/Typography';
 import Card, {
   MealData,
 } from '@/components/shared/Main/Cards/MainTopCard/Card';
@@ -9,11 +10,19 @@ interface Props {
 }
 const MainTopCard = ({ title, top3Data }: Props) => {
   return (
-    <div className='flex w-full flex-col gap-3 rounded-md border border-gray-300 bg-white-100 p-4'>
-      <CardTitle>{title}</CardTitle>
+    <div className='flex h-[342px] w-full flex-col gap-6 rounded-2xl bg-white-100 p-6'>
+      <SubTitle1Black>{title}</SubTitle1Black>
       <div className='flex w-full gap-2'>
-        {top3Data.map((meal) => (
-          <Card key={meal.date} meal={meal} />
+        {top3Data.map((meal, index) => (
+          <div
+            key={meal.date}
+            className={cn(
+              'w-full',
+              index === 0 ? 'pr-4' : 'border-l border-grey-100 px-4',
+            )}
+          >
+            <Card meal={meal} index={index} />
+          </div>
         ))}
       </div>
     </div>
diff --git a/src/components/shared/Main/Cards/MiniCard/index.tsx b/src/components/shared/Main/Cards/MiniCard/index.tsx
index 63fcae39..14314cf9 100644
--- a/src/components/shared/Main/Cards/MiniCard/index.tsx
+++ b/src/components/shared/Main/Cards/MiniCard/index.tsx
@@ -1,29 +1,27 @@
 import Link from 'next/link';
 import Badge from '@/components/common/Badge';
 import Icon from '@/components/common/Icon';
-import { CardTitle } from '@/components/common/Typography';
+import {
+  Body3Grey600,
+  H1Black,
+  SubTitle1Black,
+} from '@/components/common/Typography';
 import { NAV_LINKS } from '@/constants/_navbar';
 
 interface Props {
   title: string;
   icon: string;
-  color?:
-    | 'warning'
-    | 'white'
-    | 'black'
-    | 'normal'
-    | 'success'
-    | 'active'
-    | undefined;
   count: number;
   upDownPercent: number;
   type: 'plan' | 'survey';
 }
 
+// TODO: 추후 최근 3개월까지의 식단 개수를 받아오는 api완성 후 교체예정
+const MONTH = ['10월', '11월', '12월'];
+
 const MiniCard = ({
   title,
   icon,
-  color,
   count,
   // upDownPercent,
   type,
@@ -31,41 +29,26 @@ const MiniCard = ({
   // const isIncrease = upDownPercent >= 0 ? true : false;
 
   return (
-    <div className='flex w-1/4 flex-col justify-around rounded-md border border-gray-300 bg-white-100 p-4'>
-      <div className='flex items-center justify-between'>
-        <div className='flex flex-col gap-3'>
-          <CardTitle>{title}</CardTitle>
-          <Link
-            href={type === 'plan' ? NAV_LINKS[3].href : NAV_LINKS[4].href}
-            className='w-fit text-3xl font-semibold underline'
-          >
-            {count}
-          </Link>
-        </div>
-        <div className='flex h-full items-start justify-start'>
-          <Icon name={icon} color={color} width={60} height={60} />
-        </div>
+    <div className='relative flex h-[342px] w-full max-w-[322px] flex-col justify-between rounded-2xl bg-white-100 p-6'>
+      <div className='absolute right-6 top-6 flex h-14 w-14 items-center justify-center rounded-full bg-grey-50'>
+        <Icon name={icon} width={24} height={24} color='grey900' />
+      </div>
+      <div className='w-full'>
+        <SubTitle1Black>{title}</SubTitle1Black>
       </div>
-      <div className='flex items-center justify-center gap-1'>
-        {/* <Icon
-          name={isIncrease ? 'trendUp' : 'trendDown'}
-          color={isIncrease ? 'success' : 'warning'}
-          width={20}
-          height={20}
-        /> */}
-        <Badge text='10월' textType='body' variant='blue' size='m' />
-        {/* <span className='whitespace-nowrap align-middle font-semibold'>
-          {`지난 달보다 `}
-          <span
-            className={cn(
-              'text-lg',
-              isIncrease ? 'text-blue-200' : 'text-red-100',
-            )}
-          >
-            {upDownPercent}%
-          </span>
-          {` ${isIncrease ? '증가' : '감소'}`}
-        </span> */}
+      <Link
+        href={type === 'plan' ? NAV_LINKS[3].href : NAV_LINKS[4].href}
+        className='w-full text-3xl font-semibold'
+      >
+        <H1Black>{count}</H1Black>
+      </Link>
+      <div className='flex w-full flex-col items-center justify-center gap-2'>
+        {MONTH.map((month) => (
+          <div key={month} className='flex w-full items-center gap-4'>
+            <Badge text={month} textType='body' variant='default' size='m' />
+            <Body3Grey600>nn개의 식단을 관리했어요.</Body3Grey600>
+          </div>
+        ))}
       </div>
     </div>
   );
diff --git a/src/components/shared/Main/Header/index.tsx b/src/components/shared/Main/Header/index.tsx
index 295ffc6a..5f72bd76 100644
--- a/src/components/shared/Main/Header/index.tsx
+++ b/src/components/shared/Main/Header/index.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import dayjs from 'dayjs';
-import { HeadPrimary } from '@/components/common/Typography';
+import { H4Black, H5Black } from '@/components/common/Typography';
 import { useUserStore } from '@/stores/useUserStore';
 
 const today = new Date();
@@ -20,13 +20,11 @@ const MainPageHeader = () => {
   return (
     <div className='flex items-center justify-between'>
       <div className='flex flex-col gap-1'>
-        <HeadPrimary>{isMounted ? username : ''}님, 어서오세요!</HeadPrimary>
-        <HeadPrimary>
-          오늘도 냠냠플래너에서 건강한 식단을 관리해볼까요?
-        </HeadPrimary>
+        <H4Black>{isMounted ? username : ''}님, 어서오세요!</H4Black>
+        <H4Black>오늘도 냠냠플래너에서 건강한 식단을 관리해볼까요?</H4Black>
       </div>
-      <div className='rounded border border-gray-300 bg-white-100 px-5 py-2'>
-        <HeadPrimary>{date.format('YYYY년 MM월 DD일')}</HeadPrimary>
+      <div className='rounded-lg bg-white-100 px-4 py-3'>
+        <H5Black>{date.format('YYYY년 MM월 DD일')}</H5Black>
       </div>
     </div>
   );
diff --git a/src/constants/_detailSurvey.ts b/src/constants/_detailSurvey.ts
index 81d7332b..1fc173f7 100644
--- a/src/constants/_detailSurvey.ts
+++ b/src/constants/_detailSurvey.ts
@@ -7,7 +7,16 @@ export const DETAIL_SURVEY_DATA = {
     },
     {
       date: '2024-08-25',
-      menu: ['햄버거', '감자튀김', '콜라', '김밥', '된장국', '튀김', '햄버거'],
+      menu: [
+        '햄버거',
+        '감자튀김',
+        '콜라',
+        '김밥',
+        '된장국',
+        '튀김',
+        '햄버거',
+        '피자',
+      ],
     },
     {
       date: '2024-08-22',

From cff8861e33cdc4881f00f0123fd22fe3805929a1 Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Tue, 11 Feb 2025 13:19:07 +0900
Subject: [PATCH 03/10] =?UTF-8?q?Fix:=20MiniCard=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20Badge=20textType=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/Main/Cards/MiniCard/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/shared/Main/Cards/MiniCard/index.tsx b/src/components/shared/Main/Cards/MiniCard/index.tsx
index 14314cf9..9a3e364d 100644
--- a/src/components/shared/Main/Cards/MiniCard/index.tsx
+++ b/src/components/shared/Main/Cards/MiniCard/index.tsx
@@ -45,7 +45,12 @@ const MiniCard = ({
       <div className='flex w-full flex-col items-center justify-center gap-2'>
         {MONTH.map((month) => (
           <div key={month} className='flex w-full items-center gap-4'>
-            <Badge text={month} textType='body' variant='default' size='m' />
+            <Badge
+              text={month}
+              textType='subtitle'
+              variant='default'
+              size='m'
+            />
             <Body3Grey600>nn개의 식단을 관리했어요.</Body3Grey600>
           </div>
         ))}

From 01688f61640b1d4d16a0f9c44c341a3ace741a59 Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Tue, 11 Feb 2025 14:10:02 +0900
Subject: [PATCH 04/10] =?UTF-8?q?Feat:=20ApexCharts=20=EC=98=B5=EC=85=98?=
 =?UTF-8?q?=20=EB=A6=AC=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css                           | 19 +++++++++
 .../shared/ChartDetail/BarGraph/index.tsx     | 40 ++++++++++++-------
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index a465dea6..d2a55471 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -34,3 +34,22 @@
     border-color: #f5f5f5; /* navbar 제외한 배경색 white-200  */
   }
 }
+
+.tooltip_container {
+  display: flex;
+  gap: 12px;
+  border-radius: 8px;
+  border: #e2e3e5;
+  background-color: #ffffff;
+  padding: 16px;
+}
+
+.tooltip_label {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.tooltip_data {
+  font-size: 14px;
+  font-weight: medium;
+}
diff --git a/src/components/shared/ChartDetail/BarGraph/index.tsx b/src/components/shared/ChartDetail/BarGraph/index.tsx
index 2b098926..08ed0140 100644
--- a/src/components/shared/ChartDetail/BarGraph/index.tsx
+++ b/src/components/shared/ChartDetail/BarGraph/index.tsx
@@ -26,9 +26,19 @@ const BarGraph = ({ data }: SatisfactionDistribution) => {
       toolbar: { show: false },
       zoom: { enabled: false },
     },
+    grid: {
+      show: false,
+    },
     legend: {
-      markers: {
-        shape: 'circle',
+      show: false,
+    },
+    tooltip: {
+      enabled: true,
+      custom: ({ series, seriesIndex, dataPointIndex, w }) => {
+        return `<div class='tooltip_container'>
+            <span class='tooltip_label'>${w.globals.labels[dataPointIndex]}</span>
+            <Body3Black class='tooltip_data'>${series[seriesIndex][dataPointIndex]}%</Body3Black>
+          </div>`;
       },
     },
     xaxis: {
@@ -44,6 +54,12 @@ const BarGraph = ({ data }: SatisfactionDistribution) => {
         '9점',
         '10점',
       ],
+      labels: {
+        style: {
+          fontSize: '14px',
+          fontWeight: 500,
+        },
+      },
       title: {},
     },
     yaxis: {
@@ -51,27 +67,21 @@ const BarGraph = ({ data }: SatisfactionDistribution) => {
       max: adjustedYMax,
       labels: {
         formatter: (value) => `${value}%`,
+        style: {
+          fontSize: '14px',
+          fontWeight: 500,
+        },
       },
       title: {},
     },
-    colors: [
-      '#D0F0C0',
-      '#B2F2BB',
-      '#AEE1D8',
-      '#CDE7BE',
-      '#B2DFDB',
-      '#C1DAB3',
-      '#ACE1AF',
-      '#A8E4A0',
-      '#B3CC9F',
-      '#77DD77',
-    ],
+    colors: ['#00A86B'],
     plotOptions: {
       bar: {
         borderRadiusApplication: 'end',
-        borderRadius: 6,
+        borderRadius: 4,
         distributed: true,
         horizontal: false,
+        columnWidth: '24px',
       },
     },
     dataLabels: {

From 3d6a0d57ab0805001a17a734c3024733ebfd8709 Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Tue, 11 Feb 2025 14:48:22 +0900
Subject: [PATCH 05/10] =?UTF-8?q?Feat:=20=EC=B5=9C=EC=8B=A0=20=EC=8B=9D?=
 =?UTF-8?q?=EB=8B=A8=20=EB=AA=A9=EB=A1=9D=20=EB=A6=AC=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Table/index.tsx         |  4 +++
 src/components/common/TableBody/index.tsx     | 19 +++++++++++-
 src/components/common/TableHeader/index.tsx   | 14 +++++++++
 src/components/common/Typography/index.tsx    |  5 +++
 .../shared/GetAllList/ListTable/index.tsx     |  4 ++-
 src/components/shared/Main/Body/index.tsx     | 31 +++++++++++++------
 6 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/src/components/common/Table/index.tsx b/src/components/common/Table/index.tsx
index e2dfe168..a9ab1185 100644
--- a/src/components/common/Table/index.tsx
+++ b/src/components/common/Table/index.tsx
@@ -16,6 +16,7 @@ type TableProps = {
   bodyClassName?: string;
   onRowClick?: (id: number | string) => void;
   headerType?: 'viewPlan' | 'viewChart';
+  miniList?: boolean;
 };
 
 const Table = ({
@@ -25,6 +26,7 @@ const Table = ({
   bodyClassName,
   onRowClick,
   headerType,
+  miniList,
 }: TableProps) => {
   const tableHeaders = Array.from(
     new Set(data.flatMap((item) => Object.keys(item))),
@@ -37,6 +39,7 @@ const Table = ({
           headerData={tableHeaders}
           className={headerClassName}
           headerType={headerType!}
+          miniList={miniList}
         />
         <TableBody
           headerData={tableHeaders}
@@ -45,6 +48,7 @@ const Table = ({
           className={bodyClassName}
           onRowClick={onRowClick}
           headerType={headerType!}
+          miniList={miniList}
         />
       </table>
     </div>
diff --git a/src/components/common/TableBody/index.tsx b/src/components/common/TableBody/index.tsx
index 6e1938d8..562fb43a 100644
--- a/src/components/common/TableBody/index.tsx
+++ b/src/components/common/TableBody/index.tsx
@@ -9,6 +9,7 @@ type TableBodyProps = {
   className?: string;
   onRowClick?: (id: number | string) => void;
   headerType?: 'viewPlan' | 'viewChart';
+  miniList?: boolean;
 };
 
 const TableBody = ({
@@ -18,6 +19,7 @@ const TableBody = ({
   className,
   onRowClick,
   headerType,
+  miniList,
 }: TableBodyProps) => {
   const planHeaderStyles: Record<string, string> = {
     '식단 ID': 'w-[108px]',
@@ -35,12 +37,23 @@ const TableBody = ({
     상태: 'w-[124px]',
   };
 
+  const miniPlanHeaderStyles: Record<string, string> = {
+    '식단 ID': 'w-[80px]',
+    '식단 이름': 'w-[210px]',
+    대분류: 'w-[80px]',
+    소분류: 'w-[140px]',
+    생성일: 'w-[96px]',
+  };
+
   return (
     <tbody className='border-b border-grey-100 bg-white-100'>
       {bodyData.map((item, rowIndex) => (
         <tr
           key={rowIndex}
-          className={cn('h-16 cursor-pointer odd:bg-grey-50 hover:bg-grey-100')}
+          className={cn(
+            'h-16 cursor-pointer odd:bg-grey-50 hover:bg-grey-100',
+            miniList ? 'h-[55.4px]' : '',
+          )}
           onClick={
             onRowClick && type === 'list' && typeof item['설문 ID'] === 'number'
               ? () => onRowClick(item['설문 ID'] as number)
@@ -57,6 +70,10 @@ const TableBody = ({
               idx === 0 ? 'pl-4' : idx === headerData.length - 1 ? 'pr-4' : '',
               className,
               (headerType === 'viewPlan' && planHeaderStyles[header]) || '',
+              (headerType === 'viewPlan' &&
+                miniList &&
+                miniPlanHeaderStyles[header]) ||
+                '',
               (headerType === 'viewChart' && surveyHeaderStyles[header]) || '',
             );
             return (
diff --git a/src/components/common/TableHeader/index.tsx b/src/components/common/TableHeader/index.tsx
index 21625b5c..e827266f 100644
--- a/src/components/common/TableHeader/index.tsx
+++ b/src/components/common/TableHeader/index.tsx
@@ -5,12 +5,14 @@ type TableHeaderProps = {
   headerData: string[];
   className?: string;
   headerType?: 'viewPlan' | 'viewChart';
+  miniList?: boolean;
 };
 
 const TableHeader = ({
   headerData,
   className,
   headerType,
+  miniList,
 }: TableHeaderProps) => {
   const planHeaderStyles: Record<string, string> = {
     '식단 ID': 'w-[108px]',
@@ -28,6 +30,14 @@ const TableHeader = ({
     상태: 'w-[124px]',
   };
 
+  const miniPlanHeaderStyles: Record<string, string> = {
+    '식단 ID': 'w-[70px]',
+    '식단 이름': 'w-[210px]',
+    대분류: 'w-[80px]',
+    소분류: 'w-[140px]',
+    생성일: 'w-[106px]',
+  };
+
   return (
     <thead className='h-12'>
       <tr className='border-y border-grey-100'>
@@ -39,6 +49,10 @@ const TableHeader = ({
               idx === 0 ? 'pl-4' : idx === headerData.length - 1 ? 'pr-4' : '',
               className,
               (headerType === 'viewPlan' && planHeaderStyles[header]) || '',
+              (headerType === 'viewPlan' &&
+                miniList &&
+                miniPlanHeaderStyles[header]) ||
+                '',
               (headerType === 'viewChart' && surveyHeaderStyles[header]) || '',
             )}
           >
diff --git a/src/components/common/Typography/index.tsx b/src/components/common/Typography/index.tsx
index d87b86d8..603d1563 100644
--- a/src/components/common/Typography/index.tsx
+++ b/src/components/common/Typography/index.tsx
@@ -58,6 +58,11 @@ export const Body2Black = customTypography('span', {
   color: 'black',
 });
 
+export const Body2Grey600 = customTypography('span', {
+  type: 'Body2',
+  color: 'grey600',
+});
+
 export const Body3Black = customTypography('span', {
   type: 'Body3',
   color: 'black',
diff --git a/src/components/shared/GetAllList/ListTable/index.tsx b/src/components/shared/GetAllList/ListTable/index.tsx
index 1790971b..dea23290 100644
--- a/src/components/shared/GetAllList/ListTable/index.tsx
+++ b/src/components/shared/GetAllList/ListTable/index.tsx
@@ -4,15 +4,17 @@ interface Props {
   data: TableRowData[];
   onRowClick?: (id: number | string) => void;
   headerType?: 'viewPlan' | 'viewChart';
+  miniList?: boolean;
 }
 
-const GetAllListTable = ({ headerType, data, onRowClick }: Props) => {
+const GetAllListTable = ({ headerType, data, onRowClick, miniList }: Props) => {
   return (
     <Table
       data={data}
       type='list'
       onRowClick={onRowClick}
       headerType={headerType!}
+      miniList={miniList}
     />
   );
 };
diff --git a/src/components/shared/Main/Body/index.tsx b/src/components/shared/Main/Body/index.tsx
index bc1dc4e8..823621e7 100644
--- a/src/components/shared/Main/Body/index.tsx
+++ b/src/components/shared/Main/Body/index.tsx
@@ -1,12 +1,18 @@
 'use client';
 
+import Link from 'next/link';
 import dayjs from 'dayjs';
 import { MenuResponseDTO } from '@/type/menu/menuResponse';
 import { MenuRecipeListResponse } from '@/type/openAPI/recipeResponse';
 import { findOriginalId } from '@/utils/findOriginalId';
 import { calculateUpdownPercent, countSurveysByMonth } from '@/utils/survey';
 import { TableRowData } from '@/components/common/Table';
-import { CardTitle, NutritionDate } from '@/components/common/Typography';
+import {
+  Body2Grey600,
+  CardTitle,
+  NutritionDate,
+  SubTitle1Black,
+} from '@/components/common/Typography';
 import BarGraph from '@/components/shared/ChartDetail/BarGraph';
 import GetAllListTable from '@/components/shared/GetAllList/ListTable';
 import MainTopCard from '@/components/shared/Main/Cards/MainTopCard';
@@ -69,8 +75,8 @@ const MainPageBody = () => {
 
   const convertToTableRowData = (menus: MenuResponseDTO[]): TableRowData[] => {
     return menus.map((menu) => ({
-      식단ID: menu.monthMenuId.slice(0, 4),
-      식단이름: menu.monthMenuName,
+      '식단 ID': menu.monthMenuId.slice(0, 4),
+      '식단 이름': menu.monthMenuName,
       대분류: menu.majorCategory,
       소분류: menu.minorCategory,
       생성일: dayjs(menu.createAt).format('YYYY-MM-DD'),
@@ -90,7 +96,7 @@ const MainPageBody = () => {
   };
 
   return (
-    <div className='flex flex-col gap-5'>
+    <div className='flex flex-col gap-6'>
       <div className='flex gap-6'>
         <MiniCard
           title='관리 중 식단'
@@ -108,19 +114,26 @@ const MainPageBody = () => {
         />
         <MainTopCard title='인기 식단 Top3' top3Data={likedMenusTop3} />
       </div>
-      <div className='flex gap-3'>
-        <div className='flex w-1/2 flex-col gap-3 rounded border border-gray-300 bg-white-100 p-5'>
-          <CardTitle>최신 설문 만족도 분포</CardTitle>
+      <div className='flex w-full gap-6'>
+        <div className='flex h-[423px] w-full flex-col gap-6 rounded-2xl bg-white-100 p-6'>
+          <SubTitle1Black>설문 만족도 분포</SubTitle1Black>
           <BarGraph data={satisfactionDistribution} />
         </div>
-        <div className='flex w-1/2 flex-col gap-3 rounded border border-gray-300 bg-white-100 p-5'>
-          <CardTitle>최신 식단 목록</CardTitle>
+        <div className='flex w-full flex-col gap-6 rounded-2xl bg-white-100 p-6'>
+          <div className='flex items-center justify-between'>
+            <SubTitle1Black>최신 식단 목록</SubTitle1Black>
+            <Link href={'/viewPlan'}>
+              <Body2Grey600>더 보기</Body2Grey600>
+            </Link>
+          </div>
           {mealList?.data.menuResponseDTOList ? (
             <GetAllListTable
               data={convertToTableRowData(
                 mealList.data.menuResponseDTOList.slice(0, 5),
               )}
               onRowClick={(id) => handleRowClick(id)}
+              headerType='viewPlan'
+              miniList
             />
           ) : (
             <div className='mt-1 flex justify-center'>

From 29a8bd36b244bc9e8ee12d508a90bdd56c238a11 Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Tue, 11 Feb 2025 14:49:00 +0900
Subject: [PATCH 06/10] =?UTF-8?q?Fix:=20apexcharts=20tooltip=20=EC=BB=A4?=
 =?UTF-8?q?=EC=8A=A4=ED=85=80=20=ED=83=9C=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/ChartDetail/BarGraph/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/shared/ChartDetail/BarGraph/index.tsx b/src/components/shared/ChartDetail/BarGraph/index.tsx
index 08ed0140..035d745b 100644
--- a/src/components/shared/ChartDetail/BarGraph/index.tsx
+++ b/src/components/shared/ChartDetail/BarGraph/index.tsx
@@ -37,7 +37,7 @@ const BarGraph = ({ data }: SatisfactionDistribution) => {
       custom: ({ series, seriesIndex, dataPointIndex, w }) => {
         return `<div class='tooltip_container'>
             <span class='tooltip_label'>${w.globals.labels[dataPointIndex]}</span>
-            <Body3Black class='tooltip_data'>${series[seriesIndex][dataPointIndex]}%</Body3Black>
+            <span class='tooltip_data'>${series[seriesIndex][dataPointIndex]}%</span>
           </div>`;
       },
     },
@@ -95,7 +95,7 @@ const BarGraph = ({ data }: SatisfactionDistribution) => {
         options={chartOptions}
         series={[{ data: valuesArray, name: '해당 점수 비율' }]}
         type='bar'
-        height={325}
+        height='100%'
         width='100%'
       />
     </div>

From 583566f67156af6cecb7567e269c130735fd54fd Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Tue, 11 Feb 2025 15:12:42 +0900
Subject: [PATCH 07/10] =?UTF-8?q?Feat:=20=EC=A0=9C=EC=B2=A0=20=EB=A0=88?=
 =?UTF-8?q?=EC=8B=9C=ED=94=BC=20=EB=A6=AC=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/Main/Body/index.tsx          |  5 ++---
 .../shared/Main/Cards/SeasonCard/index.tsx         | 14 ++++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/shared/Main/Body/index.tsx b/src/components/shared/Main/Body/index.tsx
index 823621e7..5c1a30cf 100644
--- a/src/components/shared/Main/Body/index.tsx
+++ b/src/components/shared/Main/Body/index.tsx
@@ -9,7 +9,6 @@ import { calculateUpdownPercent, countSurveysByMonth } from '@/utils/survey';
 import { TableRowData } from '@/components/common/Table';
 import {
   Body2Grey600,
-  CardTitle,
   NutritionDate,
   SubTitle1Black,
 } from '@/components/common/Typography';
@@ -142,8 +141,8 @@ const MainPageBody = () => {
           )}
         </div>
       </div>
-      <div className='flex w-full flex-col gap-3 rounded border border-gray-300 bg-white-100 p-5'>
-        <CardTitle>{`${recipeData[0].month}월의 제철 레시피`}</CardTitle>
+      <div className='flex w-full flex-col gap-6 rounded-2xl bg-white-100 p-6'>
+        <SubTitle1Black>{`${recipeData[0].month}월의 제철 레시피`}</SubTitle1Black>
         <SeasonCard data={recipeData} />
       </div>
     </div>
diff --git a/src/components/shared/Main/Cards/SeasonCard/index.tsx b/src/components/shared/Main/Cards/SeasonCard/index.tsx
index 5d3a1b63..de040582 100644
--- a/src/components/shared/Main/Cards/SeasonCard/index.tsx
+++ b/src/components/shared/Main/Cards/SeasonCard/index.tsx
@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import { MenuRecipeListResponse } from '@/type/openAPI/recipeResponse';
+import { Label1Black } from '@/components/common/Typography';
 
 type SeasonCardProps = {
   data: MenuRecipeListResponse[];
@@ -7,20 +8,21 @@ type SeasonCardProps = {
 
 const SeasonCard = ({ data }: SeasonCardProps) => {
   return (
-    <div className='flex w-full gap-2'>
+    <div className='flex w-full gap-6'>
       {data?.map((recipe) => (
         <div
-          className='flex w-full flex-col items-center gap-3'
+          className='flex w-full flex-col items-center gap-4'
           key={recipe.recipeId}
         >
           <Image
             src={recipe.imageUrl}
             alt={recipe.recipeName}
-            width={180}
-            height={180}
-            className='rounded'
+            width={200}
+            height={120}
+            style={{ height: '120px' }}
+            className='rounded-lg object-fill'
           />
-          <span className='font-semibold'>{recipe.recipeName}</span>
+          <Label1Black>{recipe.recipeName}</Label1Black>
         </div>
       ))}
     </div>

From bab841526cba56cad2aa310ae7c342cb2f6416de Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Tue, 11 Feb 2025 15:13:16 +0900
Subject: [PATCH 08/10] =?UTF-8?q?Fix:=20MainHome=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83,=20BarGraph=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/feature/MainHome/index.tsx            | 2 +-
 src/components/shared/ChartDetail/BarGraph/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/feature/MainHome/index.tsx b/src/components/feature/MainHome/index.tsx
index 0f7a5434..232e0625 100644
--- a/src/components/feature/MainHome/index.tsx
+++ b/src/components/feature/MainHome/index.tsx
@@ -3,7 +3,7 @@ import MainPageHeader from '@/components/shared/Main/Header';
 
 const MainHome = () => {
   return (
-    <div className='flex flex-col gap-6 pl-8 pr-10'>
+    <div className='flex flex-col gap-6 pb-20 pl-8 pr-10'>
       <MainPageHeader />
       <MainPageBody />
     </div>
diff --git a/src/components/shared/ChartDetail/BarGraph/index.tsx b/src/components/shared/ChartDetail/BarGraph/index.tsx
index 035d745b..820ff0bd 100644
--- a/src/components/shared/ChartDetail/BarGraph/index.tsx
+++ b/src/components/shared/ChartDetail/BarGraph/index.tsx
@@ -95,7 +95,7 @@ const BarGraph = ({ data }: SatisfactionDistribution) => {
         options={chartOptions}
         series={[{ data: valuesArray, name: '해당 점수 비율' }]}
         type='bar'
-        height='100%'
+        height={325}
         width='100%'
       />
     </div>

From 6d180b304bf28e01cdfc23dfd40dad86ca7db200 Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Tue, 11 Feb 2025 17:44:20 +0900
Subject: [PATCH 09/10] =?UTF-8?q?Fix:=20=EC=A0=9C=EC=B2=A0=20=EB=A0=88?=
 =?UTF-8?q?=EC=8B=9C=ED=94=BC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B9=84?=
 =?UTF-8?q?=EC=9C=A8=20=EC=95=88=EA=B9=A8=EC=A7=80=EA=B2=8C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/Main/Cards/SeasonCard/index.tsx      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/shared/Main/Cards/SeasonCard/index.tsx b/src/components/shared/Main/Cards/SeasonCard/index.tsx
index de040582..4822fbd7 100644
--- a/src/components/shared/Main/Cards/SeasonCard/index.tsx
+++ b/src/components/shared/Main/Cards/SeasonCard/index.tsx
@@ -14,14 +14,15 @@ const SeasonCard = ({ data }: SeasonCardProps) => {
           className='flex w-full flex-col items-center gap-4'
           key={recipe.recipeId}
         >
-          <Image
-            src={recipe.imageUrl}
-            alt={recipe.recipeName}
-            width={200}
-            height={120}
-            style={{ height: '120px' }}
-            className='rounded-lg object-fill'
-          />
+          <div className='relative h-[120px] w-[200px] rounded-lg'>
+            <Image
+              src={recipe.imageUrl}
+              alt={recipe.recipeName}
+              sizes='200px'
+              fill
+              style={{ objectFit: 'cover', borderRadius: '8px' }}
+            />
+          </div>
           <Label1Black>{recipe.recipeName}</Label1Black>
         </div>
       ))}

From 2e0234e0d2c5556cd7634bf5a2d169f19606dfce Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Wed, 12 Feb 2025 09:15:11 +0900
Subject: [PATCH 10/10] =?UTF-8?q?Fix:=20=EC=B5=9C=EC=8B=A0=20=EC=8B=9D?=
 =?UTF-8?q?=EB=8B=A8=20=EB=AA=A9=EB=A1=9D=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?=
 =?UTF-8?q?height=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/TableBody/index.tsx   | 2 +-
 src/components/common/TableHeader/index.tsx | 2 +-
 src/components/shared/Main/Body/index.tsx   | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/common/TableBody/index.tsx b/src/components/common/TableBody/index.tsx
index 562fb43a..0eae09a3 100644
--- a/src/components/common/TableBody/index.tsx
+++ b/src/components/common/TableBody/index.tsx
@@ -52,7 +52,7 @@ const TableBody = ({
           key={rowIndex}
           className={cn(
             'h-16 cursor-pointer odd:bg-grey-50 hover:bg-grey-100',
-            miniList ? 'h-[55.4px]' : '',
+            miniList ? 'h-14' : '',
           )}
           onClick={
             onRowClick && type === 'list' && typeof item['설문 ID'] === 'number'
diff --git a/src/components/common/TableHeader/index.tsx b/src/components/common/TableHeader/index.tsx
index e827266f..1bc02628 100644
--- a/src/components/common/TableHeader/index.tsx
+++ b/src/components/common/TableHeader/index.tsx
@@ -39,7 +39,7 @@ const TableHeader = ({
   };
 
   return (
-    <thead className='h-12'>
+    <thead className={miniList ? 'h-[50px]' : 'h-12'}>
       <tr className='border-y border-grey-100'>
         {headerData.map((header, idx) => (
           <th
diff --git a/src/components/shared/Main/Body/index.tsx b/src/components/shared/Main/Body/index.tsx
index 5c1a30cf..ea95dfc5 100644
--- a/src/components/shared/Main/Body/index.tsx
+++ b/src/components/shared/Main/Body/index.tsx
@@ -113,12 +113,12 @@ const MainPageBody = () => {
         />
         <MainTopCard title='인기 식단 Top3' top3Data={likedMenusTop3} />
       </div>
-      <div className='flex w-full gap-6'>
-        <div className='flex h-[423px] w-full flex-col gap-6 rounded-2xl bg-white-100 p-6'>
+      <div className='flex h-[428px] w-full gap-6'>
+        <div className='flex h-full w-full flex-col gap-6 rounded-2xl bg-white-100 p-6'>
           <SubTitle1Black>설문 만족도 분포</SubTitle1Black>
           <BarGraph data={satisfactionDistribution} />
         </div>
-        <div className='flex w-full flex-col gap-6 rounded-2xl bg-white-100 p-6'>
+        <div className='flex h-full w-full flex-col gap-6 rounded-2xl bg-white-100 p-6'>
           <div className='flex items-center justify-between'>
             <SubTitle1Black>최신 식단 목록</SubTitle1Black>
             <Link href={'/viewPlan'}>