이 프로젝트는 Typescript 언어를 사용하는 React 앱 입니다.
소스코드를 분리하고 유사성격의 파일들을 폴더별로 재배치 하세요
src
├─ App.tsx
├─ components
│ └─ Spinner.tsx
├─ index.tsx
├─ model
│ └─ EurInfoModel.ts
├─ types
│ └─ EurInfoType.ts
├─ view
│ ├─ EurInfoView.tsx
│ └─ ExchangeView.tsx
└─ viewModel
├─ EurInfoViewModel.ts
├─ ExchangeComaViewModel.ts
└─ ExchangeViewModel.ts
- any 를 사용하지 말고 Type을 지정해 주세요
- tpyes 폴더 내 EurInfoTpye 파일로 공통된 API 타입지정
- 컴포넌트를 분리하고, 적당한 폴더를 만들어 파일들을 배치하세요
- view 폴더
- 화면을 구성하는 컴포넌트(EurInfoView.tsx, ExchangeView.tsx)
- model 폴더
- 데이터를 받아오는 파일 (EurInfoModel.ts)
- viewModel 폴더
- 받아온 데이터를 처리하여 view로 내려주는 파일
- EurInfoViewModel : 1유로 기준 환율에 대한 데이터를 처리하여 EurInfoView 컴포넌트로 할당
- ExchangeComaViewModel : 세자리수 마다 콤마(,)를 표현해 줄 수 있는 파일
- ExchangeViewModel : 입력한 값에 따라 유로를 원화로 변경하여 ExchangeView 컴포넌트로 할당
- components 폴더
- Spinner : 로딩중인 UI Spinner 컴포넌트 파일
- 유로화를 입력할 때마다 환율을 반영하여 원화로 표시해 주세요. (exchangeEurToKrw 함수를 사용하세요, 필요시 구현내용 변경 가능)
- ExchangeViewModel에서 입력된 값을 받아 exchangeEurToKrw 함수를 사용해 원화로 변경
- 환율 정보 로딩중임을 사용자가 알 수 있도록 UI를 추가해 주세요.
- 1초간 보여질 수 있도록 setTimeout메서드를 사용
- react-spinners 라이브러리를 사용하여 로딩중 UI를 구현
- 금액은 세자리 마다 콤마(,) 를 표시하세요
- ExchangeComaViewModel에서 세자리 마다 콤마(,)를 표시하여 ExchangeView 컴포넌트로 할당
- 유로화는 소수점 2자리까지 표시하고, 원화는 소수점을 표시하지 않습니다.
- 비니지스 로직을 분리하고 MVVM 구현패턴을 적용하세요.
- model : 데이터를 저장
- viewModel : 저장된 데이터를 변경
- view : Render되는 화면
- 비효율적으로 작성된 코드가 있다면 변경하세요
- 테스트 코드를 작성하세요
- git 레포지토리를 fork하여 작성한 후 PR을 보내세요
- 리팩토링 의도와 구조에 대한 간략한 설명을 PR본문에 적어주세요
- 디자인은 마음대로 변경하셔도 됩니다.
- 필요한 외부 라이브러리를 추가하여 사용하셔도 됩니다.
- 환율조회 api는 하나은행 제공 API를 사용하고 있습니다.
- 디자인은 styled-components 라이브러리 사용
- 간단하게 css-in-js로 css 파일을 분리하지 않고 컴포넌트 형식으로 디자인을 작성할 수 있음
- react-spinners 라이브러리 사용
- 로딩중 UI를 시각화하기 위해 사용