Front-End : 👑Luxury Brand Shop

No . M4 - Front-end Web Team-project

Project Assignment 1 - Fastcampus KDT-FE (2023)

🔗N4 보러가기!

• 사용자 페이지: https://moonlit-paprenjak-f17873.netlify.app/
• 관리자 페이지(미완성): https://idyllic-kheer-eeffb7.netlify.app/admin

1. test 계정:

• ID: [email protected]
• password: test1234

🐥 한정된 수량으로 특별한 쇼핑을 할 수있는 Shop!

• 면세점에서만 구매할 수 있었던 제품을 쉽게 구매하고 판매할 수 있는 서비스 홈페이지를 구현했어요!
• 짧은 프로젝트 기간, 적은 인원으로 개발에 집중해야 하므로, 디자인/기획 부분은라룸을 모티브 삼아 진행했어요!
• UI가 완성된 CSS 외부 라이브러리를 사용하지 않고 Styled-component를 사용하여 다른 컴포넌트의 동일한 ClassName을 사용 할 경우, 방해가 되지 않도록 이를 활용하였습니다.!

🐥 하루같이 느껴졌던 프로젝트 기간

2022.12.13(화) ~ 2023.01.01(월)

🐥 한분한분이 소중한 우리 팀 일원!

Front-End :👑✨이승윤님(팀장), ✨이은영님,✨곽혜지님 ,✨한수산님✨👑

🐥 Front-End 사용한 기술 스택!

🐥 우리 어떻게 일한거야?

• GitHub : 각 페이지마다 branch를 생성하여 관리했어요!

• Slack : 슬랙과 깃허브를 연동하여 상시 상황을 공유하도록 했어요!

• Notion 매일 공부하고 적용하여 PR을 날리고 해결과 오류가 있었던 부분을 기재하고, 일주일 2번 정도 회의를 하며 원활한 소통을 위해 하루 계획, 현재 진행 상황, 팀원 칭찬 등 여러 부분을 작성했어요!

🐥 열심히 만들어본 페이지! 그래서 누가했는가!

이승윤	한수산	곽혜지	이은영
관리자 페이지(제품 관리/로그인) 검색(Header 검색창, 검색 페이지) 제품목록 페이지(카테고리별) 보일러 플레이트 및 초기 라우팅 세팅 API 호출 관리	메인 페이지 결제 페이지 결제완료 페이지 계좌 페이지 Footer 컴포넌트 로딩 컴포넌트	회원가입 페이지 로그인 페이지 회원정보수정 페이지 헤더 컴포넌트	제품상세 페이지 장바구니 페이지 마이페이지 홈 페이지 주문내역 페이지 주문상세내역 페이지 주문취소내역 페이지

📱 작업 상세 내용

👤이승윤

[관리자 페이지]

• 제품 관리 페이지
  • 제품 추가, 수정, 삭제, 총 제품 테이블 확인
• 로그인(일부 사용자만 이용 가능)
• 전체 주문내역 관리(예정)

[사용자 페이지]

• 제품목록 페이지(카테고리별)
  • 페이지네이션, 브랜드/제품 종류별 필터링
• 검색
  • 검색창 : 쿼리를 통한 검색, 검색페이지와 헤더에 상시로 존재하는 검색 창 기능 구현
  • 검색페이지 : 검색어 자동 완성, 옵션별 검색, 검색 결과물 출력 및 페이지네이션 구현

[전체]

• 기본 환경 세팅(CRA, axios, hooks 등필요 패키지 설치 및 세팅), 보일러 플레이트 제작(라우팅 페이지 설정)
• API 호출 로직 작성 및 관리(API)
• 서버간의 통신 시, proxy 설정 → http-proxy-middleware 라이브러리 사용

👤이은영

[제품상세 페이지]

• 오른쪽 사이드바
  • 최상단 카테고리 : 분류별로 버튼 클릭시 해당 카테고리로 이동
  • 결제 및 장바구니 버튼 : 매진상품일 경우 두 개의 버튼 대신 SOLD OUT 출력
  • 장바구니 버튼
    • 클릭시 alert창 띄우기(확인 누르면 장바구니로 이동)
    • 세션스토리지로 상품 정보 전달
    • 같은 상품이 담기면 수량 증가
  • 결제 버튼
    • 세션스토리지로 단일 상품 결제 정보 전달

[장바구니 페이지]

• 최초 접속시, 세션스토리지 정보로 장바구니 내역 출력. 세션스토리지에 있는 결제 정보는 초기화
• 장바구니에 담은 것이 없을 경우, Oops! Your cart is empty. 문구 및 메인 페이지로 이동 버튼 출력
• 썸네일 사진 : 클릭시 상세페이지로 이동
• 수량 버튼
  • input 값이 2~9 일 때만 증가 및 감소 버튼 활성화
  • input 값이 2~9 가 아니면, 증가 및 감소 버튼 비활성화, input창 border 색 변경
  • input 입력 : 0이거나 null이면 값을 1로 임의변경, 숫자만 입력가능
  • 수량에 따라 제품별 총액과, order summery의 총액 변동
• 삭제 버튼 : 화면 및 세션스토리지에서 해당 상품 삭제
• 결제하기 버튼
  • 클릭시, 세션스토리지로 결제 정보 전달
  • 비회원일 경우, 버튼 클릭시 로그인창으로 이동. 회원일 경우에만 결제 페이지로 이동
• main 위에 Step 컴포넌트로 현재 주문단계 표시

[마이페이지 홈 페이지]

• 마이페이지 홈에서 접속할 개별 컴포넌트 생성후 outlet 사용하여 연결
• 탭버튼으로 주소변경, 파라미터별로 Title과 컴포넌트 출력
• 비밀번호 재확인
  • Bank Accounts와 My profile 탭버튼 클릭시에만, 비밀번호 재확인창 출력
• 작업 못한 것
  • 마이페이지에 있다가 회원이 로그아웃 했을 때, 메인페이지로 이동
  • 혹은 비회원이 임의로 주소로 접속하면, 로그인 창으로 연결

[주문내역(주문 조회/확정/취소) 페이지]

• 주문내역 없을 경우, 문구 및 메인페이지 이동 버튼 출력
• 제품 썸네일 클릭시, 제품상세페이지로 이동
• 거래 확정 및 취소
  • 거래확정 또는 취소여부 표시
  • 거래확정 및 취소를 둘 다 선택 안 했을 경우 구매확정 취소요청 버튼 두개 출력
  • 구매확정 및 취소요청 버튼 클릭시, alert창 출력
• 주문상세내역 보기 버튼
  • 클릭시 해당 상품의 상세 내역으로 이동

[주문상세내역 페이지]

• 진행상황에 따라 배송중/배송완료/취소완료로 표기

[주문취소내역 페이지]

• 주문취소내역 없을 경우, 문구 및 메인페이지 이동 버튼 출력
• 작업 못한 것
  • 주문내역 상세 버튼 제거

👤한수산

[메인 페이지]

• swiper 활용하여 메인 배너 및 컨텐츠 생성
• swiper 의 옵션을 활용하여 각 배너마다 다른 컨텐츠가 나타나게 함으로서 다른 제품들을 미리 볼 수 있도록 함

[결제 페이지]

• 사용자 계좌를 조회하여 등록된 계좌가 없다면 등록 먼저 할 수 있도록 결제 페이지 내에서 계좌 등록 컴포넌트를 제공
• 장바구니 , 구매 버튼을 통해 세팅된 세션스토리지를 활용하여 제품을 노출 수량을 참고하여 새로운 배열로 생성, 구매 요청할 수 있도록 구현
• 다음 API를 활용하여 주소 검색 기능 추가
• 구매시 입력 폼에 값이 없다면 포커스를 주어 입력 할 수 있도록 유도
• 각 폼에 일정한 길이의 값만 들어갈 수 있도록 slice메서드 활용하여 구현

[결제완료 페이지]

• 결제 완료시 이동하는 페이지로 메인, 주문확인 링크를 제공

[마이페이지 계좌페이지(계좌 조회/연결/해지)]

• 계좌 조회

  • 전체 계좌를 조회하여 전체 잔액 정보 제공
  • 선택 후 계좌별 잔액 조회 제공

• 계좌 해지

  • 계좌 선택 조회 화면에서 계좌 해지 버튼 제공
  • 약관 동의 체크 버튼 클릭 후 계좌 새로운 계좌 해지 버튼 누를 경우 계좌 해지 기능 구현, 약관 미체크시 메시지 제공

• 계좌 등록

  • 계좌 등록되어있는 계좌를 제외한 은행 목록 선택창 제공
  • 각 은행에 맞는 계좌 번호 입력 폼 제공 그에 맞는 길이의 값만 들어갈 수 있도록 추가 기능 구현
  • 잘못된 값을 입력 후 등록시 안내문구 제공

[로딩 컴포넌트]

• 텍스트만 변경하여 활용할 수 있도록 props를 받는 형태로 로딩 컴포넌트 구현

👤곽혜지

📱 피드백 받고 싶은 부분

👤이승윤

• useCallback를 사용하여 함수를 재활용하고자 했으나, 어떤 부분에서 적용해야 할지 잘 감이 오질 않았습니다. 보통 어느 경우에 useCallBack을 사용하는지 궁금합니다.
• 앱 상에 검색 창을 총 두 개를 사용하게 되었습니다.(헤더 부분에서 상시적으로 받는 검색, 검색 페이지 전용 검색 바) 활용 부분에서는 서로 다른 기능을 제공하지만, 같은 컴포넌트에서 구성을 하게 되었습니다. (하나는 검색어 자동 완성, 하나는 쿼리 값에 대한 검색 결과 출력) 그렇기 때문에 삼항 연산자로 나누어 렌더를 구분하게 되었습니다. 이렇게 될 경우, 차라리 컴포넌트를 분리하는 것이 더 좋을지 의견 주시면 감사하겠습니다!
• 전역 상태 관리 라이브러리도 사용하지 않고, 시간에 쫓기어 기능 완성을 주요 목표로 구현하다 보니 각 페이지 별로 스테이트를 통합, API 호출에 대한 효율성 같은 관리를 전혀 고려하지 못한 것 같습니다.. 추후 리펙토링 시에 꼭 최적화를 이루고 싶습니다.

👤이은영

• 마이페이지 홈 Outlet 라우팅

  • 마이페이지 홈에서 개별 컴포넌트로 진입하는 것은 Outlet으로 작업했습니다. 올바르게 Outlet을 사용한 건지 궁금합니다.
  • 특히 비밀번호 재확인은 Bank Accounts와 My profile일 때만 뜨는데, nav의 탭 버튼 클릭으로 비밀번호 재확인 출력 여부가 결정됩니다. 따라서 Bank Accounts와 My profile의 주소로 직접 접속하면 비밀번호 재확인 없이 접속이 됩니다.
  • 탭 버튼에서 비밀번호 재확인 출력 여부를 결정하는 것이 아니라, Bank Accounts와 My profile 컴포넌트 내부에서 비밀번호 재확인 출력 여부를 결정하는 것이 바람직할까요? 혹은 더 좋은 다른 방법이 있을까요?

• 장바구니 페이지_Step 컴포넌트 오타로 인한 out of memory 에러

  • 질문(아래 상황의 이미지 참고 부탁드립니다.)
    • 장바구니 페이지에 주문 단계를 나타내는 Step 컴포넌트를 추가하니, 브라우저에 위와 같이 out of memory 에러가 떴습니다. 추후에 원인이 Step 컴포넌트 내에서 컴포넌트 이름의 오타에 있다는 걸 알게 돼 해결했습니다.
    • 컴포넌트 이름 오타가 왜 out of memory 에러로 이어지는지 알 수 있을까요?
  • 상황(브라우저 출력 형태)

👤한수산

• 아쉬웠던 점
  
  • 가상 DOM을 활용하여 개발하는 React의 장점을 잘 살리지 못한 점
  • 새롭게 랜더 해야 할 부분과 아닌 부분을 나누어 상태를 관리 해 주지 못한 점
  • 오류 핸들링이 구체적으로 되어있지 않아 오류에 맞는 정확한 메세지를 전달하지 못한 점
  • api 호출이 많이, 자주 이루어지는데 그 부분을 최적화하지 못한 점
• 피드백 받고 싶은 점
  • 결제 페이지 입력 폼 또는 다른 입력 폼에서 입력되어 있지 않거나 잘못된 값이 입력된 경우 예외 처리가 제대로 이루어지지 않았습니다. 이 작업을 해줄 시 참고할 내용 혹은 개인적인 피드백 부탁드립니다.
  • 불필요한 api 호출이 자주 이루어지고 있습니다 효과적인 해결 방안을 알고 싶습니다.
  • 가상 dom을 쓰는 react 환경에서 DOM API 사용을 지양할 수 있는 방법이 어떤 것이 있을지 궁금합니다.

👤곽혜지