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

[FE] merge to main

front/index.html

@@ -7,7 +7,7 @@
     https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css
     "
       rel="stylesheet" />
-    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <link rel="icon" type="image/svg+xml" href="/asset/image/Favicon.png" />
     <link
       rel="stylesheet"
       as="style"

front/package.json

@@ -13,6 +13,7 @@
     "@tanstack/react-query": "^5.59.19",
     "@tanstack/react-query-devtools": "^5.59.19",
     "axios": "^1.7.7",
+    "motion": "^11.11.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",

front/src/api/get.ts

@@ -1,10 +1,20 @@
 import axios from 'axios';
 
-const getGroups = async (generation: string) => {
+const getGroupNames = async (generation: string) => {
   const response = await axios.get(
-    `${import.meta.env.VITE_API_URL}/api/project?generation=${generation}`
+    `${import.meta.env.VITE_API_URL}/project?generation=${generation}`
   );
   return response.data;
 };
 
-export { getGroups };
+const getRakings = async () => {
+  const response = await axios.get(`${import.meta.env.VITE_API_URL}/log/traffic/rank`);
+  return response.data;
+};
+
+const getTotalTraffic = async () => {
+  const response = await axios.get(`${import.meta.env.VITE_API_URL}/log/traffic/`);
+  return response.data;
+};
+
+export { getGroupNames, getRakings, getTotalTraffic };

front/src/boundary/CustomErrorBoundary.tsx

@@ -14,16 +14,14 @@ export default function CustomErrorBoundary({ children }: Props) {
     <QueryErrorResetBoundary>
       {({ reset }) => (
         <ErrorBoundary onReset={reset} FallbackComponent={CustomErrorFallback}>
-          <div className='w-full'>
-            <Suspense
-              fallback={
-                <div className='flex h-full w-full items-center justify-center'>
-                  <Loading />
-                </div>
-              }>
-              {children}
-            </Suspense>
-          </div>
+          <Suspense
+            fallback={
+              <div className='flex h-full w-full items-center justify-center'>
+                <Loading />
+              </div>
+            }>
+            {children}
+          </Suspense>
         </ErrorBoundary>
       )}
     </QueryErrorResetBoundary>

front/src/boundary/CustomErrorFallback.tsx

@@ -9,8 +9,8 @@ export default function CustomErrorFallback({ resetErrorBoundary }: Props) {
   const { reset } = useQueryErrorResetBoundary();
 
   const handleClickReset = () => {
-    resetErrorBoundary();
     reset();
+    resetErrorBoundary();
   };
 
   return (

front/src/component/atom/Loading.tsx

@@ -1,9 +1,9 @@
 export default function Loading() {
   return (
-    <div className='flex items-center justify-center bg-white bg-opacity-75 p-4 text-center'>
+    <div className='flex items-center justify-center gap-4 bg-white bg-opacity-75 p-4 text-center'>
       <div className='relative inline-flex'>
-        <div className='absolute h-12 w-12 rounded-full border-4 border-gray-200' />
-        <div className='h-12 w-12 animate-spin rounded-full border-4 border-blue border-t-transparent [animation-duration:1.5s]' />
+        <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>
       <span className='text-lg font-medium text-gray'>Loading...</span>
     </div>

front/src/component/atom/Select.tsx

@@ -1,15 +1,15 @@
-type Props<T extends string> = {
+type Props<T> = {
   cssOption?: string;
   options: ReadonlyArray<{ readonly value: T; readonly label: string }>;
-  value: T;
-  onChange: (value: T) => void;
+  value: string;
+  onChange?: (value: T) => void;
 };
 
 export default function Select<T extends string>({
   cssOption,
   options = [] as ReadonlyArray<{ value: T; label: string }>,
   value,
-  onChange
+  onChange = () => {}
 }: Props<T>) {
   return (
     <select
@@ -21,7 +21,7 @@ export default function Select<T extends string>({
           key={option.value}
           value={option.value}
           className='overflow-hidden text-ellipsis whitespace-nowrap bg-white text-black'>
-          {option.label}
+          {option.label || option.value}
         </option>
       ))}
     </select>

front/src/component/atom/Span.tsx

@@ -0,0 +1,8 @@
+type Props = {
+  cssOption?: string;
+  content: string;
+};
+
+export default function Span({ cssOption, content = '' }: Props) {
+  return <span className={cssOption}>{content}</span>;
+}

front/src/component/molecule/NavbarCustomSelect.tsx

@@ -0,0 +1,28 @@
+import useGroupNames from '@hook/useGroupNames';
+
+import NavbarSelect from './NavbarSelect';
+
+type Props = {
+  generation: string;
+  selectedGroup: string;
+  setGeneration: (value: string) => void;
+  setSelectedGroup: (value: string) => void;
+};
+
+export default function NavbarCustomSelect({
+  generation,
+  selectedGroup,
+  setGeneration,
+  setSelectedGroup
+}: Props) {
+  const { data } = useGroupNames(generation);
+  return (
+    <NavbarSelect
+      generation={generation}
+      selectedGroup={selectedGroup}
+      setGeneration={setGeneration}
+      setSelectedGroup={setSelectedGroup}
+      groupOption={data}
+    />
+  );
+}

front/src/component/molecule/NavbarDefaultSelect.tsx

@@ -0,0 +1,27 @@
+import { BOOST_CAMP_OPTION } from '@constant/NavbarSelect';
+
+import NavbarSelect from './NavbarSelect';
+
+type Props = {
+  generation: string;
+  selectedGroup: string;
+  setGeneration: (value: string) => void;
+  setSelectedGroup: (value: string) => void;
+};
+
+export default function NavbarDefaultSelect({
+  generation,
+  selectedGroup,
+  setGeneration,
+  setSelectedGroup
+}: Props) {
+  return (
+    <NavbarSelect
+      generation={generation}
+      selectedGroup={selectedGroup}
+      setGeneration={setGeneration}
+      setSelectedGroup={setSelectedGroup}
+      groupOption={BOOST_CAMP_OPTION}
+    />
+  );
+}

front/src/component/molecule/NavbarMenu.tsx

@@ -8,7 +8,7 @@ export default function NavbarMenu() {
 
   return (
     <div className='flex flex-col gap-8 md:gap-16'>
-      <H1 cssOption='mt-16 md:mt-40 text-14 md:text-16 whitespace-nowrap' content='MENU' />
+      <H1 cssOption='mt-8 text-14 md:text-16 whitespace-nowrap' content='MENU' />
       {MENU_ITEMS.map((item) => (
         <NavbarMenuItem key={item.path} item={item} isActive={pathname === item.path} />
       ))}

front/src/component/molecule/NavbarRanking.tsx

@@ -0,0 +1,53 @@
+import Img from '@component/atom/Img';
+import P from '@component/atom/P';
+import Span from '@component/atom/Span';
+import { MEDALS } from '@constant/Medals';
+import useRankings from '@hook/useRankings';
+import { Ranking } from '@type/Navbar';
+import { Fragment } from 'react';
+
+export default function NavbarRanking() {
+  const { data = [] } = useRankings();
+
+  const renderRankingItem = (item: Ranking, index: number) => {
+    const rank = index;
+
+    return (
+      <Fragment key={item.host}>
+        <div className='group flex items-center justify-between gap-2 py-2 font-light hover:cursor-pointer'>
+          <div className='flex items-center gap-2'>
+            {rank <= 2 ? (
+              <Fragment>
+                <Img src={MEDALS[rank as keyof typeof MEDALS].image} cssOption='flex-shrink-0' />
+                <P
+                  cssOption={`truncate ${MEDALS[rank as keyof typeof MEDALS].color}`}
+                  content={item.host}
+                />
+              </Fragment>
+            ) : (
+              <Fragment>
+                <Span cssOption='w-6 flex-shrink-0 font-medium' content={`${rank + 1}th`} />
+                <P cssOption='truncate' content={item.host} />
+              </Fragment>
+            )}
+          </div>
+          <div className='flex min-w-0 items-center text-right'>
+            <Span
+              cssOption='text-[clamp(12px,1.5vw,14px)] group-hover:hidden'
+              content={item.count}
+            />
+            <Span cssOption='hidden font-medium group-hover:block' content='&gt;' />
+          </div>
+        </div>
+        <hr className='border-gray-300' />
+      </Fragment>
+    );
+  };
+
+  return (
+    <div className='mt-8 rounded-10 border-1.5 border-solid border-gray p-4'>
+      <P cssOption='text-12 mb-1 font-bold' content='TRAFFIC RANKING' />
+      {data.map((item, index) => renderRankingItem(item, index))}
+    </div>
+  );
+}