Feat[THKV-131]: MainHome 페이지 리디자인 적용

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>
   );
 };

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;
+}

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'

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;

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],

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>

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-14' : '',
+          )}
           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 (

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,8 +30,16 @@ 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'>
+    <thead className={miniList ? 'h-[50px]' : 'h-12'}>
       <tr className='border-y border-grey-100'>
         {headerData.map((header, idx) => (
           <th
@@ -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]) || '',
             )}
           >

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',
 
       // 리디자인 후 삭제

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',
@@ -43,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',
@@ -58,6 +78,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',

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 pb-20 pl-8 pr-10'>
       <MainPageHeader />
       <MainPageBody />
     </div>

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>
+            <span class='tooltip_data'>${series[seriesIndex][dataPointIndex]}%</span>
+          </div>`;
       },
     },
     xaxis: {
@@ -44,34 +54,34 @@ const BarGraph = ({ data }: SatisfactionDistribution) => {
         '9점',
         '10점',
       ],
+      labels: {
+        style: {
+          fontSize: '14px',
+          fontWeight: 500,
+        },
+      },
       title: {},
     },
     yaxis: {
       min: yMin,
       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: {

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}
     />
   );
 };