- 레시피지는 많은 사람들이 요리를 더욱 쉽게 도전할 수 있도록 숏폼 형태의 레시피를 제공해주는 서비스
- 유저는 본인에게 필요한 테마를 선택하고, 테마에 속한 레시피들을 간단하게 익힐 수 있습니다.
- 각 레시피는 1분 내외의 요리 영상이 있고, 세부적인 재료와 요리 방법은 디테일 페이지에서 볼 수 있습니다
- 레시피마다 난이도가 따로 책정이 되어있고, 소요 시간 및 필요 도구 등등을 확인할 수 있습니다.
-
Typescript: Typescript는 Javscript의 문법에 타입 지정을 할 수 있도록 만들어진 언어로, 자바스크립트의 자유도와 타입 언어의 안정성까지 갖춘 언어입니다. 개발 과정에서 타입 추론의 도움을 받기 위해 사용했습니다.
-
NextJS: ReactJS를 더욱 간편하게 사용하기 위해 만들어진 프레임워크로, 추가적인 설정 없이도 기본적으로 ServerSideRendering이 가능한 것이 장점입니다. 또한, 외부 라이브러리의 도움 없이도 자동으로 파일 구조 기반 라우팅이 가능하여 직관적인 폴더 구조를 구축할 수 있습니다. 레시피지에서 제공하는 레시피 페이지는 데이터가 자주 변경되지 않기 때문에 ISR을 적용하는 것이 효율적일거라 판단하여 도입하였습니다.
-
TailwindCSS: TailwindCSS는 Utility-first라는 컨셉을 갖고 나온 CSS 프레임워크로, html 태그에 인라인 스타일링을 적용할 수 있습니다. CSS-in-JS와는 다르게 런타임에 스타일에 적용이 되는게 아니기에 성능 측면에서 효율적이고, 개발과정에서 클래스 이름을 고민하지 않아도 되기에 빠른 개발이 가능하다는 것이 장점입니다.
-
React-Query: React-Query는 Client-State와 Server-State를 확실하게 구분하기 위해 만들어진 라이브러리로, 서버에서 받아온 데이터를 키로 구분하여 캐싱을 할 수 있다는 큰 장점이 있습니다. 레시피지 서비스는 대부분 Server-State를 기반으로 동작하기 때문에, 추가적인 전역상태관리 툴을 이용해서 서버에서 받아온 데이터를 복사하여 관리하는 것 보다 React-Query를 이용하여 Server-State를 확실하게 분리해서 관리하는 것이 효율적일거라 판단하여 도입했습니다.
-
Recoil: Recoil은 React기반 앱에서 전역적으로 상태를 관리하기 위한 라이브러리로, 문법이 다른 전역상태관리 툴과는 다르게 React의 문법과 매우 유사하다는 장점을 갖고 있습니다. 앞서 언급했듯 레시피지는 Client-State가 많지 않은 서비스이기 때문에 전역상태관리 툴을 도입하지 않으려 했으나, 몇몇 상황에서 전역상태가 필요하다고 판단하여 기존 코드에서 많은 변경 없이도 전역적인 상태 관리가 가능한 Recoil을 도입하게 되었습니다.
모든 페이지들은 https://recipeasy-client-ten.vercel.app/ 에서 방문 가능합니다.
| 로그인 | 닉네임 설정 페이지 |
|---|---|
 |
 |
| 서비스를 시작하면 처음 보이는 로그인 페이지입니다. 유저들이 서비스를 빠르게 이용할 수 있도록 카카오 로그인을 구현 했습니다. |
유저가 처음 로그인하면 볼 수 있는 닉네임 설정 페이지입니다. 첫 로그인 이후에는 백엔드에 닉네임이 저장되어 그 이후부턴 보이지 않도록 구현했습니다. |
| 메인 전체보기 페이지 | 메인 테마별 보기 페이지 |
|---|---|
 |
 |
| 유저가 로그인하면 처음 보이는 메인 페이지입니다. 유저는 스크롤을 통해 모든 테마 리스트를 볼 수 있고, 추후에 테마 종류가 많아지면 무한 스크롤을 도입할 예정입니다. 데이터가 로딩중일 때는 Skeleton UI가 보이도록 구현했습니다. |
메인 페이지의 테마별 보기 페이지입니다. 같은 재료만을 이용하여 요리를 하는 테마 종류와, 초보자도 쉽게 도전할 수 있는 쉬운 테마 종류가 있습니다 |
| 검색어 추천 페이지 | 검색 결과 페이지 |
|---|---|
 |
 |
| 유저가 레시피 또는 테마를 검색하기 전에 몇몇 검색어들을 추천해주는 페이지입니다. 재료 추천 검색어는 검색했을 시에 레시피 검색을 우선시하고, 테마 추천 검색어는 테마 검색을 우선시합니다. | 유저가 검색을 하면 결과가 보여지는 페이지입니다. 검색어에 따라 레시피 결과와 테마 결과 둘다 확인 가능합니다. 검색이 완료되지 않은 상황에서는 Skeleton UI가 보이도록 구현했습니다. |
| 마이 레시피 | 마이 테마 |
|---|---|
 |
 |
| 유저가 이전에 검색하거나 조회했던 레시피들 중에서 저장했던 레시피를 모아볼 수 있는 페이지입니다. | 유저가 이전에 검색하거나 조회했던 테마들 중에서 저장했던 테마를 모아볼 수 있는 페이지입니다. |
| 테마 디테일 페이지 | 레시피 디테일 페이지 |
|---|---|
 |
 |
| 테마 카드를 누르면 볼 수 있는 테마 디테일 페이지입니다. 테마의 이름과 종류, 그리고 테마에 속한 레시피들을 케러셀 형태로 확인할 수 있습니다. 추가적으로 테마에 알맞는 이지팁을 하단에서 확인할 수 있습니다. |
레시피 카드를 누르면 볼 수 있는 레시피 디테일 페이지입니다. 레시피의 이름, 난이도, 소요시간 등등을 확인할 수 있고, 중요한 재료 리스트 및 필요한 도구의 리스트도 확인 할 수 있습니다. |
| 레시피 따라하기 페이지 | 레시피 숏폼 영상 플레이어 |
|---|---|
 |
 |
| 레시피 디테일 페이지에서 스크롤하면 확인할 수 있는 레시피 따라하기 리스트입니다. 글과 사진을 통해 유저가 더욱 쉽게 요리할 수 있도록 돕습니다. |
각 레시피 마다 있는 숏폼 영상 재생 페이지입니다. 레시피 카드를 누르면 우선적으로 보여지는 페이지이고, 자세히 보기 버튼을 통해서 유저는 레시피 디테일 페이지로 이동할 수 있습니다. |