dev fe -> dev merge

.github/workflows/deploy-frontend.yml

@@ -0,0 +1,65 @@
+name: Deploy Frontend in Monorepo
+
+on:
+  push:
+    branches:
+      - dev-fe
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    services:
+      docker:
+        image: docker:20.10.7
+        options: --privileged
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Cache Yarn dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            **/node_modules
+            ~/.yarn-cache
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build frontend
+        run: |
+          yarn workspace frontend build
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push frontend Docker image
+        run: |
+          docker build -t ${{ secrets.DOCKER_USERNAME }}/frontend:latest -f packages/frontend/Dockerfile .
+          docker push ${{ secrets.DOCKER_USERNAME }}/frontend:latest
+
+      - name: Deploy to server
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SERVER_SSH_KEY}}
+          port: ${{ secrets.SERVER_PORT }}
+          script: |
+            docker pull ${{ secrets.DOCKER_USERNAME }}/frontend:latest
+            docker-compose down 
+            docker-compose up -d

.github/workflows/storybook.yml

@@ -0,0 +1,53 @@
+name: storybook deploy
+
+on:
+  push:
+    branches: ['dev-fe']
+
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    concurrency:
+      group: ${{ github.workflow }}
+      cancel-in-progress: true
+
+    steps:
+      - name: Use repository source
+        uses: actions/checkout@v3
+
+      - name: Use node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Cache node_modules
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: yarn install
+        if: steps.cache.outputs.cache-hit != 'true'
+
+      - name: Set PUBLIC_URL
+        run: |
+          PUBLIC_URL=$(echo $GITHUB_REPOSITORY | sed -r 's/^.+\/(.+)$/\/\1\//')
+          echo PUBLIC_URL=$PUBLIC_URL > .env
+
+      - name: Build storybook
+        run: |
+          yarn client build-storybook
+
+      - name: Deploy to gh-pages branch
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./packages/frontend/storybook-static

.prettierrc

@@ -6,5 +6,6 @@
   "printWidth": 80,
   "bracketSpacing": true,
   "endOfLine": "lf",
-  "useTabs": false
+  "useTabs": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

packages/frontend/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log

packages/frontend/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  core: {
+    builder: getAbsolutePath('@storybook/builder-vite'),
+  },
+};
+export default config;

packages/frontend/.storybook/preview.ts

@@ -0,0 +1,11 @@
+import '@/index.css';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

packages/frontend/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:20-alpine AS builder
+WORKDIR /packages
+COPY . .
+RUN yarn install --frozen-lockfile
+RUN yarn workspace frontend build
+
+# Nginx 서버로 빌드된 파일 서빙
+FROM nginx:alpine
+COPY --from=builder /packages/packages/frontend/dist /usr/share/nginx/html
+EXPOSE 8080
+CMD ["nginx", "-g", "daemon off;"]

packages/frontend/index.html

@@ -2,7 +2,7 @@
 <html lang="ko">
   <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>주춤주춤</title>
   </head>

packages/frontend/package.json

@@ -7,15 +7,31 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.59.19",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lightweight-charts": "^4.2.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0",
+    "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "3.2.2",
     "@eslint/js": "^9.13.0",
+    "@storybook/addon-essentials": "8.4.3",
+    "@storybook/addon-interactions": "8.4.3",
+    "@storybook/addon-onboarding": "8.4.3",
+    "@storybook/blocks": "8.4.3",
+    "@storybook/builder-vite": "^8.4.3",
+    "@storybook/react": "8.4.3",
+    "@storybook/react-vite": "8.4.3",
+    "@storybook/test": "8.4.3",
     "@types/node": "^22.8.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -25,11 +41,20 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^0.11.0",
     "globals": "^15.11.0",
     "postcss": "^8.4.47",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "storybook": "8.4.3",
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vite-plugin-svgr": "^4.3.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }

packages/frontend/src/App.tsx

@@ -1,23 +1,15 @@
-import { useState } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './routes';
 
 const App = () => {
-  const [count, setCount] = useState(0);
+  const queryClient = new QueryClient();
 
   return (
-    <>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      {/* TODO:react query devtools 설치 */}
+    </QueryClientProvider>
   );
 };
 

packages/frontend/src/components/layouts/Layout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router-dom';
+import { Sidebar } from './Sidebar';
+
+export const Layout = () => {
+  return (
+    <div className="flex">
+      <Sidebar />
+      <main className="ml-20 flex-1 px-48 py-16">
+        <Outlet />
+      </main>
+    </div>
+  );
+};

packages/frontend/src/components/layouts/MenuList.tsx

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { type MenuItemData } from '@/constants/menuItems';
+import { cn } from '@/utils/cn';
+
+interface MenuListProps {
+  items: MenuItemData[];
+  isHovered: boolean;
+}
+
+interface MenuItemProps {
+  icon: ReactNode;
+  text: string;
+  isHovered: boolean;
+  onClick?: () => void;
+}
+
+export const MenuList = ({ items, isHovered }: MenuListProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <ul className="flex flex-col justify-center gap-7">
+      {items.map((menu) => {
+        const { id, icon, text, url } = menu;
+        return (
+          <MenuItem
+            key={id}
+            icon={icon}
+            text={text}
+            isHovered={isHovered}
+            onClick={() => url && navigate(url)}
+          />
+        );
+      })}
+    </ul>
+  );
+};
+
+const MenuItem = ({ icon, text, onClick, isHovered }: MenuItemProps) => {
+  return (
+    <li className="group flex items-center gap-10" onClick={onClick}>
+      <button
+        type="button"
+        className="fill-gray group-hover:fill-orange group-hover:stroke-orange stroke-gray transition-colors"
+      >
+        {icon}
+      </button>
+      <p
+        className={cn(
+          'text-gray display-medium16 whitespace-nowrap',
+          'group-hover:text-orange transition-all group-hover:font-bold',
+          isHovered ? 'display' : 'hidden',
+        )}
+      >
+        {text}
+      </p>
+    </li>
+  );
+};