Feat: DashBoard 컴포넌트 추가

[seojin15]

📌 Summary

• [Feat] DashBoard 컴포넌트 구현 #50

📚 Tasks

• 대시보드 카드 컴포넌트 구현
• 대시보드 섹션 컴포넌트 구현
• 대시보드 카드 mock 데이터 추가
• msw handler 추가
• 대시보드 카드 목록 조회 API 함수 및 React Query 훅 추가

🔍 Describe

• DashBoard.tsx
  useDashBoardCardsQuery로 카드 목록을 조회하고, 섹션 제목인 대시보드, 전체보기 버튼, 카드 목록을 렌더링해요.

• DashBoardCard.tsx
  api 응답에서 내려오는 imageName을 기준으로 assets/images의 이미지와 매핑해 렌더링합니다.

• getDashBoardCards.ts
  /api/dashboards로 대시보드 카드 목록을 요청하는 API 함수입니다.

• useDashBoardCardsQuery.ts
  페이지나 섹션 컴포넌트는 mock 데이터를 직접 import하지 않고 이 훅을 통해 데이터를 가져오도록 했습니다.

• mockDashBoardCards.ts
  실제 API 응답의 data 구조에 맞춘 mock 카드 데이터를 정의했습니다.

• dashBoardHandler.ts
  msw에서 GET /api/dashboards 요청을 가로채 mock 응답을 반환합니다.

👀 To Reviewer

• 로컬에서 msw 응답으로 확인하시려면 env에 해당 환경변수 넣어주시고 true로 설정하시면 됩니다!

📸 Screenshot

ui	msw