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

[FE] Merge to main

Author: Hosung99

frontend/src/boundary/CustomErrorFallback.tsx

@@ -1,4 +1,3 @@
-import Loading from '@component/atom/Loading';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 
 type Props = {
@@ -15,7 +14,7 @@ export default function CustomErrorFallback({ resetErrorBoundary }: Props) {
 
   return (
     <div className='flex flex-col items-center justify-center gap-4'>
-      <Loading />
+      <h1 className='text-black dark:text-white'>요청이 만료됐습니다. 재시도해주세요</h1>
       <button
         onClick={handleClickReset}
         className='flex items-center gap-2 rounded-lg bg-blue px-6 py-2 text-white shadow-md transition-all duration-200 hover:bg-opacity-90 hover:text-black active:scale-95'>

frontend/src/chart/README.md

@@ -0,0 +1,25 @@
+# 여기는 📊chart 디렉토리입니다
+
+공통으로 차트들을 모아놓은 디렉토리 입니다.
+option을 다르게해, Chart컴포넌트를 호출하는식으로 사용합니다.
+
+구현방법
+
+```ts
+export default function BarChart({ series, options: additionalOptions }: Props) {
+	const barChartOptions: ApexCharts.ApexOptions = {
+		chart: {
+		height: '100%',
+		type: 'bar'
+		},
+	};
+	const options = merge({}, barChartOptions, additionalOptions);
+	return <Chart type='bar' series={series} options={options} />;
+};
+```
+
+- 차트종류에 맞게 파스칼케이스로 함수명을 짓습니다.
+- series는 차트에 표시할 데이터입니다.
+- options은 차트의 옵션입니다.
+- 차트의 옵션은 차트종류에 맞게 기본옵션을 정의하고, 추가옵션을 받아서 merge를 통해 합쳐서 사용합니다.
+- Chart컴포넌트를 호출할때 type, series, options를 넘겨줍니다.

frontend/src/component/molecule/NavbarRanking.tsx

@@ -40,7 +40,7 @@ export default function NavbarRanking() {
             ) : (
               <Fragment>
                 <Span
-                  cssOption='w-5 h-5 flex-shrink-0 font-medium dark:text-white'
+                  cssOption='text-[1vw] flex-shrink-0 font-medium dark:text-white'
                   content={`${rank + 1}th`}
                 />
                 <P cssOption='truncate dark:text-white max-w-[140px]' content={item.projectName} />

frontend/src/component/organism/ProjectTrafficChart.tsx

@@ -4,7 +4,6 @@ import DataLayout from '@component/template/DataLayout';
 import { DATE_OPTIONS } from '@constant/Date';
 import useProjectTraffic from '@hook/api/useProjectTraffic';
 import { DateType } from '@type/Date';
-import { Link } from 'lucide-react';
 import { useState } from 'react';
 
 type Props = {
@@ -135,14 +134,9 @@ export default function ProjectTrafficChart({ id }: Props) {
     <DataLayout cssOption='flex flex-col p-[8px] rounded-lg shadow-md w-full h-full'>
       <div className='mb-[8px] flex items-center justify-between'>
         <div className='flex-1 items-center pl-12 pt-2 text-xl text-gray'>Total: {data.total}</div>
-        <a
-          className='mr-2 inline-flex items-center gap-1 text-2xl font-bold hover:text-blue'
-          href={`http://${data.domain}`}
-          target='_blank'
-          rel='noreferrer'>
-          <Link className='h-5 w-5' />
+        <div className='mr-2 inline-flex items-center gap-1 text-2xl font-bold'>
           {data.projectName}
-        </a>
+        </div>
         <div className='flex justify-center'>Traffic Chart</div>
         <div className='flex flex-1 justify-end p-4'>
           <Select

frontend/src/router/README.md

@@ -0,0 +1,17 @@
+# 여기는 🔃router 디렉토리입니다
+
+라우팅 관련 컴포넌트를 모아놓은 디렉토리 입니다.
+
+구현방법
+
+```ts
+export default createBrowserRouter([
+	{
+        path: '/',
+        element: <MainPage />
+    },
+]);
+```
+
+- path는 라우팅 경로입니다.
+- element는 해당 경로에 렌더링할 컴포넌트입니다.

frontend/src/store/README.md

@@ -0,0 +1,15 @@
+# 여기는 🧳store 디렉토리입니다
+
+스토어관련 코드를 모아놓은 디렉토리입니다.
+Zustand라이브러리를 사용해 스토어를 구현합니다.
+
+구현방법
+
+```ts
+const useNavbarStore = create<NavbarState>((set) => ({
+  generation: GENERATION_VALUE.NINTH,
+  setGeneration: (generation) => set({ generation })
+}));
+```
+
+- 커스텀훅 규칙처럼 이름을 짓고, 마지막에 Store를 붙여줍니다.