Merge branch 'develop' of https://github.com/TEAM-BEAT/BEAT-Client in…

…to develop

.gitignore

@@ -32,4 +32,5 @@ $
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -1,30 +1,150 @@
-# React + TypeScript + Vite
+<div align="center">
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+<h2> BEAT </h2>
 
-Currently, two official plugins are available:
+<img width="421" alt="Screenshot 2024-07-04 at 5 01 50 PM" src="https://github.com/TEAM-BEAT/BEAT-Client/assets/58854041/89dc6e6b-ab96-4fd0-bcfa-77a3439f9442" alt="서비스대표-이미지" />
+<div>모두를 위한, </br>그래서 대학생을 위한 예매 플랫폼</div>
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+</div>
 
-## Expanding the ESLint configuration
+<h2> 👥 Team </h2>
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+<table align="center">
+    <tr align="center">
+      <td style="min-width: 150px;">
+            <a href="https://github.com/pepperdad">
+              <img src="https://avatars.githubusercontent.com/u/58854041?v=4" width="200" alt="깃허브계정-프로필사진">
+              <br />
+              <b>🐱정도영</b>
+            </a>
+        </td>
+      <td style="min-width: 150px;">
+            <a href="https://github.com/imddoy">
+              <img src="https://avatars.githubusercontent.com/u/90364711?v=4" width="200" alt="깃허브계정-프로필사진">
+              <br />
+              <b>🎧김채현</b>
+            </a>
+        </td>
+      <td style="min-width: 150px;">
+            <a href="https://github.com/ocahs9">
+              <img src="https://avatars.githubusercontent.com/u/155794105?v=4" width="200" alt="깃허브계정-프로필사진">
+              <br />
+              <b>🐶공준혁</b>
+            </a>
+        </td>
+      <td style="min-width: 150px;">
+            <a href="https://github.com/sinji2102">
+              <img src="https://avatars.githubusercontent.com/u/66528589?v=4" width="200" alt="깃허브계정-프로필사진">
+              <br />
+              <b>🎱윤신지</b>
+            </a>
+        </td>
+    </tr>
+    <tr align="center">
+       <td>
+            예매하기 뷰 <br/>
+      </td>
+       <td>
+            공연 등록하기 뷰 <br/>
+      </td>
+       <td>
+            공연 관리하기 뷰 <br/>
+      </td>
+      <td>
+            메인, 예매내역 조회 뷰 <br/>
+      </td>
+    </tr>
+</table>
 
-- Configure the top-level `parserOptions` property like this:
+<h2> 🛠 기술스택 </h2>
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
 ```
+- React + TypeScript
+- yarn berry
+- styled-component
+- prettier, ESlint, StyleLint
+- jotai
+- React-query
+- Storybook
+- SonarCloud
+```
+
+<br/>
+
+<h2> 📄 컨벤션 및 브랜치 전략 </h2>
+<h3>Git Branch</h3>
+
+```
+- main (배포용)
+- develop (개발용)
+- feat/#issue/기능명 (작업용)
+```
+
+<h3>Commit Convention</h3>
+Commit Message 👉 기능 키워드: 커밋 내용</br>
+
+```
+feat : 새로운 기능 추가
+fix : 버그 수정
+chore : 빌드 업무, 패키지 매니저, 라이브러리, dependencies 설정
+docs : 문서 수정 - ex) [README.md](http://readme.md/)
+design : 사용자 UI 디자인 변경 - ex) CSS
+style : 기능 수정 없는 코드 스타일 변경
+refactor : 코드 리팩터링
+test : 테스트 코드, 리펙토링 테스트 코드 추가
+ci : ci 설정 파일 수정
+perf : 성능 개선
+rename : 파일 혹은 폴더명 변경
+```
+
+<h3>Coding Convention</h3>
+<a href="https://jiwoothejay.notion.site/Coding-Convention-499fe091765e48bb8e933039a26555e6">Team Beat Web의 코딩 컨벤션</a>
+
+<h2> 📁 폴더 구조 </h2>
+
+```
+|-- 📁 public
+|-- 📁 src
+    |-- 📁 asset
+	      |-- 📁 svgs
+	      |-- 📁 images
+    |-- 📁 apis
+    |-- 📁 components
+	      |-- 📁 commons (button , input 등 재사용의 가장 작은 단위)
+	      |-- 📁 icons(React Icon Components)
+    |-- 📁 constants
+    |-- 📁 pages
+   	    |-- 📁 Apage
+            |-- 📁components
+            |-- 📁constants
+            |-- 📁types
+            |-- 📁hooks
+            |-- 📁utils
+            |-- Apage.tsx
+            |-- Apage.styled.ts
+        |-- 📁 Bpage
+        |-- 📁 Cpage
+   |-- 📁 hooks (커스텀 훅을 담아두는 폴더)
+   |-- 📁 styles (GlobalStyles , theme.ts 등)
+   |-- 📁 utils (재사용이 높은 함수모음 폴더)
+   |-- 📁 types
+   |-- 📁 routes
+       |-- Router.tsx (라우터 파일)
+|-- App.tsx
+|-- main.tsx
+|-- eslint.config.js
+|-- .gitignore
+|-- .prettierrc.json
+|-- .stylelintrc.json
+|-- README.md
+|-- package.json
+|-- tsconfig.json
+|-- yarn.lock
+```
+
+<h3>비트 아이엠 그라운드 룰</h3>
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+✅ 우울하지 말고 우웅하기 <br/>
+✅ 서로 칭찬하고 굿 ~~ 해주기 <br/>
+✅ 자기가 오늘 할일을 시작하기 전에 리뷰먼저! <br/>
+✅ 화이팅하자 ㅋㅋ <br/>

index.html

@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>비트</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview",
     "start": "node -r @yarnpkg/pnpify",
     "test": "node -r @yarnpkg/pnpify jest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "stylelint": "stylelint './**/*.{tsx,css}' --fix",
     "lints": "eslint --fix './**/*.{ts,tsx,js,jsx}'",
     "prepare": "husky install",
@@ -29,13 +31,24 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.0",
     "styled-components": "^6.1.11",
+    "styled-reset": "^4.5.2",
     "supports-color": "^9.4.0",
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.2",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "1.6.0",
     "@eslint/compat": "^1.1.0",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.5.0",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-onboarding": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-vite": "^8.1.11",
+    "@storybook/test": "^8.1.11",
     "@types/prettier-linter-helpers": "^1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -53,12 +66,14 @@
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-storybook": "^0.8.0",
     "globals": "^15.6.0",
     "husky": "^8.0.0",
     "lint-staged": "^15.2.7",
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "^3.3.2",
     "prettier-linter-helpers": "^1.0.0",
+    "storybook": "^8.1.11",
     "stylelint": "^16.6.1",
     "stylelint-config-concentric-order": "^5.2.0",
     "stylelint-config-prettier": "^9.0.5",
@@ -87,5 +102,10 @@
     "[email protected]": {
       "unplugged": true
     }
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }

src/App.tsx

@@ -1,32 +1,15 @@
-/* stylelint-disable-next-line CssSyntaxError */
-import { useState } from "react";
-import "./App.css";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
+import router from "@routes/Router";
+import GlobalStyle from "@styles/global";
+import theme from "@styles/theme";
+import { RouterProvider } from "react-router-dom";
+import { ThemeProvider } from "styled-components";
 
 function App() {
-  const [count, setCount] = useState(0);
-  const [hi, setHi] = useState([]);
-
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <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>
-    </>
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <RouterProvider router={router} />
+    </ThemeProvider>
   );
 }
 

src/components/ex-stories/Button.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Button } from "./Button";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Example/Button",
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: "Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: "Button",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "large",
+    label: "Button",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    label: "Button",
+  },
+};