Merge branch 'main' into feature-#35-BE-cicd

apps/frontend/package.json

@@ -22,7 +22,8 @@
     "@tanstack/react-query": "^5.59.19",
     "@tanstack/react-router": "^1.78.3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

apps/frontend/src/app/router/routeTree.gen.ts

@@ -13,82 +13,146 @@ import { createFileRoute } from '@tanstack/react-router';
 // Import Routes
 
 import { Route as rootRoute } from './../../page/__root';
+import { Route as LotusRouteImport } from './../../page/lotus/route';
+import { Route as IndexImport } from './../../page/index';
+import { Route as LotusIndexImport } from './../../page/lotus/index';
+import { Route as LotusDetailIndexImport } from './../../page/lotus/detail/index';
 
 // Create Virtual Routes
 
-const LotusLazyImport = createFileRoute('/lotus')();
 const AboutLazyImport = createFileRoute('/about')();
 
 // Create/Update Routes
 
-const LotusLazyRoute = LotusLazyImport.update({
-  id: '/lotus',
-  path: '/lotus',
-  getParentRoute: () => rootRoute
-} as any).lazy(() => import('./../../page/lotus.lazy').then((d) => d.Route));
-
 const AboutLazyRoute = AboutLazyImport.update({
   id: '/about',
   path: '/about',
   getParentRoute: () => rootRoute
 } as any).lazy(() => import('./../../page/about.lazy').then((d) => d.Route));
 
+const LotusRouteRoute = LotusRouteImport.update({
+  id: '/lotus',
+  path: '/lotus',
+  getParentRoute: () => rootRoute
+} as any);
+
+const IndexRoute = IndexImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRoute
+} as any);
+
+const LotusIndexRoute = LotusIndexImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => LotusRouteRoute
+} as any);
+
+const LotusDetailIndexRoute = LotusDetailIndexImport.update({
+  id: '/detail/',
+  path: '/detail/',
+  getParentRoute: () => LotusRouteRoute
+} as any);
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/about': {
-      id: '/about';
-      path: '/about';
-      fullPath: '/about';
-      preLoaderRoute: typeof AboutLazyImport;
+    '/': {
+      id: '/';
+      path: '/';
+      fullPath: '/';
+      preLoaderRoute: typeof IndexImport;
       parentRoute: typeof rootRoute;
     };
     '/lotus': {
       id: '/lotus';
       path: '/lotus';
       fullPath: '/lotus';
-      preLoaderRoute: typeof LotusLazyImport;
+      preLoaderRoute: typeof LotusRouteImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/about': {
+      id: '/about';
+      path: '/about';
+      fullPath: '/about';
+      preLoaderRoute: typeof AboutLazyImport;
       parentRoute: typeof rootRoute;
     };
+    '/lotus/': {
+      id: '/lotus/';
+      path: '/';
+      fullPath: '/lotus/';
+      preLoaderRoute: typeof LotusIndexImport;
+      parentRoute: typeof LotusRouteImport;
+    };
+    '/lotus/detail/': {
+      id: '/lotus/detail/';
+      path: '/detail';
+      fullPath: '/lotus/detail';
+      preLoaderRoute: typeof LotusDetailIndexImport;
+      parentRoute: typeof LotusRouteImport;
+    };
   }
 }
 
 // Create and export the route tree
 
+interface LotusRouteRouteChildren {
+  LotusIndexRoute: typeof LotusIndexRoute;
+  LotusDetailIndexRoute: typeof LotusDetailIndexRoute;
+}
+
+const LotusRouteRouteChildren: LotusRouteRouteChildren = {
+  LotusIndexRoute: LotusIndexRoute,
+  LotusDetailIndexRoute: LotusDetailIndexRoute
+};
+
+const LotusRouteRouteWithChildren = LotusRouteRoute._addFileChildren(LotusRouteRouteChildren);
+
 export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute;
+  '/lotus': typeof LotusRouteRouteWithChildren;
   '/about': typeof AboutLazyRoute;
-  '/lotus': typeof LotusLazyRoute;
+  '/lotus/': typeof LotusIndexRoute;
+  '/lotus/detail': typeof LotusDetailIndexRoute;
 }
 
 export interface FileRoutesByTo {
+  '/': typeof IndexRoute;
   '/about': typeof AboutLazyRoute;
-  '/lotus': typeof LotusLazyRoute;
+  '/lotus': typeof LotusIndexRoute;
+  '/lotus/detail': typeof LotusDetailIndexRoute;
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute;
+  '/': typeof IndexRoute;
+  '/lotus': typeof LotusRouteRouteWithChildren;
   '/about': typeof AboutLazyRoute;
-  '/lotus': typeof LotusLazyRoute;
+  '/lotus/': typeof LotusIndexRoute;
+  '/lotus/detail/': typeof LotusDetailIndexRoute;
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath;
-  fullPaths: '/about' | '/lotus';
+  fullPaths: '/' | '/lotus' | '/about' | '/lotus/' | '/lotus/detail';
   fileRoutesByTo: FileRoutesByTo;
-  to: '/about' | '/lotus';
-  id: '__root__' | '/about' | '/lotus';
+  to: '/' | '/about' | '/lotus' | '/lotus/detail';
+  id: '__root__' | '/' | '/lotus' | '/about' | '/lotus/' | '/lotus/detail/';
   fileRoutesById: FileRoutesById;
 }
 
 export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute;
+  LotusRouteRoute: typeof LotusRouteRouteWithChildren;
   AboutLazyRoute: typeof AboutLazyRoute;
-  LotusLazyRoute: typeof LotusLazyRoute;
 }
 
 const rootRouteChildren: RootRouteChildren = {
-  AboutLazyRoute: AboutLazyRoute,
-  LotusLazyRoute: LotusLazyRoute
+  IndexRoute: IndexRoute,
+  LotusRouteRoute: LotusRouteRouteWithChildren,
+  AboutLazyRoute: AboutLazyRoute
 };
 
 export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>();
@@ -99,15 +163,31 @@ export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileT
     "__root__": {
       "filePath": "__root.tsx",
       "children": [
-        "/about",
-        "/lotus"
+        "/",
+        "/lotus",
+        "/about"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/lotus": {
+      "filePath": "lotus/route.tsx",
+      "children": [
+        "/lotus/",
+        "/lotus/detail/"
       ]
     },
     "/about": {
       "filePath": "about.lazy.tsx"
     },
-    "/lotus": {
-      "filePath": "lotus.lazy.tsx"
+    "/lotus/": {
+      "filePath": "lotus/index.tsx",
+      "parent": "/lotus"
+    },
+    "/lotus/detail/": {
+      "filePath": "lotus/detail/index.tsx",
+      "parent": "/lotus"
     }
   }
 }

apps/frontend/src/feature/LotusSearch/useLotusSearch.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+export const useLotusSearch = () => {
+  const [search, setSearch] = useState('');
+
+  const onChangeSearch = (searchValue: string) => {
+    setSearch(searchValue);
+  };
+
+  const onClickSearchLotus = (searchValue: string) => {
+    if (!searchValue) return;
+
+    // TODO: queryClient.invalidateQueries 새로운 검색어로 검색 수행
+    console.log('검색!: ', searchValue);
+  };
+
+  const onSearchInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, searchValue: string) => {
+    if (event.key === 'Enter') onClickSearchLotus(searchValue);
+  };
+
+  return {
+    search,
+    onChangeSearch,
+    onClickSearchLotus,
+    onSearchInputKeyDown
+  };
+};

apps/frontend/src/page/__root.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link, Outlet, createRootRoute } from '@tanstack/react-router';
+import { Outlet, createRootRoute } from '@tanstack/react-router';
 
 export const Route = createRootRoute({
   component: RootComponent
@@ -8,9 +8,6 @@ export const Route = createRootRoute({
 function RootComponent() {
   return (
     <React.Fragment>
-      <div>Hello "__root"!</div>
-      <Link to={'/about'}>about</Link>
-      <Link to={'/lotus'}>lotus</Link>
       <Outlet />
     </React.Fragment>
   );

apps/frontend/src/page/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/')({
+  component: RouteComponent
+});
+
+function RouteComponent() {
+  return <div>페이지 : 시작 페이지임!! - 아마 여기가 온보딩 페이지?</div>;
+}

apps/frontend/src/page/lotus/detail/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/lotus/detail/')({
+  component: RouteComponent
+});
+
+function RouteComponent() {
+  return <div>Lotus 디테일 페이지</div>;
+}

apps/frontend/src/page/lotus/index.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { LotusCardList } from '@/widget/LotusList/LotusCardList';
+import { LotusSearchBar } from '@/widget/LotusList/LotusSearchBar';
+
+export const Route = createFileRoute('/lotus/')({
+  component: RouteComponent
+});
+
+function RouteComponent() {
+  return (
+    <div className="flex flex-col gap-8">
+      <LotusSearchBar />
+      <LotusCardList />
+    </div>
+  );
+}

apps/frontend/src/page/lotus/route.tsx

@@ -0,0 +1,17 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router';
+import { Header } from '@/widget/Header';
+
+export const Route = createFileRoute('/lotus')({
+  component: RouteComponent
+});
+
+function RouteComponent() {
+  return (
+    <div className="flex justify-center min-h-screen">
+      <div className="w-full max-w-screen-xl pb-20 px-4 sm:px-6 lg:px-8">
+        <Header />
+        <Outlet />
+      </div>
+    </div>
+  );
+}

apps/frontend/src/widget/Header.tsx

@@ -0,0 +1,25 @@
+import { Button, Heading } from '@froxy/design/components';
+
+export function Header() {
+  // TODO: 로그인 여부 확인하는 로직 추가 필요
+  const isLogin = false;
+
+  return (
+    <div className="w-full py-7 px-2 flex justify-between items-center">
+      <div className="flex items-center gap-4">
+        <img className="w-14 h-14" src="/image/logoIcon.svg" alt="로고" />
+        <Heading size="lg">Froxy</Heading>
+      </div>
+      <div className="flex items-center gap-4">
+        {isLogin ? (
+          <>
+            <Button variant={'outline'}>create Lotus</Button>
+            <img className="w-10 h-10 rounded-full" src="/image/exampleImage.jpeg" alt="프로필 사진" />
+          </>
+        ) : (
+          <Button variant={'default'}>Login</Button>
+        )}
+      </div>
+    </div>
+  );
+}

apps/frontend/src/widget/LotusList/LotusCardList.tsx

@@ -19,7 +19,7 @@ export function LotusCardList() {
     <div className="w-full grid grid-cols-3 gap-[2rem]">
       {new Array(10).fill(0).map((_, index) => (
         <Lotus lotus={LotusDummyData} key={index}>
-          <Lotus.Link className="max-w-[24rem] p-5 border-2 border-[#D9D9D9] rounded-[1rem]">
+          <Lotus.Link className="max-w-[24rem] p-5 border-2 border-[#E2E8F0] rounded-[0.75rem]">
             <Lotus.Title className="text-[#1C1D22]" />
             <Lotus.Author className="text-[rgba(28,29,34,0.5)]" />
             <div className="w-full flex justify-between items-end">
@@ -28,7 +28,7 @@ export function LotusCardList() {
             </div>
             {LotusDummyData?.tags?.length ? (
               <>
-                <div className="mt-[1rem] w-full border-b-2 border-[#D9D9D9]" />
+                <div className="mt-[1rem] w-full border-b-2 border-[#E2E8F0]" />
                 <Lotus.TagList className="pt-[1rem] min-h-[2rem]" variant={'default'} />
               </>
             ) : (