42organization · izone00 · Jan 30, 2024 · Jan 30, 2024 · Jan 30, 2024 · Jan 30, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -1,34 +1,20 @@
 # 42gg 프론트엔드 온보딩 2단계
 
-## 공통 조건
+## 🔧 Stacks
 
-- 온보딩 프로젝트는 개인 계정으로 fork하여 진행하고 PR로 제출합니다.
-- git / github / code 컨벤션은 42gg notion에 있는 자료를 적극 반영합니다.
-- 기본 기능 외 추가 기능, 디자인 구현은 자유입니다.
-- 최종 제출품에는 README 작성이 되있어야 합니다.([예시](https://github.com/42organization/42gg.client/blob/main/README.md))
+#### 기술 스택
 
-## EX01. login / logout 구현하기
+<img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=white"> &nbsp; &nbsp; &nbsp; 
+<img src="https://img.shields.io/badge/Recoil-3578E5?style=for-the-badge&logo=recoil&logoColor=white"/> &nbsp; &nbsp; &nbsp;
+<img src="https://img.shields.io/badge/cssmodules-000000?style=for-the-badge&logo=cssmodules&logoColor=white"> &nbsp; &nbsp; &nbsp;
+<img src="https://img.shields.io/badge/SCSS-CC6699?style=for-the-badge&logo=sass&logoColor=white">
 
-- (필수) React.js, Recoil, SCSS
-- (필수) eslint, prettier 설정
-- (필수) 함수 컴포넌트로 제작
-- (선택) ~CRA~, Webpack, Vite, ESbuild, SWC, Rollup
-- (선택) msw, react-query / SWR
-- (선택) Figma, MUI, Ant Design, shadcn UI, chakra UI / Tailwind CSS 
-- (선택) 계정 유효성 검사
+<br/><br/>
 
-## EX02. 유저 권한별 routing page
+## 🚀 기능 정리
 
-- (중요) EX01 결과물에 이어서 작업합니다.
-- (필수) normal, manager, admin 3개의 권한을 가진 유저별 정보 제공
-- (필수) 권한별 routing page 구현
-- (필수) 상단 navbar, sidebar 제작
-- (선택) React-Router-Dom v6, Context API
-- (선택) 로그인 유지
-- (선택) custom hook
-
-## 참고
-
-- 유저 정보는 json-server or js 파일 내 객체를 이용하여 관리합니다.
-- 로그인/로그아웃 구현하기 위해 필요한 기능과 화면 구성들을 생각(그려보고)해보고, 구현해보세요.
-- 궁금한 사항은 issue에 등록해주세요.
+- Vite를 이용한 프로젝트 환경 세팅
+- react-route-dom을 이용한 라우팅 설정
+- msw를 이용한 mocking 서버 생성
+- WebAPI를 이용한 로그인 구현
+- Recoil을 이용해 로그인 상태관리
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>