HTMLCSSJavaScript
[HTML/CSS/JS] HODU SUPER
Chae-hyeon Kim
2025년 9월 16일
목차
프로젝트 소개
-
GitHub URL
-
배포 URL
구현 화면 및 기능
-
메인 화면
-
상품 상세 및 장바구니 기능
-
회원가입 및 로그인
프로젝트명
HODU SUPER(호두 슈퍼), 개발자 용품 쇼핑몰
사용 기술 및 기술 스택
Frontend
- 아키텍처: MPA 방식으로 개발
- HTML: 시맨틱 마크업, 웹 접근성 고려
- CSS: Flexbox, Grid 레이아웃, 반응형 디자인
- JavaScript: 모듈화, 비동기 처리, DOM 조작
- Swiper.js: 메인 배너 슬라이더 구현
API & 통신
- Fetch API: RESTful API 통신
- LocalStorage: 사용자 인증 정보 및 장바구니 데이터 관리
- JSON: 데이터 포맷
SEO & 접근성
- Meta 태그 최적화: title, description, keywords, author 태그 설정
- Open Graph: SNS 공유용 og:title, og:description, og:image, og:url 설정
- 시맨틱 HTML: HTML5 시맨틱 태그 및 ARIA 속성 활용
- 웹 접근성: screen-reader 지원, 키보드 네비게이션, alt 텍스트
개발 도구
- Git: 버전 관리
- GitHub: 협업 및 배포
- VS Code: 개발 환경
요구사항 명세
기능적 요구사항
- 사용자 회원가입 및 로그인 기능
- 상품 목록 조회 및 상세 정보 확인
- 장바구니 관리
- 상품 재고 관리 및 수량 제한
- 사용자 타입별 차별화된 헤더 메뉴
- 반응형 웹 디자인
비기능적 요구사항
- 웹 접근성 준수
- 모바일 최적화
- 브라우저 호환성
- API 응답 시간 3초 이내
- 사용자 친화적 UI/UX
제약사항
- Vanilla JavaScript만 사용
- 외부 프레임워크/라이브러리 최소화
- 제공된 API만 사용
주요 특징
메인 페이지
- 배너 슬라이더: Swiper.js를 활용한 자동 슬라이딩 배너
- 상품 목록: API를 통한 실시간 상품 데이터 표시
- 반응형 레이아웃: 다양한 디바이스에서 최적화된 화면
- 품절 상품 표시: 재고가 0인 상품에 품절 스타일링 적용
상품 상세 페이지
- 상품 정보 표시: 이미지, 가격, 배송 정보, 판매자 등
- 수량 선택: 최소 1개, 최대 보유 수량까지 선택 가능
- 실시간 가격 계산: 수량 변경 시 총 금액 및 수량 자동 업데이트
- 장바구니 추가: 장바구니 담기 기능
- 탭 기능: 상품 정보, 리뷰, Q&A, 반품/교환 정보 탭
- 품절 상품 표시: 재고가 0인 상품에 품절 스타일링 적용
장바구니 관리
- 상품 관리: 체크박스를 통한 개별/전체 선택
- 재고 체크: 장바구니 추가 시 기존 수량과 새 수량의 합이 재고를 초과하는지 확인
- 수량 조절: 증가/감소 버튼으로 수량 변경
- 실시간 계산: 상품금액, 할인, 최종 결제금액 자동 계산
- 재고 관리: 재고 부족 시 알림 및 수량 제한
회원 관리
- 회원가입: 구매회원/판매회원 구분 가입
- 로그인: JWT 토큰 기반 인증
- 유효성 검사: 실시간 입력값 검증
- 중복 확인: 아이디 및 사업자번호 중복 체크
사용자 경험
- 로딩 스피너 및 스켈레톤 UI: 데이터 로딩 중 사용자 피드백
- 미니 알림: 성공/실패 메시지 표시
- 에러 처리: 404 페이지, 이미지 로드 실패 처리
개발 배경
모두의연구소 프론트엔드스쿨 2차 프로젝트로, Vanilla JS 기반에 백엔드 API를 연동하여 오픈마켓 웹 서비스를 팀 단위로 개발했습니다. 상품 목록·상세, 장바구니, 로그인/회원가입 등 쇼핑몰의 주요 기능을 구현하며 협업과 실전 경험을 쌓았습니다.
기능 흐름도
