사이드 프로젝트 Dockwho 🐥 (개발중)

기획 단계

1. 우리가 만들 서비스의 궁극적인 목적은 무엇일까?
2. 우리가 만들 서비스의 대상은 누구인가?
3. 우리가 만들 서비스가 추구해야할 가치가 무엇인가?

레퍼런스 찾아오기

1. 유사 서비스는 없을까? - 유사 서비스 찾아보기
2. 생각의 시각화 - 지금 내 생각을 가장 비슷하게 보여주는 그림이나 사진
3. API 조사 하기 (찾을 수 있는 사람들은!!)

 

개발단계

프론트 3명에서 업무 분배 - 백엔드 개발자와 1:1 매칭 - api 개발 - 프론트 개발

내가 담당한 페이지는 중고거래 시세조회, 채팅이였다.

 

시세조회

1. chart.js 사용

2. 2025-02-03 시세조회에 보여줄 데이터의 의도가 피그마와 맞지 않아 다시 회의 진행

회의 내용

회의 전 완성된 chart

예를들어 원피스 루피를 검색했을때, 1일과 1주일치의 판매가 구매가의 그래프를 보여줬다. 위에보이는 파랑빨강 숫자는 판매가 구매가의 최신가격이다. 판매가는 판매완료된 물품의 가격이고 구매가는 실제로 구매된 물품의 가격이였다.

 

회의에서 다시 지정한 값은 1일 1주일 탭을 삭제하고 Datepicker로 기간을 정하기로 했다. 구매가는 실제로 구매된 가격인데 이는 판매자와 구매자가 채팅으로 상의한 가격이기때문에 명확히 확인할 수 없었다. 그래서 판매가와 구매가는 판매중 가격, 판매완료된 가격으로 명확히 설정하였다.

 

그다음 보여지는 UI를 수정해야하는데 Datepicker로 기간을 정하면 해당기간의 시세 그래프가 표시된다.

위에 추세는 떨어지는지 올라가는지에 대해서 1개만 표시하기로했다. 예를들어 Datepicker로 오늘부터 33일 이전 날짜로 지정하면 지정된 판매중, 판매완료 가격의 평균가와 지정날짜 이전 33일의 판매중, 판매완료 가격의 평균가와 비교하여 떨어졌는지 올라갔는지만 표시하기로 한 것이다. 그에따른 차이가 음수이면 떨어진것, 양수이면 올라간것으로 판단하여 보여주기로 했다.

회의 후 수정된 chart

아직 윗부분 추세 Price는 수정된 api가 나오지 않아 우선 1일, 1주일 기간탭으로 기간을 설정하여 보여줬던 그래프를 datePicker로 기간을 선택하여 보여줄 수 있게 수정하였다.

 

채팅

1. 채팅 UI 생성

2. 채팅방 생성, 채팅목록 생성