-
Wecode 41기 1st Project
-
솔로라이프를 즐기는 미니멀리즘 30대 남성 고객을 위한 한국 가구 브랜드 IWEA
-
개발기간 : 2022/12/30 ~ 2023/01/13
-
개발인원 : Front-End 4명, Back-End 2명
-
Front-End: 김성재(ProductManger), 김철호, 임가림, 김우성
-
Back-End : 김가은(ProjectManager), 심예윤
HomePage Page, ProductsPage, Pagination
LogInPage, SignUpPage, CartsPage, Header
ProductDetailPage, PaymentPage, SideModal
Footer 레이아웃, CartPage 레이아웃
DB 모델링, signup, signin, products, carts, orders, pagination, error handling
DB작업, CSV작업, userInfo, products, orders
-
Front-End :
-
Back-End :
-
common :
-
협업툴 :
- Home Layout (Flexbox, Grid 사용)
- Prouct Page / Login Page / SignUp Page로 이동할 수 있게 useNavigate사용
- 장바구니 관련 내용 넣기
상수데이터를 활용한 레이아웃 구현
- 유효성 검사, 유효성 여부에 의한 레이아웃 변화
-
상품 데이터 불러오기
-
캐러셀 기능을 담은 카테고리 , 그림을 눌렀을 때 정렬상품 재 렌더링
-
필터조건에따라서 버튼을 눌렀을 때 정렬상품 재 렌더링
-
페이지네이션 버튼을 눌렀을 때 12장씩 더 불러오기
-
장바구니 버튼 눌렀을 때 Carts DB에 전송하기
-
특정 상품 데이터 불러오기
-
캐러셀형태로 상품 추천 섹션 불러오기
-
장바구니로 데이터 전송하기
-
상품 수량 변경, 삭제 기능
-
품목 별 가격을 모두 더한 총 가격 표시
-
결제하기 버튼 누르면 모달창으로 포인트차감
- 구매한 내역 데이터로 불러서 렌더링하기
- 회원가입: 정규표현식을 사용하여 비밀번호의 보안성을 높임. Bcypt를 사용하여 비밀번호를 암호화하여 DB에 저장
- 로그인: 암호화되어 저장된 비밀번호를 복호화하여 유저가 입력한 비밀번호와 DB 내 저장된 비밀번호를 비교하고, 로그인 성공 시 JWT를 발급
- 유저 정보 불러오기: JWT 토큰을 사용하여 해당 유저의 이름과 보유하고 있는 포인트를 조회
- 전체 상품 불러오기: OFFSET, LIMIT을 사용하여 Pagination을 구현하였고, 한 메소드 내에서 Filtering과 Ordering이 동시에 구현.
- 상세 페이지(한 상품 불러오기): 한 상품의 세부 정보들을 볼 수 있도록 함
모든 API에서 JWT 사용하여 유저 확인
- 장바구니 목록: 해당 유저의 장바구니 목록을 조회.
- 장바구니 넣기: UPSERT 구문을 사용하여 한 쿼리 내에서 INSERT와 UPDATE가 동시에 이루어지도록 한 메소드 내에서 구현.
- 수량 변경: 장바구니 내 상품의 수량이 변경되는 것이 DB에 바로 UPDATE 될 수 있도록 구현.
- 장바구니 빼기: 한 개 혹은 한 개 이상의 상품을 장바구니에서 삭제하는 것을 한 메소드에서 구현.
모든 API에서 JWT 사용하여 유저 확인
- 결제 완료: 주문이 이루어진 후의 쿼리들을 트랜잭션을 사용하여 DB 내 데이터의 CRUD가 부분적으로 실행되거나 중단되지 않도록 안정성을 보장.
- 결제 취소: 결제 취소 후 환불까지의 쿼리를 트랜잭션을 사용하여 DB 데이터의 안정성을 보장.
- 주문 목록: 해당 유저의 모든 주문 목록을 조회함.