Project: next.js / contentful 로 쇼핑몰 만들기

프로젝트 이름

y-o-l-k

url

https://y-o-l-k.com

목적

• 제품 판매를 위한 쇼핑몰 만들기
• 처음에는 제품의 룩북으로 사용할 것
• 디자인이 최대한 잘 반영되고, 매끄러운 UI 경험을 제공할 수 있어야 함
• 이후 결제 모듈 붙이기 (나중 얘기)

일정

• 룩북 사이트 7월 중 오픈

필요 기능 및 구현 계획

1. dark/light mode
on/off 버튼을 끄고, 켤 때 보여지는 UI가 달라져야 함
localStorage에 theme 객체 저장해서 버튼 클릭 시 현재 상태 파악하고, 불러오기.

2. goToTop button
언제든지 유저가 위로 올라갈 수 있도록.

3. infinite Scroll
아이템들이 무한 스크롤 되어야 함.
intersectionObserver() 사용해 보기.

4. status(progress) bar
현재 어디까지 봤는지 scroll responsive한 top status bar을 만들기.

5. modal routing
개별 아이템을 클릭하면 modal에 정보가 뜨는 디자인.
개별 제품 정보를 SEO 해야 하므로 dynamic routing 사용.
페이지 리로드 해도 개별 제품 경로가 유지되도록.
링크 참고

6. 확장 가능성 생각하기
나중에 제품 카테고리가 추가될 여지가 있음
라우팅 할 때 메인화면에 카테고리별 모든 제품이 섞여서 들어오도록

stack

next.js
SEO, SSR을 위해
contentful
제품사진, 제품설명 등록을 위해
vercel
수고로움 없이 배포, 관리. 나중에 옮길 수도 있지만.