Merge pull request #259 from boostcampwm-2024/dev-front

[FE] Merge to main

Author: Hosung99

frontend/src/App.tsx

@@ -1,6 +1,15 @@
+import MobileLayout from '@component/template/MobileLayout';
+import useIsMobile from '@hook/useIsMobile';
 import router from '@router/Router';
 import { RouterProvider } from 'react-router-dom';
 
 export default function App() {
-  return <RouterProvider router={router} />;
+  const isMobile = useIsMobile();
+
+  return (
+    <>
+      {isMobile && <MobileLayout />}
+      <RouterProvider router={router} />
+    </>
+  );
 }

frontend/src/boundary/CustomErrorBoundary.tsx

@@ -1,10 +1,9 @@
+import CustomErrorFallback from '@boundary/CustomErrorFallback';
 import Loading from '@component/atom/Loading';
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import CustomErrorFallback from './CustomErrorFallback';
-
 type Props = {
   children: React.ReactNode;
 };

frontend/src/chart/PolarAreaChart.tsx

@@ -11,7 +11,10 @@ export default function PolarAreaChart({ series, options: additionalOptions }: P
   const PolarChartOption: ApexCharts.ApexOptions = {
     chart: {
       type: 'polarArea',
-      height: 300
+      height: '100%',
+      width: '100%',
+      redrawOnParentResize: true,
+      redrawOnWindowResize: true
     },
     plotOptions: {
       polarArea: {

frontend/src/component/atom/Loading.tsx

@@ -2,8 +2,8 @@ export default function Loading() {
   return (
     <div className='flex items-center justify-center gap-4 bg-opacity-75 p-4 text-center'>
       <div className='relative inline-flex'>
-        <div className='absolute h-12 w-12 rounded-full border-1.5 border-gray' />
-        <div className='h-24 w-24 animate-spin rounded-31 border-1.5 border-solid border-gray/30 border-t-gray [animation-duration:1.5s]' />
+        <div className='absolute h-[12px] w-[12px] rounded-full border-[1.5px] border-gray' />
+        <div className='h-[24px] w-[24px] animate-spin rounded-[31px] border-[1.5px] border-solid border-gray/30 border-t-gray [animation-duration:1.5s]' />
       </div>
       <span className='text-lg font-medium text-gray'>Loading...</span>
     </div>

frontend/src/component/molecule/NavbarContact.tsx

@@ -6,12 +6,12 @@ import { Link } from 'react-router-dom';
 
 export default function NavbarContact() {
   return (
-    <div className='flex items-center gap-2'>
+    <div className='flex w-[100%] items-center gap-2'>
       <Link to={PATH.GITHUB} target='_blank' className='flex-shrink-0'>
-        <Img src={GithubImg} alt='깃허브 이미지' cssOption='w-24 h-24 dark:invert' />
+        <Img src={GithubImg} alt='깃허브 이미지' cssOption='w-[24px] h-[24px] dark:invert' />
       </Link>
       <P
-        cssOption='text-10 flex items-center whitespace-nowrap text-gray'
+        cssOption='text-[0.6vw] flex items-center whitespace-nowrap truncate text-gray'
         content='Contact us : [email protected]'
       />
     </div>

frontend/src/component/molecule/NavbarMenu.tsx

@@ -12,7 +12,7 @@ export default function NavbarMenu() {
     return (
       <Link to={item.path}>
         <div
-          className={`flex cursor-pointer items-center gap-4 md:gap-8 ${
+          className={`flex cursor-pointer items-center gap-4 md:gap-[8px] ${
             isActive
               ? 'dark:text-white dark:hover:text-white'
               : 'text-gray hover:text-black dark:hover:text-white'
@@ -22,15 +22,18 @@ export default function NavbarMenu() {
             alt={`${item.label} 아이콘`}
             cssOption='w-4 md:w-6'
           />
-          <P content={item.label} cssOption='text-12 md:text-14 whitespace-nowrap' />
+          <P content={item.label} cssOption='text-[1vw] trunacte' />
         </div>
       </Link>
     );
   }
 
   return (
-    <div className='flex flex-col gap-8 md:gap-16'>
-      <H1 cssOption='mt-8 text-14 md:text-16 whitespace-nowrap dark:text-white' content='MENU' />
+    <div className='flex flex-col gap-[8px] md:gap-[16px]'>
+      <H1
+        cssOption='mt-[8px] text-[14px] md:text-16 whitespace-nowrap dark:text-white'
+        content='MENU'
+      />
       {MENU_ITEMS.map((item) => (
         <MenuItem
           key={item.path}

frontend/src/component/molecule/NavbarRanking.tsx

@@ -61,8 +61,8 @@ export default function NavbarRanking() {
   };
 
   return (
-    <div className='mt-8 rounded-10 border-1.5 border-solid border-gray p-4'>
-      <P cssOption='text-12 mb-1 font-bold dark:text-white' content='TRAFFIC RANKING' />
+    <div className='mt-[8px] rounded-[10px] border-[1.5px] border-solid border-gray p-4'>
+      <P cssOption='text-[0.9vw] mb-1 font-bold dark:text-white' content='TRAFFIC RANKING' />
       {data.rank.map((item, index) => renderRankingItem(item, index))}
     </div>
   );

frontend/src/component/molecule/NavbarSelect.tsx

@@ -19,17 +19,17 @@ export default function NavbarSelect({ groupOption }: Props) {
   };
 
   return (
-    <div className='flex w-full min-w-0 items-center justify-between rounded-1.5 border-1.5 border-solid border-gray p-4 md:gap-[4px] md:p-8'>
+    <div className='flex w-full min-w-0 items-center justify-between rounded-[1.5px] border-[1.5px] border-solid border-gray p-4 md:gap-[4px] md:p-[8px]'>
       {isProjectPath && (
         <Select
-          cssOption='text-12 md:text-14 md:px-2 text-ellipsis cursor-pointer hover:font-semibold truncate dark:text-white'
+          cssOption='text-[12px] md:text-[14px] md:px-2 text-ellipsis cursor-pointer hover:font-semibold truncate dark:text-white'
           options={GENERATION_OPTION}
           value={generation}
           onChange={setGeneration}
         />
       )}
       <Select
-        cssOption='text-12 md:text-14 md:px-2 text-ellipsis cursor-pointer text-gray hover:font-semibold truncate flex-1'
+        cssOption='text-[12px] md:text-[14px] md:px-2 text-ellipsis cursor-pointer text-gray hover:font-semibold truncate flex-1'
         options={groupOption}
         value={selectedGroup}
         onChange={handleSelect}

frontend/src/component/molecule/NavbarTitle.tsx

@@ -1,5 +1,6 @@
+import FaviconImg from '@asset/image/Favicon.svg';
 import H1 from '@component/atom/H1';
-import P from '@component/atom/P';
+import Img from '@component/atom/Img';
 import { useNavigate } from 'react-router-dom';
 
 export default function NavbarTitle() {
@@ -14,11 +15,8 @@ export default function NavbarTitle() {
       <div
         className='flex min-w-0 cursor-pointer items-center gap-2 md:gap-4'
         onClick={navigateMain}>
-        <P cssOption='text-16 md:text-20 lg:text-24 shrink-0' content='🐥' />
-        <H1
-          cssOption='font-bold text-16 md:text-20 lg:text-24 truncate dark:text-white'
-          content='WatchDucks'
-        />
+        <Img src={FaviconImg} cssOption='w-[36px]' alt='와치덕스 로고 이미지' />
+        <H1 cssOption='font-bold text-[1.6vw] truncate dark:text-white' content='WatchDucks' />
       </div>
     </div>
   );

frontend/src/component/molecule/ProjectElapsedTimeLegend.tsx

@@ -16,8 +16,8 @@ export default function ProjectElapsedTimeLegend({ averageTime }: Props) {
   return (
     <div className='flex flex-col items-center gap-4'>
       <div className='text-center'>
-        <H2 cssOption='text-navy mb-4 text-xl font-bold' content='TOP3 Average Response Speed' />
-        <div className='mb-4 text-2xl font-bold' style={{ color: getColorByTime(averageTime) }}>
+        <H2 cssOption='text-navy mb-4 text-[1vw] font-bold' content='TOP3 Average Response Speed' />
+        <div className='mb-4 text-[2vw] font-bold' style={{ color: getColorByTime(averageTime) }}>
           {averageTime || 0}ms
         </div>
       </div>