Merge pull request #141 from team-offonoff/dev

Deploy beta 0.0.1v

.eslintrc.cjs

@@ -1,14 +1,72 @@
+const aliases = require('./tsconfig.paths.json').compilerOptions.paths;
+
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
+  ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  plugins: ['react-refresh', '@tanstack/query'],
+  settings: {
+    'import/resolver': {
+      alias: {
+        extensions: ['.ts', '.tsx'],
+        map: Object.entries(aliases).map(([key, value]) => {
+          const newPathKey = key.replace('/*', '');
+          const newPathValue = `./${value[0].replace('/*', '')}`;
+          return [newPathKey, newPathValue];
+        }),
+      },
+    },
+  },
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    '@tanstack/query/exhaustive-deps': 'error',
+    '@tanstack/query/stable-query-client': 'error',
+    '@typescript-eslint/no-unused-vars': 'warn',
+    'no-empty-pattern': 'warn',
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    'import/no-unresolved': 'off',
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always',
+        groups: [
+          'type',
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'index',
+          'unknown',
+        ],
+        pathGroups: [
+          {
+            pattern: 'react*',
+            group: 'external',
+            position: 'before',
+          },
+          ...Object.keys(aliases).map((key) => {
+            return {
+              pattern: key,
+              group: 'internal',
+              position: 'after',
+            };
+          }),
+        ],
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
     ],
   },
-}
+};

.github/ISSUE_TEMPLATE/기능-제안.md

@@ -0,0 +1,15 @@
+---
+name: 기능 제안
+about: feature 작업 사항을 입력해주세요
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+## Description
+
+설명을 작성하세요
+
+## Todo
+- [ ] what todo

.github/ISSUE_TEMPLATE/버그-수정.md

@@ -0,0 +1,16 @@
+---
+name: 버그 수정
+about: fix 작업 사항을 입력해주세요
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+## Description
+
+설명을 작성하세요
+
+## Todo
+
+- [ ] what todo

.github/workflows/ci.yml

@@ -0,0 +1,17 @@
+name: CI
+on:
+  pull_request:
+    branches: ['dev', 'main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: build
+        run: yarn run build

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+dev-dist
 dist
 dist-ssr
 *.local
@@ -22,3 +23,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# env
+.env

.stylelintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
+  "rules": {
+    "no-empty-source": null
+  },
+  "customSyntax": "postcss-styled-syntax"
+}

README.md

@@ -1,27 +1,184 @@
-# React + TypeScript + Vite
+![AB](https://github.com/team-offonoff/web/assets/26860466/e15ec030-9a0c-4544-a539-0e59b0b8e5ac)
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+세상 모든 질문에 A/B로 답하다.
 
-Currently, two official plugins are available:
+# **Requirements**
 
-- [@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
+1. Which browsers need to be supported? 🌐
+    - Chrome 57^
+    - Safari 10.1^
+    - Chrome for Android 116^
+    - Safari on iOS 10.3^
+2. Which devices need to be supported? 📱💻
+    - mobile, tablets, desktop
+3. Language support? 🌎
+    - ko-KR only
+4. Dark theme? 🌙
+    - No
+5. Server-side rendering? 🚀
+    - CSR only
+6. Tests? 🧪
+    - No Testing
+7. Accessibility? ♿
+    - Partial support
 
-## Expanding the ESLint configuration
+---
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+# Framework
 
-- Configure the top-level `parserOptions` property like this:
+<aside>
+📌 **Vite + React.js**
 
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
+</aside>
 
-- 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
+## why?
+
+Esbuild를 기반으로 만들어진 프론트엔드 빌드툴
+
+- 번들링을 생략하여 개발 서버를 빠르게 구동시킨다
+- 리로딩과 캐싱이 빠르다
+- native ESM을 사용하여 앱에 대한 변경사항이 빠르게 반영된다
+
+[Vite](https://ko.vitejs.dev/guide/why.html)
+
+---
+
+# Structure
+
+- /src
+    - /components
+        - /RoundButton
+            - `RoundButton.tsx`
+            - `RoundButton.styles.tsx`
+            - `RoundButton.stories.ts`
+        - /BottomSheet
+    - /hooks
+        - `useModal.ts`
+        - `useIntersectionObserver.ts`
+    - /pages
+        - `home.tsx`
+        - `login.tsx`
+    - /apis
+        - `useUser.ts`
+    - /store
+    - /utils
+    - /types
+        - `user.ts`
+
+
+---
+
+# Libraries
+
+## State Management
+
+### Server State Management
+
+React-Query
+
+### Client State Management
+
+zustand(currently not using)
+
+## Styling Approach
+
+styled-components
+
+- pros
+    - good for component based project
+    - maintenance
+    - code consistency
+- cons
+    - bundle size
+    - increase of unnecessary codes
+
+### documentation
+
+storybook
+
+## Routing
+
+react-router
+
+## Utils
+
+react-hookz
+
+@toss/slash
+
+## Deploy
+
+S3 + CloundFront
+
+## CI/CD
+
+github actions
+
+---
+
+# **Git Branching Strategies**
+
+<aside>
+📌 Simplified Github Flow
+
+</aside>
+
+- main → prod branch
+- dev → prod ready branch
+- feat/* → for feature develop branch
+
+## working process
+
+1. create issue (fix, feature, build whatever)
+2. create feature branch from develop branch (ex. feat/#31, fix/#26)
+3. do some magic
+4. open pull request of your branch
+5. ready for code review
+6. ta-da
+
+---
+
+# Roles
+
+@Jeon Jinho 
+
+- documenting
+- CI/CD
+
+@송채영 
+
+- component
+- 
+
+---
+
+# Naming Convention
+
+### folders/files
+
+- use lower case for folders
+    - ex) /components
+- use pascal case for tsx files
+    - ex) Button.tsx
+- use camel case for util files
+    - ex) formatDate.ts
+
+### variables
+
+- use upper case and underscore for constants
+    - ex) USER_KEY = “”
+- use `is`, `has` or `should` prefix for boolean state
+    - ex) ❌ `const [active, setActive] = useState(false)`
+    - ex) ✅ `const [isActive, setIsActive] = useState(false)`
+- use pascal case for types/interface
+    - ex) `interface ButtonProps { … }`
+
+### functions
+
+- use `handle*` prefix
+    - ex) handleButtonClick
+
+### props
+
+- use `on*` prefix
+    - ex) `<Button onClick={handleButtonClick} />`

index.html

@@ -1,10 +1,34 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <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>
+    <meta name="description" content="My Awesome App description" />
+    <meta name="theme-color" content="#242036" />
+    <title>AB - 세상의 모든 질문, AB로 답하다</title>
+    <style>
+      @font-face {
+        font-family: 'Pretendard Variable';
+        font-style: normal;
+        font-weight: 45 920;
+        src: local('Pretendard Variable'), local('Pretendard Variable');
+        src: url('./src/assets/fonts/PretendardVariable.woff2') format('woff2-variations');
+        font-display: block;
+      }
+
+      @font-face {
+        font-family: 'Montserrat Medium';
+        font-style: medium;
+        font-weight: 500;
+        src: local('Montserrat Medium'), local('Montserrat Medium');
+        src: url('./src/assets/fonts/MontserratMedium.woff2') format('woff2');
+        font-display: block;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>