Calc Web App

한국어

🔗 링크

• Github URL: 여기를 클릭해주세요
• Live Site URL: 여기를 클릭해주세요

🛠️ 사용한 기술

• React JS
• TypeScript
• Styled-Components
• HTML5, CSS
• Framer Motion

🗒️ 주요 기능

• Windows 기본 계산기와 유사한 기능을 구현하였습니다.
  • 정수부는 콤마로 구분되며, 소수부는 구분 없이 나타나도록 설계되었습니다.
• 키보드 입력을 완벽하게 지원합니다.
  • 0~9: 숫자 입력
  • Enter: 계산 결과 출력
  • Backspace: 숫자 입력 시 백스페이스, 결과 출력 시에는 초기화
  • Esc: 초기화
• 사용자가 선택한 테마는 로컬 스토리지에 저장됩니다.
• 계산이 완료되면 결과를 클릭하여 클립보드에 복사할 수 있습니다.
  • 계산 중이거나 계산 결과가 없을 경우 클립보드 복사가 불가능합니다.
• 복사가 완료되면 Toast가 나타나며 피드백이 제공됩니다.

English

🔗 Links

• Github URL: Click here
• Live Site URL: Click here

🛠️ Technologies Used

• React JS
• TypeScript
• Styled-Components
• HTML5, CSS
• Framer Motion

🗒️ Key Features

• Implemented features similar to the Windows default calculator.
  • Integer part is separated by commas, and decimal part is displayed without separation.
• Fully supports keyboard input.
  • 0~9: Number input
  • Enter: Display calculation result
  • Backspace: Backspace during number input, reset during result display
  • Esc: Reset
• User-selected theme is stored in local storage.
• After completion of calculation, the result can be copied to the clipboard by clicking.
  • Clipboard copy is not available during calculation or when there is no calculation result.
• When copying is completed, a toast appears providing feedback.