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

[FE] Merge to main

Author: Hosung99

frontend/asset/image/GabiaDescription.png

@@ -12,15 +12,15 @@ export default function NavbarMenu() {
     return (
       <Link to={item.path}>
         <div
-          className={`flex cursor-pointer items-center gap-4 md:gap-[8px] ${
+          className={`flex cursor-pointer items-center gap-4 ${
             isActive
               ? 'dark:text-white dark:hover:text-white'
               : 'text-gray hover:text-black dark:hover:text-white'
           }`}>
           <Img
             src={isActive ? item.activeIcon : item.inactiveIcon}
             alt={`${item.label} 아이콘`}
-            cssOption='w-4 md:w-6'
+            cssOption='w-4'
           />
           <P content={item.label} cssOption='text-[1vw] trunacte' />
         </div>

frontend/src/component/molecule/NavbarMenu.tsx

@@ -11,10 +11,8 @@ export default function NavbarTitle() {
   };
 
   return (
-    <div className='w-full'>
-      <div
-        className='flex min-w-0 cursor-pointer items-center gap-2 md:gap-4'
-        onClick={navigateMain}>
+    <div className='my-2 w-full'>
+      <div className='flex min-w-0 cursor-pointer items-center gap-2' onClick={navigateMain}>
         <Img src={FaviconImg} cssOption='w-[36px]' alt='와치덕스 로고 이미지' />
         <H1 cssOption='font-bold text-[1.6vw] truncate dark:text-white' content='WatchDucks' />
       </div>

frontend/src/component/molecule/NavbarTitle.tsx

@@ -8,9 +8,10 @@ import { useNavigate } from 'react-router-dom';
 
 type Props = {
   data: RankingData;
+  unit: string;
 };
 
-export default function RankingItem({ data }: Props) {
+export default function RankingItem({ data, unit }: Props) {
   const [currentPage, setCurrentPage] = useState<number>(1);
   const navigate = useNavigate();
   const itemsPerPage = 10;
@@ -44,7 +45,7 @@ export default function RankingItem({ data }: Props) {
           onClick={() => navigate(`/project/${item.projectName}`)}
         />
         <P
-          content={item.value.toString()}
+          content={`${item.value.toLocaleString()} ${unit}`}
           cssOption='w-[140px] mr-[16px]16 text-right text-[clamp(12px,1.5vw,14px)]'
         />
       </div>
@@ -64,7 +65,7 @@ export default function RankingItem({ data }: Props) {
           onClick={() => navigate(`/project/${item.projectName}`)}
         />
         <P
-          content={item.value.toString()}
+          content={`${item.value.toLocaleString()} ${unit}`}
           cssOption='w-[140px] mr-[16px]16 text-right text-[clamp(12px,1.5vw,14px)]'
         />
       </div>

frontend/src/component/molecule/RankingItem.tsx

@@ -3,18 +3,18 @@ import { RANK_OPTIONS } from '@constant/Rank';
 import { RankType } from '@type/Rank';
 
 type Props = {
-  rankType: string;
+  rankName: string;
   setRankType: (type: RankType) => void;
 };
 
-export default function RankingTab({ rankType, setRankType }: Props) {
+export default function RankingTab({ rankName, setRankType }: Props) {
   return (
     <div className='border-gray-200 flex justify-between border-b'>
       <div>
         {RANK_OPTIONS.map((option) => (
           <button
-            key={option.value}
-            className={`px-4 py-2 ${option.value === rankType ? 'border-blue-500 text-blue-500 border-b-2' : 'text-gray hover:text-black dark:hover:text-white'}`}
+            key={option.value.name}
+            className={`px-4 py-2 ${option.value.name === rankName ? 'border-blue-500 text-blue-500 border-b-2' : 'text-gray hover:text-black dark:hover:text-white'}`}
             onClick={() => setRankType(option.value)}>
             {option.label}
           </button>

frontend/src/component/molecule/RankingTab.tsx

@@ -9,8 +9,9 @@ export default function RegisterText() {
     <div className='flex flex-col gap-[10px] text-[18px]'>
       <H1 cssOption='font-medium text-[50px] border-[2px]' content='등록 절차' />
       <P content='1. 프로젝트명, 도메인, 아이피 주소를 입력합니다.' />
-      <P content='2. 등록 완료 후 표시된 네임 서버를 복사합니다.' />
+      <P content='2. 등록 완료 후 전송된 네임 서버를 복사합니다.' />
       <P content='3. 상용 DNS (ex. Cloudflare, Gabia)의 가이드에 따라 네임 서버와 IP를 등록해 주세요.' />
+      <P content='주의! 1,2차에만 작성해주시고 3차는 비워주세요' />
       <P cssOption='mt-[20px] font-light' content='Gabia 예시' />
       <Img cssOption='bg-cover' src={GabiaDescriptionImg} alt='가비아 dns 등록 설명 이미지' />
       <P cssOption='mt-[20px] font-light' content='CloudFlare 예시' />

frontend/src/component/molecule/RegisterText.tsx

@@ -11,15 +11,15 @@ export default function Navbar() {
     <aside className='border-3 flex h-screen min-h-0 flex-col rounded-[11px] bg-lightblue p-4 dark:bg-darkblue'>
       <div className='flex min-h-0 flex-1 flex-col'>
         <div className='flex min-h-0 flex-1 flex-col justify-between'>
-          <div className='flex min-h-0 flex-col space-y-4'>
+          <div className='flex min-h-0 flex-col gap-4 space-y-4'>
             <div className='flex-shrink-0 space-y-2'>
               <NavbarTitle />
               <NavbarSelectWrapper />
             </div>
             <div className='flex-shrink-0'>
               <NavbarMenu />
             </div>
-            <div className='scrollbar-hide min-h-0 flex-1 overflow-y-scroll'>
+            <div className='min-h-0 flex-1 overflow-y-scroll scrollbar-hide'>
               <CustomErrorBoundary>
                 <NavbarRanking />
               </CustomErrorBoundary>

frontend/src/component/organism/NavBar.tsx

@@ -7,18 +7,18 @@ import { RankType } from '@type/Rank';
 import { useState } from 'react';
 
 export default function RankingList() {
-  const [rankType, setRankType] = useState<RankType>('traffic');
+  const [rankType, setRankType] = useState<RankType>({ name: 'traffic', unit: '개' });
   const { generation } = useNavbarStore();
-  const { data } = useRankData(rankType, generation);
+  const { data } = useRankData(rankType.name, generation);
 
   return (
     <DataLayout cssOption='p-[8px] rounded-lg shadow-md w-full justify-center flex-col flex h-full'>
       <div className='flex h-full w-full flex-col'>
         <div className='mb-[16px] ml-[8px]'>
-          <RankingTab rankType={rankType} setRankType={setRankType} />
+          <RankingTab rankName={rankType.name} setRankType={setRankType} />
         </div>
         <div className='flex h-full justify-center'>
-          <RankingItem data={data} />
+          <RankingItem data={data} unit={rankType.unit} />
         </div>
       </div>
     </DataLayout>

frontend/src/component/organism/RankingList.tsx

@@ -1,10 +1,10 @@
 import { RankType } from '@type/Rank';
 
 const RANK_OPTIONS: { value: RankType; label: string }[] = [
-  { value: 'traffic', label: '트래픽양' },
-  { value: 'success-rate', label: '요청 성공률' },
-  { value: 'elapsed-time', label: '평균 응답시간' },
-  { value: 'dau', label: 'DAU' }
+  { value: { name: 'traffic', unit: '개' }, label: '트래픽양' },
+  { value: { name: 'success-rate', unit: '%' }, label: '요청 성공률' },
+  { value: { name: 'elapsed-time', unit: 'ms' }, label: '평균 응답시간' },
+  { value: { name: 'dau', unit: '명' }, label: 'DAU' }
 ];
 
 export { RANK_OPTIONS };

frontend/src/constant/Rank.ts

@@ -1,3 +1,7 @@
-type RankType = 'traffic' | 'success-rate' | 'elapsed-time' | 'dau';
+type RankType =
+  | { name: 'traffic'; unit: '개' }
+  | { name: 'success-rate'; unit: '%' }
+  | { name: 'elapsed-time'; unit: 'ms' }
+  | { name: 'dau'; unit: '명' };
 
 export type { RankType };