M-MALL

React + Supabase 기반 전자상거래 플랫폼

📖 프로젝트 소개

M-MALL은 현대카드 M몰을 모티브로 한 온라인 쇼핑몰 학습 프로젝트입니다.
React와 Supabase를 활용하여 실제 서비스와 유사한 사용자 경험을 제공하며, 풀스택 웹 개발 역량을 기를 수 있도록 설계되었습니다.

🎯 프로젝트 개요

개발 기간: 2025년 9월 5일 - 11월 4일 (약 2개월)
팀 구성: 풀스택 개발자 3명

이름	역할	담당 기능	GitHub
김예지	Full-stack Developer	상품 재고 및 정보, 브랜드 관리, 장바구니 기능	@yjkdev21
김환희	Full-stack Developer	공용 레이아웃 설계, 로그인/회원가입, 리뷰, 검색	@rlaksl
백유선	Full-stack Developer	공지사항, 주문/배송, 문의, 계정 정보 수정	@dimsum

💡 프로젝트 목표

실무 중심 학습: 실제 전자상거래 플랫폼과 유사한 기능 구현
현대적 기술 스택: React + Supabase를 활용한 모던 웹 개발
협업 경험: Git Flow와 Jira를 통한 체계적인 프로젝트 관리
자동화 배포: GitHub Actions를 활용한 CI/CD 파이프라인 구축

✨ 주요 기능

🔐 회원 관리

회원가입 및 이메일 인증
로그인/로그아웃 (세션 관리)
프로필 수정 및 비밀번호 변경

🛍️ 상품 관리

카테고리별 상품 분류
- 패션·뷰티
- 리빙
- 컬처
- 디지털·가전
상품 상세 정보 (이미지, 설명, 옵션)
상품 검색 및 필터링
실시간 재고 확인
찜하기(상품, 브랜드)

🛒 장바구니 & 주문

장바구니 담기/수정/삭제
수량 변경 및 선택 구매
주문서 작성
배송지 관리 (추가/수정/삭제)
포인트 사용
주문 내역 조회 및 상태 추적

💬 커뮤니케이션

상품 리뷰 작성/조회/수정/삭제
별점 평가 시스템
상품 문의 및 답변
일반 문의 게시판
공지사항

📦 배송 시스템

실시간 배송 상태 확인
배송 추적

⚙️ 관리자 기능

회원 관리: 회원 정보 조회
문의 관리: 문의 확인 및 답변 등록
주문 관리: 주문 내역 조회, 배송 상태 변경
브랜드 관리: 등록/수정/삭제
상품 관리: 등록/수정/삭제, 재고 관리
컨텐츠 관리: 메인비주얼 등록/수정/삭제
카테고리 관리: 카테고리, 서브카테고리 등록/수정/삭제

🛠 기술 스택

Frontend

Backend & Database

Deployment & Tools

🏆 프로젝트 성과

기술적 성과

React의 최신 기능 및 Hooks 활용
Supabase를 활용한 실시간 데이터 동기화 구현
GitHub Actions를 통한 자동 배포 시스템 구축
반응형 웹 디자인으로 모바일 환경 최적화
체계적인 컴포넌트 구조 및 상태 관리

협업 성과

Git Flow 브랜치 전략을 통한 안정적인 버전 관리
Jira를 활용한 스프린트 관리
주간 단위 지속적인 커밋으로 체계적인 개발 진행
코드 리뷰 문화 정착 및 페어 프로그래밍 경험
명확한 커밋 컨벤션 준수

📸 시연 화면

메인 페이지

상품 배너 슬라이더 및 카테고리별 상품 진열

상품 상세

상품 정보, 옵션 선택, 리뷰 및 문의

장바구니

선택 구매 및 수량 조절

마이페이지

주문 내역 및 포인트 관리

관리자 페이지

상품/주문/회원 통합 관리

💡 더 많은 화면은 배포 사이트에서 직접 확인하실 수 있습니다.

📂 프로젝트 구조

M-MALL React 프로젝트 폴더 구조

M-MALL/
├── public/                        # 정적 파일
│   └── images/                    # 이미지 리소스
│   │   ├── /footer                # 푸터 이미지
│   │   └── icons/                 # 아이콘
│
├── src/
│   ├── components/                # 재사용 가능한 컴포넌트
│   │   ├── common/                # 공통 컴포넌트
│   │   ├── mypage/                # 마이페이지 컴포넌트
│   │   └── products/              # 상품 관련 컴포넌트
│   │       └── product-detail/    # 상품 상세 컴포넌트
│   │
│   ├── pages/                     # 페이지 컴포넌트
│   │   ├── admin/                 # 관리자 페이지
│   │   ├── auth/                  # 인증 관련 페이지
│   │   ├── cart/                  # 장바구니
│   │   ├── error/                 # 에러 페이지
│   │   ├── home/                  # 메인 페이지
│   │   ├── mypage/                # 마이페이지
│   │   ├── order/                 # 주문 관련 페이지
│   │   ├── product/               # 상품 페이지
│   │   ├── review/                # 리뷰 페이지
│   │   ├── search/                # 검색 페이지
│   │   └── support/               # 고객지원
│   │
│   ├── contexts/                  # React Context
│   ├── hooks/                     # 커스텀 훅
│   ├── config/                    # 설정 파일
│   ├── utils/                     # 유틸리티 함수
│   │
│   ├── App.jsx                    # 메인 앱 컴포넌트
│   ├── App.css                    # 앱 전체 스타일
│   ├── main.jsx                   # 앱 진입점
│   └── index.css                  # 전역 스타일

🚀 설치 및 실행 방법

사전 요구사항

Node.js 18 이상
npm 또는 yarn (패키지 관리)

1️⃣ 레포지토리 클론

git clone https://github.com/MMALL-Dev-Project/M-MALL.git
cd M-MALL

2️⃣ 의존성 설치

npm install

3️⃣ 환경 변수 설정

.env 파일을 생성하고 다음 내용을 입력하세요:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4️⃣ 개발 서버 실행

npm run dev

브라우저에서 http://localhost:5173 접속

5️⃣ 프로덕션 빌드

npm run build      # 빌드 생성
npm run preview    # 빌드 결과 미리보기

🔄 협업 프로세스

Git Flow 브랜치 전략

main: 배포 가능한 안정 버전\
개발자네임/기능명: 기능 개발 브랜치

커밋 메시지 컨벤션

feat: 새로운 기능 추가
fix: 버그 수정
docs: 문서 수정
style: 코드 스타일 변경 (포맷팅, 세미콜론 등)
refactor: 코드 리팩토링
test: 테스트 코드 추가
chore: 빌드 설정, 패키지 설치 등

예시

git commit -m "feat: 장바구니 담기 기능 구현"
git commit -m "fix: 결제 페이지 금액 계산 오류 수정"
git commit -m "docs: README 설치 방법 추가"

🎯 향후 계획

🤖 AI 기능 추가

상품 추천 알고리즘

🔍 검색 기능 고도화

Elasticsearch 도입
자동완성 및 연관 검색어

💭 프로젝트 회고

잘한 점

체계적인 협업: Git Flow와 Jira를 활용한 프로젝트 관리
빠른 개발: Supabase를 활용한 효율적인 백엔드 구축
원활한 소통: 주 2회 온·오프라인 정기 회의를 통한 진행 상황 공유
문제 해결: 오프라인 코드리뷰를 통한 기술적 성장

아쉬운 점

테스트 코드 부족: 단위 테스트 및 통합 테스트 미작성
초기 설계: 데이터베이스 스키마 변경으로 인한 리팩토링 발생
성능 최적화: 초기 개발 단계에서 고려하지 못한 성능 이슈

배운 점

풀스택 개발 역량: React와 Supabase를 활용한 전체 개발 프로세스 경험
문제 해결 능력: 다양한 기술적 도전 과제 해결 경험
프로젝트 관리: 일정 관리와 우선순위 설정의 중요성 인식

📄 라이센스

이 프로젝트는 학습 목적으로 제작하였습니다.

Name		Name	Last commit message	Last commit date
Latest commit History 196 Commits
.github/workflows		.github/workflows
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
folder_structure.txt		folder_structure.txt
index.html		index.html
jsconfig.json		jsconfig.json
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

MMALL-Dev-Project/M-MALL

Folders and files

Latest commit

History

Repository files navigation