Merge pull request #37 from CoPlay-FE/feature/dashboard_id

✨ Feat: 대시보드 상세 페이지

Author: dkslel1225

next.config.mjs

@@ -1,6 +1,17 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
+
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'sprint-fe-project.s3.ap-northeast-2.amazonaws.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 }
 
 export default nextConfig

public/images/calendar.svg

@@ -0,0 +1,18 @@
+import axios from 'axios'
+
+const axiosClient = axios.create({
+  baseURL: 'https://sp-taskify-api.vercel.app/7-6',
+})
+
+// 작업용 임시 토큰
+const TEMP_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN
+
+axiosClient.interceptors.request.use((config) => {
+  if (TEMP_TOKEN) {
+    config.headers['Authorization'] = `Bearer ${TEMP_TOKEN}`
+  }
+
+  return config
+})
+
+export default axiosClient

public/images/config.svg

@@ -0,0 +1,46 @@
+//size일단 10으로 하고, 나중에 커서아이디 받아서 무한 스크롤 구현해야 함.
+import { useQuery } from '@tanstack/react-query'
+
+import axiosClient from './axiosClient'
+
+export interface Assignee {
+  id: number
+  nickname: string
+  profileImageUrl: string | null
+}
+export interface Card {
+  id: number
+  title: string
+  description: string
+  tags: string[]
+  dueDate: string
+  assignee: Assignee
+  imageUrl: string
+  teamId: string
+  dashboardId: number
+  columnId: number
+  createdAt: string
+  updatedAt: string
+}
+export interface CardResponse {
+  cards: Card[]
+  totalCount: number
+  cursorId: number
+}
+
+export async function fetchCards(
+  columnId: number,
+  size: number = 10,
+): Promise<CardResponse> {
+  const res = await axiosClient.get<CardResponse>(
+    `/cards?size=${size}&columnId=${columnId}`,
+  )
+  return res.data
+}
+
+export default function useCards(columnId: number) {
+  return useQuery<CardResponse>({
+    queryKey: ['columnId', columnId],
+    queryFn: () => fetchCards(columnId),
+  })
+}

public/images/plus.svg

@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query'
+
+import axiosClient from './axiosClient'
+
+//타입
+export interface Column {
+  id: number
+  title: string
+  teamId: string
+  dashboardId: number
+  createdAt: string
+  updatedAt: string
+}
+export interface ColumnsResponse {
+  data: Column[]
+}
+
+//fetch 함수 (API 호출 전용)
+export async function fetchColumns(dashboardId: number): Promise<Column[]> {
+  const res = await axiosClient.get<ColumnsResponse>(
+    `/columns?dashboardId=${dashboardId}`,
+  )
+  return res.data.data
+}
+
+//useQuery
+export default function useColumns(dashboardId: number) {
+  return useQuery<Column[]>({
+    queryKey: ['columns', dashboardId],
+    queryFn: () => fetchColumns(dashboardId),
+  })
+}

src/app/api/.gitkeep

@@ -0,0 +1,28 @@
+import Image from 'next/image'
+
+import type { Card } from '@/app/api/useCards'
+
+import Tags from './Tags'
+
+export default function Card({ card }: { card: Card }) {
+  const { imageUrl, title, tags, dueDate, assignee } = card
+  return (
+    <div className="BG-white Border-section relative w-314 rounded-6 border-solid px-20 py-16">
+      Todo Card
+      {imageUrl && (
+        <Image
+          src={imageUrl}
+          alt="카드 이미지"
+          width={400}
+          height={600}
+          className="h-auto w-full rounded-6 object-contain"
+          priority
+        />
+      )}
+      <p>{title}</p>
+      <Tags tags={tags} />
+      <p>{dueDate}</p>
+      <p>프로필</p>
+    </div>
+  )
+}