/ThumbnailGenerator

[썸네일 생성기] cypress를 사용하여 TDD E2E 테스트를 해보자.

Primary LanguageJavaScriptMIT LicenseMIT

썸네일 생성기 v.1.0.0

배포 사이트

preview

Honeycam 2023-06-04 22-07-55


기능 구현 목록 (v.1.0.0)

핵심 기능 명세

  • 인풋창에 제목을 입력할 수 있다. (글자수 제한: 20자)

  • 인풋창에 내용을 입력할 수 있다. (글자수 제한: 20자)

  • 제목 인풋을 입력했다면 썸네일 미리보기 화면에 작성한 제목이 표시된다.

  • 내용 인풋을 입력했다면 썸네일 미리보기 화면에 작성한 내용이 표시된다.

  • 랜덤 배경 색상 버튼을 클릭하면 랜덤한 색상 코드를 가진 단색 배경으로 변경할 수 있다.

  • 썸네일 생성 버튼을 누르면 만든 썸네일이 이미지화 된다.

기능 구현 목록 (v.2.0.0)

  • 제목 폰트 사이즈를 변경할 수 있다.

  • 내용 폰트 사이즈를 변경할 수 있다.

  • 제목 폰트 색상을 변경할 수 있다.

  • 내용 폰트 색상을 변경할 수 있다.

  • 랜덤 그라데이션 배경 색상으로 변경할 수 있다.

  • 사용자가 직접 이미지를 등록하여 배경 색상으로 적용할 수 있다.

  • 색상 코드를 입력하여 배경 색상을 변경할 수 있다.


✅ 테스트 명세 (v.1.0.0)

  • 처음 페이지 접속 시 썸네일 미리보기 제목에 '제목을 입력해주세요', 내용에 '내용을 입력해주세요'문구가 표시된다.

  • 제목 인풋 박스에 사용자가 '제목입니당'을 입력하면 썸네일 미리보기 제목에 '제목입니당'이 표시된다.

  • 내용 인풋 박스에 사용자가 '내용이네용'을 입력하면 썸네일 미리보기 내용에 '내용이네용'이 표시된다.

  • 랜덤 색상 버튼을 누르면 배경 색상이 랜덤 색상 코드로 변경된다.

  • 썸네일 생성 버튼을 누르면 이미지화 되어 다운로드된다.

✅ 테스트 명세 (v.2.0.0)

  • 랜덤 그라디언트 버튼을 클릭하면 2가지 색상을 가진 배경으로 변경된다.

  • 이미지 등록 버튼을 클릭하면 사용자가 등록한 이미지로 배경이 변경된다.

  • 제목 폰트 사이즈를 변경하면 썸네일 미리보기 제목 크기가 변경된다.

  • 내용 폰트 사이즈를 변경하면 썸네일 미리보기 내용 크기가 변경된다.

  • 제목 폰트 컬러를 변경하면 썸네일 미리보기 제목 폰트 색상이 변경된다.

  • 내용 폰트 컬러를 변경하면 썸네일 미리보기 내용 폰트 색상이 변경된다.

  • 사용자가 색상 코드를 입력하면 입력한 색상 코드의 배경 색상으로 변경된다.