ellaseon / openmarket

호두마켓

OPEN MARKET 프로젝트

• 🔗배포URL

• 🔒서비스 이용을 위한 계정
  
  구매 회원 계정
  id : test9512
  pw : 0525shinee@
  

  

목차

1. 프로젝트 소개
2. 개발 환경
3. UI

1. 프로젝트 소개

🔸 이 프로젝트는 판매자들이 자유롭게 상품을 업로드하고, 판매자들과 구매자들이 자유롭게 상품을 구매할 수 있는 오픈마켓 입니다.
(판매자 상품 등록 페이지는 추후 기능 구현 예정입니다)

2. 개발환경

1) 개발기간 : 2023.3.13 ~ 진행중

2) 기술

3) 설치 및 실행 가이드

Install

npm i

Start

npm start

3. UI

1. 메인 페이지

2. 로그인

3. 회원가입

4. 장바구니

5. 상품 검색

openmarket's Issues

<feat> : 로그인 페이지 스타일

🔥 Description

• 

🔥To do

• 로그인 페이지 스타일 구현

🔥 History

• 2023.04.09 : 로그인 페이지 스타일 구현

<feat> : cart 페이지 기능 구현

🔥 Description

• 장바구니 목록보기 Get API 를 통해 장바구니에 담겨진 상품을 불러온다.
• 상품 상세페이지와 마찬가지로 상품의 재고 수량을 초과하면 + 버튼은 비활성화됩니다.
• input checkbox가 선택된 정보만 총 상품금액과 할인, 배송비가 적용되어 총 결제할 가격이 나타나야 합니다.
• 상품의 삭제 버튼을 클릭할 시 상품 삭제를 재확인하는 모달 창이 중앙에 나타나야 합니다.
• 상품 삭제를 재확인하는 모달의 확인 버튼을 클릭하면 상품이 삭제되어야 합니다. (장바구니 개별 삭제 API 통신)
• 이미 장바구니에 넣은 제품을 다시 넣는 경우, 이전 수량과 합쳐집니다.
  • 이미 넣은 제품의 수량 2개, 다시 넣은 제품의 수량 3개 ⇒ 장바구니에 들어간 상품의 수량은 총 5개)
  • 합쳐진 수량이 제품의 재고 수량 보다 많을 경우, 재고 수량이 초과 되었다는 모달창이 나타납니다.

<feat> : 판매자센터 페이지 스타일링

🔥 Description

🔥To do

• 판매중인 상품 UI 스타일링 구현
• 판매자 센터 상품등록 UI 스타일링 구현

<feat> : 판매자 회원가입 스타일 구현

🔥 Description

• 

🔥To do

• 판매자 회원가입 스타일 구현

🔥 History

• 2023.03.24: 회원가입 스타일 구현
• 2023.03.27 : 판매자 회원가입 스타일 구현 1차 완성

<feat> : 상품 상세 페이지 스타일 구현하기

🔥 Description

• 

<feat> : 로그인 기능

🔥 Description

• 아이디나 비밀번호가 일치하지 않거나, 아이디나 비밀번호를 입력하지 않은 채 로그인 버튼을 누르면 경고 문구가 나타납니다.
• 입력 창 아래에 경고창이 나타나면 로그인 버튼을 눌러도 로그인 되지 않습니다.
• 입력 창에 입력이 안된 부분이 존재한 채로 로그인 버튼을 누르면 입력되지 않은 입력 창에 focus 이벤트가 작동하고 로그인은 되지 않습니다.
• 아이디나 비밀번호가 일치하지 않는다면, 비밀번호 입력창에 focus이벤트가 발생하고 빈칸이 됩니다.
• 로그인이 성공할 시, 로그인하기 이전 페이지로 이동합니다.
  

<feat> : 상품 등록 기능 구현

🔥 Description

• 
  

🔥To do

• 상품대시보드
• 상품 삭제
• 상품 등록
• 상품 수정
• 상품 불러오기

<feat> : input 공통 컴포넌트 제작

🔥 Description

• 

🔥To do

• input 공통 컴포넌트 제작

🔥 History

• 2023.03.16 : input 공통 컴포넌트 제작
• 2023.03.24 : input 공통 컴포넌트 1차 완성

<feat> : 상품 목록 페이지 스타일 구현

🔥 Description

• 

🔥To do

• 상품 목록 페이지 페이지 스타일 구현

🔥 History

• 2023.04.13 : 상품 목록 페이지 스타일 구현

<feat> : 상품 상세 페이지 기능 구현

🔥 Description

• HomePage 에서 상품을 클릭했을 시, productId에 해당하는 상품을 불러오고 해당 상품 정보를 보여준다.(상품 디테일 api 명세 사용)
• • 버튼과 - 버튼을 통해서 수량 변경이 가능하다.
• 수량을 변경할 때 현재 상품의 재고 수량을 초과하면 + 버튼이 비활성화 된다.
• 선택된 옵션에 맞춰서 가격을 계산하고, 총 가격이 나타나야 합니다.
• 장바구니 버튼을 눌렀을 시, 장바구니 페이지로 이동합니다. (상품 상세 페이지에서 선택한 제품은 장바구니에 추가됩니다.)

<refact> : 계층별 폴더구조를 지역성 원칙 폴더구조로 변경하기

🔥 Description

• 현재 폴더구조는 코드가 속하는 계층별로 분리되어져있다. (ex: api 코드일경우 API 폴더에, 유틸리티 함수는 util 에)
  이러한 폴더구조의 단점은

1. 어떤 기능과 관련된 구현이 코드 베이스 전체에 흩어져 있어서 특정 작업의 영향 범위가 특정 폴더 수준으로 제한되어 있지 않고
   코드베이스 전체로 퍼진다.
   따라서, 간단한 기능 추가에도 프로젝트의 여러 폴더를 광범위하게 건드리는 작업이 필요하다.
   컴포넌트가 유틸리티 함수를 참조할 때마다 모든 의존성 경로가 루트 레벨까지 거슬러 올라갔다가 다시 다른 디렉터리를 파고 들어가는 형태로 길고 복잡해진다.
   (import { applyDiscount } from ‘../../../my-project/utils/applyDiscount’;)
2. 구현이 한 군데 모여있지 않아, 특정 기능을 모듈로 분리하는 작업이 어려워진다.

• 따라서 지역성의 원칙을 고려한 폴더구조로 리팩토링 하고자 한다.

지역성 원칙 : 프로젝트의 내부 구조가 지역성이 발생하는 단위, 즉 기능 별로 묶이도록 함

위 사진과 같은 형식으로
최상위 폴더는 기능별로 나누고 기능별 폴더 안에서는 계층별로 코드를 분리하자.

참고 링크 : https://ahnheejong.name/articles/package-structure-with-the-principal-of-locality-in-mind/

<refactor> : API 통신 react-query 로 리팩토링

🔥 Description

• 기존에 비동기 통신을 Redux-toolkit 의 createAsyncThunk 로 관리하느라 서버 데이터를 전부 전역 상태로 관리했었음
• react-query를 도입하여 비동기 통신과 관련된 서버 데이터를 일임하고, Client 전반에 전역으로 관리되는 상태(ex: 인증 정보 관리 , 모달 등) 여러 UI 상태관리는 전역으로 관리할 예정

🔥To do

• 로그인, 로그아웃
• 회원가입
• 장바구니
• 상품 보기

<feat> : 홈페이지 기능 구현

🔥 Description

1. 서버에서 상품 불러와서 홈 메인 화면에 뿌려주기 (일반 구매자/판매자)
2. navbar 기능 구현
   [구매자 일 때]

• 로그인 완료 후 토큰이 있을 시에 user 아이콘 마이페이지로 바뀜
• 마이페이지 버튼을 클릭하면 마이페이지와 로그아웃 모달이 나타남
• 마이페이지 버튼이 있는 모달을 클릭하면 마이페이지로 이동
• 로그아웃 버튼이 있는 모달을 클릭하면 로그아웃
  [판매자 일 때]
• 로그인 후 토큰이 있을 시 마이페이지 user 아이콘 / 판매자 센터 버튼 나타남
• 판매자 버튼 누를 시에 판매자페이지로 이동

<feat> : 판매자 회원가입 유효성 검사 및 오류메세지 구현

🔥 Description

• 상단 input-box가 채워지지 않은 상태에서 하단 input-box에 입력하는 경우 상단 input-box에 ‘필수 정보입니다’라는 오류 메시지를 띄우기
• 모든 input-box 작성 완료, 유효성 검사 통과, 체크박스 체크가 모두 완료되었을 경우에 가입하기 버튼이 활성화

🔥To do

• 오류 메세지
• 가입하기 버튼 활성화

<feat> : 장바구니 페이지 스타일 구현

🔥 Description

• 

<feat> : 공통 컴포넌트 구현

🔥 Description

• 버튼 공통 컴포넌트 구현
  

🔥To do

• 버튼 공통 컴포넌트 구현

🔥 History

• 2023.03.14 : 버튼 공통 컴포넌트 구현

<refact> : 회원가입 페이지 코드 리팩토링

🔥 Description

• 회원가입 페이지 코드 리팩토링

<style> : 반응형 리팩토링

🔥 Description

• 반응형 리팩토링

🔥To do

• 홈페이지
• 장바구니
• 로그인
• 회원가입

<refact> : 전역상태에 저장한 access token 을 로그인 여부로만 판별할 수 있게 수정

🔥 Description

• 기존의 코드는 access token 을 전역상태에 그대로 저장하고 있다.
• access_token 을 전역상태에 저장하는 것이 아닌, 로그인 되었는지 여부만 전역상태로 저장하는게 보안에 좋다
• JWT 토큰은 HttpOnly 쿠키에 저장하는 것이 좋다(쿠키는 JavaScript로 접근할 수 없기 때문에 XSS 공격의 위험에서 안전하다)
• 이 api는 제공된 api 이기 때문에 서버에서 HttpOnly 설정을 못하니 그냥 쿠키에만 저장하고, 로그인 되었는지 여부만 전역상태에 저장하도록 하자

아래 코드 참고해서 수정해보자

<refact> : 회원가입 코드 리팩토링

🔥 Description

• 회원가입 form 에서 버그 발생
• 기존에는 기능 작동 모두 완료
  
  되었으나, 다른 페이지 기능 구현 모두 완료 후 테스트해보니 기능이 되지않음
• 되지 않는 기능

1. 구매 회원가입, 판매회원가입 토글 버튼
2. 유효성 검사 미 통과시 or 통과시 오류/성공메세지 출력
3. 모든 input 값 채우고 가입하기 버튼 누를 시 미동작

<feat> : Router 셋팅

🔥 Description

• Router 셋팅

🔥To do

• Router 셋팅

🔥 History

• 2023.03.24 : Router 셋팅

<refactor> : 이미지 최적화

🔥 Description

상품 디테일을 불러오는 곳에서 이미지를 보면 고유 크기는 1984px1984px 인데 렌더링된 크기는 378px378 로
차이가 난다.
그리고 라이트하우스 성능 체크에서도 이미지 크기를 적절하게 , 차세대 형식을 사용해서 이미지 제공하라고 나와있다.

렌더링된 크기: | 378 × 378 px
렌더링된 가로세로 비율: | 1∶1
고유 크기: | 1984 × 1984 px
기본 가로세로 비율: | 1∶1
파일 크기: | 1.4 MB
현재 소스: | https://openmarket.weniv.co.kr/media/products/2023/08/24/%EC%B9%AD%EB%94%B0%EC%98%A4.png

🔥To do

• 백엔드와 협업할 수 없는 외부 API 에서 이미지 url 을 받아오는 것이기 때문에 외부 API 에서 받아온 이미지를 최적화 할 수있는 방법을 찾아야한다.
• cloudinary 이미지 cdn 사용하기