FE 온보딩 2주차 제출

README.md

@@ -1,34 +1,57 @@
 # 42gg 프론트엔드 온보딩 2단계
 
-## 공통 조건
-
-- 온보딩 프로젝트는 개인 계정으로 fork하여 진행하고 PR로 제출합니다.
-- git / github / code 컨벤션은 42gg notion에 있는 자료를 적극 반영합니다.
-- 기본 기능 외 추가 기능, 디자인 구현은 자유입니다.
-- 최종 제출품에는 README 작성이 되있어야 합니다.([예시](https://github.com/42organization/42gg.client/blob/main/README.md))
-
-## EX01. login / logout 구현하기
-
-- (필수) React.js, Recoil, SCSS
-- (필수) eslint, prettier 설정
-- (필수) 함수 컴포넌트로 제작
-- (선택) CRA, Webpack, Vite
-- (선택) msw, react-query / SWR
-- (선택) Figma, MUI, Ant Design, Tailwind CSS
-- (선택) 계정 유효성 검사
-
-## 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에 등록해주세요.
+## 실행 방법
+
+```
+cd gg02
+npm install
+npm start
+```
+
+## 구현된 기능
+
+### 유저 정보
+(src/UserInfo.js) 에 저장
+```
+id: 'hyobicho',
+pw: '1111',
+auth: 'normal'
+---
+id: 'coffee',
+pw: '1111',
+auth: 'normal'
+---
+id: 'manager1',
+pw: '1111',
+auth: 'manager'
+---
+id: 'admin1',
+pw: '1111',
+auth: 'admin'
+```
+
+### 로그인
+<img src="https://github.com/42organization/42gg-onboarding-fe-02/assets/105159293/4b5272a2-5023-49ba-9249-fd6a12ddc49f" width="200"/>
+<img src="https://github.com/42organization/42gg-onboarding-fe-02/assets/105159293/8fb27c7f-b7bd-4bf3-ae28-2445874eec50" width="200"/>
+<img src="https://github.com/42organization/42gg-onboarding-fe-02/assets/105159293/6411553f-e165-43d3-a7d4-2edee685d3b2" width="200"/>
+
+- 아이디 / 비밀번호 둘 중 하나라도 입력하지 않으면 에러
+- 유저 객체 리스트에서 찾지 못하면 에러
+- 등록된 유저이면 localStorage에 id와 auth 저장
+
+### 권한 별 Routing
+<img src="https://github.com/42organization/42gg-onboarding-fe-02/assets/105159293/a7a70940-1291-4b64-b502-749568209217" width="200" />
+<img src="https://github.com/42organization/42gg-onboarding-fe-02/assets/105159293/4ea53fe9-0d7f-47eb-9f71-444f5c0d8687" width="200" />
+<img src="https://github.com/42organization/42gg-onboarding-fe-02/assets/105159293/28a689d0-70eb-45fc-a5c7-d53c4fe0efe9" width="200" />
+
+- 상단 Navbar에서 메인 페이지 이동, 로그아웃 가능
+- Sidebar에는 권한 별로 접근 가능한 페이지 아이콘만 조회 가능
+- 로그인하지 않은 유저는 로그인 페이지만 조회 가능
+- 이미 로그인된 유저가 로그인 페이지 접속 시 메인 페이지로 이동
+
+### 에러 페이지
+<img src="https://github.com/42organization/42gg-onboarding-fe-02/assets/105159293/0b722b2d-68a1-4d1a-8116-2a4c40cca1d2" width="200" />
+<img src="https://github.com/42organization/42gg-onboarding-fe-02/assets/105159293/8299ca84-58b9-4747-8db1-73dba1d36045" width="200" />
+
+- 접근 권한이 없는 페이지 URL로 직접 접근 시 에러
+- 존재하지 않은 URL 접근 시 에러

gg02/.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['airbnb', 'plugin:react/recommended', 'prettier'],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  rules: {
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'react/prop-types': 'off',
+    'no-unused-vars': 'off',
+  },
+};

gg02/.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*