Feat/온보딩 2주차 #1

.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {
+    indent: ['error', 2],
+    'linebreak-style': ['error', 'unix'],
+    quotes: ['error', 'single'],
+    semi: ['error', 'always'],
+  },
+};

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,34 +1,34 @@
-# 42gg 프론트엔드 온보딩 2단계
+# 42gg 프론트엔드 온보딩 2주차 결과물
 
-## 공통 조건
+## 실행 방법
+`npm install`
+`npm start`
 
-- 온보딩 프로젝트는 개인 계정으로 fork하여 진행하고 PR로 제출합니다.
-- git / github / code 컨벤션은 42gg notion에 있는 자료를 적극 반영합니다.
-- 기본 기능 외 추가 기능, 디자인 구현은 자유입니다.
-- 최종 제출품에는 README 작성이 되있어야 합니다.([예시](https://github.com/42organization/42gg.client/blob/main/README.md))
+## 유저 정보
 
-## EX01. login / logout 구현하기
+id : jincpark
+pw : 1q2w3e4r
+auth : normal
 
-- (필수) 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 
-- (선택) 계정 유효성 검사
+id: banana
+pw : bananaisyellow
+auth : manager
 
-## EX02. 유저 권한별 routing page
+id : apple
+pw : appleisred
+auth : admin
 
-- (중요) EX01 결과물에 이어서 작업합니다.
-- (필수) normal, manager, admin 3개의 권한을 가진 유저별 정보 제공
-- (필수) 권한별 routing page 구현
-- (필수) 상단 navbar, sidebar 제작
-- (선택) React-Router-Dom v6, Context API
-- (선택) 로그인 유지
-- (선택) custom hook
+## 구현 기능
+### 로그인 페이지
+아이디 혹은 패스워드가 비어있을 경우, 틀린 경우 경고 메시지를 출력합니다.
+<img width="854" alt="image" src="https://github.com/Clearsu/42gg-onboarding-fe-02/assets/67998022/06357aaa-7b5f-48d7-9d8b-8d78187c8828">
+<img width="316" alt="image" src="https://github.com/Clearsu/42gg-onboarding-fe-02/assets/67998022/2c339af4-4f95-4e9d-8139-71e663a65d56">
+<img width="352" alt="image" src="https://github.com/Clearsu/42gg-onboarding-fe-02/assets/67998022/b46dee6f-7cf1-44d9-8f41-a27921a7abb5">
+<img width="357" alt="image" src="https://github.com/Clearsu/42gg-onboarding-fe-02/assets/67998022/fad6462a-28aa-40eb-828c-950b381dd55d">
 
-## 참고
+### 홈페이지
+유저 권한별로 사이드바에 링크 바로가기 아이콘을 다르게 표시합니다.
+<img width="789" alt="image" src="https://github.com/Clearsu/42gg-onboarding-fe-02/assets/67998022/36d8e0d4-486b-434d-9df7-c219f7215c25">
+<img width="186" alt="image" src="https://github.com/Clearsu/42gg-onboarding-fe-02/assets/67998022/0abafce6-5341-45cd-acfb-688049e14ebc">
+<img width="185" alt="image" src="https://github.com/Clearsu/42gg-onboarding-fe-02/assets/67998022/024d352c-f631-45e8-b217-8eb87ed6b64a">
 
-- 유저 정보는 json-server or js 파일 내 객체를 이용하여 관리합니다.
-- 로그인/로그아웃 구현하기 위해 필요한 기능과 화면 구성들을 생각(그려보고)해보고, 구현해보세요.
-- 궁금한 사항은 issue에 등록해주세요.