Merge pull request #174 from boostcampwm-2024/frontend

[FE][Feat] : 배포를 위한 머지

README.md

@@ -21,7 +21,7 @@
 
 <p>  
   <a href="https://www.notion.so/127b1b2b649180e88f70d6a4648924a0?pvs=4">팀 노션</a>   |   
-  <a href="https://github.com/boostcampwm-2024/web28-DDara/wiki">팀 위키</a> |
+  <a href="https://ddara-docs.vercel.app/">팀 위키</a> |
   <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=90-1897">기획서</a>   |   
   <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=87-929">디자인</a>
 <!--   <br />

backend/package.json

@@ -1,34 +1,34 @@
-{
-  "name": "ddara-backend",
-  "private": true,
-  "workspaces": [
-    "frontend",
-    "backend"
-  ],
-  "version": "0.0.0",
-  "type": "module",
-  "description": "따라따라의 선따라길따라 BackEnd 코드",
-  "main": "index.js",
-  "scripts": {
-    "dev": "node src/index.js",
-    "test": "vitest",
-    "test:watch": "vitest --watch",
-    "test:coverage": "vitest run --coverage",
-    "lint": "pnpm lint-staged"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "bcrypt": "^5.1.1",
-    "dotenv": "^16.4.5",
-    "express": "^4.21.1",
-    "express-validator": "^7.2.0",
-    "jsonwebtoken": "^9.0.2",
-    "pg": "^8.13.1",
-    "swagger-jsdoc": "^6.2.8",
-    "swagger-ui-express": "^5.0.1",
-    "uuid": "^11.0.3",
-    "ws": "^8.11.0"
-  }
-}
+{
+  "name": "ddara-backend",
+  "private": true,
+  "workspaces": [
+    "frontend",
+    "backend"
+  ],
+  "version": "0.0.0",
+  "type": "module",
+  "description": "따라따라의 선따라길따라 BackEnd 코드",
+  "main": "index.js",
+  "scripts": {
+    "dev": "node src/index.js",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage",
+    "lint": "pnpm lint-staged"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "bcrypt": "^5.1.1",
+    "dotenv": "^16.4.5",
+    "express": "^4.21.1",
+    "express-validator": "^7.2.0",
+    "jsonwebtoken": "^9.0.2",
+    "pg": "^8.13.1",
+    "swagger-jsdoc": "^6.2.8",
+    "swagger-ui-express": "^5.0.1",
+    "uuid": "^11.0.3",
+    "ws": "^8.11.0"
+  }
+}

docs/docusaurus/README.md

@@ -21,7 +21,7 @@
 
 <p>  
   <a href="https://www.notion.so/127b1b2b649180e88f70d6a4648924a0?pvs=4">팀 노션</a>   |   
-  <a href="https://github.com/boostcampwm-2024/web28-DDara/wiki">팀 위키</a> |
+  <a href="https://ddara-docs.vercel.app/">팀 위키</a> |
   <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=90-1897">기획서</a>   |   
   <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=87-929">디자인</a>
 <!--   <br />

docs/docusaurus/package.json

@@ -27,7 +27,8 @@
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-player": "^2.16.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.6.1",

docs/docusaurus/tsconfig.json

@@ -2,6 +2,12 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@site/*": ["src/*"],
+      "@theme/*": ["src/theme/*"],
+      "@component/*": ["src/components/*"],
+      "@markdown/*": ["src/components/markdown/*"],
+    }
   }
 }

eslint.config.mjs

@@ -189,6 +189,7 @@ export default [
       'prettier/prettier': 'error',
       'no-underscore-dangle': 'warn',
       'no-undef': 'off',
+      'arrow-body-style': 'off',
     },
   },
 

frontend/.storybook/preview.ts

@@ -1,4 +1,15 @@
 import type { Preview } from '@storybook/react';
+import '../src/index.css';
+// 우선은 폰트 다 포함시켰는데, 나중에 사용할 것들만 따로 뺴자.
+import '@fontsource/pretendard/100.css';
+import '@fontsource/pretendard/200.css';
+import '@fontsource/pretendard/300.css';
+import '@fontsource/pretendard/400.css';
+import '@fontsource/pretendard/500.css';
+import '@fontsource/pretendard/600.css';
+import '@fontsource/pretendard/700.css';
+import '@fontsource/pretendard/800.css';
+import '@fontsource/pretendard/900.css';
 
 const preview: Preview = {
   parameters: {

frontend/package.json

@@ -1,61 +1,64 @@
-{
-  "name": "ddara-frontend",
-  "private": true,
-  "workspaces": [
-    "frontend",
-    "backend"
-  ],
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "test": "vitest",
-    "test:watch": "vitest --watch",
-    "test:coverage": "vitest run --coverage",
-    "lint": "pnpm lint-staged",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@fontsource/pretendard": "^5.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/js": "^9.13.0",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-onboarding": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-vite": "^8.4.2",
-    "@storybook/test": "^8.4.2",
-    "@types/navermaps": "^3.7.8",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "autoprefixer": "^10.4.20",
-    "classnames": "^2.5.1",
-    "eslint": "^9.13.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
-    "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",
-    "storybook": "^8.4.2",
-    "tailwindcss": "^3.4.14",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10",
-    "vite-tsconfig-paths": "^5.1.1"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  }
-}
+{
+    "name": "ddara-frontend",
+    "private": true,
+    "workspaces": [
+      "frontend",
+      "backend"
+    ],
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+      "dev": "vite",
+      "build": "tsc -b && vite build",
+      "test": "vitest",
+      "test:watch": "vitest --watch",
+      "test:coverage": "vitest run --coverage",
+      "lint": "pnpm lint-staged",
+      "preview": "vite preview",
+      "storybook": "storybook dev -p 6006",
+      "build-storybook": "storybook build"
+    },
+    "dependencies": {
+      "@fontsource/pretendard": "^5.1.0",
+      "react": "^18.3.1",
+      "react-dom": "^18.3.1",
+      "react-icons": "^5.3.0",
+      "react-router-dom": "^6.28.0"
+    },
+    "devDependencies": {
+      "@chromatic-com/storybook": "^3.2.2",
+      "@eslint/js": "^9.13.0",
+      "@storybook/addon-essentials": "^8.4.2",
+      "@storybook/addon-interactions": "^8.4.2",
+      "@storybook/addon-onboarding": "^8.4.2",
+      "@storybook/blocks": "^8.4.2",
+      "@storybook/react": "^8.4.2",
+      "@storybook/react-vite": "^8.4.2",
+      "@storybook/test": "^8.4.2",
+      "@types/navermaps": "^3.7.8",
+      "@types/react": "^18.3.12",
+      "@types/react-dom": "^18.3.1",
+      "@types/react-router-dom": "^5.3.3",
+      "@vitejs/plugin-react-swc": "^3.5.0",
+      "autoprefixer": "^10.4.20",
+      "classnames": "^2.5.1",
+      "eslint": "^9.13.0",
+      "eslint-import-resolver-typescript": "^3.6.3",
+      "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",
+      "storybook": "^8.4.2",
+      "tailwindcss": "^3.4.14",
+      "typescript": "~5.6.2",
+      "typescript-eslint": "^8.11.0",
+      "vite": "^5.4.10",
+      "vite-tsconfig-paths": "^5.1.1"
+    },
+    "eslintConfig": {
+      "extends": [
+        "plugin:storybook/recommended"
+      ]
+    }
+  }

frontend/src/App.tsx

@@ -1 +1,3 @@
-export const App = () => <div>Hello</div>;
+import { IndexRoutes } from '@/routes/IndexRoutes.tsx';
+
+export const App = () => <IndexRoutes />;

frontend/src/component/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useBottomSheet } from '@/hooks/useBottomSheet';
+
+interface IBottomSheetProps {
+  minHeight: number;
+  maxHeight: number;
+  children: React.ReactNode;
+}
+
+/**
+ * `BottomSheet` 컴포넌트는 하단에서 올라오는 시트 형태의 UI를 제공합니다.
+ *
+ * @param {IBottomSheetProps} props - `children`을 포함한 컴포넌트 속성
+ * @param {number} props.minHeight - Bottom Sheet의 최소 높이를 화면 비율로 나타냅니다 (0.0 - 1.0).
+ * @param {number} props.maxHeight - Bottom Sheet의 최대 높이를 화면 비율로 나타냅니다 (0.0 - 1.0).
+ * @param {ReactNode} props.children - Bottom Sheet 내부에 렌더링할 콘텐츠입니다.
+ * @returns {ReactNode} - 하단 시트를 렌더링합니다.
+ *
+ * @remarks
+ * - 드래그 동작을 통해 시트를 열고 닫을 수 있습니다.
+ * - `useBottomSheet` 훅을 사용하여 위치 및 드래그 동작을 관리합니다.
+ * - `minHeight`는 Bottom Sheet가 닫힌 상태의 높이 비율을 나타냅니다.
+ * - `maxHeight`는 Bottom Sheet가 열린 상태의 최대 높이 비율을 나타냅니다.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet minHeight={0.5} maxHeight={0.85}>
+ *   <div className="p-4">
+ *     <h2>예시 콘텐츠</h2>
+ *     <p>BottomSheet의 children</p>
+ *   </div>
+ * </BottomSheet>
+ * ```
+ */
+
+export const BottomSheet = (props: IBottomSheetProps) => {
+  const { sheet } = useBottomSheet({ minHeight: props.minHeight, maxHeight: props.maxHeight });
+
+  return (
+    <div
+      ref={sheet}
+      className="bg-grayscale-25 shadow-dark fixed left-0 right-0 z-[101] flex h-full flex-col rounded-t-lg transition-transform duration-700"
+      style={{
+        top: `calc(100% - ${props.minHeight * 100}%)`,
+      }}
+    >
+      <div className="flex items-center justify-center pb-1 pt-2">
+        <div className="h-1.5 w-12 rounded-full bg-gray-300" />
+      </div>
+      {props.children}
+    </div>
+  );
+};