프로젝트 로드맵

프론트엔드 상세 일정

• 라이브러리 선정

• 디렉토리 구조 잡기, 개발환경세팅

• 3주차 ~ 4주차 - 기본 UI

  • 인트로페이지
  • 상단바
  • 메인페이지
  • 로그인/회원가입 모달
  • 랭킹페이지
  • 복권페이지 (canvas, context)
  • 마이페이지
  • 작물시장페이지 (Apexcharts)

• 4주차 ~ 5주차 - 기능

  • 회원가입 - 11/21(목)

  • 로그인 - 11/21(목)

  • 로그아웃 - 11/21(목)

  • 상단바 정보 연동 (닉네임) (로그인시, data에 있음) - 11/21(목)

  • 랭킹 (API) - 11/21(목)

  • 유저 데이터 연동 - 랭킹 - 11/21(목)

  • 복권 (API) - 11/23(토)

  • 마이페이지 연동 - 닉네임 변경 - 11/24(일)

  • 마이페이지 연동 - 소개글 변경- 11/24(일)

  • Oauth - 카카오, 구글 - 11/25(월)

    • https://smaivnn.tistory.com/3

  • ▵ ⭐️ Axios 중복 클릭 방지 추가 ⭐️ - 확인 필요 - 11월/25(월)

    • https://velog.io/@1998yuki0331/axios를-사용해서-중복된-http-요청-막기
    • https://velog.io/@sonaky47/React-18-strict-mode에서-double-mount로-인한-axios-중복-호출-막기-두번째-방법-AbortController

  • 알림 연동 + 새로운 알림 발생시 UI 수정 + 알림 목록 삭제(SSE) - 11월/26(화)

    • https://velog.io/@ongsim123/Devlog-SSE로직-구현-중-EventSource에-headers담기
    • https://velog.io/@blessoms2017/Event-Source-Polyfill로-모든-브라우저에서-SSE-구현하기
    • https://velog.io/@hyunjoong/타입스크립트-모듈-에-대한-선언-파일을-찾을-수-없습니다
    • https://velog.io/@wwlee94/Redis-PubSub-Base-Server-Sent-Event
    • https://namhandong.tistory.com/234
    • StrictMode로 인해서 마운트 → 언마운트 → 마운트 반복
      • SSE 연결이 2번 발생 → 위 에러 다시 발생
      • StrictMode 삭제해서 해결

  • 유저 데이터 연동 - 현금자산 (API) - 11월/26일(화)

  • 마이페이지 - 거래 기록 (API) - 11월/27일(수)

  • 마이페이지 - 보유작물 (API) - 11월/27일(수)

  • 유저 데이터 연동 - 현재가치: 농작물 소유 갯수 * 현재 가격 (API) - 11월/27일(수)

  • 마이페이지(유저 데이터 연동) - 소개글 (API) - 11월/27일(수)

  • 작물시장 매수/매도 (API) - 11월/27일(수) ~ 12월/2일(월)

    • 매도창 최대 버튼 로직 수정 - 12월/2일(월)

  • 작물시장 전체 (webSocket) - 11월/28일(목) ~ 12월/2일(월)

    • chart - 11월/28일(목) ~ 12월/2일(월)
    • 호가창 - 11월/28일(목) ~ 12월/2일(월)
    • 보유 작물 - 12월/2일(월)
    • 대기창 - 12월/2일(월)
    • 데이터 올때마다 실시간 업데이트 되는거 맞는지 체크 필요

  • 추가사항 - 작물 시장 - 12월/2일(월) ~ 12/3일(화)

    • ~~오더북의 가격 정렬 - 맨 아래부터 가격 오름차순~~
    • 오더북의 매수 매도 색깔과 주문창의 매수 매도 색깔 반대
    • 오더북에 현재 quantity 값이 표시되고 있는데, unfilled_quantity의 합계로 수정
    • 매수 또는 매도 버튼을 클릭했을 때 알림(alert)
    • 호가창에 nowPrice에 네모칸 같은 표시 추가
    • 대기에 quantity → unfilledQuantity로 수정
    • 매도에 주문가능을 돈에서 작물 수량으로 수정
    • 매수/매도/대기취소시, alert 창에 엔터 클릭하면 alert가 꺼지는게 아니라 주문이 더 됨
    • 현재 기본 오더북 스크롤이 맨 위에 위치해 있는데, “팔아요“, “사요“가 사이로 기본 위치 - 4개씩 배치해서 조정 완료
    • 매수매도 input에 number 처리
    • 매수창 주문 가능 금액 → 버튼 누를 때마다 availableCash 다시 fetch 해오도록 기능 추가
    • 매수/매도 값 0으로 입력된거 있을 때에는 button disable 상태로 표시하기
    • 대기창에 매수/매도 상태 보이도록 하는 방법 - 취소 버튼 색으로 구분

  • 추가사항 - 로그아웃 - 12월/2일(월) ~ 12/3일(화)

    • 아직 refreshtoken 처리가 안되어있으니, 일단 만료되었을 때 localStorage에서 삭제시키는 로직 추가

• 6주차 - 개선하기

  • ux 개선 - 마이페이지
    • 한줄 소개 수정이 직관적이지 않음.
    • → 더블 클릭으로 수정하던 방식을 버튼 클릭으로 수정
    • → 수정/저장 icon이 toggle되는 방식의 버튼 추가
  • alert → 직접 컴포넌트 만들기 - 11월/26(화)
  • useContext에서 path마다 다시 fetch해오는 작업이 필요 - 11월/27(수)
    • useLocation을 사용 → 해당 컴포넌트가 route 안에 있어야 한다는 에러 발생
    • react router v6 사용
      • UserProvider는 모든 컴포넌트를 감싸고 있어야하고, Header와 Footer는 / 경로를 제외하고 존재해야하는 등 여러 로직이 필요해짐
      • 기존: v6의 경로 정의가 안되어있는 페이지를 처리한다거나 child 페이지를 추가하면 좋을 것 같다는 생각에 사용함
      • 현재: child(하위) 페이지가 존재하지 않는 프로젝트이며 에러 페이지를 추가하지도 않음. 오히려 어떤 페이지에서는 뭐가 로드 되고 안되어야한다는 복잡한 로직만 추가됨
      • → react router 다운그레이드 하기로 결정 ..
  • ux 개선 - Intro 모달 - 12월/3일 (화)
    • 엔터 클릭시, 확인 눌러지도록 동작
    • 바깥 클릭시, 모달 끄기
  • 트러블슈팅 글 작성하기

백엔드

테스트코드 작성 swagger

• 동훈
  • 작물거래소 : 2.5주
• 현빈
  • 알림 : 1주
  • 복권 : 3일
• 보석
  • 인증/인가 : 1주
  • CI/CD : 1주
  • 랭킹 : 3일