> For the complete documentation index, see [llms.txt](https://frontend-developer.quantit.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://frontend-developer.quantit.io/readme.md).

# Frontend Developer 과제

{% hint style="danger" %}
본 과제는 (주)퀀팃의 저작권 보호를 받습니다. 이 과제는 오직 퀀팃의 채용 목적으로만 사용해야 합니다.\
과제의 전체 또는 일부를 공개, 게시, 배포하거나 제3자에게 제공하는 행위는 저작권법에 의해 금지되며, 민형사상 책임이 따를 수 있습니다. 여기에는 과제의 문구를 변형하여 내용을 유추할 수 있게 하는 경우도 포함됩니다.
{% endhint %}

***

## 과제전 사전 설정

### 과제 파일 다운로드

아래 과제 파일을 클릭해서 다운로드 해주세요

{% file src="/files/GzTb6pxY3Dyh5FQIQCxJ" %}
과제 파일
{% endfile %}

### Github 원격 저장소 만들기

1. <https://github.com/new> 에 접속해서, 아래 설명에 따라 Repository를 만들어 주세요.

   1. 레포지토리 이름:`quantit-fe-assignment`
   2. 공개 설정 여부: `Private`

   <figure><img src="/files/PEnwPzuTnq4OsqlPJKEZ" alt=""><figcaption><p>레포지토리 생성 예시</p></figcaption></figure>
2. \[Settings] > \[Collaborators]로 페이지를 이동하고, 중앙의 \[Add people] 를 클릭해 주세요.

   1. Collaborator 추가 페이지로 이동합니다.

   <figure><img src="/files/rK3CwhLcwBIk5KW15qro" alt=""><figcaption><p>collaborater 추가 페이지 이동 및 버튼 클릭</p></figcaption></figure>
3. 검색창에 `quantit-tech`을 입력하고, collaborater로 추가해주세요.

   1. 초대가 반드시 되어야 합니다. 초대가 되지 않으면 과제 검토를 할 수 없어 제출하지 않은것으로 간주 됩니다

   <figure><img src="/files/wHrRjIctXUc7F2FvVCHw" alt=""><figcaption><p>collaborater 추가 검색 및 선택</p></figcaption></figure>
4. 이어서 레포지토리 화면에서 \[Settings] > \[Actions] > \[General] 로 이동합니다.\
   \[Workflow permissions] > \[Read and Write permissions] 를 선택한 뒤, \[Save] 버튼으로 저장해주세요.

   1. CI 동작을 위해서 필요한 권한이고, CI는 과제 검토를 위해 필수적으로 동작해야 합니다.

   <figure><img src="/files/iDwJrpp3WGfvxt6J6ArU" alt=""><figcaption><p>CI 권한 설정</p></figcaption></figure>
5. 다운로드한 zip파일을 압축해제 한 뒤 GitHub 저장소로 최초 커밋을 남겨서 origin에 push해주세요.

   1. 먼저 작업할 디렉토리로 이동한 뒤, 아래 명령어를 차례로 실행해주세요.

   ```
   git init
   git remote add origin <GitHub Repository URL>
   git branch -M main
   git add .
   git commit -m 'initial commit'
   git push -u origin main
   ```
6. 과제물은 `assignment` 브랜치에서 작업한 뒤 Pull Request를 생성해서 과제를 제출해주세요.

   1. [제출 방법](#제출-방법)을 참고해주세요.

   ```
   git switch main && git switch -c assignment
   ```

### 로컬에서 실행하기

1. 필요한 패키지를 설치합니다.

   ```
   yarn install
   ```
2. 로컬 서버 실행을 해주세요.

   ```
   yarn start
   ```
3. 브라우저에서 `http://localhost:3000`으로 접속하면 결과물을 확인할 수 있습니다.

***

## 과제 시작전에 주의사항

과제를 시작하기 전에 아래 사항을 반드시 확인해주세요.

* **과제는 시작하신 후 4시간 안에 Pull Request를 제출해 주셔야 합니다.**
  * 마감 시간 이후에 제출된 Pull Request는 부정행위로 간주하고, 자동으로 과제 검토 프로세스가 진행되지 않습니다.
* **마감 시간 이후에 추가 git commit을 남기지 않도록 주의가 필요합니다.**
  * 과제를 제출하신 후 **추가 커밋이 있는 경우에는 부정행위로 간주합니다**. 이러한 경우 자동으로 과제 검토 프로세스가 진행되지 않습니다.
* **마감시간 까지 과제를 완성하지 못해도, 그 시점까지 작성된 내용을 Pull Request로 제출합니다.**
  * 제한된 시간 안에 과제를 완성하는 것은 매우 어려운 일임을 알고 있습니다. 또한 제한 시간이 있는 환경에서는 평소만큼 실력 발휘를 못 하셨을 수 있음을 충분히 이해하고 있습니다. 따라서, 마감 시간까지 작성된 내용을 제출해주시면 됩니다.
* **테스트 코드로 기본적인 과제의 요구조건들을 테스트합니다.**
  * 테스트 코드는 `yarn test`로 실행할 수 있습니다.
  * 테스트를 통과하지 못한 경우, 테스트를 통과할 수 있도록 코드를 수정하시면 됩니다.
  * 추가 설치한 라이브러리로 인해 기존 테스트코드가 동작하지 않는 경우는 테스트 환경 설정을 수정해서 테스트가 원할하게 작동할 수 있도록 해주시면 됩니다.
  * 개별 테스트케이스는 **절대** 수정하지 마십시오.

### FAQ

<details>

<summary>Q. 과제를 제출하면 어떻게 검토가 진행되나요?</summary>

과제는 자동으로 검토가 진행됩니다. 과제의 검토는 아래의 순서로 진행됩니다.

1. 과제 제출 시, 자동으로 CI가 동작합니다.
2. CI가 성공하면, 과제는 자동으로 검토가 진행됩니다.

</details>

<details>

<summary>Q. 과제를 제출하면 어떻게 결과를 확인할 수 있나요?</summary>

과제의 결과는 GitHub의 Pull Request 페이지에서 확인할 수 있습니다.

</details>

<details>

<summary>Q. 대응해야하는 브라우저 범위는 어떻게 해야하나요?</summary>

최신 버전의 크롬 브라우저에서 정상적으로 동작하면 됩니다.

</details>

<details>

<summary>Q. UI 구현을 위한 정보(ex CSS)는 어디서 확인 할 수 있나요?</summary>

기능 구현에 초점을 맞춰서 작업을 진행 하시면 됩니다.\
디자인은 src/components, src/container 안에 있는 컴포넌트들을 활용하시면 됩니다.\
현 과제에서는 디자인에 대한 검토는 따로 하지 않으며, 구현하신 UI가 캡쳐화면이랑 조금 어긋나는 것은 평가에 영향을 주지 않습니다.

</details>

<details>

<summary>Q. 반응형으로 구현해야 하나요?</summary>

모바일 사이즈 기준으로만 대응해서 구현하시면 됩니다.

</details>

<details>

<summary>Q. 추가 라이브러리 설치해서 사용 가능한가요?</summary>

네 가능합니다. 다만 라이브러리를 사용해서 테스터 케이스가 실패하는 경우, \*.spec.tx안의 테스트 코드를 수정하진 마시고 그냥 테스트가 실패하는 것으로 제출해주세요. 그리고 해당 내용을 PR에 기재해주세요. (wrapper, hooks, utils 등의 코드는 수정 가능합니다.)

</details>

{% hint style="info" %}
제공받은 과제의 코드에서 오류를 발견했을시, 수정해서 해결할 수 있는 오류라면 직접 수정하신 후 Pull Reqeust에 내용을 기재주십시오.

그 외 문의 사항은 퀀팃 개발(<dev@quantit.io>)으로 이메일을 보내주세요.
{% endhint %}

***

## 과제 문제

이 과제의 목표는 모의 연금 투자기능을 구현하는 것입니다.\
아래 세부 요구사항들을 만족하는 프로젝트를 구현해주세요.

### 목표1. 홈 화면을 구현해 주세요.

#### 1-1. 투자 요약 API 호출 결과를 화면에 보여주세요.

{% tabs %}
{% tab title="요구사항" %}

* API 호출은 **`src/pages/api.ts`** 의 **`getInvestSummary()`** 함수를 활용해면 됩니다.
  {% endtab %}

{% tab title="예시 화면" %}

<figure><img src="/files/39pW21uKWw2buRDaSp7a" alt="" width="375"><figcaption><p>투자 성과 요약 예시 화면</p></figcaption></figure>
{% endtab %}
{% endtabs %}

#### 1-2. 투자 계약 리스트 API 호출 결과를 화면에 보여주세요.

{% tabs %}
{% tab title="요구사항" %}

* API 호출은 **`src/pages/api.ts`** 의 **`getContractList()`** 함수를 활용해면 됩니다.
* 투자 상태가 \*\*`STOP`\*\*인 경우는 화면에 보여주지 않습니다.
* 리스트 영역 하단에 **`모의투자(연금) 계좌 추가하기`** 버튼을 만들어주세요.
  * 버튼 클릭 시, **`/product-select`** 페이지로 이동합니다.
  * router는 **`hooks/router.ts`** 의 **`useInternalRouter`** 함수를 활용해주세요.

{% hint style="danger" %}
이 API는 간헐적으로 HTTP Status 500 에러가 발생할 수 있습니다. 에러는 자유롭게 처리해 주세요.
{% endhint %}
{% endtab %}

{% tab title="예시 화면" %}

<figure><img src="/files/bAqc4pcg6OnIMqMy4pOW" alt="" width="375"><figcaption><p>투자 계좌 리스트 예시 화면</p></figcaption></figure>
{% endtab %}
{% endtabs %}

### 목표2. 투자 모델을 선택하는 화면을 구현해주세요.

#### 2-1. 투자 가능한 모델 리스트를 화면에 보여주세요.

{% tabs %}
{% tab title="요구사항" %}

* API 호출은 **`src/pages/api.ts`** 의 **`getInvestableProducts()`** 함수를 활용해면 됩니다.
* 투자가 불가능한 상품은 버튼을 비활성화 시켜주세요.
* 모델 Row는 **`InvestableProductCard`** 컴포넌트를 활용해주세요.
  {% endtab %}

{% tab title="예시 화면" %}

<figure><img src="/files/Wtb3yUALnmdQPGpkv1yi" alt="" width="375"><figcaption><p>투자 모델 선택 화면 예시</p></figcaption></figure>
{% endtab %}
{% endtabs %}

#### 2-2. 투자 모델을 선택하면 다음 버튼이 활성화 되게 해주세요.

{% tabs %}
{% tab title="요구사항" %}

* 투자 가능한 상품이 선택되면 다음 버튼이 활성화 됩니다.
  * 다음 버튼이 활성화 되지 않은 경우, 클릭해도 아무런 동작을 하지 않아야 합니다.
* 투자 불가능한 상품은 비활성화 되어 선택해도 아무런 동작을 하지 않아야 합니다.
* 다음 버튼을 클릭하면 **`/account-form`** 페이지로 이동합니다.
  * router는 **`hooks/router.ts`** 의 **`useInternalRouter`** 함수를 활용해주세요.
    {% endtab %}

{% tab title="예시 화면" %}

<figure><img src="/files/l12O5I1dVbgghYxNiuQS" alt="" width="375"><figcaption><p>투자 모델 선택시 화면 예시</p></figcaption></figure>
{% endtab %}
{% endtabs %}

### 목표3. 연금저축계좌의 연 납입한도와 계약기간을 지정해주세요.

#### 3-1. 연금저축계좌의 연 납입한도를 조회해서 화면에 보여주세요.

{% tabs %}
{% tab title="요구사항" %}

* 연금저축계좌의 연 납입한도는 **`src/pages/api.ts`** 의 **`getLimitAmount()`** 함수를 활용해주세요.
  {% endtab %}

{% tab title="예시 화면" %}

<figure><img src="/files/lsoqhy3MtunxmTORUUoy" alt="" width="375"><figcaption><p>연금저축계좌 연 납입한도 조회 화면 예시</p></figcaption></figure>
{% endtab %}
{% endtabs %}

#### 3-2. 연금저축계좌의 연 납입한도를 입력받아주세요.

{% tabs %}
{% tab title="요구사항" %}

* 연금저축계좌의 연 납입한도를 입력받아주세요.
* 금액은 0이상 연 납입한도 이내의 금액만 입력 가능합니다.
  * 입력한 금액은 3자리마다 콤마(,)를 붙여주세요.
  * 0을 입력한 경우 빈 문자열로 처리해주세요.
* 입력한 금액이 연 납입한도를 초과하면 **`연 납입 한도를 초과하였습니다.`** 라는 경고 메시지를 보여주세요.
  {% endtab %}

{% tab title="예시 화면" %}

<figure><img src="/files/sQIosy7pe8wimp5BMsn3" alt="" width="375"><figcaption><p>연금저축계좌 연 납입한도 입력 화면 예시</p></figcaption></figure>
{% endtab %}

{% tab title="에러 예시 화면" %}

<figure><img src="/files/RL4EZXsC3ZRFMZuOlNOg" alt="" width="375"><figcaption><p>연금저축계좌 연 납입한도 입력 에러 예시</p></figcaption></figure>
{% endtab %}
{% endtabs %}

#### 3-3. 연금저축계좌의 계약기간을 입력받아주세요.

{% tabs %}
{% tab title="요구사항" %}

* 연금저축계좌의 계약기간을 입력받아주세요.
  * 계약기간은 60개월 이상 110개월 이하만 입력 가능합니다.
* 입력한 계약기간이 범위를 벗어나면 **`최소 60개월부터 최대 110개월까지 입력할 수 있어요.`** 라는 경고 메시지를 보여주세요.
  {% endtab %}

{% tab title="예시 화면" %}

<figure><img src="/files/71Tt6L92TDuryvdBUnKj" alt="" width="375"><figcaption><p>연금저축계좌 계약기간 입력 화면 예시</p></figcaption></figure>
{% endtab %}

{% tab title="에러 예시 화면" %}

<figure><img src="/files/15vYh7JZyEX3giL1rIgB" alt="" width="375"><figcaption><p>연금저축계좌 계약기간 입력 에러 예시</p></figcaption></figure>
{% endtab %}
{% endtabs %}

#### 3-4. 모든 값을 입력하고 하단 체크박스를 체크하면 다음 버튼이 활성화 되게 해주세요.

{% tabs %}
{% tab title="요구사항" %}

* 연금저축계좌의 연 납입한도와 계약기간을 모두 입력하고, 하단 체크박스를 체크하면 다음 버튼이 활성화 됩니다.
  * 체크박스를 체크하지 않으면 다음 버튼이 활성화 되지 않습니다.
  * 입력 값중 하나라고 입력되어 있지 않거나, 에러가 발생한 경우 다음 버튼이 활성화 되지 않습니다.
* 다음 버튼을 클릭하면 **`/contract-confirm`** 페이지로 이동합니다.
  * router는 **`hooks/router.ts`** 의 **`useInternalRouter`** 함수를 활용해주세요.
    {% endtab %}

{% tab title="예시 화면" %}

<figure><img src="/files/J1kFiOxKWekSo2sY7KKd" alt="" width="375"><figcaption><p>연금저축계좌 입력값 확인 화면 예시</p></figcaption></figure>
{% endtab %}
{% endtabs %}

### 목표4. 연금저축계좌의 계약을 확인하는 화면을 구현해주세요.

#### 4-1. 입력한 연금저축계좌의 정보를 화면에 보여주세요.

{% tabs %}
{% tab title="요구사항" %}

* 입력한 연금저축계좌의 정보를 화면에 보여주세요.
  {% endtab %}

{% tab title="예시 화면" %}

<figure><img src="/files/4QYx8LGeO3ssSo5SRlBu" alt="" width="375"><figcaption><p>연금저축계좌 계약 확인 화면 예시</p></figcaption></figure>
{% endtab %}
{% endtabs %}

#### 4-2. 하단 체크박스를 체크하면 다음 버튼이 활성화 되게 해주세요.

{% tabs %}
{% tab title="요구사항" %}

* 하단 체크박스를 체크하면 다음 버튼이 활성화 됩니다.
  * 체크박스를 체크하지 않으면 다음 버튼이 활성화 되지 않습니다.
    {% endtab %}

{% tab title="예시 화면" %}

<figure><img src="/files/ECQeobz8rINwxDdwqmun" alt="" width="375"><figcaption><p>연금저축계좌 계약 확인 화면 예시</p></figcaption></figure>
{% endtab %}
{% endtabs %}

#### 4-3. 다음 버튼을 클릭하면 계약이 완료되었다는 dialog를 보여주세요.

{% tabs %}
{% tab title="요구사항" %}

* 활성화된 다음 버튼을 클릭하면 계약이 완료되었다는 dialog를 보여주세요.
* dialog의 확인 버튼을 클릭하면 **`/`** 페이지로 이동합니다.
  * router는 **`hooks/router.ts`** 의 **`useInternalRouter`** 함수를 활용해주세요.
    {% endtab %}

{% tab title="예시 화면" %}

<figure><img src="/files/OWZGfRkK8Uiy8pHC07k9" alt="" width="375"><figcaption><p>연금저축계좌 계약 완료 화면 예시</p></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## 테스트 가이드

### 테스트 실행 방법

```
# 모든 테스트 실행
yarn test

# 특정 파일 테스트 실행
yarn test <파일명>

# 파일 변경 감지 모드로 테스트 실행
yarn test --watch

# 특정 테스트 실행하기
yarn test -t <테스트명>
```

***

## 제출 방법

{% hint style="info" %}
제한시간 안에 브랜치를 원격 저장소에 Push 해주세요.
{% endhint %}

1. 과제를 완료하신 후, **`assignment`** 브랜치에서 작업한 내용을 원격 저장소에 Push 해주세요.
2. GitHub 저장소에서 Pull Request를 생성해주세요. 저장소에 들어가면 아래와 같은 초록석 버튼이 보일 것입니다.

   <figure><img src="/files/2B0veKpT67jNeb74byHr" alt=""><figcaption><p>Pull Request 생성 메세지</p></figcaption></figure>
3. **`[Compare & Pull Request]`** 버튼을 누르고 Pull Request를 생성해주세요. Pull Request의 제목이나 내용은 자유롭게 작성해주세요.

   1. 꼭 \*\*`quantit-tech`\*\*을 리뷰어로 지정해주세요.

   <figure><img src="/files/QCf2FzuJUWJbb2b4Bi7w" alt=""><figcaption></figcaption></figure>
4. Pull Request가 생성되면, **`Github Action`** 을 활용해 자동으로 과제 검토가 진행됩니다.