이커머스 플랫폼 프로젝트

• 타 이커머스 플랫폼을 모티브하여 진행된 프로젝트
  GIT <--- 햣!

구현 기능 (Front-end & Back-end)

	구현 기능 시현	설명	담당 개발자
MainPage		Carousel like 기능 구현	Fron-End 이다영 Back-End 심채원
Navigation category		Category에 따른 page 전환	Fron-End 정현석 Back-End 심채원
Login		플랫폼 일반 login 기능	Fron-End 정현석 Back-End 심채원
KakaoLogin		Kakao API 를 이용하여 Social Login 구현	Fron-End 정현석 Back-End 심채원
GoogleLogin		Google Oauth 를 이용하여 Social Login 구현	Fron-End 정현석 Back-End 심채원
Navigation subcategory		SubCategory에 따른 page 전환	Fron-End 정현석 Back-End 심채원
ProductListPage and Pagination		ProductList Pagination	Front-End 이다영 Back-End 신인혁
ProductListPage Like		ProductList like 기능구현	Front-End 이다영 Back-End 신인혁
ProductListPage Search		Search 기능에 따른 ProductList 전환	Front-End 정현석 Back-End 신인혁
ProductListPage Filter		ProductList Filtering 기능 구현	Front-End 이다영 Back-End 신인혁
ProductDetail		ProductDetail modal창 상품 더보기 / 접기 button 기능 구현	Front-End 이다영 Back-End 신인혁
ProductDetail in Cart		ProductDetail 페이지 에서 구매하기 버튼 기능 구현	Front-End 이다영 Back-End 신인혁
ProductDetail to order		ProductDetailPage에서 구매 기능 구현	Front-End 정현석 Back-End 신인혁
Cart in productItem to delete		CartPage에서 item 단일,전체 삭제 기능 구현	Front-End 정현석 Back-End 신인혁
Cart to Like		CartPage 좋아요 기능 구현	Front-End 정현석 Back-End 신인혁
MyPage		MyPage 조회 기능 구현	Front-End 정현석 Back-End 심채원
MyPage Cancel Order		MyPage Order 삭제 기능 구현	Front-End 정현석 Back-End 심채원
Mypaeg WishList Order If optionId is null		WishList 상품에 옵션을 정하지 않았을 경우에 주문하기 기능	Front-End 정현석 Back-End 심채원
Mypaeg WishList Order If optionId is not null		WishList 상품에 옵션을 정했을 경우에 주문하기 기능	Front-End 정현석 Back-End 심채원
ProductDetail Item In Order		ProductDetailPage에서 order 기능구현	Fron-End 정현석 Back-End 심채원
Cart in productItem to single Order		CartPage에서 단일 order 기능구현	Fron-End 정현석 Back-End 심채원
Cart in all productItem to order		CartPage에서 전체 order 기능구현	Fron-End 정현석 Back-End 심채원
Cart in Choice productItem to order		장바구니에서 상품선택해서 구매하기 기능 구현	Fron-End 정현석 Back-End 신인혁
LaunchingCalendar		LaunchingCalendarList and detailPage 조회 기능 구현	Fron-End 정현석 Back-End 신인혁
LookBook		LookBookList and detail Page 조회 기능 구현	Front-End 정현석 Back-End 신인혁
EventPage		EventList and detailPage 조회 기능 구현	Front-End 이다영 Back-End 신인혁
sign-up		sign-up 기능 구현	Front-End 정현석 Back-End 심채원
mypage-board management		마이페이지에서의 게시판 관리 기능 구현	Front-End 정현석 Back-End 심채원
user-info-modify		회원정보 수정 기능 구현	Front-End 정현석 Back-End 심채원
mypage-orderList option-filtering		구매내역 리스트 옵션 필터링	Front-End 정현석 Back-End 심채원
mypage-date-filtering		구매내역 날짜별 필터링 기능	Front-End 정현석 Back-End 심채원
mypage-orderList delete & cancel		구매내역 상품 취소 및 환불 기능	Front-End 정현석 Back-End 심채원

---

내가 구현한 기능

[ Sign-In ]

> Normal Login

• 일반 로그인 폼 구현 및 회원가입 기능 구현

> Kakao Login

• Kakao API 를 통해 리다이렉트 코드를 받아와 카카오 토큰을 받고, 백엔드 와의 통
  신을 통해서 카카오 토큰을 전달해 주고 구현한 플랫폼의 토큰을 받아오도록 Kakao
  Login 구현

> Google Login

• Google Auth API 를 통해 구글 토큰을 받고 받아온 토큰을 백엔드 개발자에게 전달
  후 플랫폼 토큰을 받아오도록 Google Login 구현

[ Sign-Up ]

• 소셜 로그인의 경우 처음 로그인을 하였을때 자동적으로 회원가입이 되도록 구성 되
  어있으며, 일반적인 로그인시에는 회원가입을 통해서 가입하도록 회원가입 폼을 구
  현 하였으며, 프로필 이미지 등록이 가능하도록 구성 및 구현

[ Mypage ]

• 사용자가 구매한 상품들의 현재 상태들을 볼수 있으며, 사용자의 회원가입시 작성하
  였던 정보 수정을 할 수 있고, 상품의 좋아요 버튼 클릭시 위시리스트로 등록 되는
  페이지들이 모여있는 페이지 구현

• Mypage에서의 현재 상태는 URL을 통해서 볼 수 있도록 하였으며, 변경된 URL 의 값
  에 따라서 각각의 알맞는 값이 쿼리스트링으로 전달되어 받아오는 데이터가 변경되
  도록 구현하였으며, 위시리스트의 상품은 사용자가 사이즈와 컬러 등을 선택하지 않
  고 장바구니 및 구매하기 버튼 클릭시 상세 부품들을 선택 할 수 있도록 구현

[Cart]

• Cart 부분 사용자가 장바구니에 등록한 상품들이 생성되도록 Rest API로 데이터를받
  아 화면에 받아오며, 선택한 상품 또는 전체 상품 구매버튼 을 통해서 구매하기
  (order) 페이지로 이동되는 모션 구현

[Order]

• Order 페이지로 넘어온 상품에 대해서 포인트로 구매할 수 있도록 구현

[LaunchingCalendar]

• List 와 Detail로 구성된 런칭켈린더 페이지 이며, Detail페이지에는 댓글창과 런칭
  켈린더에 대한 디테일 요소들을 구현

---

후기

• 개인적으로 해당 프로젝트를하면서 정말 배운게 많다고 생각이 든다
  처음으로 Next를 사용하여 프로젝트를 진행하는 프로젝트였지만 React의 확장판과 같은 프레임워크 답게 사용하는데는 무리가 없었다.
• 또한 타입스트립트를 이용해서 프로젝트를 진행하였는데 서비스가 커지면서 점점 벅참을 느꼇지만 다행이 any를 남발하지 않고 끝낼 수 있어서 다행이라고 생각이든다.
• 마지막으로 솔직히 프로젝트를 포트폴리오를 위해서 하였지만 클론으로 한 프로젝트의 한계가 명확하다고 생각한다.
  다음 프로젝트는 기획 단계부터 내가 생각한 사이트 다운 사이트를 만들어볼 계획이다. (파이썬과 자바도 배워서 좀더 다양한 프로젝트를 해볼예정)

써놓고 보니 후기라고 할것도 없었지만 이 글을 쓰면서 코딩을 배운지 이제 6개월(프젝기준)인데 이만큼 발전했구나를 알 수있었기에 나름 만족한다.

-끝-