Fix: NoSQL 형식 더미 데이터로 IntroPage.tsx를 불러온다

[Kim-DaHam]

개요

MSW 더미 데이터를 NoSQL 형식 객체로 변경하고, IntroPage.tsx를 불러옵니다.

작업사항

• /mocks/nosql-data 하위에 NoSQL 형식의 portfolio, message, user, commission 데이터를 생성한다.
• /type 폴더 하위에 주요 데이터(user, portfolio, message, commission) 타입을 정의한다.
• /mocks/handler/portfolio.ts 핸들러를 NoSQL 형식 더미데이터에 맞춰 수정한다.
• IntroPage.tsx에서 /top-portfolios api 요청을 한다.
  • PortfolioSlider.tsx에 슬라이드 할 이미지가 없을 경우 마우스를 hover해도 Next, Prev Arrow 버튼이 보이지 않게 수정한다.
  • top portfolio가 없을 경우 '여러분이 Portfolly의 첫번째 ${section} 포트폴리오가 되어주세요!' 문구를 보여준다.

변경로직

• /mocks/handler/portfolio.ts 핸들러가 NoSQL 형식을 다루는 로직으로 변경되었습니다.
  • key, value로만 이루어진 객체 접근 방식으로 변경합니다.

변경전

• 객체 배열 형태의 데이터에 접근하는 로직이었습니다.

변경후

https://github.com/Kim-DaHam/Portfolly/assets/81691456/b6f5943c-fd83-4f9a-b5a9-9a473e5a6fcd

기타

/top-portfolio 데이터는 본래 최근 100일간 가장 인기있는 포트폴리오를 반환하는 api 요청이나, msw 테스트를 할 때는 그냥 데이터 목록에서 3개의 포트폴리오 데이터를 불러옵니다.