https://github.com/yhwabillie/shopping
회원의 장바구니와 위시리스트, 제품 검색을 제공하는 쇼핑몰 서비스
https://github.com/yhwabillie/shopping
nextauthjs nextjs14 pnpm supabase-db vercel-deployment
Last synced: about 1 month ago
JSON representation
회원의 장바구니와 위시리스트, 제품 검색을 제공하는 쇼핑몰 서비스
- Host: GitHub
- URL: https://github.com/yhwabillie/shopping
- Owner: yhwabillie
- Created: 2024-07-21T23:27:56.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-11T04:01:31.000Z (8 months ago)
- Last Synced: 2025-01-28T19:15:07.570Z (3 months ago)
- Topics: nextauthjs, nextjs14, pnpm, supabase-db, vercel-deployment
- Language: TypeScript
- Homepage: https://next-auth-test-sage.vercel.app
- Size: 11.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 Title: Shopping
`장바구니`와 `위시리스트`, `제품 검색` 및 `회원정보관리`를 제공하는 쇼핑몰 서비스입니다.
`실무에서 직면한 문제들`을 혼자 해결하고, 해결 과정에서 얻은 기술과 지식을 `구체적으로 구현 및 문서화`하였습니다.
프론트엔드 개발 경험을 바탕으로 RESTful API 설계와 데이터베이스 모델링을 직접 수행했습니다.
`백엔드 및 데이터베이스 영역에서의 협업 능력 향상을 목표`로 작업했습니다.
## 🗂️ Shopping 프로젝트 Notion 문서 링크
## 👥 일반 TEST 계정 : test123 / qwer1234#@
## 👷 관리자 TEST 계정 : admin123 / qwer1234#@
# 🛠️ 개발 환경 & 기술 스택
| 사용 언어 (FE/BE) | TypeScript (FE/BE) |
| --------------------- | --------------------------------------------------------------------------------------------- |
| 웹 프레임워크 (FE/BE) | [FE/BE] Next.js (v14, App Router) |
| Auth 라이브러리 | NextAuth.js (v4) |
| 상태 관리 라이브러리 | Zustand |
| 스타일링 도구 | TailwindCSS |
| ORM / DBMS | Prisma / Supabase (PostgreSQL) |
| 패키지 관리자 | pnpm (v9.5.0) |
| 런타임 환경 | Node.js v20 |
| 이미지 CDN | Supabase Storage |
| 배포 (FE/BE) | **FE 배포**: Vercel, BE 배포: Vercel (API 라우팅, 서버리스 함수), Supabase (PostgreSQL, DBMS) |
| 문서화 도구 / IDE | Notion / VSCode |
| 개발 환경 / 운영 체제 | Mac |
# 👩💻 작업 내용
## 1. SEO 지표 리포트 점수 개선 (Mobile: 🔺약 118%, Desktop: 🔺50%)
- 이미지가 가장 많이 몰려있는 메인 페이지를 기준으로 점수를 측정
- 최초 `Desktop 66점`, `Mobile 33점` 에서 시작하여 개선
### 📝 SEO 최적화 작업 관련 작성 Notion 문서
- [SEO] 리소스 최적화 Notion 문서 링크
- [SEO] 메타 데이터 Notion 문서 링크
- [SEO] 사이트맵 적용 Notion 문서 링크
### 📈 최종 Performance 점수 (Desktop: 100점 / Mobile: 72점)
- [PageSpeed Insights 최종 Performance 점수 (Desktop: 100점 / Mobile: 76점)]
| Desktop: `100점` | Mobile: `76점` |
| :-------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
|
## 2. 🖥️ 💻 📱 반응형 퍼블리싱 (Mobile, Tablet, Desktop)
| `Desktop` 브라우저 반응형 해상도 (Mac 기준) |
| :-------------------------------------------------------------------------------------------------------------------------------------------: |
| 
|
| `Tablet` 해상도 (iOS 웹뷰 기준) | `Mobile` 해상도 (iOS 웹뷰 기준) |
| :-------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
|
## 3. 🤹 UI 인터랙션
- ### [동적 콘텐츠 로딩] 무한 스크롤 (Infinite Scroll) 구현
- ### [데이터 필터링] 각 카테고리 및 전체 필터 기능 구현
- ### [UI/UX] 제품 아이템 Hover 애니메이션: Marquee
- ### [비동기 상태 관리] 검색어 자동완성 및 결과 리스트 키보드 조작을 통한 선택 기능을 구현
## 4. 💬 입력 데이터 처리 및 UI 관리
- ### [UI/UX] 전체 동의, 개별 동의 체크박스 기능
- ### [사용자 피드백] 이미 존재하는 ID, Email 경우 사용자에게 알림, 인풋 데이터 Reset
- ### [이벤트관리] 최종 데이터 DB 전송시 로딩 레이어 모달 처리
## 5. ⚙️ Excel 파일을 이용한 제품 DB 관리
- ### [비동기 상태 관리] 제품 DB를 Excel 파일로 업로드
- ### [UI/UX] 페이징 처리 (맨얖, 맨뒤로)
- ### [UI/UX] 체크박스 UI 전체 삭제, 부분 삭제 구현
- ### [데이터 필터링] 셀렉트박스를 사용한 카테고리 필터 기능
## 6. 📨 🔐 이메일 기반 인증 및 보안
- ### [JWT 토큰 생성] 가입할때 작성한 Email로 비밀번호 재설정 토큰 링크 이메일 전송
- ### [이메일 템플릿] 요청일시, ID, 링크 만료기한 안내, 재설정 토큰 링크 전달
# 📦 프로젝트 구조
```bash
📦 shopping
├── 📂 app
│ ├── 📂 actions
│ ├── 📂 api
│ ├── 📂 hooks
│ ├── 📂 add-product
│ ├── 📂 my-shopping
│ ├── 📂 profile
│ ├── 📂 request-reset
│ ├── 📂 reset-password
│ ├── 📂 search
│ ├── 📂 signIn
│ └── 📂 signUp
│
├── 📄 favicon.ico
├── 📄 global.css
├── 📄 layout.tsx
├── 📄 not-found.tsx
├── 📄 page.tsx
│
├── 📂 lib
│ ├── 📂 components
│ ├── 📂 stores
│ ├── 📄 auth.ts
│ ├── 📄 zodSchema.ts
│ ├── 📄 supabaseClient.ts
│ ├── 📄 prisma.ts
│ ├── 📄 constants.ts
│ └── 📄 utils.ts
│
├── 📂 prisma
├── 📂 public
├── 📂 types
│
├── 📄 middleware.ts
├── 📄 next.config.mjs
├── 📄 tailwind.config.js
└── 📄 tsconfig.json
```
- 📂 app > actions (Server Actions)
- 데이터 처리가 즉시 필요한 작업
- [CRUD] 위시리스트, 주문리스트, 배송지
- [조회, 업데이트] 프로필
- [조회] 제품 검색, email 중복여부
- [조회, 생성, 제거] 장바구니
- [조회, 삭제, 생성] 제품 리스트
- Toggle 하여 사용자 위시리스트, 장바구니 반영 여부 반영
- 일괄조회, 페이징 조회 (infinite scroll 기능)
- [CRUD] admin 제품 리스트 관리
- 📂 app > api (Route API)
- 인증, 권한 체크가 필요한 작업
- 로그인, 로그아웃, 비밀번호 갱신 및 갱신 요청 관련
- 📂 app > hooks
- 상태 관리 및 비즈니스 로직을 커스텀 훅으로 분리
- 비즈니스 로직과 UI 로직을 분리
- 📂 lib > components
- 일반, 관리자, 공통으로 쓰이는 컴포넌트 관리
- 📂 lib > stores
- 배송지, 장바구니, 주문리스트, 제품리스트, 위시리스트 관련 Zustand 상태 store
# ⚙️ DB 모델 ERD
| User | 사용자 정보 | Cartlist | 장바구니 목록 |
| --------- | ------------------------- | --------- | --------------------------------- |
| Agreement | 정보이용동의 (선택/필수) | Wishlist | 위시리스트 |
| Address | 사용자 배송지 (기본/기타) | Order | 사용자가 만든 각 주문에 대한 정보 |
| Product | 제품 정보 | OrderItem | 각 주문에 포함된 개별 상품의 정보 |
