boostcampwm-2024 · ATeals · Nov 26, 2024 · Nov 26, 2024 · Nov 26, 2024 · Nov 26, 2024
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,7 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+
+#docker
+mysql-data/*
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Froxy</title>
   </head>

diff --git a/apps/frontend/public/android-chrome-192x192.png b/apps/frontend/public/android-chrome-192x192.png
diff --git a/apps/frontend/public/android-chrome-512x512.png b/apps/frontend/public/android-chrome-512x512.png
diff --git a/apps/frontend/public/apple-touch-icon.png b/apps/frontend/public/apple-touch-icon.png
diff --git a/apps/frontend/public/favicon-16x16.png b/apps/frontend/public/favicon-16x16.png
diff --git a/apps/frontend/public/favicon-32x32.png b/apps/frontend/public/favicon-32x32.png
diff --git a/apps/frontend/public/favicon.ico b/apps/frontend/public/favicon.ico
diff --git a/apps/frontend/public/site.webmanifest b/apps/frontend/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/apps/frontend/src/feature/lotus/api.ts b/apps/frontend/src/feature/lotus/api.ts
@@ -3,8 +3,8 @@ import { CodeViewValue } from '@/feature/codeView';
 import { api } from '@/shared/common/api';
 import { PageType } from '@/shared/pagination';
 
-export const getLotusList = async ({ page = 1 }: { page?: number }) => {
-  const response = await api.get(`/api/lotus?page=${page}&size=${9}`);
+export const getLotusList = async ({ page = 1, keyword }: { page?: number; keyword?: string }) => {
+  const response = await api.get(`/api/lotus?page=${page}&size=${9}${keyword ? `&search=${keyword}` : ''}`);
 
   const lotuses: LotusType[] = response.data.lotuses.map((lotus: LotusType) => ({
     ...lotus,

diff --git a/apps/frontend/src/feature/lotus/hook.ts b/apps/frontend/src/feature/lotus/hook.ts
diff --git a/apps/frontend/src/feature/lotus/index.ts b/apps/frontend/src/feature/lotus/index.ts
@@ -1,5 +1,4 @@
 export * from './query';
-export * from './hook';
 export * from './component';
 export * from './type';
 export * from './api';

diff --git a/apps/frontend/src/feature/user/api.ts b/apps/frontend/src/feature/user/api.ts
@@ -4,7 +4,7 @@ import { api } from '@/shared/common/api';
 import { PageType } from '@/shared/pagination';
 
 // 사용자의 Lotus 목록 조회
-export const getUserLotusList = async ({ page = 1, size = 10 }: { page?: number; size?: number }) => {
+export const getUserLotusList = async ({ page = 1, size = 6 }: { page?: number; size?: number }) => {
   const response = await api.get(`/api/user/lotus?page=${page}&size=${size}`);
 
   const lotuses: LotusType[] = response.data.lotuses.map((lotus: LotusType) => ({

diff --git a/apps/frontend/src/page/(main)/lotus/index.lazy.tsx b/apps/frontend/src/page/(main)/lotus/index.lazy.tsx
@@ -2,29 +2,33 @@ import { createLazyFileRoute, getRouteApi } from '@tanstack/react-router';
 import { lotusQueryOptions } from '@/feature/lotus';
 import { AsyncBoundary } from '@/shared/boundary';
 import { LotusSearchBar, SuspenseLotusList } from '@/widget/lotusList';
-import { SuspenseLotusPagination } from '@/widget/lotusList/SuspenseLotusPagination';
+import { SuspensePagination } from '@/widget/SuspensePagination';
 
-const { useSearch } = getRouteApi('/(main)/lotus/');
+const { useSearch, useNavigate } = getRouteApi('/(main)/lotus/');
 
 export const Route = createLazyFileRoute('/(main)/lotus/')({
   component: RouteComponent
 });
 
 function RouteComponent() {
-  const { page } = useSearch();
+  const { page, keyword } = useSearch();
 
-  const lotusListQueryOptions = lotusQueryOptions.list({ page });
+  const lotusListQueryOptions = lotusQueryOptions.list({ page, keyword });
+
+  const navigate = useNavigate();
+
+  const changePage = (page: number) => navigate({ to: '/lotus', search: { page } });
 
   return (
     <div>
-      <LotusSearchBar />
+      <LotusSearchBar current={keyword} />
 
       <AsyncBoundary pending={<SuspenseLotusList.Skeleton />} rejected={() => <div>Error</div>}>
         <SuspenseLotusList queryOptions={lotusListQueryOptions} />
       </AsyncBoundary>
 
-      <AsyncBoundary pending={<SuspenseLotusPagination.Skeleton />} rejected={() => <div>Error</div>}>
-        <SuspenseLotusPagination queryOptions={lotusListQueryOptions} />
+      <AsyncBoundary pending={<SuspensePagination.Skeleton />} rejected={() => <div>Error</div>}>
+        <SuspensePagination queryOptions={lotusListQueryOptions} onChangePage={changePage} activeScrollTop />
       </AsyncBoundary>
     </div>
   );

diff --git a/apps/frontend/src/page/(main)/lotus/index.tsx b/apps/frontend/src/page/(main)/lotus/index.tsx
@@ -2,7 +2,8 @@ import { createFileRoute } from '@tanstack/react-router';
 import { z } from 'zod';
 
 const lotusSearchValidation = z.object({
-  page: z.number().default(1).optional()
+  page: z.number().default(1).optional(),
+  keyword: z.string().optional()
 });
 
 export const Route = createFileRoute('/(main)/lotus/')({

diff --git a/apps/frontend/src/page/(main)/user/index.lazy.tsx b/apps/frontend/src/page/(main)/user/index.lazy.tsx
@@ -3,11 +3,11 @@ import { createLazyFileRoute, getRouteApi } from '@tanstack/react-router';
 import { userQueryOptions } from '@/feature/user';
 import { AsyncBoundary } from '@/shared/boundary';
 import { SuspenseLotusList } from '@/widget/lotusList';
-import { SuspenseLotusPagination } from '@/widget/lotusList/SuspenseLotusPagination';
 import { CreateLotusButton } from '@/widget/navigation';
+import { SuspensePagination } from '@/widget/SuspensePagination';
 import { SuspenseUserInfoBox } from '@/widget/user/SuspenseUserInfoBox';
 
-const { useSearch } = getRouteApi('/(main)/user/');
+const { useSearch, useNavigate } = getRouteApi('/(main)/user/');
 
 export const Route = createLazyFileRoute('/(main)/user/')({
   component: RouteComponent
@@ -16,8 +16,12 @@ export const Route = createLazyFileRoute('/(main)/user/')({
 function RouteComponent() {
   const { page } = useSearch();
 
+  const navigate = useNavigate();
+
   const userLotusListQueryOptions = userQueryOptions.lotusList({ page });
 
+  const changePage = (page: number) => navigate({ to: '/user', search: { page } });
+
   return (
     <div className="flex flex-col gap-28">
       <AsyncBoundary pending={<SuspenseUserInfoBox.Skeleton />} rejected={() => <div>Error</div>}>
@@ -32,8 +36,8 @@ function RouteComponent() {
           <SuspenseLotusList queryOptions={userLotusListQueryOptions} />
         </AsyncBoundary>
 
-        <AsyncBoundary pending={<SuspenseLotusPagination.Skeleton />} rejected={() => <div>Error</div>}>
-          <SuspenseLotusPagination queryOptions={userLotusListQueryOptions} />
+        <AsyncBoundary pending={<SuspensePagination.Skeleton />} rejected={() => <div>Error</div>}>
+          <SuspensePagination queryOptions={userLotusListQueryOptions} onChangePage={changePage} />
         </AsyncBoundary>
       </section>
     </div>

diff --git a/apps/frontend/src/widget/Header.tsx b/apps/frontend/src/widget/Header.tsx
@@ -6,7 +6,10 @@ import { LoginButton } from './navigation/LoginButton';
 import { userQueryOptions } from '@/feature/user/query';
 
 export function Header() {
-  const { data } = useQuery(userQueryOptions.info());
+  const { data } = useQuery({
+    ...userQueryOptions.info(),
+    retry: 0
+  });
 
   const navigate = useNavigate();
 

diff --git a/apps/frontend/src/widget/lotusDetail/SuspenseLotusFiles.tsx b/apps/frontend/src/widget/lotusDetail/SuspenseLotusFiles.tsx
@@ -8,7 +8,11 @@ export function SuspenseLotusFiles({ id }: { id: string }) {
     data: { files }
   } = useSuspenseQuery(lotusQueryOptions.detail({ id }));
 
-  const defaultIndex = files.findIndex(({ filename }) => filename === 'README.md');
+  const readmeIndex = files.findIndex(({ filename }) => filename === 'README.md');
+
+  const firstMdIndex = files.findIndex(({ filename }) => filename.endsWith('.md'));
+
+  const defaultIndex = readmeIndex > 0 ? readmeIndex : firstMdIndex > 0 ? firstMdIndex : 0;
 
   return (
     <CodeView value={files} current={defaultIndex}>

diff --git a/apps/frontend/src/widget/lotusList/LotusSearchBar.tsx b/apps/frontend/src/widget/lotusList/LotusSearchBar.tsx
@@ -1,12 +1,23 @@
+import { useState } from 'react';
 import { Button, Heading, Input, Text } from '@froxy/design/components';
+import { getRouteApi } from '@tanstack/react-router';
 import { IoIosSearch } from 'react-icons/io';
-import { useLotusSearch } from '@/feature/lotus/hook';
 
-export function LotusSearchBar() {
-  const { search, onChangeSearch, onClickSearchLotus, onSearchInputKeyDown } = useLotusSearch();
+const { useNavigate } = getRouteApi('/(main)/lotus/');
+
+export function LotusSearchBar({ current = '' }: { current?: string }) {
+  const [keyword, setKeyword] = useState(current);
+
+  const navigate = useNavigate();
+
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    navigate({ search: { keyword } });
+  };
 
   return (
-    <div className="flex justify-between items-center w-full p-6 border-2 border-slate-200 rounded-xl shadow-sm mb-10">
+    <form className="flex justify-between items-center w-full p-6 border-2 border-slate-200 rounded-xl shadow-sm mb-10">
       <div>
         <Heading size="lg" variant="bold" className="pb-1">
           Lotus
@@ -22,16 +33,15 @@ export function LotusSearchBar() {
           </div>
           <Input
             className={'pl-9 min-w-[21rem]'}
-            value={search}
-            onChange={(e) => onChangeSearch(e.target.value)}
-            placeholder="제목 및 태그를 검색해주세요"
-            onKeyDown={(e) => onSearchInputKeyDown(e, search)}
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value.trim())}
+            placeholder="제목을 검색해주세요"
           />
         </div>
-        <Button variant={'outline'} className={'px-8'} onClick={() => onClickSearchLotus(search)}>
+        <Button variant={'outline'} className={'px-8'} onClick={submit}>
           검색하기
         </Button>
       </div>
-    </div>
+    </form>
   );
 }
diff --git a/apps/frontend/src/widget/lotusList/SuspenseLotusPagination.tsx b/apps/frontend/src/widget/lotusList/SuspenseLotusPagination.tsx
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -7,7 +7,7 @@ services:
       dockerfile: Dockerfile
     container_name: froxy-api
     ports:
-      - "3000:3000"
+      - '3000:3000'
     depends_on:
       - mysql
 
@@ -17,9 +17,9 @@ services:
     env_file:
       - ./apps/backend/.env
     ports:
-      - "3306:3307"
+      - '3306:3306'
     volumes:
-      - mysql-data:/var/lib/mysql
+      - ./mysql-data:/var/lib/mysql
 
 volumes:
   mysql-data:
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,3 +37,7 @@ yarn-error.log* @@
     # Misc
     .DS_Store
     *.pem
+    #docker
+    mysql-data/*
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}