구매자가 제안하는 중고거래 플랫폼! Offer 프로젝트 회고 (feat. React + Next.js)

• Demo
• Github - Frontend
• GitHub - Backend

💸 기획 배경

국내 활발하게 운영되고 있는 중고거래 플랫폼이 많습니다.
하지만 많은 사람들이 자신이 판매하고 싶은 물품에 대한 적절한 가격을 모른 채, 상품을 등록하는 경우가 많습니다.

이러한 경우, 너무 터무니없이 저렴한 가격에 거래되 손해를 보거나,
시세를 정확히 모른 채 비싼 가격에 올려 상품의 인기도가 없어 거래가 성사되기 어려운 경험을 종종겪었습니다.

이러한 문제점을 인지하고 보다 거래가 활발하게 이루어 질 수 있는 방안을 모색했고,
그 결과 ‘역발상’적인 접근방식을 통해 ”구매자가 가격을 제안하는 플랫폼 개발”을 아이디어로 도출하게 되었습니다.

현존하는 다양한 중고거래 플랫폼에서도 ‘가격제안’ 기능이 있지만
메인 기능은 가격제안이 아니다 보니, 가격제안을 통해 거래하는 이용자가 극히 드물다는 문제점이 있습니다.

'가격제안’기능을 주요 기능으로하는 중고거래 플랫폼인 “offer” 플랫폼을 개발하게 되었습니다.

💸 타겟 유저

물건을 판매하고 구매하고 싶어하는 누구나

💸 서비스 개요

• Offer 플랫폼에서 판매자는 판매할 물품을 등록하고 구매 희망자들로 부터 가격제안을 받을 수 있습니다.
• 판매자는 물품 등록시 최소 거래 희망가를 등록할 수 있으며 필수로 요구되는 사항은 아닙니다.
• 구매를 희망하는 구매 희망자는 판매자가 올린 게시글에 가격을 제안할 수 있습니다.
• 게시글 당 최대 2회까지 가격제안이 가능하며 판매자는 제안된 가격을 보고 희망하는 가격을 선택해 거래할 수 있습니다.
• 판매자의 가격 선택은 최대 1회로 제안되며 가격 선택 취소는 불가합니다.
• 판매자와 구매자 간 소통을 위해 쪽지 기능을 추가하고 거래후기 기능을 통해 플랫폼 이용자들은 서로간의 신뢰도를 파악할 수 있습니다.

💸 서비스 시나리오

• 판매자가 판매글을 업로드
• 구매자는 판매글 제목 또는 필터 조건을 통해 게시글을 검색
• 구매자는 구매를 희망하는 상품 게시글에 가격을 제안
• 판매자는 가격 제안자에게 쪽지 전송
• 판매자-구매자간 쪽지 대화를 통해 거래 발생
• 상품 판매 완료 후, 상호간 거래 후기 작성

💸 와이어프레임, 디자인

• Offer Figma 보러가기

💸 프로젝트 개요

• 기간
  • 구현 기간 : 2021.11.26 ~ 2021.12.23
  • 리팩토리 기간 : 2021.01.15 ~
• 인원
  • 프론트엔드 3인
    • 손수림 (Sson)
    • Joe
    • Sinby
  • 백엔드 3인
    • AwesomeO
    • Crush
    • Hoonys
• 담당 역할
  • 서비스 디자인
  • 프로젝트 구현
    • 베이스 컴포넌트 구현 (Avatar, IconButton, Dialog)
    • UI 컴포넌트 구현 (로그인, 회원가입, 회원 정보 수정)
    • api request 구조 설정
    • 검색 결과 화면, 쪽지 화면 마크업
    • auth, axios, loading context 구현
    • 마이페이지 기능 구현
    • 서비스 배포
• 목표 : React.js, Next.js에 대한 이해도 향상 및 협업 경험
• 내용 : React.js를 활용한 중고 거래 플랫폼

💸 기술 스택

• 커뮤니케이션
  • Github Project
  • Github Wiki
  • Discord
  • Slack
  • Notion
• 디자인
  • Figma
• 개발
  • React.js
  • Next.js
  • Storybook
  • Emotion
  • ESLint
  • Git
  • formik
  • Axios
  • React-spinners
  • React-bus

💸 주요 기능 및 페이지 소개

메인 페이지

주요 기능

• 회원가입
• 이메일 로그인
• 카카오 로그인
• 이메일 중복 확인
• 상품 검색

화면!

검색 결과 페이지

주요 기능

• 상품 검색
• 카테고리로 검색
• 거래방식으로 검색
• 가격으로 검색

화면

글 쓰기, 수정 페이지

주요 기능

• 게시글 작성
• 게시글 수정
• 이미지 url 변환

화면

게시글 상세 페이지

주요 기능

• 게시글 찜하기
• 가격 제안
• 내 게시글 삭제
• 가격 채택
• 상품 상태 변경
• 쪽지 전송

화면

사용자 프로필 페이지

주요 기능

• 개인정보 수정
• 개인정보 조회
• 사용자가 찜한 게시글 조회
• 내가 가격 제안한 게시글 조회
• 내가 구매한 게시글 조회
• 거래후기 조회
• 거래 후기 남기기

화면

쪽지 페이지

주요 기능

• 쪽지 전송
• 전체 쪽지내역 조회
• 사용자와의 쪽지내역 조회

화면

😊 Good (좋았던 점)

• 이슈와 PR로 진행 상황을 정리해둬서 팀원의 현재 진행 상황을 빠르게 파악 할 수 있어 좋았다.
• 초반에 기획, 디자인을 명확하게 잡고 가지 않아 서로 커뮤니케이션 이슈가 있었지만 와이어프레임과 디자인을 빠르게 하여 화면을 함께 보고 필요한 기능 명세와 플로우를 명확하게 잡고 갈 수 있어 좋았다.
• 백엔드, 프론트엔드 같이 하는 스크럼으로 서로의 파트에서 어떻게 작업이 진행되는지 확인할 수 있어 좋았다.

🥺 Bad (아쉬웠던 점)

• 라이브러리를 쓰면 편리함과 함께 커스텀 시의 불편한 점도 따라온다는 단점이 있는 것을 느꼈다.
• 프로젝트가 진행되면서 구현 시간에 쫓겨 디렉토리 구조에 소홀한 점이 아쉬웠다.
• ES Lint를 사용하고 있지만 이 규칙이 왜 필요한지 잘 몰랐기 때문에 Lint를 활용적으로 이용하지 못했다.
• Scss, Styled Component 혼용 사용!

🤗 Keep (유지해나갈 점)

• 이슈와 PR로 진행 상황을 정리하면서 리팩토리하기

🥵 Problem (실제 문제로 발생한 점)

• formik 라이브러리로 인해 오히려 구현 속도가 늦춰진 상황 발생
• ES Lint를 적극적으로 활용하지 못하여 파일 별로 코드 스타일이 다른 상황 발생
• 사용하지 않는 파일 존재 및 디렉토리 구조가 명확하지 않게 된 상황 발생

🤔 Try (시도해볼 점)

• 타입스크립트 도입하기
• 계획을 구체화 시켜서 리팩토리 진행
• 디렉토리 구조 리팩토리
• 컨벤션에 맞게 ES Lint 적용해보기

😍 소감

Offer 프로젝트를 끝으로 데브코스 과정이 마무리가 되었다..!!ㅜㅜ 너무 아쉬워어..🥺

Offer 프로젝트는 현재 리팩토리 계획중이라 추후 비교를 위해 현재 상태에서 간단하게 회고를 작성해보았다! 🤗

백엔드와의 협업 프로젝트는 처음이었어서 중간중간 힘든 순간들도 있었지만 프로젝트가 어떻게 진행되는지 전반적인 흐름을 알 수 있어 좋았고 사실 프론트 개발할 때, 어떤 기능에 어떤 api가 필요한 지에 대해서 깊게 생각해본 적은 거의 없었던 것 같다. (주어진 api, api로 받은 데이터를 활용만 하면 되닉가..⭐️)

이번 프로젝트에서는 기획부터 디자인, 개발까지 모두 함께하며 백엔드와 프론트 팀원들과 논의를 할 수 있어 좋았다 ㅎㅎ

개인적으로 가장 뿌듯했던 건 axios로 모든 비동기 처리할 때, context API를 활용해서 로딩 처리 하는 그 부분 로직이 제일 뿌듯했다!! 리팩토리할 때 아마 중점적으로 다시 볼 분이 아닐까 싶다! 😀

데브코스는 끝이 났지만 취준은 이제부터 시작이다..!! 홧팅..😂