/wanted-currency-calculator

원티드 프리온보딩 코스 와이어바알리/레드브릭 미션입니다.

Primary LanguageJavaScriptMIT LicenseMIT


1주차 과제 - 와이어바알리/레드브릭

currencylayer에서 제공하는 환율 정보를 이용한 환율 계산기입니다

배포 링크



Table of Contents
  1. 팀원 소개
  2. 과제 소개
  3. 구현한 기능
  4. 설치 및 실행
  5. 프로젝트
  6. License


팀원 소개

👑 윤희준 (팀장) 정서영 염상권 김재원
2번 환율 계산기 개발 2번 환율 계산기 개발 1번 환율 계산기 개발 1번 환율 계산기 개발


과제 소개

currencylayer에서 제공하는 API를 사용해 만든 환율 계산기입니다.

  • 환율 계산기 전환

switch

  • 1번 환율계산기

calc1

  • 2번 환율계산기

calc2

(back to top)



구현한 기능

  • 상단 버튼을 클릭해 환율 계산기의 종류를 교체할 수 있다.
  • 사이트에 접속할 시 localStorage를 확인해, localStorage에 환율 정보가 저장되어 있지 않거나 localStorage를 마지막으로 갱신한 시간으로부터 24시간 이상이 지났다면 API에 요청을 보내 환율 정보를 갱신하고 localStorage에 저장한다.
  • 1번 환율 계산기 구현
    • 한국(KRW), 일본(JPY), 필리핀(PHP) 중 하나의 수취국가를 select box로 선택할 수 있다.
    • 수취국가를 선택하면 해당 국가의 통화와 달러(USD) 사이의 환율이 표시된다.
    • 올바른 송금액(0~10000 사이의 숫자)을 입력하고 submit 버튼을 누르면 수취금액이 표시된다.
    • 수취금액은 소수점 아래 2번째 자리까지, 3자리마다 콤마를 찍은 형식으로 표기된다.
    • 올바르지 않은 송금액을 입력하고 submit 버튼을 누르면 “송금액이 바르지 않습니다" 라는 에러 메시지가 하단에 표시된다.
  • 2번 환율 계산기 구현
    • 1000 이상의 숫자가 입력될 경우 자동적으로 "1,000"으로 변경된다.
    • 숫자 이외의 입력(알파벳, '-', '+' ...)은 처리되지 않는다.
    • 드롭다운 메뉴로 가지고 있는 통화의 종류를, 탭으로 바꿀 통화의 종류를 지정할 수 있다.
    • 드롭다운 메뉴에서 선택한 통화를 제외한 통화들만이 탭에 나타난다.
    • 숫자 입력, 드롭다운 메뉴 클릭, 탭 클릭을 할 경우 변경될 통화의 종류와 환전 금액이 하단에 표기된다.
    • 환전 금액은 소수점 아래 2번째 자리까지, 3자리마다 콤마를 찍은 형식으로 표기된다.

(back to top)



설치 및 실행

Prerequisites

  1. npm
npm install npm@latest -g
  1. https://currencylayer.com/ 에 가입한 후 access key를 발급받아 root에 다음과 같이 .env파일을 추가한다.
REACT_APP_API_END_POINT=http://api.currencylayer.com/live
REACT_APP_API_ACCESS_KEY=YOUR_ACCESS_KEY

Installation

  1. Repo를 clone한다 
    git clone https://github.com/gml9812/wanted-frontend-pre-on-boarding-mission.git
  2. NPM pakage들을 설치한다 
    npm install
  3. localhost에서 프로젝트를 실행한다 
    npm start

(back to top)



License

Distributed under the MIT License. See LICENSE for more information.

(back to top)