From 05e79f6f2eb8110b87918f9bc6306ddd041185f1 Mon Sep 17 00:00:00 2001 From: jyn Date: Tue, 10 Jun 2025 01:14:49 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=E2=9C=A8=20Feat:=20column,card=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=9A=94=EC=B2=AD=20API=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20/=20dashboard=20id=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=9E=A1=EC=9D=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.mjs | 11 ++++++ public/images/calendar.svg | 3 ++ public/images/config.svg | 3 ++ public/images/plus.svg | 3 ++ src/app/api/.gitkeep | 0 src/app/api/axiosClient.ts | 19 ++++++++++ src/app/api/useCards.ts | 45 ++++++++++++++++++++++++ src/app/api/useColumns.ts | 32 +++++++++++++++++ src/app/dashboard/.gitkeep | 0 src/app/dashboard/[id]/Card/Card.tsx | 28 +++++++++++++++ src/app/dashboard/[id]/Card/Tags.tsx | 17 +++++++++ src/app/dashboard/[id]/Column/Column.tsx | 18 ++++++++++ src/app/dashboard/[id]/page.tsx | 22 ++++++++++++ src/app/globals.css | 3 ++ src/app/layout.tsx | 7 +++- src/app/providers.tsx | 17 ++++++--- 16 files changed, 223 insertions(+), 5 deletions(-) create mode 100644 public/images/calendar.svg create mode 100644 public/images/config.svg create mode 100644 public/images/plus.svg delete mode 100644 src/app/api/.gitkeep create mode 100644 src/app/api/axiosClient.ts create mode 100644 src/app/api/useCards.ts create mode 100644 src/app/api/useColumns.ts delete mode 100644 src/app/dashboard/.gitkeep create mode 100644 src/app/dashboard/[id]/Card/Card.tsx create mode 100644 src/app/dashboard/[id]/Card/Tags.tsx create mode 100644 src/app/dashboard/[id]/Column/Column.tsx create mode 100644 src/app/dashboard/[id]/page.tsx diff --git a/next.config.mjs b/next.config.mjs index 4ce46f8..59107a6 100644 --- a/next.config.mjs +++ b/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 diff --git a/public/images/calendar.svg b/public/images/calendar.svg new file mode 100644 index 0000000..e4c342e --- /dev/null +++ b/public/images/calendar.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/config.svg b/public/images/config.svg new file mode 100644 index 0000000..589ec74 --- /dev/null +++ b/public/images/config.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/plus.svg b/public/images/plus.svg new file mode 100644 index 0000000..eab56df --- /dev/null +++ b/public/images/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/api/.gitkeep b/src/app/api/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/api/axiosClient.ts b/src/app/api/axiosClient.ts new file mode 100644 index 0000000..51ae706 --- /dev/null +++ b/src/app/api/axiosClient.ts @@ -0,0 +1,19 @@ +import axios from 'axios' + +const axiosClient = axios.create({ + baseURL: 'https://sp-taskify-api.vercel.app', +}) + +// 작업용 임시 토큰 +const TEMP_TOKEN = + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NTc4NiwidGVhbUlkIjoiNy02IiwiaWF0IjoxNzQ5MzEyOTI3LCJpc3MiOiJzcC10YXNraWZ5In0.JFrNYvsX_b5-yCMm-Nsmp56gaVwzJ7JfBqYirBR3qw0' + +axiosClient.interceptors.request.use((config) => { + if (TEMP_TOKEN) { + config.headers['Authorization'] = `Bearer ${TEMP_TOKEN}` + } + + return config +}) + +export default axiosClient diff --git a/src/app/api/useCards.ts b/src/app/api/useCards.ts new file mode 100644 index 0000000..94cec1f --- /dev/null +++ b/src/app/api/useCards.ts @@ -0,0 +1,45 @@ +//Colums id: 50923,50924,50925,50926 +//나중에는 fetchColumns의 결과로 받은 컬럼 아이디를 모아서 넣어야할듯. +//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): Promise { + const res = await axiosClient.get( + `/7-6/cards?size=10&columnId=${columnId}`, + ) + return res.data +} + +export default function useCards(column: number) { + return useQuery({ + queryKey: ['columnId', column], + queryFn: () => fetchCards(column), + }) +} diff --git a/src/app/api/useColumns.ts b/src/app/api/useColumns.ts new file mode 100644 index 0000000..8182f54 --- /dev/null +++ b/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 fetchColums(dashboardId: number): Promise { + const res = await axiosClient.get( + `/7-6/columns?dashboardId=${dashboardId}`, + ) + return res.data.data +} + +//useQuery +export default function useColumns(dashboardId: number) { + return useQuery({ + queryKey: ['columns', dashboardId], + queryFn: () => fetchColums(dashboardId), + }) +} diff --git a/src/app/dashboard/.gitkeep b/src/app/dashboard/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/dashboard/[id]/Card/Card.tsx b/src/app/dashboard/[id]/Card/Card.tsx new file mode 100644 index 0000000..a1e4d61 --- /dev/null +++ b/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 ( +
+ Todo Card + {imageUrl && ( + 카드 이미지 + )} +

{title}

+ +

{dueDate}

+

프로필

+
+ ) +} diff --git a/src/app/dashboard/[id]/Card/Tags.tsx b/src/app/dashboard/[id]/Card/Tags.tsx new file mode 100644 index 0000000..6bdc294 --- /dev/null +++ b/src/app/dashboard/[id]/Card/Tags.tsx @@ -0,0 +1,17 @@ +export default function Tags({ tags }: { tags: string[] }) { + //태그 컬러 - 랜덤 배정 + //카드 생성 시 - 동일 태그 입력 불가하도록 + return ( +
+ {tags.map((tag) => ( + + {tag} + + ))} +
+ ) +} diff --git a/src/app/dashboard/[id]/Column/Column.tsx b/src/app/dashboard/[id]/Column/Column.tsx new file mode 100644 index 0000000..a1be9ce --- /dev/null +++ b/src/app/dashboard/[id]/Column/Column.tsx @@ -0,0 +1,18 @@ +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

loading...

+ if (error) return

error...{error.message}

+ + return ( +
+

{title}

+ totalCount of cards: {data?.totalCount} + {data?.cards.map((card) => )} +
+ ) +} diff --git a/src/app/dashboard/[id]/page.tsx b/src/app/dashboard/[id]/page.tsx new file mode 100644 index 0000000..fa6ef6d --- /dev/null +++ b/src/app/dashboard/[id]/page.tsx @@ -0,0 +1,22 @@ +'use client' + +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

loading...

+ if (error) return

error...{error.message}

+ + return ( + <> +
사이드바
+
+
+ {columns?.map((column) => )} +
+
+ + ) +} diff --git a/src/app/globals.css b/src/app/globals.css index 752ecc7..92c49c3 100644 --- a/src/app/globals.css +++ b/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]; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 449dd34..b6e300b 100644 --- a/src/app/layout.tsx +++ b/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', @@ -17,7 +18,11 @@ export default function RootLayout({ return ( - {children} + + + {/* 푸쉬하기 전에 이거 삭제해야함 */} + {children} + ) diff --git a/src/app/providers.tsx b/src/app/providers.tsx index c475d2f..f440d08 100644 --- a/src/app/providers.tsx +++ b/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 ( - - {children} - + + + {children} + + ) } From 500b31cecc80fb559ae3d15e9a7de4fc04785b48 Mon Sep 17 00:00:00 2001 From: jyn Date: Tue, 10 Jun 2025 03:55:31 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20/=20Column=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/dashboard/[id]/Column/Column.tsx | 26 +++++++++++++++++++++--- src/app/dashboard/[id]/page.tsx | 15 ++++++++++++++ 2 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/app/dashboard/[id]/Column/Column.tsx b/src/app/dashboard/[id]/Column/Column.tsx index a1be9ce..15ab539 100644 --- a/src/app/dashboard/[id]/Column/Column.tsx +++ b/src/app/dashboard/[id]/Column/Column.tsx @@ -1,3 +1,5 @@ +import Image from 'next/image' + import useCards from '@/app/api/useCards' import type { Column } from '@/app/api/useColumns' @@ -9,9 +11,27 @@ export default function Column({ column }: { column: Column }) { if (error) return

error...{error.message}

return ( -
-

{title}

- totalCount of cards: {data?.totalCount} +
+
+
+
+

{title}

+ + {data?.totalCount} + +
+ 설정 +
+ {data?.cards.map((card) => )}
) diff --git a/src/app/dashboard/[id]/page.tsx b/src/app/dashboard/[id]/page.tsx index fa6ef6d..c775055 100644 --- a/src/app/dashboard/[id]/page.tsx +++ b/src/app/dashboard/[id]/page.tsx @@ -1,5 +1,7 @@ 'use client' +import Image from 'next/image' + import useColumns from '@/app/api/useColumns' import Column from './Column/Column' @@ -15,6 +17,19 @@ export default function DashboardID() {
{columns?.map((column) => )} +
+ +
From 4b821b7aad46aaa8649cd1734a07f2cee6100981 Mon Sep 17 00:00:00 2001 From: jyn Date: Tue, 10 Jun 2025 11:38:41 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=AB=A7=20modify:=20=EC=BB=AC=EB=9F=BC?= =?UTF-8?q?=20=EC=83=81=EB=8B=A8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/dashboard/[id]/Column/Column.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/app/dashboard/[id]/Column/Column.tsx b/src/app/dashboard/[id]/Column/Column.tsx index 15ab539..4ee73d0 100644 --- a/src/app/dashboard/[id]/Column/Column.tsx +++ b/src/app/dashboard/[id]/Column/Column.tsx @@ -7,26 +7,34 @@ 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

loading...

if (error) return

error...{error.message}

+ //onclick 적용하고, PR올리고, DND구현 먼저 하기 return ( + //px-6 pb-3 pt-5
-

{title}

- +

{title}

+ {data?.totalCount}
- 설정 + 컬럼 설정