From f9575f3bfcb961ed371fb7fe507c28270001145a Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Tue, 23 Jan 2024 15:02:52 +0900
Subject: [PATCH 01/10] Feat: add board widget template

---
 src/app/teams/[id]/panel/WidgetList.tsx       |  6 ++---
 src/app/teams/[id]/panel/WidgetsRender.tsx    |  4 +--
 .../panel/widgets/BoardWidget/index.style.ts  |  3 +++
 .../[id]/panel/widgets/BoardWidget/index.tsx  | 27 +++++++++++++++++++
 .../[id]/panel/widgets/TmpNoticeWidget.tsx    | 16 -----------
 5 files changed, 34 insertions(+), 22 deletions(-)
 create mode 100644 src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts
 create mode 100644 src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
 delete mode 100644 src/app/teams/[id]/panel/widgets/TmpNoticeWidget.tsx

diff --git a/src/app/teams/[id]/panel/WidgetList.tsx b/src/app/teams/[id]/panel/WidgetList.tsx
index d90566cfc..a76e99f3c 100644
--- a/src/app/teams/[id]/panel/WidgetList.tsx
+++ b/src/app/teams/[id]/panel/WidgetList.tsx
@@ -3,12 +3,12 @@ import { SizeType, WidgetType } from '@/types/ITeamDnDLayout'
 import TmpTextWidget from '@/app/teams/[id]/panel/widgets/TextWidget'
 import { useCallback, useState } from 'react'
 import { sizeRatio } from '@/app/teams/[id]/panel/TeamDnD'
-import TmpNoticeWidget from '@/app/teams/[id]/panel/widgets/TmpNoticeWidget'
 import TmpBoardWidget from '@/app/teams/[id]/panel/widgets/TmpBoardWidget'
 import CalenderWidget from '@/app/teams/[id]/panel/widgets/CalenderWidget'
 import TmpAttendWidget from '@/app/teams/[id]/panel/widgets/TmpAttendWidget'
 import TmpImageWidget from '@/app/teams/[id]/panel/widgets/ImageWidget'
 import TmpLinkWidget from '@/app/teams/[id]/panel/widgets/TmpLinkWidget'
+import BoardWidget from './widgets/BoardWidget'
 import Slider from 'react-slick'
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
@@ -82,9 +82,7 @@ const WidgetList = ({
     (typeValue: WidgetType) => {
       switch (typeValue) {
         case 'notice':
-          return (
-            <TmpNoticeWidget data={null} size={toolSize[typeValue] ?? 'S'} />
-          )
+          return <BoardWidget size={toolSize[typeValue] ?? 'S'} />
         case 'board':
           return (
             <TmpBoardWidget data={null} size={toolSize[typeValue] ?? 'S'} />
diff --git a/src/app/teams/[id]/panel/WidgetsRender.tsx b/src/app/teams/[id]/panel/WidgetsRender.tsx
index 124b8aa6b..74bf3de92 100644
--- a/src/app/teams/[id]/panel/WidgetsRender.tsx
+++ b/src/app/teams/[id]/panel/WidgetsRender.tsx
@@ -1,5 +1,5 @@
 import { Box, IconButton, Stack, useMediaQuery } from '@mui/material'
-import TmpNoticeWidget from '@/app/teams/[id]/panel/widgets/TmpNoticeWidget'
+import BoardWidget from './widgets/BoardWidget'
 import TmpBoardWidget from '@/app/teams/[id]/panel/widgets/TmpBoardWidget'
 import CalenderWidget from '@/app/teams/[id]/panel/widgets/CalenderWidget'
 import TmpAttendWidget from '@/app/teams/[id]/panel/widgets/TmpAttendWidget'
@@ -81,7 +81,7 @@ const WidgetsRender = ({
     (type: WidgetType, wgData: any, wgSize: SizeType) => {
       switch (type) {
         case 'notice':
-          return <TmpNoticeWidget data={wgData} size={wgSize} />
+          return <BoardWidget size={wgSize} />
         case 'board':
           return <TmpBoardWidget data={wgData} size={wgSize} />
         case 'calender':
diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts b/src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts
new file mode 100644
index 000000000..9314bc4be
--- /dev/null
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts
@@ -0,0 +1,3 @@
+export const widgetContent = {
+  padding: '1.5rem 1.5rem 2rem 1.5rem',
+}
diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
new file mode 100644
index 000000000..bcdcfce77
--- /dev/null
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import useModal from '@/hook/useModal'
+import { SizeType } from '@/types/ITeamDnDLayout'
+import WidgetCard from '../WidgetCard'
+import * as style from './index.style'
+
+const BoardWidget = ({ size }: { size: SizeType }) => {
+  const { isOpen, openModal, closeModal } = useModal()
+
+  return (
+    <>
+      <WidgetCard contentSx={style.widgetContent} onClick={openModal}>
+        <BoardWidgetRender size={size} />
+      </WidgetCard>
+      {/* 모달 */}
+      {isOpen && <div onClick={closeModal}>Modal</div>}
+    </>
+  )
+}
+
+const BoardWidgetRender = ({ size }: { size: SizeType }) => {
+  if (size === 'L') return <div>large widget</div>
+  return <div>small widget</div>
+}
+
+export default BoardWidget
diff --git a/src/app/teams/[id]/panel/widgets/TmpNoticeWidget.tsx b/src/app/teams/[id]/panel/widgets/TmpNoticeWidget.tsx
deleted file mode 100644
index e872493df..000000000
--- a/src/app/teams/[id]/panel/widgets/TmpNoticeWidget.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TextField, Typography } from '@mui/material'
-import { SizeType } from '@/types/ITeamDnDLayout'
-import WidgetCard from '@/app/teams/[id]/panel/widgets/WidgetCard'
-
-/* 임시 위젯 */
-const TmpNoticeWidget = ({ data, size }: { data: any; size: SizeType }) => {
-  return (
-    <WidgetCard bgcolor={'blueGrey'}>
-      <Typography>{'Notice: ' + size}</Typography>
-      <Typography>{data}</Typography>
-      <TextField label="Multiline" multiline maxRows={4} />
-    </WidgetCard>
-  )
-}
-
-export default TmpNoticeWidget

From 1c9c1e3fcf89da472d72e957bedf3a521b82e9a7 Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Tue, 23 Jan 2024 15:47:58 +0900
Subject: [PATCH 02/10] Feat: Add Notice Widget title

---
 .../panel/widgets/BoardWidget/index.style.ts  |  6 +++
 .../[id]/panel/widgets/BoardWidget/index.tsx  | 42 ++++++++++++++++---
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts b/src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts
index 9314bc4be..df52fde48 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts
@@ -1,3 +1,9 @@
+import { Theme } from '@mui/material'
+
 export const widgetContent = {
   padding: '1.5rem 1.5rem 2rem 1.5rem',
 }
+
+export const titleIcon = {
+  color: (theme: Theme) => theme.palette.text.normal,
+}
diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
index bcdcfce77..143b2cfca 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
@@ -1,17 +1,43 @@
 'use client'
 
 import useModal from '@/hook/useModal'
+import useMedia from '@/hook/useMedia'
+import { NoticeIcon } from '@/icons/TeamPage'
 import { SizeType } from '@/types/ITeamDnDLayout'
+import { ITeamNotice } from '@/types/TeamBoardTypes'
 import WidgetCard from '../WidgetCard'
 import * as style from './index.style'
+import { Stack, Typography } from '@mui/material'
+
+interface IBoardWidgetRenderProps {
+  isPc: boolean
+  size: SizeType
+  data: ITeamNotice[]
+}
 
 const BoardWidget = ({ size }: { size: SizeType }) => {
   const { isOpen, openModal, closeModal } = useModal()
-
+  const { isPc } = useMedia()
+  // TODO 데이터 받아서 렌더링
+  const mockData: ITeamNotice[] = [
+    {
+      postId: 1,
+      title:
+        '11월 첫째주 주간회의 기록입니다. 11월 첫째주 주간회의 기록입니다.',
+      authorNickname: '김팀장',
+      createdAt: new Date(),
+    },
+  ]
   return (
     <>
       <WidgetCard contentSx={style.widgetContent} onClick={openModal}>
-        <BoardWidgetRender size={size} />
+        <Stack spacing={isPc ? '1.5rem' : '0.5rem'}>
+          <Stack direction={'row'} spacing={'0.25rem'}>
+            <NoticeIcon sx={style.titleIcon} />
+            <Typography variant={'Title3Emphasis'}>공지사항</Typography>
+          </Stack>
+          <BoardWidgetList isPc={isPc} size={size} data={mockData} />
+        </Stack>
       </WidgetCard>
       {/* 모달 */}
       {isOpen && <div onClick={closeModal}>Modal</div>}
@@ -19,9 +45,15 @@ const BoardWidget = ({ size }: { size: SizeType }) => {
   )
 }
 
-const BoardWidgetRender = ({ size }: { size: SizeType }) => {
-  if (size === 'L') return <div>large widget</div>
-  return <div>small widget</div>
+const BoardWidgetList = ({ isPc, size }: IBoardWidgetRenderProps) => {
+  if (size === 'L') {
+    return (
+      <Stack spacing={isPc ? '1rem' : '0,5rem'}>
+        <div>LARGE WIDGET</div>
+      </Stack>
+    )
+  }
+  return <div>SMALL WIDGET</div>
 }
 
 export default BoardWidget

From 931895427d212e08c997782527f90b4b4d13ee99 Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Tue, 23 Jan 2024 18:55:35 +0900
Subject: [PATCH 03/10] Feat: link api

---
 .../panel/widgets/BoardWidget/index.style.ts   |  4 ++++
 .../[id]/panel/widgets/BoardWidget/index.tsx   | 18 +++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts b/src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts
index df52fde48..f76510b41 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.style.ts
@@ -4,6 +4,10 @@ export const widgetContent = {
   padding: '1.5rem 1.5rem 2rem 1.5rem',
 }
 
+export const mobileWidgetContent = {
+  padding: '1.25rem 1.25rem 1.5rem 1.25rem',
+}
+
 export const titleIcon = {
   color: (theme: Theme) => theme.palette.text.normal,
 }
diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
index 143b2cfca..c20ab0151 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
@@ -1,5 +1,8 @@
 'use client'
 
+import { useParams } from 'next/navigation'
+import useSWR from 'swr'
+import useAxiosWithAuth from '@/api/config'
 import useModal from '@/hook/useModal'
 import useMedia from '@/hook/useMedia'
 import { NoticeIcon } from '@/icons/TeamPage'
@@ -18,6 +21,7 @@ interface IBoardWidgetRenderProps {
 const BoardWidget = ({ size }: { size: SizeType }) => {
   const { isOpen, openModal, closeModal } = useModal()
   const { isPc } = useMedia()
+  const { id: teamId } = useParams()
   // TODO 데이터 받아서 렌더링
   const mockData: ITeamNotice[] = [
     {
@@ -28,9 +32,21 @@ const BoardWidget = ({ size }: { size: SizeType }) => {
       createdAt: new Date(),
     },
   ]
+  const axiosWithAuth = useAxiosWithAuth()
+  const { data, isLoading, error } = useSWR(
+    `/api/v1/team/notice/${teamId}?pageSize=${8}page=${1}keyword=`,
+    (url: string) => axiosWithAuth.get(url).then((res) => res.data),
+  )
+  // if (isLoading) return <div>로딩중</div>
+  // if (!data || error) return <div>에러</div>
+
   return (
     <>
-      <WidgetCard contentSx={style.widgetContent} onClick={openModal}>
+      const {isPc} = useMedia()
+      <WidgetCard
+        onClick={openModal}
+        contentSx={isPc ? style.widgetContent : style.mobileWidgetContent}
+      >
         <Stack spacing={isPc ? '1.5rem' : '0.5rem'}>
           <Stack direction={'row'} spacing={'0.25rem'}>
             <NoticeIcon sx={style.titleIcon} />

From 587149229e6c82d341276984c624841a5ebfe2ea Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Tue, 23 Jan 2024 19:46:53 +0900
Subject: [PATCH 04/10] Feat: Add status message component

---
 .../[id]/panel/widgets/BoardWidget/index.tsx  | 117 +++++++++++++-----
 1 file changed, 87 insertions(+), 30 deletions(-)

diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
index c20ab0151..f4eb0bfa2 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
@@ -3,6 +3,7 @@
 import { useParams } from 'next/navigation'
 import useSWR from 'swr'
 import useAxiosWithAuth from '@/api/config'
+import CuCircularProgress from '@/components/CuCircularProgress'
 import useModal from '@/hook/useModal'
 import useMedia from '@/hook/useMedia'
 import { NoticeIcon } from '@/icons/TeamPage'
@@ -13,16 +14,24 @@ import * as style from './index.style'
 import { Stack, Typography } from '@mui/material'
 
 interface IBoardWidgetRenderProps {
+  isPc?: boolean
+  teamId?: string | string[]
+  postId?: number
+  listData?: ITeamNotice[]
+}
+
+interface IBoardWidgetContainerProps {
+  openModal: () => void
   isPc: boolean
-  size: SizeType
-  data: ITeamNotice[]
+  children: React.ReactNode
 }
 
 const BoardWidget = ({ size }: { size: SizeType }) => {
   const { isOpen, openModal, closeModal } = useModal()
   const { isPc } = useMedia()
-  const { id: teamId } = useParams()
-  // TODO 데이터 받아서 렌더링
+  const { id } = useParams()
+
+  const axiosWithAuth = useAxiosWithAuth()
   const mockData: ITeamNotice[] = [
     {
       postId: 1,
@@ -32,44 +41,92 @@ const BoardWidget = ({ size }: { size: SizeType }) => {
       createdAt: new Date(),
     },
   ]
-  const axiosWithAuth = useAxiosWithAuth()
   const { data, isLoading, error } = useSWR(
-    `/api/v1/team/notice/${teamId}?pageSize=${8}page=${1}keyword=`,
+    `/api/v1/team/notice/${id}?pageSize=${8}page=${1}keyword=`,
     (url: string) => axiosWithAuth.get(url).then((res) => res.data),
   )
-  // if (isLoading) return <div>로딩중</div>
-  // if (!data || error) return <div>에러</div>
+  if (isLoading)
+    return (
+      <BoardWidgetContainer openModal={openModal} isPc={isPc}>
+        <CuCircularProgress color={'secondary'} />
+      </BoardWidgetContainer>
+    )
+  if (!data || error)
+    return (
+      <BoardWidgetContainer openModal={openModal} isPc={isPc}>
+        <StatusMessage message={'글을 불러오는 중 문제가 발생했습니다.'} />
+      </BoardWidgetContainer>
+    )
+  if (data.content.length === 0)
+    return (
+      <BoardWidgetContainer openModal={openModal} isPc={isPc}>
+        <StatusMessage message={'등록된 글이 없습니다.'} />
+      </BoardWidgetContainer>
+    )
 
   return (
     <>
-      const {isPc} = useMedia()
-      <WidgetCard
-        onClick={openModal}
-        contentSx={isPc ? style.widgetContent : style.mobileWidgetContent}
-      >
-        <Stack spacing={isPc ? '1.5rem' : '0.5rem'}>
-          <Stack direction={'row'} spacing={'0.25rem'}>
-            <NoticeIcon sx={style.titleIcon} />
-            <Typography variant={'Title3Emphasis'}>공지사항</Typography>
-          </Stack>
-          <BoardWidgetList isPc={isPc} size={size} data={mockData} />
-        </Stack>
-      </WidgetCard>
+      <BoardWidgetContainer openModal={openModal} isPc={isPc}>
+        {size === 'L' ? (
+          <BoardWidgetList isPc={isPc} listData={data.content} />
+        ) : (
+          <BoardWidgetSingle postId={data.content[0].postId} />
+        )}
+      </BoardWidgetContainer>
       {/* 모달 */}
-      {isOpen && <div onClick={closeModal}>Modal</div>}
     </>
   )
 }
 
-const BoardWidgetList = ({ isPc, size }: IBoardWidgetRenderProps) => {
-  if (size === 'L') {
-    return (
-      <Stack spacing={isPc ? '1rem' : '0,5rem'}>
-        <div>LARGE WIDGET</div>
+const BoardWidgetContainer = ({
+  openModal,
+  isPc,
+  children,
+}: IBoardWidgetContainerProps) => {
+  return (
+    <WidgetCard
+      onClick={openModal}
+      contentSx={isPc ? style.widgetContent : style.mobileWidgetContent}
+    >
+      <Stack spacing={isPc ? '1.5rem' : '0.5rem'}>
+        <Stack direction={'row'} spacing={'0.25rem'}>
+          <NoticeIcon sx={style.titleIcon} />
+          <Typography variant={'Title3Emphasis'}>공지사항</Typography>
+        </Stack>
+        {children}
       </Stack>
-    )
-  }
-  return <div>SMALL WIDGET</div>
+    </WidgetCard>
+  )
+}
+
+const BoardWidgetList = ({ isPc, listData }: IBoardWidgetRenderProps) => {
+  // size l
+  return (
+    <Stack spacing={isPc ? '1rem' : '0,5rem'}>
+      {listData?.map((item) => <div key={item.postId}>{item.title}</div>)}
+    </Stack>
+  )
+}
+
+const BoardWidgetSingle = ({ postId }: IBoardWidgetRenderProps) => {
+  // size m
+  const axiosWithAuth = useAxiosWithAuth()
+  const { data, isLoading, error } = useSWR(
+    `/api/v1/team/notice/${postId}`,
+    (url: string) => axiosWithAuth.get(url).then((res) => res.data),
+  )
+  if (isLoading) return <CuCircularProgress color={'secondary'} />
+  if (!data || error)
+    return <StatusMessage message="글을 불러오는 중 문제가 발생했습니다." />
+  return <div>{data?.title}</div>
+}
+
+const StatusMessage = ({ message }: { message: string }) => {
+  return (
+    <Typography variant={'Body2'} color={'text.alternative'}>
+      {message}
+    </Typography>
+  )
 }
 
 export default BoardWidget

From f1393158bc23636805f8132ab9edc1a2e9926d61 Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Tue, 23 Jan 2024 20:29:13 +0900
Subject: [PATCH 05/10] Feat: Add BoardWidgetItem

---
 .../[id]/panel/widgets/BoardWidget/index.tsx  | 55 +++++++++++++++----
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
index f4eb0bfa2..99c4ae7c9 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useParams } from 'next/navigation'
+import dayjs from 'dayjs'
 import useSWR from 'swr'
 import useAxiosWithAuth from '@/api/config'
 import CuCircularProgress from '@/components/CuCircularProgress'
@@ -26,25 +27,23 @@ interface IBoardWidgetContainerProps {
   children: React.ReactNode
 }
 
+interface IBoardWidgetItemProps {
+  title: string
+  authorNickname: string
+  createdAt: Date
+  content?: string
+}
+
 const BoardWidget = ({ size }: { size: SizeType }) => {
   const { isOpen, openModal, closeModal } = useModal()
   const { isPc } = useMedia()
   const { id } = useParams()
-
   const axiosWithAuth = useAxiosWithAuth()
-  const mockData: ITeamNotice[] = [
-    {
-      postId: 1,
-      title:
-        '11월 첫째주 주간회의 기록입니다. 11월 첫째주 주간회의 기록입니다.',
-      authorNickname: '김팀장',
-      createdAt: new Date(),
-    },
-  ]
   const { data, isLoading, error } = useSWR(
     `/api/v1/team/notice/${id}?pageSize=${8}page=${1}keyword=`,
     (url: string) => axiosWithAuth.get(url).then((res) => res.data),
   )
+
   if (isLoading)
     return (
       <BoardWidgetContainer openModal={openModal} isPc={isPc}>
@@ -103,7 +102,9 @@ const BoardWidgetList = ({ isPc, listData }: IBoardWidgetRenderProps) => {
   // size l
   return (
     <Stack spacing={isPc ? '1rem' : '0,5rem'}>
-      {listData?.map((item) => <div key={item.postId}>{item.title}</div>)}
+      {listData
+        ?.slice(0, 4)
+        .map((item) => <BoardWidgetItem key={item.postId} {...item} />)}
     </Stack>
   )
 }
@@ -129,4 +130,36 @@ const StatusMessage = ({ message }: { message: string }) => {
   )
 }
 
+const BoardWidgetItem = ({
+  title,
+  authorNickname,
+  content,
+  createdAt,
+}: IBoardWidgetItemProps) => {
+  return (
+    <Stack spacing={'0.25rem'}>
+      <Typography variant={'Body1'} color={'text.normal'}>
+        {title}
+      </Typography>
+      {content && (
+        <Typography
+          variant={'Body2'}
+          color={'text.alternative'}
+          sx={{ marginBottom: '0.75rem' }}
+        >
+          {content}
+        </Typography>
+      )}
+      <Stack direction={'row'} spacing={'0.5rem'}>
+        <Typography variant={'Body2'} color={'text.alternative'}>
+          {authorNickname}
+        </Typography>
+        <Typography variant={'Body2'} color={'text.alternative'}>
+          {dayjs(createdAt).format('MM월 DD일')}
+        </Typography>
+      </Stack>
+    </Stack>
+  )
+}
+
 export default BoardWidget

From f3266a62ec99333a31b8c77f06c413001f7f8ee2 Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Tue, 23 Jan 2024 21:21:27 +0900
Subject: [PATCH 06/10] Feat: Add Board Widget Preview Modal

---
 .../widgets/BoardWidget/PreviewModal.tsx      | 42 +++++++++++++++++++
 .../[id]/panel/widgets/BoardWidget/index.tsx  |  5 ++-
 src/components/board/ListPanel.tsx            |  2 +-
 3 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 src/app/teams/[id]/panel/widgets/BoardWidget/PreviewModal.tsx

diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/PreviewModal.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/PreviewModal.tsx
new file mode 100644
index 000000000..e32929970
--- /dev/null
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/PreviewModal.tsx
@@ -0,0 +1,42 @@
+// 게시판과 공지사항 미리보기 모달을 함께 쓸 계획...
+
+import CuButton from '@/components/CuButton'
+import CuModal from '@/components/CuModal'
+import { ListItem } from '@/components/board/ListPanel'
+import { ITeamNotice } from '@/types/TeamBoardTypes'
+import { Stack } from '@mui/material'
+import { useRouter } from 'next/navigation'
+
+interface IPreviewModalProps {
+  open: boolean
+  onClose: () => void
+  data: ITeamNotice[]
+}
+
+const PreviewModal = ({ open, onClose, data }: IPreviewModalProps) => {
+  const router = useRouter()
+
+  return (
+    <CuModal open={open} onClose={onClose} title={'공지사항'}>
+      <Stack spacing={'1rem'}>
+        <>
+          {data.map((item) => (
+            <ListItem
+              key={crypto.randomUUID()}
+              title={item.title}
+              authorNickname={item.authorNickname}
+              createdAt={item.createdAt}
+            />
+          ))}
+        </>
+        <CuButton
+          action={() => router.push(`/teams/[id]/board`)}
+          message={'모든 공지사항 보기'}
+          variant={'text'}
+        />
+      </Stack>
+    </CuModal>
+  )
+}
+
+export default PreviewModal
diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
index 99c4ae7c9..b00e99cb5 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
@@ -5,6 +5,7 @@ import dayjs from 'dayjs'
 import useSWR from 'swr'
 import useAxiosWithAuth from '@/api/config'
 import CuCircularProgress from '@/components/CuCircularProgress'
+import { Stack, Typography } from '@mui/material'
 import useModal from '@/hook/useModal'
 import useMedia from '@/hook/useMedia'
 import { NoticeIcon } from '@/icons/TeamPage'
@@ -12,7 +13,7 @@ import { SizeType } from '@/types/ITeamDnDLayout'
 import { ITeamNotice } from '@/types/TeamBoardTypes'
 import WidgetCard from '../WidgetCard'
 import * as style from './index.style'
-import { Stack, Typography } from '@mui/material'
+import PreviewModal from './PreviewModal'
 
 interface IBoardWidgetRenderProps {
   isPc?: boolean
@@ -72,7 +73,7 @@ const BoardWidget = ({ size }: { size: SizeType }) => {
           <BoardWidgetSingle postId={data.content[0].postId} />
         )}
       </BoardWidgetContainer>
-      {/* 모달 */}
+      <PreviewModal open={isOpen} onClose={closeModal} data={data.content} />
     </>
   )
 }
diff --git a/src/components/board/ListPanel.tsx b/src/components/board/ListPanel.tsx
index 9aa974758..e8a491da6 100644
--- a/src/components/board/ListPanel.tsx
+++ b/src/components/board/ListPanel.tsx
@@ -27,7 +27,7 @@ interface IListItemProps {
   title: string
   authorNickname: string
   createdAt: Date
-  onClick: () => void
+  onClick?: () => void
 }
 
 export const ListPageContainer = ({ children }: IChildrenProps) => {

From 997206483180b096f266b347adb1906acde11fde Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Wed, 24 Jan 2024 00:12:09 +0900
Subject: [PATCH 07/10] Fix: Preview Modal Bug

---
 .../widgets/BoardWidget/PreviewModal.tsx      |  5 +-
 .../[id]/panel/widgets/BoardWidget/index.tsx  | 61 ++++++++++++-------
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/PreviewModal.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/PreviewModal.tsx
index e32929970..ccbe66a75 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/PreviewModal.tsx
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/PreviewModal.tsx
@@ -11,9 +11,10 @@ interface IPreviewModalProps {
   open: boolean
   onClose: () => void
   data: ITeamNotice[]
+  teamId?: string | string[]
 }
 
-const PreviewModal = ({ open, onClose, data }: IPreviewModalProps) => {
+const PreviewModal = ({ open, onClose, data, teamId }: IPreviewModalProps) => {
   const router = useRouter()
 
   return (
@@ -30,7 +31,7 @@ const PreviewModal = ({ open, onClose, data }: IPreviewModalProps) => {
           ))}
         </>
         <CuButton
-          action={() => router.push(`/teams/[id]/board`)}
+          action={() => router.push(`/teams/${teamId}/board`)}
           message={'모든 공지사항 보기'}
           variant={'text'}
         />
diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
index b00e99cb5..f83ae0ec7 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
@@ -23,9 +23,10 @@ interface IBoardWidgetRenderProps {
 }
 
 interface IBoardWidgetContainerProps {
-  openModal: () => void
+  modalData?: ITeamNotice[]
   isPc: boolean
   children: React.ReactNode
+  teamId?: string | string[]
 }
 
 interface IBoardWidgetItemProps {
@@ -36,7 +37,6 @@ interface IBoardWidgetItemProps {
 }
 
 const BoardWidget = ({ size }: { size: SizeType }) => {
-  const { isOpen, openModal, closeModal } = useModal()
   const { isPc } = useMedia()
   const { id } = useParams()
   const axiosWithAuth = useAxiosWithAuth()
@@ -47,55 +47,67 @@ const BoardWidget = ({ size }: { size: SizeType }) => {
 
   if (isLoading)
     return (
-      <BoardWidgetContainer openModal={openModal} isPc={isPc}>
+      <BoardWidgetContainer isPc={isPc}>
         <CuCircularProgress color={'secondary'} />
       </BoardWidgetContainer>
     )
   if (!data || error)
     return (
-      <BoardWidgetContainer openModal={openModal} isPc={isPc}>
+      <BoardWidgetContainer isPc={isPc}>
         <StatusMessage message={'글을 불러오는 중 문제가 발생했습니다.'} />
       </BoardWidgetContainer>
     )
-  if (data.content.length === 0)
+  if (!data?.content.length)
     return (
-      <BoardWidgetContainer openModal={openModal} isPc={isPc}>
+      <BoardWidgetContainer isPc={isPc} modalData={data?.content} teamId={id}>
         <StatusMessage message={'등록된 글이 없습니다.'} />
       </BoardWidgetContainer>
     )
 
   return (
     <>
-      <BoardWidgetContainer openModal={openModal} isPc={isPc}>
+      <BoardWidgetContainer isPc={isPc} modalData={data.content} teamId={id}>
         {size === 'L' ? (
           <BoardWidgetList isPc={isPc} listData={data.content} />
         ) : (
           <BoardWidgetSingle postId={data.content[0].postId} />
         )}
       </BoardWidgetContainer>
-      <PreviewModal open={isOpen} onClose={closeModal} data={data.content} />
     </>
   )
 }
 
 const BoardWidgetContainer = ({
-  openModal,
+  teamId,
+  modalData,
   isPc,
   children,
 }: IBoardWidgetContainerProps) => {
+  const { isOpen, openModal, closeModal } = useModal()
+
   return (
-    <WidgetCard
-      onClick={openModal}
-      contentSx={isPc ? style.widgetContent : style.mobileWidgetContent}
-    >
-      <Stack spacing={isPc ? '1.5rem' : '0.5rem'}>
-        <Stack direction={'row'} spacing={'0.25rem'}>
-          <NoticeIcon sx={style.titleIcon} />
-          <Typography variant={'Title3Emphasis'}>공지사항</Typography>
+    <>
+      <WidgetCard
+        onClick={modalData ? openModal : undefined}
+        contentSx={isPc ? style.widgetContent : style.mobileWidgetContent}
+      >
+        <Stack spacing={isPc ? '1.5rem' : '0.5rem'}>
+          <Stack direction={'row'} spacing={'0.25rem'}>
+            <NoticeIcon sx={style.titleIcon} />
+            <Typography variant={'Title3Emphasis'}>공지사항</Typography>
+          </Stack>
+          {children}
         </Stack>
-        {children}
-      </Stack>
-    </WidgetCard>
+      </WidgetCard>
+      {modalData && (
+        <PreviewModal
+          open={isOpen}
+          onClose={closeModal}
+          data={modalData}
+          teamId={teamId}
+        />
+      )}
+    </>
   )
 }
 
@@ -105,7 +117,14 @@ const BoardWidgetList = ({ isPc, listData }: IBoardWidgetRenderProps) => {
     <Stack spacing={isPc ? '1rem' : '0,5rem'}>
       {listData
         ?.slice(0, 4)
-        .map((item) => <BoardWidgetItem key={item.postId} {...item} />)}
+        .map((item) => (
+          <BoardWidgetItem
+            key={item.postId}
+            title={item.title}
+            authorNickname={item.authorNickname}
+            createdAt={item.createdAt}
+          />
+        ))}
     </Stack>
   )
 }

From 23fe1e5e2d305db0f317977aa9cc4e7b77641b0b Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Wed, 24 Jan 2024 00:18:31 +0900
Subject: [PATCH 08/10] Fix: Add missing item content

---
 src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
index f83ae0ec7..75fe6590e 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
@@ -139,7 +139,14 @@ const BoardWidgetSingle = ({ postId }: IBoardWidgetRenderProps) => {
   if (isLoading) return <CuCircularProgress color={'secondary'} />
   if (!data || error)
     return <StatusMessage message="글을 불러오는 중 문제가 발생했습니다." />
-  return <div>{data?.title}</div>
+  return (
+    <BoardWidgetItem
+      title={data.title}
+      authorNickname={data.authorNickname}
+      createdAt={data.createdAt}
+      content={data.content}
+    />
+  )
 }
 
 const StatusMessage = ({ message }: { message: string }) => {

From a34d9caf9aa9b3d7d86e1d57d3f1f31de85ab622 Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Wed, 24 Jan 2024 00:48:44 +0900
Subject: [PATCH 09/10] Fix: Remove unnecessary fragment

---
 .../[id]/panel/widgets/BoardWidget/index.tsx  | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
index 75fe6590e..2222fdeed 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
@@ -3,17 +3,17 @@
 import { useParams } from 'next/navigation'
 import dayjs from 'dayjs'
 import useSWR from 'swr'
+import { Stack, Typography } from '@mui/material'
 import useAxiosWithAuth from '@/api/config'
 import CuCircularProgress from '@/components/CuCircularProgress'
-import { Stack, Typography } from '@mui/material'
 import useModal from '@/hook/useModal'
 import useMedia from '@/hook/useMedia'
 import { NoticeIcon } from '@/icons/TeamPage'
 import { SizeType } from '@/types/ITeamDnDLayout'
 import { ITeamNotice } from '@/types/TeamBoardTypes'
+import PreviewModal from './PreviewModal'
 import WidgetCard from '../WidgetCard'
 import * as style from './index.style'
-import PreviewModal from './PreviewModal'
 
 interface IBoardWidgetRenderProps {
   isPc?: boolean
@@ -65,15 +65,13 @@ const BoardWidget = ({ size }: { size: SizeType }) => {
     )
 
   return (
-    <>
-      <BoardWidgetContainer isPc={isPc} modalData={data.content} teamId={id}>
-        {size === 'L' ? (
-          <BoardWidgetList isPc={isPc} listData={data.content} />
-        ) : (
-          <BoardWidgetSingle postId={data.content[0].postId} />
-        )}
-      </BoardWidgetContainer>
-    </>
+    <BoardWidgetContainer isPc={isPc} modalData={data.content} teamId={id}>
+      {size === 'L' ? (
+        <BoardWidgetList isPc={isPc} listData={data.content} />
+      ) : (
+        <BoardWidgetSingle postId={data.content[0].postId} />
+      )}
+    </BoardWidgetContainer>
   )
 }
 

From d8c00ea287aaba0d826800b406e61c1cae72ef88 Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Wed, 24 Jan 2024 00:56:23 +0900
Subject: [PATCH 10/10] Fix: Change interface that all attibutes are optional
 to Partial Type

---
 .../[id]/panel/widgets/BoardWidget/index.tsx     | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
index 2222fdeed..c37364939 100644
--- a/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
+++ b/src/app/teams/[id]/panel/widgets/BoardWidget/index.tsx
@@ -15,12 +15,12 @@ import PreviewModal from './PreviewModal'
 import WidgetCard from '../WidgetCard'
 import * as style from './index.style'
 
-interface IBoardWidgetRenderProps {
-  isPc?: boolean
-  teamId?: string | string[]
-  postId?: number
-  listData?: ITeamNotice[]
-}
+type TBoardWidgetRenderProps = Partial<{
+  isPc: boolean
+  teamId: string | string[]
+  postId: number
+  listData: ITeamNotice[]
+}>
 
 interface IBoardWidgetContainerProps {
   modalData?: ITeamNotice[]
@@ -109,7 +109,7 @@ const BoardWidgetContainer = ({
   )
 }
 
-const BoardWidgetList = ({ isPc, listData }: IBoardWidgetRenderProps) => {
+const BoardWidgetList = ({ isPc, listData }: TBoardWidgetRenderProps) => {
   // size l
   return (
     <Stack spacing={isPc ? '1rem' : '0,5rem'}>
@@ -127,7 +127,7 @@ const BoardWidgetList = ({ isPc, listData }: IBoardWidgetRenderProps) => {
   )
 }
 
-const BoardWidgetSingle = ({ postId }: IBoardWidgetRenderProps) => {
+const BoardWidgetSingle = ({ postId }: TBoardWidgetRenderProps) => {
   // size m
   const axiosWithAuth = useAxiosWithAuth()
   const { data, isLoading, error } = useSWR(