일상 속 물건이나, 사치품, 자동차까지 실시간 소통 경매를 통해 원하는 가격으로 구매할 수 있는 서비스

Github

기간

인원

사용기술

https://github.com/mju-Sharper/under-draw

2023.03 - 2023.06 (3개월)

FE 2명, BE 2명

• Typescript, React, styled-components
• Recoil, Socket.io

역할

✔️ 공통 컴포넌트 스타일링 및 UI 퍼블리싱

• 헤더

  모든 페이지에서 보이는 헤더를 공통 컴포넌트로 분리하여 Layout의 요소로 포함

  서버에서 넘겨주는 토큰을 헤더에서 검증 후, 메뉴 리스트가 변경되며 로그아웃 시 쿠키에 저장된 토큰을 삭제시켜 로그아웃 되도록 했습니다.

• 경매품 컨테이너

  메인페이지와 경매방에서 동시에 쓰이는 컴포넌트로, 새로 정의할 필요 없이 쉽게 가져다 쓸 수 있습니다.

• 메인페이지 퍼블리싱

✔️ 메인 페이지 기능 제작

• 페이지네이션

  데이터의 용량을 관리하기 위해 페이지네이션을 결정하였으며, 서버에서 page 쿼리를 이용하여 각 페이지마다 보여주는 경매품이 달랐기에 page 쿼리와 ItemCount를 이용하여 페이지네이션을 구현했습니다.

  

• 페이지네이션 구현 과정

  • 현재 페이지가 담겨있는 recoil atom 값 선언
  • 한 페이지당 3개씩 보일 때, 몇 개의 페이지가 필요한 지 계산 (전체 경매품의 개수 / 3)
  • 이전, 다음 버튼을 누를 시 recoil atom 값이 변하며, 경매품을 불러오는 API query도 변경되도록 구현

✔️ 로그인, 회원가입

정규식 조건을 모두 통과하는 정보만이 authentication API에 접근 가능하며,

만약 API 상 오류가 있다면, catch와 오류 토스트창을 통해 유저에게 알리도록 했습니다.

✔️ 실시간 입장∙퇴장 알림 및 채팅 기능

[입장∙퇴장]

소켓이 적용되는 컴포넌트 파일 외부에 빈 값이 들어있는 소켓을 선언합니다.

useEffect를 이용해 해당 페이지에 첫 입장 시 서버에서 전달하는 각 아이디 별 소켓 구분값, namespace에 접속해있는 유저 리스트를 받아왔습니다.

퇴장은 아래 두 동작을 통해 이루어졌습니다.

1. 웹 브라우저 뒤로가기

   useEffect(() => {
   ...useEffect 내부 ...
   	window.addEventListener('popstate', handlePopstate);
   }, [])
   
   const handlePopstate = () => {
       if (socketInstances[id]) {
         socketInstances[id].disconnect();
         delete socketInstances[id];
       }
   };
   

   웹 브라우저 뒤로 가기로 퇴장하기는 popstate 이벤트를 이용하여 구현했습니다.

2. 헤더에 있는 ‘사자마켓’ 로고 클릭 시

   헤더의 로고를 클릭했을 때 소켓을 disconnect 하여 연결을 끊는 형태로 구현했습니다.

   이때 경매방과 같은 소켓을 공유하지 않으면 disconnect가 제대로 이루어지지 않았기에 경매방 컴포넌트에만 예외적으로 헤더를 따로 불러와 같은 소켓값을 공유할 수 있도록 수정했습니다.