[1단계 - 지하철 노선도 미션] 미키(권세진) 미션 제출합니다.

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true,
+    "jest/globals": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "jest"],
+  "rules": {
+    "react/prop-types": 0
+  }
+}

.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+build-storybook.log
+
+# 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*

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "tabWidth": 2,
+  "arrowParens": "always"
+}

.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+  ],
+};

.storybook/preview-body.html

@@ -0,0 +1,2 @@
+<div id="modal-root"></div>
+<div id="snackbar-root"></div>

.storybook/preview.js

@@ -0,0 +1,25 @@
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import GlobalStyle from '../src/Global.styles';
+import store from '../src/redux/store';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => (
+    <Provider store={store}>
+      <GlobalStyle />
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    </Provider>
+  ),
+];

README.md

@@ -1,2 +1,75 @@
 # react-subway-map
-⚛️ React 지하철 노선도 관리 페이지
+
+# 🚇 지하철 노선도 - 레벨2 종합세트 & 테스트
+
+# 미션 목표
+
+- 레벨 2에서 학습한 컴포넌트 기반 개발, 상태 관리 방법에 대한 내용을 전반적으로 복습하며 적용하는 연습을 합니다.
+  - React에 관한 개념을 전반적으로 복습하며 적용해봅니다.
+    이번 미션에서 React와 관련한 추가 개념은 다루지 않습니다.
+- 테스트를 고려하며 개발하는 연습을 합니다.
+- 백엔드 개발자와 협업하기 위한 커뮤니케이션 경험을 쌓습니다.
+
+# 미션 진행 방식
+
+- 프론트엔드 페어 운영 방식 및 프론트엔드 리뷰 프로세스는 동일합니다.
+  - step1은 페어로 진행, step2는 개별로 진행
+  - 각 step당 1번씩 리뷰어에게 PR로 리뷰 요청
+- 백엔드 개발자와의 협업 경험을 위해 백엔드 크루들이 협업 페어로 매칭됩니다.
+  - 프론트엔드 1 페어당 백엔드 2 페어가 매칭됩니다. (프론트 크루 2명 + 백엔드 크루 4명)
+  - 매칭된 백엔드 크루들과 배포 일정, API 설계 논의 일정 등을 자율적으로 논의해 진행해주세요.
+  - 백엔드 크루들의 API가 배포 완료되기 전까지는 [API명세 문서](https://woowacourse.github.io/atdd-subway-fare/)를 확인하여 개발을 먼저 진행합니다.
+
+---
+
+# 미션 요구사항
+
+각 step의 상세 요구사항은 다음 페이지를 확인해주세요.
+
+## step1) 협업 논의 + 테스트 코드와 함께 지하철 노선도 관리 페이지 기본 구현
+
+```
+구현 마감은 5/27(목) 입니다. 원활한 협업이 될 수 있도록 일정을 잘 협의해주세요 :)
+```
+
+<br/>
+
+**협업 요구사항**
+
+- 백엔드 페어와 협업을 위해 필요한 사항들을 논의합니다.
+  - step1에서 사용할 API의 배포 일정, 이후 step2에서의 추가 개발을 위한 설계 논의, 그 외 필요한 사항들 있는 지 확인
+- <span class="highlight-cyan">배포한 API 4개 중 하나를 무작위로 연결</span>하더라도 어플리케이션이 정상 동작해야 합니다. - 무작위 연결을 확인해볼 수 있는 방법은 페어와 자율적으로 결정합니다. (단, 코드를 직접 수정해야 하는 방법은 제외)
+  <br/>
+
+**구현 요구사항**
+
+- [요구사항 명세](./REQUIREMENTS.md)를 작성합니다.
+- <span class="highlight-cyan">상태 관리 방법을 스스로 선택</span>합니다. 선택한 상태 관리 방법이 적절하다고 생각한 이유를 명시해주세요.
+- 레벨 1에서 구현했던 기능들을 React로 다시 구현해보는 작업입니다. 레벨 1에서 개발했던 어플리케이션을 다시 확인해보세요.
+  <br/>
+
+**테스트 요구사항**
+
+- 각 기능별로 <span class="highlight-cyan">테스트 코드를 반드시 포함</span>합니다.
+
+---
+
+## step2) 백엔드 개발자와 함께 추가 기능 구현
+
+```
+구현 마감은 6/3(목) 입니다. 원활한 협업이 될 수 있도록 일정을 잘 협의해주세요 :)
+```
+
+**협업 요구사항**
+
+- 백엔드 개발자와 API 설계 논의부터 함께합니다.
+  - <span class="highlight-cyan">배포한 API 4개 중 하나를 무작위로 연결</span>하더라도 어플리케이션이 정상 동작해야 합니다.
+  - 무작위 연결을 확인해볼 수 있는 방법은 페어와 자율적으로 결정합니다. (단, 코드를 직접 수정해야 하는 방법은 제외)
+- (기본) 전체보기 기능을 추가로 구현합니다.
+  - 백엔드 API 신규 개발이 필요합니다. 새로 만들어야 하는 API 명세를 함께 논의하며 개발합니다.
+- (선택) 경로 찾기 기능을 추가로 구현합니다.
+  - 이미 개발되어 있는 백엔드 API가 있습니다. 기존의 API 명세를 확인하고 수정이 필요한 부분이 있는 지 논의하며 개발합니다.
+
+**구현 요구사항**
+
+- 추가 기능을 위한 UI는 직접 설계하고 만듭니다.

REQUIREMENTS.md

@@ -0,0 +1,95 @@
+# 구현기능
+
+## UI 구성
+
+- [x] Header
+- [x] Navigation
+- [x] CardTemplate
+- [x] Button
+- [x] Input
+- [x] NotificationInput
+- [x] ListItem
+- [x] Modal
+- [x] SelectBox
+- [x] ColorRadio
+
+## 로그인 & 회원가입
+
+- [x] 회원가입 화면을 구성한다.
+- [x] 이메일을 입력받는다.
+  - 이메일 형식을 검사한다.
+  - 이메일 중복을 확인한다.
+- [x] 나이를 입력 받는다.
+  - 1 ~ 150 사이의 정수만 입력 가능하다.
+- [x] 비밀번호를 입력 받는다.
+  - 비밀번호는 4~20자 사이여야 한다.
+  - 비밀번호는 숫자, 영문으로 이루어져야 한다.
+- [x] 비밀번호 확인을 입력한다.
+- [x] 모든 입력이 올바르게 완료된 경우 회원가입 버튼을 활성화한다.
+- [x] 회원가입 할 수 있다.
+
+  - 회원가입을 실패하는 경우 alert 메세지를 띄운다.
+  - 회원가입을 완료하면 로그인 페이지로 이동한다.
+
+- [x] 로그인 화면을 구성한다.
+- [x] 사용자는 로그인 할 수 있다.
+  - 로그인 완료 시 역 관리 페이지로 이동한다.
+  - 로그인 완료 시 navigation의 로그인 버튼을 로그아웃 버튼으로 변경한다.
+- [x] 회원가입 페이지로 이동하는 링크가 존재한다.
+
+## 역 관리
+
+- [x] 역 관리 페이지를 구성한다.
+- [x] 지하철 역 목록을 조회한다.
+- [x] 새로운 역을 추가할 수 있다.
+  - 역 이름은 2~20자 사이의 한글 또는 숫자이다.
+  - 기존에 존재하는 역과 중복된 이름을 사용할 수 없다.
+- [x] 역을 삭제할 수 있다.
+  - 삭제 전 사용자에게 `confirm`을 받는다.
+  - 노선에 등록된 역은 삭제할 수 없다.
+
+## 노선 관리
+
+- [x] 노선 관리 페이지를 구성한다.
+- [x] 지하철 노선 목록을 조회한다.
+- [x] 노선 생성 버튼을 선택 시 노선 생성 모달이 나타난다.
+- [x] 노선 이름을 입력받는다.
+  - 노선 이름은 2~10자 사이의 숫자 및 한글이다.
+  - 노선 이름은 공백을 포함하지 않는다.
+- [x] 상행 종점과 하행 종점을 선택할 수 있다.
+  - 상행 종점과 하행 종점은 같은 역일 수 없다.
+- [x] 노선의 거리를 입력받는다.
+  - 거리는 1 이상의 정수이다.
+- [x] 노선 색상을 입력받는다.
+  - 기존 노선에 사용된 색상은 선택할 수 없다.
+- [x] 새로운 노선을 등록할 수 있다.
+- [x] 노선을 삭제할 수 있다.
+  - 삭제 전 사용자에게 `confirm`을 받는다.
+- [x] 노선 수정 버튼 선택 시 노선 수정 모달이 나타난다.
+
+## 구간 관리
+
+- [x] 구간 관리 페이지를 구성한다.
+- [x] 선택된 노선의 구간을 조회한다.
+- [x] 구간 추가 버튼을 선택하는 경우, 구간 추가 모달이 나타난다.
+- [x] 상행역과 하행역을 입력받는다.
+  - 하나의 노선에 중복된 역이 존재할 수 없다.
+  - 상행역과 하행역 중 하나의 역은 이미 구간에 추가되어있는 역이여야한다.
+  - 하나의 노선에 갈래길이 생길 수 없다.
+- [x] 구간의 거리를 입력받는다.
+  - 1이상의 정수이다.
+  - 기존 구간의 거리 미만이어야 한다.
+- 모든 입력이 올바르게 완료된 경우 확인 버튼이 활성화된다.
+- [x] 구간을 추가할 수 있다.
+- [x] 구간을 삭제할 수 있다.
+  - 노선에 최소 2개의 역이 존재해야한다.
+  - 삭제 전 사용자에게 `confirm`을 받는다.
+
+## 기타
+
+- [x] 추가, 수정, 삭제 요청에 사용자 인증 토큰 추가하기
+- [x] 로그인 하지 않은 사용자에게 추가, 수정, 삭제를 위한 UI 숨기거나 비활성화
+- [x] API요청 실패 시 오류 메세지 나타내기
+- [x] 스낵바
+- [ ] 로딩 UI 구현
+- [ ] 에러 UI 구현

db.json

@@ -0,0 +1,44 @@
+{
+  "login": {
+    "email": "sun@test.com",
+    "password": "123445"
+  },
+  "stations": [
+    {
+      "name": "다음페이지?",
+      "id": 8
+    },
+    {
+      "name": "성신여대입구역",
+      "id": 9
+    },
+    {
+      "name": "와아앙",
+      "id": 10
+    },
+    {
+      "name": "밍키역",
+      "id": 11
+    }
+  ],
+  "lines": [
+    {
+      "name": "67호선",
+      "color": "#10B981",
+      "id": 6
+    },
+    {
+      "name": "58호선",
+      "color": "#FB923C",
+      "id": 7
+    },
+    {
+      "name": "99호선",
+      "upStationId": 10,
+      "downStationId": 0,
+      "distance": 100000,
+      "color": "#A78BFA",
+      "id": 8
+    }
+  ]
+}