Home

✌🏻 TwoSpoon

기존 프로젝트 HanSpoon 사이트의 개선하며 기능 추가하는 프로젝트에 대한 기록입니다.

✅ 현재 발생하고 있는 문제

https://humorous-cricket-194.notion.site/a32aac656c6948869ada1e930d3c8bce

✏️ Software Requirement Specification

• React를 Next로 마이그레이션 한다.
• JS로 작성된 코드를 TS로 마이그레이션한다.
• 새로 개발되는 기능의 Component들은 Storybook을 사용하여 CDD 방법론으로 개발한다.

크로스 브라우징

• safari 혹은 모바일 환경에서 작은 사이즈로 접속했을 때, 텍스트가 깨지는 현상이 발생하지 않아야 한다.
• 페이지네이션에서 모바일 환경과 웹 환경과 차이가 없어야한다.

Reroll 버튼 클릭

• 글자와 사진이 동시에 변경되어야 한다. 이를 해결하기에 최적화된 방법을 사용한다.

한글 키워드 검색

• 한글 검색어 입력 시 결과가 존재하지 않는 키워드를 검색했을 때, 엉뚱한 결과 화면이 나오지 않아야 한다.
• 의도한 대로 키워드가 존재하지 않는다는 화면을 보여주어야 한다.

버튼 포인터 영역

• 두 버튼의 hover 영역이 크고, 각각 구분이 될 수 있어야 한다.

Before	After

의도치 않은 scroll 발생

• 레시피 디테일에서 세부 사항 버튼 클릭 시 의도하지 않은 스크롤이 발생하지 않아야 한다.

뷰포트를 세로 방향으로 축소

• 뷰포트를 세로 방향으로 축소하여도 화면이 깨지지 않아야 한다.

히스토리 관리

• 페이지네이션 시 히스토리 기능이 제대로 구현되어있어야 한다.

🎯 비즈니스 요구사항

목표

• 기존 자바스크립트로 작성된 코드를 타입스크립트로 변환하여 보다 안정적이고 개발에 용이한 코드로 마이그레이션
• 기존 버전의 프로젝트에서 발생한 문제점을 해결하여 서비스 품질 향상
• 사용자 관점에서 더 편리하고 명확한 기능을 제공하기 위해 기능 수정 및 추가
• 기능이 추가됨에 따라 복잡해진 상태를 관리하기 위한 상태 관리 도구 도입
• 새로운 컴포넌트를 구현할 때 Storybook을 사용하여 CDD 방법론으로 개발

🌱 UseCase

유즈케이스 사진보기

⚒ NPM 대신 Yarn을 사용해요!

npm install = yarn install

npm install -D [package name] = yarn add -D [package name]

npm un [package name] = yarn remove [package name]