{chDEV}
HTMLCSSJavaScript

[HTML/CSS/JS] HODU SUPER

Chae-hyeon Kim
2025년 9월 16일
목차

프로젝트 소개

  1. GitHub URL

    https://github.com/yeaseula/HoduSuper

  2. 배포 URL

    https://yeaseula.github.io/HoduSuper/

구현 화면 및 기능

  • 메인 화면

    main.gif

  • 상품 상세 및 장바구니 기능

    detail.gif

  • 회원가입 및 로그인

    login.gif

프로젝트명

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를 연동하여 오픈마켓 웹 서비스를 팀 단위로 개발했습니다. 상품 목록·상세, 장바구니, 로그인/회원가입 등 쇼핑몰의 주요 기능을 구현하며 협업과 실전 경험을 쌓았습니다.

기능 흐름도

image.png