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

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

src/app/api/axiosClient.ts

@@ -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

src/app/api/useCards.ts

@@ -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),
+  })
+}

src/app/api/useColumns.ts

@@ -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/dashboard/[id]/Card/Card.tsx

@@ -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>
+  )
+}

src/app/dashboard/[id]/Card/Tags.tsx

@@ -0,0 +1,17 @@
+export default function Tags({ tags }: { tags: string[] }) {
+  //태그 컬러 - 랜덤 배정
+  //카드 생성 시 - 동일 태그 입력 불가하도록
+  return (
+    <div className="flex gap-6">
+      {tags.map((tag) => (
+        <span
+          key={tag}
+          className="inline-block whitespace-nowrap rounded-4 px-9 pb-3 pt-5"
+          style={{ backgroundColor: '#F7DBF0', color: '#D549B6' }}
+        >
+          {tag}
+        </span>
+      ))}
+    </div>
+  )
+}

src/app/dashboard/[id]/Column/Column.tsx

@@ -0,0 +1,44 @@
+import Image from 'next/image'
+
+import useCards from '@/app/api/useCards'
+import type { Column } from '@/app/api/useColumns'
+
+import Card from '../Card/Card'
+export default function Column({ column }: { column: Column }) {
+  const { id, title }: { id: number; title: string } = column
+  const { data, isLoading, error } = useCards(id)
+
+  if (isLoading) return <p>loading...</p>
+  if (error) return <p>error...{error.message}</p>
+
+  return (
+    <div className="BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20">
+      <div className="mb-24 flex items-center justify-between">
+        <div className="flex items-center">
+          <div className="mb-7 mr-8 size-8 rounded-25 bg-blue-500"></div>
+          <h2 className="mr-12 text-18 font-bold leading-none">{title}</h2>
+          <span className="Text-gray block size-20 rounded-4 bg-[#EEEEEE] pt-3 text-center text-12 font-medium leading-tight dark:bg-[#2E2E2E]">
+            {data?.totalCount}
+          </span>
+        </div>
+        <Image
+          src={'/images/config.svg'}
+          alt="컬럼 설정"
+          width={20}
+          height={20}
+        />
+      </div>
+      <button className="BG-white Border-btn rounded-6 px-146 py-9">
+        <div className="flex h-22 w-22 items-center justify-center rounded-4 bg-blue-100">
+          <Image
+            src={'/images/plus.svg'}
+            alt="추가하기"
+            width={10}
+            height={10}
+          />
+        </div>
+      </button>
+      {data?.cards.map((card) => <Card key={card.id} card={card} />)}
+    </div>
+  )
+}

src/app/dashboard/[id]/page.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import Image from 'next/image'
+
+import useColumns from '@/app/api/useColumns'
+
+import Column from './Column/Column'
+export default function DashboardID() {
+  const dashboard = 15120
+  const { data: columns, isLoading, error } = useColumns(dashboard)
+  if (isLoading) return <p>loading...</p>
+  if (error) return <p>error...{error.message}</p>
+
+  return (
+    <>
+      <div className="fixed left-0 h-1080 w-300 bg-gray-100">사이드바</div>
+      <div className="ml-300">
+        <div className="flex">
+          {columns?.map((column) => <Column key={column.id} column={column} />)}
+          <div className="BG-gray Border-column p-20">
+            <button className="BG-white Border-btn flex items-center gap-12 whitespace-nowrap rounded-8 px-85 pb-20 pt-24 text-18 font-bold">
+              <span>새로운 컬럼 추가하기</span>
+              <div className="flex h-22 w-22 items-center justify-center rounded-4 bg-blue-100">
+                <Image
+                  src={'/images/plus.svg'}
+                  alt="플러스 아이콘"
+                  width={10}
+                  height={10}
+                />
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/app/globals.css

@@ -34,6 +34,9 @@ body {
 .Border-section {
   @apply border border-[#D9D9D9] dark:border-[#000000];
 }
+.Border-column {
+  @apply border-r border-[#EEEEEE] dark:border-[#262626];
+}
 .BG-addPhoto {
   @apply bg-[#F5F5F5] dark:bg-[#2E2E2E];
 }

src/app/layout.tsx

@@ -3,6 +3,7 @@ import './globals.css'
 import type { Metadata } from 'next'
 
 import { Providers } from './providers'
+import ThemeToggle from './shared/components/ThemeToggle'
 
 export const metadata: Metadata = {
   title: 'Coplan',

src/app/providers.tsx

@@ -1,12 +1,21 @@
 'use client'
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ThemeProvider } from 'next-themes'
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
 
 export function Providers({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient())
+
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem={true}>
-      {children}
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem={true}
+      >
+        {children}
+      </ThemeProvider>
+    </QueryClientProvider>
   )
 }