🏠 집 가구싶어 (SweetHome)

React, TypeScript, Rest API를 활용한 라이프 스타일 홈 데코·인테리어 쇼핑몰 프로젝트입니다.
성별과 연령에 상관없이 모두가 관심을 가지고 이용할 수 있는 인테리어 관련 주제로 선정하였으며,
‘집(Home)’ + ‘가구(Furniture)’ + ‘가고싶다.(Want To Go)’ 의 합성어로 언제 어디서나 집에 가고싶게 만드는 제품을 판매하다는 의미의 쇼핑몰입니다.

프로젝트 소개

개발기간 : 2023. 05. 30 ~ 2023. 07. 01
리팩토링 : 2024. 07. 24 ~ ing
배포주소 : DEMO

사용기술 및 개발환경

Development

Config

Deployment

성능 개선

🔗 AWS S3, CloudFront, Route 53으로 웹 호스팅 구축

AWS 아키텍처	Cache Hit	Lighthouse 개선

🔗 Lighthouse Performance 성능 79% 개선

1. 번들 크기 최적화를 통해 First Contentful Paint(FCP) 개선


• vite.config.json의 manualChunks를 설정해 라이브러리 청크 분리
• Page 단위로 lazy와 suspense 적용하여 필요한 리소스만 로드

2. 이미지 최적화를 통해 Largest Contentful Paint(LCP) 개선


• Intersection Observer API를 활용해 뷰포트에 보이는 이미지만 로드
• imagemin 플러그인을 사용해 전체 이미지 용량 65.51% 감소

최적화 전	최적화 후

전체 화면 구성

Layout

• React-Router-Dom의 outlet 중첩 라우팅을 활용한 레이아웃 구성
• Redux를 사용한 전역 상태 관리
• 재사용을 높이기 위한 세부 컴포넌트 구성
• 더 나은 UX를 위한 로딩 스피너 추가

Head

• 카테고리 (Navbar) : useNavigate, NavLink를 활용한 페이지 라우터 관리
• 제품 검색 기능 : useState, useNavigate, ChangeEvent를 활용한 검색 기능 구현

메인 페이지 (Home)

• 이미지 슬라이더 : React-slider를 활용한 메인 페이지 이미지 슬라이더 구현

메인 페이지	About 페이지

상품 페이지 (Shop)

• 상품 목록 페이지 : productItem 컴포넌트로 재사용성을 높이고 MouseEvent와 useState를 활용한 카테고리 필터 구현
• 상품 상세 페이지 : useParams를 활용한 상품 상세 정보 조회(ID), Redux를 활용한 장바구니 기능 구현
• 장바구니 담기 기능 : Redux, useDispatch, useSelector, useNavigate, useParams를 활용한 장바구니 상태 관리 구현
• 결제 페이지 : useNavigate, Redux를 활용한 페이지 라우팅, 데이터 전달 구현

상품 목록 페이지	상품 상세 페이지

장바구니 페이지 (Cart) & 결제 페이지 (Buy)

• 장바구니 목록 조회 : Redux, useSelector, useNavigate를 활용한 장바구니 상태 관리 구현
• 전체/선택 상품 구매 : Redux를 활용하여 상품 선택 유무에 따른 조건부 렌더링 구현
• 결제 기능 : Redux를 활용한 결제 상세 정보 출력 및 사용자 계좌 유무에 따른 조건부 렌더링 구현

장바구니 페이지	결제 페이지

마이페이지 (Mypage)

• 주문 내역 조회
  • 상품 구매 취소, 상품 구매 확정
  • 상세 정보 조회 : 주문 시간(최신순)에 따른 상품 구매 내역 정렬 구현
• 계좌 관리
  • 전체 계좌 조회
  • 계좌 등록 : Modal을 통한 계좌 등록, 은행 선택시 은행 코드 자동 입력 구현, 자리수에 따른 여러 개의 input 상태 관리
  • 계좌 삭제 : 컴포넌트를 활용한 등록 계좌 리스트 출력, 등록 계좌 여부에 따라 조건부 렌더링 구현
• 개인 정보 수정: 비밀번호 재확인 기능 구현, React-Hook-form을 통한 코드 단순화 및 유효성 검사 구현

마이 페이지 (주문 내역 관리)	마이 페이지 (주문 내역 상세)

마이 페이지 (계좌 관리)	마이 페이지 (계좌 등록 모달)

마이 페이지 (계좌 확인/삭제)	마이 페이지 (비밀번호 재확인)

마이 페이지 (개인정보 수정)

인증 & 인가

• 회원가입 : React-Hook-Form을 이용한 비제어 컴포넌트 관리 및 유효성 검사 구현
• 로그인 : useState를 통해 로그인 기능 구현
• 로그인 인증 : App.tsx에서 useEffect를 이용한 모든 하위 페이지 로그인 인증 구현
• 로그아웃 : Redux를 사용해 Header 로그아웃 UI 구현

회원가입 페이지	로그인 페이지

검색창	로딩 스피너

관리자 페이지 (Admin)

• 전체 사용자 목록 조회
• 상품 관리
  • 전체 상품 목록 조회
  • 상품 등록 : Select 컴포넌트를 이용한 상품 태그 등록 구현
  • 상품 정보 수정 : Modal 통한 상품 정보 수정 및 기존 정보 확인 기능 구현
  • 상품 삭제
• 주문 내역 관리
  • 전체 거래 내역 조회, 거래 취소, 거래 확정

관리자 페이지 (사용자 관리)	관리자 페이지 (상품 관리)

관리자 페이지 (주문 내역 관리)

clone project

$ git clone [email protected]:ChoEun-Sang/sweethome.git

go to project

$ cd sweethome

install npm

$ npm install

start project

$ npm run dev