레시피지

목차

• 서비스 소개
• 활용 기술
• 상세 페이지

서비스 소개

• 레시피지는 많은 사람들이 요리를 더욱 쉽게 도전할 수 있도록 숏폼 형태의 레시피를 제공해주는 서비스
• 유저는 본인에게 필요한 테마를 선택하고, 테마에 속한 레시피들을 간단하게 익힐 수 있습니다.
• 각 레시피는 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가 보이도록 구현했습니다.

저장한 레시피/테마 확인 페이지

마이 레시피	마이 테마
유저가 이전에 검색하거나 조회했던 레시피들 중에서 저장했던 레시피를 모아볼 수 있는 페이지입니다.	유저가 이전에 검색하거나 조회했던 테마들 중에서 저장했던 테마를 모아볼 수 있는 페이지입니다.

테마 디테일 페이지 / 레시피 디테일 페이지

테마 디테일 페이지	레시피 디테일 페이지
테마 카드를 누르면 볼 수 있는 테마 디테일 페이지입니다. 테마의 이름과 종류, 그리고 테마에 속한 레시피들을 케러셀 형태로 확인할 수 있습니다. 추가적으로 테마에 알맞는 이지팁을 하단에서 확인할 수 있습니다.	레시피 카드를 누르면 볼 수 있는 레시피 디테일 페이지입니다. 레시피의 이름, 난이도, 소요시간 등등을 확인할 수 있고, 중요한 재료 리스트 및 필요한 도구의 리스트도 확인 할 수 있습니다.

레시피 따라하기 / 레시피 숏폼 영상 플레이어

레시피 따라하기 페이지	레시피 숏폼 영상 플레이어
레시피 디테일 페이지에서 스크롤하면 확인할 수 있는 레시피 따라하기 리스트입니다. 글과 사진을 통해 유저가 더욱 쉽게 요리할 수 있도록 돕습니다.	각 레시피 마다 있는 숏폼 영상 재생 페이지입니다. 레시피 카드를 누르면 우선적으로 보여지는 페이지이고, 자세히 보기 버튼을 통해서 유저는 레시피 디테일 페이지로 이동할 수 있습니다.