diff --git a/frontend/src/apis/dashboardAPI.ts b/frontend/src/apis/dashboardAPI.ts new file mode 100644 index 00000000..b9671a60 --- /dev/null +++ b/frontend/src/apis/dashboardAPI.ts @@ -0,0 +1,17 @@ +import { develupAPIClient } from './clients/develupClient'; +import type { DashboardDiscussion, DashboardDiscussionComment } from '@/types/dashboard'; +import { PATH } from './paths'; + +export const getDashboardDiscussion = async () => { + const { data } = await develupAPIClient.get(PATH.dashboardDiscussion); + + return data; +}; + +export const getDashboardDiscussionComments = async () => { + const { data } = await develupAPIClient.get( + PATH.dashboardDiscussionComment, + ); + + return data; +}; diff --git a/frontend/src/apis/paths.ts b/frontend/src/apis/paths.ts index b8e7dc7a..b26d450f 100644 --- a/frontend/src/apis/paths.ts +++ b/frontend/src/apis/paths.ts @@ -15,6 +15,8 @@ export const PATH = { missionInProgress: '/missions/in-progress', solutions: '/solutions', mySolutions: '/solutions/mine', + dashboardDiscussion: '/discussions/mine', + dashboardDiscussionComment: '/discussions/comments/mine', discussions: '/discussions', submitDiscussion: '/discussions/submit', }; diff --git a/frontend/src/components/DashBoard/DashBoardMissionList/NoContent.tsx b/frontend/src/components/DashBoard/DashBoardMissionList/NoContent.tsx index e42e4eaa..245559d3 100644 --- a/frontend/src/components/DashBoard/DashBoardMissionList/NoContent.tsx +++ b/frontend/src/components/DashBoard/DashBoardMissionList/NoContent.tsx @@ -4,42 +4,50 @@ import { ROUTES } from '@/constants/routes'; import Button from '@/components/common/Button/Button'; interface NoContentProps { - type: 'submitted' | 'inProgress' | 'comments'; + type: 'submitted' | 'inProgress' | 'comments' | 'dashboardDiscussion'; } +const NO_CONTENT_INFO = { + inProgress: { + route: ROUTES.missionList, + mainText: '진행 중인 미션이 없어요', + subText: '새로운 미션을 찾으러 가볼까요?', + buttonText: '미션 둘러보기', + }, + submitted: { + route: ROUTES.solutions, + mainText: '제출한 솔루션이 없어요', + subText: '참여할 수 있는 미션을 찾아보러 가볼까요?', + buttonText: '미션 둘러보기', + }, + comments: { + route: ROUTES.solutions, + mainText: '제출한 댓글이 없어요', + subText: '댓글을 달아볼까요?', + buttonText: '솔루션 둘러보기', + }, + dashboardDiscussion: { + route: '/discussion', + mainText: '제출한 디스커션이 없어요', + subText: '다른 사람들이 작성한 디스커션을 보러 가볼까요?', + buttonText: '디스커션 둘러보기', + }, +}; + export default function NoContent({ type }: NoContentProps) { const navigate = useNavigate(); - const route = - type === 'inProgress' - ? ROUTES.missionList - : type === 'submitted' - ? ROUTES.solutions - : ROUTES.solutions; + const { route, mainText, subText, buttonText } = NO_CONTENT_INFO[type]; - const handleNavigateToMissionList = () => { + const handleNavigate = () => { navigate(route); }; - const mainText = - type === 'inProgress' - ? '진행 중인 미션이 없어요' - : type === 'submitted' - ? '제출한 솔루션이 없어요' - : '제출한 댓글이 없어요'; - const subText = - type === 'inProgress' - ? '새로운 미션을 찾으러 가볼까요?' - : type === 'submitted' - ? '참여할 수 있는 미션을 찾아보러 가볼까요?' - : '댓글을 달아볼까요?'; - const buttonText = type === 'comments' ? '솔루션 둘러보기' : '미션 둘러보기'; - return ( {mainText} {subText} - + {/* {buttonText} */} ); diff --git a/frontend/src/components/DashBoard/DashboardDiscussion/DashboardDiscussion.styled.ts b/frontend/src/components/DashBoard/DashboardDiscussion/DashboardDiscussion.styled.ts new file mode 100644 index 00000000..54745621 --- /dev/null +++ b/frontend/src/components/DashBoard/DashboardDiscussion/DashboardDiscussion.styled.ts @@ -0,0 +1,80 @@ +import { styled } from 'styled-components'; +import { Link } from 'react-router-dom'; + +export const HashTagWrapper = styled.div` + display: flex; + margin-bottom: 0.5rem; +`; + +export const HashTag = styled.span<{ $isTitle?: boolean }>` + padding: 0.5rem 0.8rem; + border-radius: 2rem; + margin-right: 0.7rem; + background-color: ${(props) => (props.$isTitle ? 'var(--danger-50)' : 'var(--primary-50)')}; +`; + +export const ImageWrapper = styled.div` + width: 4.2rem; + height: 4.2rem; + border: 0.1rem solid var(--grey-400); + border-radius: 50%; +`; + +export const Image = styled.img` + border-radius: 50%; + width: 100%; + height: 100%; +`; + +export const Container = styled.div` + width: 67.4rem; + height: 100%; +`; + +export const DiscussionWrapper = styled(Link)` + height: 8.5rem; + border-radius: 2.8rem; + background: ${(props) => props.theme.colors.white}; + box-shadow: ${(props) => props.theme.boxShadow.shadow04}; + padding: 14px 34px 14px 34px; + display: flex; + margin-top: 3rem; + margin-bottom: 1.5rem; + cursor: pointer; +`; + +export const CommentCountWrapper = styled.div` + margin-left: 2.8rem; + display: flex; + justify-content: center; + align-items: center; +`; + +export const ImageCommentWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; +`; + +export const TextWrapper = styled.div` + display: flex; + flex-direction: column; + min-width: 50rem; +`; + +export const CommentText = styled.span` + ${(props) => props.theme.font.body} + margin-bottom: 0.6rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +`; + +export const SubText = styled.span` + ${(props) => props.theme.font.badge} + color : var(--grey-400) +`; + +export const CommentCountText = styled(SubText)` + margin-left: 0.7rem; +`; diff --git a/frontend/src/components/DashBoard/DashboardDiscussion/DiscussionItem.tsx b/frontend/src/components/DashBoard/DashboardDiscussion/DiscussionItem.tsx new file mode 100644 index 00000000..08393dc6 --- /dev/null +++ b/frontend/src/components/DashBoard/DashboardDiscussion/DiscussionItem.tsx @@ -0,0 +1,44 @@ +import * as S from './DashboardDiscussion.styled'; +import type { HashTag } from '@/types'; +import CommentIcon from '@/assets/images/comment-count.svg'; + +interface DiscussionItemProps { + id: number; + mission: string; + hashTags: HashTag[]; + title: string; + imageUrl: string; + commentCount: number; +} + +export default function DiscussionItem({ + id, + mission, + hashTags, + title, + imageUrl, + commentCount, +}: DiscussionItemProps) { + return ( + + + + {mission} + {hashTags.map((hashTag) => { + return {hashTag.name}; + })} + + {title} + + + + + + + + {commentCount} + + + + ); +} diff --git a/frontend/src/components/DashBoard/DashboardDiscussion/index.tsx b/frontend/src/components/DashBoard/DashboardDiscussion/index.tsx new file mode 100644 index 00000000..8ee16a07 --- /dev/null +++ b/frontend/src/components/DashBoard/DashboardDiscussion/index.tsx @@ -0,0 +1,34 @@ +import type { Discussion } from '@/types/dashboard'; +import NoContent from '../DashBoardMissionList/NoContent'; +import * as S from './DashboardDiscussion.styled'; +import DiscussionItem from './DiscussionItem'; + +interface DashBoardDiscussionListProps { + discussionList: Discussion[]; +} + +export default function DashBoardDiscussionList({ discussionList }: DashBoardDiscussionListProps) { + return ( + <> + {!discussionList.length ? ( + + ) : ( + + {discussionList.map((discussion) => { + return ( + + ); + })} + + )} + + ); +} diff --git a/frontend/src/components/DashBoard/DiscussionComment/index.tsx b/frontend/src/components/DashBoard/DiscussionComment/index.tsx new file mode 100644 index 00000000..90cf26de --- /dev/null +++ b/frontend/src/components/DashBoard/DiscussionComment/index.tsx @@ -0,0 +1,36 @@ +import NoContent from '../DashBoardMissionList/NoContent'; +import type { DiscussionComment } from '@/types/dashboard'; +import MyComment from '../MyComments/MyComment'; +import * as S from '../MyComments/MyComments.styled'; + +interface DiscussionCommentListProps { + discussionCommentList: DiscussionComment[]; +} + +export default function DiscussionCommentList({ + discussionCommentList, +}: DiscussionCommentListProps) { + return ( + <> + {!discussionCommentList.length ? ( + + ) : ( + + {discussionCommentList.map((discussionComment) => { + return ( + + ); + })} + + )} + + ); +} diff --git a/frontend/src/components/DashBoard/MyComments/MyComment.tsx b/frontend/src/components/DashBoard/MyComments/MyComment.tsx index 0ac951b7..8e029fed 100644 --- a/frontend/src/components/DashBoard/MyComments/MyComment.tsx +++ b/frontend/src/components/DashBoard/MyComments/MyComment.tsx @@ -1,27 +1,37 @@ -import type { MyComments } from '@/types'; import { formatDateString } from '@/utils/formatDateString'; import * as S from './MyComments.styled'; import CommentIcon from '@/assets/images/comment-count.svg'; +interface MyCommentProps { + contentId: number; + content: string; + createdAt: string; + contentTitle: string; + contentCommentCount: number; + type: 'solutions' | 'discussions'; +} + export default function MyComment({ - solutionId, + contentId, content, createdAt, - solutionTitle, - solutionCommentCount, -}: Omit) { + contentTitle, + contentCommentCount, + type, +}: MyCommentProps) { const commentDate = formatDateString(createdAt); + const linkUrl = `/${type}/${contentId}`; return ( - + {content} {commentDate} - {solutionTitle} + {contentTitle} - {solutionCommentCount} + {contentCommentCount} ); diff --git a/frontend/src/components/DashBoard/MyComments/MyCommentList.tsx b/frontend/src/components/DashBoard/MyComments/MyCommentList.tsx index 245c3d96..1ecdf12d 100644 --- a/frontend/src/components/DashBoard/MyComments/MyCommentList.tsx +++ b/frontend/src/components/DashBoard/MyComments/MyCommentList.tsx @@ -18,11 +18,12 @@ export default function MyCommentList({ comments }: MyCommentListProps) { return ( ); })} diff --git a/frontend/src/components/DashBoard/MyComments/MyComments.styled.ts b/frontend/src/components/DashBoard/MyComments/MyComments.styled.ts index 1dbb5646..d7a38447 100644 --- a/frontend/src/components/DashBoard/MyComments/MyComments.styled.ts +++ b/frontend/src/components/DashBoard/MyComments/MyComments.styled.ts @@ -28,7 +28,7 @@ export const CommentCountWrapper = styled.div` export const TextWrapper = styled.div` display: flex; flex-direction: column; - min-width: 53rem; + min-width: 54rem; `; export const CommentText = styled.span` diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index 53d76a3b..5c1f2a08 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -11,6 +11,8 @@ export const ROUTES = { dashboardMissionInProgress: 'in-progress-mission', dashboardSubmittedSolution: 'submitted-solution', dashboardComments: 'comments', + dashboardDiscussions: 'discussions', + dashboardDiscussionComments: 'discussion/comments', about: '/about', discussions: '/discussions', submitDiscussion: '/submit/discussion', diff --git a/frontend/src/hooks/queries/keys.ts b/frontend/src/hooks/queries/keys.ts index 0c72dea2..978103cd 100644 --- a/frontend/src/hooks/queries/keys.ts +++ b/frontend/src/hooks/queries/keys.ts @@ -43,3 +43,10 @@ export const userKeys = { export const discussionsKeys = { all: ['discussions'], }; + +export const dashboardKeys = { + default: ['dashboard'], + discussions: () => [...dashboardKeys.default, 'discussions'], + discussionComments: () => [...dashboardKeys.default, 'discussion', 'comments'], + solutionComments: () => [...dashboardKeys.default, 'solution', 'comments'], +} as const; diff --git a/frontend/src/hooks/useDashboardDiscussion.ts b/frontend/src/hooks/useDashboardDiscussion.ts new file mode 100644 index 00000000..3e078762 --- /dev/null +++ b/frontend/src/hooks/useDashboardDiscussion.ts @@ -0,0 +1,12 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; +import { getDashboardDiscussion } from '@/apis/dashboardAPI'; +import { dashboardKeys } from './queries/keys'; + +const useDashboardDiscussion = () => { + return useSuspenseQuery({ + queryFn: getDashboardDiscussion, + queryKey: dashboardKeys.discussions(), + }); +}; + +export default useDashboardDiscussion; diff --git a/frontend/src/hooks/useDashboardDiscussionComment.ts b/frontend/src/hooks/useDashboardDiscussionComment.ts new file mode 100644 index 00000000..226edd73 --- /dev/null +++ b/frontend/src/hooks/useDashboardDiscussionComment.ts @@ -0,0 +1,12 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; +import { getDashboardDiscussionComments } from '@/apis/dashboardAPI'; +import { dashboardKeys } from './queries/keys'; + +const useDashboardDiscussionComment = () => { + return useSuspenseQuery({ + queryFn: getDashboardDiscussionComments, + queryKey: dashboardKeys.discussionComments(), + }); +}; + +export default useDashboardDiscussionComment; diff --git a/frontend/src/hooks/useMyComments.ts b/frontend/src/hooks/useMyComments.ts index 924d8885..9af03948 100644 --- a/frontend/src/hooks/useMyComments.ts +++ b/frontend/src/hooks/useMyComments.ts @@ -1,10 +1,10 @@ import { useSuspenseQuery } from '@tanstack/react-query'; -import { solutionCommentKeys } from './queries/keys'; -import { getMyComments } from '@/apis/solutionCommentAPI'; +import { dashboardKeys } from './queries/keys'; +import { getMyComments } from '@/apis/commentAPI'; const useMyComments = () => { return useSuspenseQuery({ - queryKey: solutionCommentKeys.mine, + queryKey: dashboardKeys.solutionComments(), queryFn: getMyComments, }); }; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 2f2685eb..9cd7a33c 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -12,7 +12,8 @@ import * as Sentry from '@sentry/react'; import { ThemeProvider } from 'styled-components'; import { theme } from './styles/theme'; import './styles/fonts.css'; -import DiscussionListPage from './pages/DiscussionListPage'; +import DashboardDiscussionPage from './pages/DashboardPage/Discussion'; +import DashboardDiscussionCommentPage from './pages/DashboardPage/DiscussionComment'; export const queryClient = new QueryClient({ defaultOptions: { @@ -167,6 +168,22 @@ const routes = [ ), }, + { + path: ROUTES.dashboardDiscussions, + element: ( + }> + + + ), + }, + { + path: ROUTES.dashboardDiscussionComments, + element: ( + }> + + + ), + }, ], }, { @@ -199,16 +216,6 @@ const routes = [ ), }, - { - path: `${ROUTES.discussions}`, - element: ( - - }> - - - - ), - }, { path: ROUTES.submitDiscussion, element: ( @@ -225,46 +232,46 @@ export const router = createBrowserRouter(routes, { basename: ROUTES.main, }); -// async function enableMocking() { -// if (process.env.NODE_ENV !== 'development') { -// return; -// } +async function enableMocking() { + if (process.env.NODE_ENV !== 'development') { + return; + } -// const { worker } = await import('./mocks/browser'); + const { worker } = await import('./mocks/browser'); -// // `worker.start()` returns a Promise that resolves -// // once the Service Worker is up and ready to intercept requests. -// return worker.start(); -// } + // `worker.start()` returns a Promise that resolves + // once the Service Worker is up and ready to intercept requests. + return worker.start(); +} -// enableMocking().then(() => { -// root.render( -// -// -// -// 에러에요!}> -// -// -// -// -// -// -// -// , -// ); -// }); +enableMocking().then(() => { + root.render( + + + + 에러에요!}> + + + + + + + + , + ); +}); -root.render( - - - - 에러에요!}> - - - - - - - - , -); +// root.render( +// +// +// +// 에러에요!}> +// +// +// +// +// +// +// +// , +// ); diff --git a/frontend/src/mocks/dashboardDiscussion.json b/frontend/src/mocks/dashboardDiscussion.json new file mode 100644 index 00000000..246692c6 --- /dev/null +++ b/frontend/src/mocks/dashboardDiscussion.json @@ -0,0 +1,54 @@ +[ + { + "id": 1, + "title": "객체지향이 뭘까요?", + "mission": "주문", + "hashTags": [ + { + "id": 1, + "name": "JAVA" + }, + { + "id": 2, + "name": "객체지향" + }, + { + "id": 3, + "name": "클린코드" + } + ], + "member": { + "id": 1, + "email": "test1@gmail.com", + "name": "구름", + "imageUrl": "https://avatars.githubusercontent.com/u/75781414?v=4" + }, + "commentCount": 100 + }, + { + "id": 2, + "title": "디자인패턴 적용한 거 말해봐요", + "mission": "숫자 맞추기 게임", + "hashTags": [ + { + "id": 1, + "name": "JAVA" + }, + { + "id": 2, + "name": "객체지향" + }, + { + "id": 3, + "name": "클린코드" + } + ], + "member": { + "id": 2, + "email": "test1@gmail.com", + "name": "리브", + "imageUrl": "https://avatars.githubusercontent.com/u/131349867?v=4" + }, + "commentCount": 100 + } +] diff --git a/frontend/src/mocks/dashboardDiscussionComment.json b/frontend/src/mocks/dashboardDiscussionComment.json new file mode 100644 index 00000000..75e894b8 --- /dev/null +++ b/frontend/src/mocks/dashboardDiscussionComment.json @@ -0,0 +1,18 @@ +[ + { + "id": 1, + "discussionId": 1, + "content": "dasfdsvdsda", + "createdAt": "2024-08-21T03:50:48.544Z", + "discussionTitle": "관심사 분리에 관한 글 올려봅니다.", + "discussionCommentCount": 50 + }, + { + "id": 2, + "discussionId": 2, + "content": "ㅎㄹㄴㅇㅇㅁㄹㅇㅇㅂㅈㅇㅇㄹㅇㄴㅊㄴㅁㅇㅊㄴㅁㅎㄹㄴㅇㅇㅁㄹㅇㅇㅂㅈㅇㅇㄹㅇㄴㅊㄴㅁㅇㅊㄴㅁㅎㄹㄴㅇㅇㅁㄹㅇㅇㅂㅈㅇㅇㄹㅇㄴㅊㄴㅁㅇㅊㄴㅁㅎㄹㄴㅇㅇㅁㄹㅇㅇㅂㅈㅇㅇㄹㅇㄴㅊㄴㅁㅇㅊㄴㅁㅎㄹㄴㅇㅇㅁㄹㅇㅇㅂㅈㅇㅇㄹㅇㄴㅊㄴㅁㅇㅊㄴㅁㅎㄹㄴㅇㅇㅁㄹㅇㅇㅂㅈㅇㅇㄹㅇㄴㅊㄴㅁㅇㅊㄴㅁ", + "createdAt": "2024-08-21T03:50:48.544Z", + "discussionTitle": "관심사 분리에 관한 글 올려봅니다.", + "discussionCommentCount": 50 + } +] diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts index 4f90745f..f20a8a57 100644 --- a/frontend/src/mocks/handlers.ts +++ b/frontend/src/mocks/handlers.ts @@ -6,6 +6,8 @@ import myComments from './myComments.json'; import missionInProgress from './missionInProgress.json'; import { HASHTAGS } from '@/constants/hashTags'; import { API_URL } from '@/apis/clients/develupClient'; +import dashboardDiscussions from './dashboardDiscussion.json'; +import dashboardDiscussionComments from './dashboardDiscussionComment.json'; export const handlers = [ http.get(`${API_URL}${PATH.missionList}`, ({ request }) => { @@ -19,7 +21,29 @@ export const handlers = [ return HttpResponse.json({ data: filteredMissions }); }), + http.get(`${API_URL}${PATH.mySolutions}`, () => { + return HttpResponse.json({ + data: submittedSolutions, + }); + }), + http.get(`${API_URL}${PATH.missionInProgress}`, () => { + return HttpResponse.json({ + data: missionInProgress, + }); + }), + + http.get(`${API_URL}${PATH.myComments}`, () => { + return HttpResponse.json({ data: myComments }); + }), + + http.get(`${API_URL}${PATH.dashboardDiscussion}`, () => { + return HttpResponse.json({ data: dashboardDiscussions }); + }), + + http.get(`${API_URL}${PATH.dashboardDiscussionComment}`, () => { + return HttpResponse.json({ data: dashboardDiscussionComments }); + }), http.get(`${API_URL}${PATH.missionList}/:id`, ({ request }) => { const url = new URL(request.url); const id = Number(url.pathname.split('/').pop()); @@ -49,17 +73,4 @@ export const handlers = [ }, ); }), - http.get(`${API_URL}${PATH.missionInProgress}`, () => { - return HttpResponse.json({ - data: missionInProgress, - }); - }), - http.get(`${API_URL}${PATH.submitSolution}`, () => { - return HttpResponse.json({ - data: submittedSolutions, - }); - }), - http.get(`${API_URL}${PATH.myComments}`, () => { - return HttpResponse.json({ data: myComments }); - }), ]; diff --git a/frontend/src/mocks/mock.json b/frontend/src/mocks/mock.json new file mode 100644 index 00000000..2d37c6c9 --- /dev/null +++ b/frontend/src/mocks/mock.json @@ -0,0 +1,46 @@ +{ + "id": 1, + "title": "객체지향이 뭘까요?", + "content": "객체지향에 대해 토론해봅시다.", + "mission": { + "id": 1, + "title": "주문", + "thumbnail": "https://raw.githubusercontent.com/develup-mission/docs/main/image/java-order.png", + "summary": "배달 주문을 받아보자", + "url": "https://github.com/develup-mission/java-order", + "hashTags": [ + { + "id": 1, + "name": "JAVA" + }, + { + "id": 2, + "name": "객체지향" + }, + { + "id": 3, + "name": "클린코드" + } + ] + }, + "member": { + "id": 1, + "email": "test1@gmail.com", + "name": "구름", + "imageUrl": "https://avatars.githubusercontent.com/u/75781414?v=4" + }, + "hashTags": [ + { + "id": 1, + "name": "JAVA" + }, + { + "id": 2, + "name": "객체지향" + }, + { + "id": 3, + "name": "클린코드" + } + ] +} diff --git a/frontend/src/pages/DashboardPage/DashBoardPageLayout/index.tsx b/frontend/src/pages/DashboardPage/DashBoardPageLayout/index.tsx index f4bf5f2b..7a9d39bc 100644 --- a/frontend/src/pages/DashboardPage/DashBoardPageLayout/index.tsx +++ b/frontend/src/pages/DashboardPage/DashBoardPageLayout/index.tsx @@ -14,7 +14,15 @@ const PATH_INFO = [ }, { name: '/dashboard/comments', - text: '작성한 댓글', + text: '작성한 솔루션 댓글', + }, + { + name: '/dashboard/discussions', + text: '제출한 디스커션', + }, + { + name: '/dashboard/discussion/comments', + text: '작성한 디스커션 댓글', }, ]; diff --git a/frontend/src/pages/DashboardPage/Discussion/index.tsx b/frontend/src/pages/DashboardPage/Discussion/index.tsx new file mode 100644 index 00000000..cad909df --- /dev/null +++ b/frontend/src/pages/DashboardPage/Discussion/index.tsx @@ -0,0 +1,8 @@ +import useDashboardDiscussion from '@/hooks/useDashboardDiscussion'; +import DashBoardDiscussionList from '@/components/DashBoard/DashboardDiscussion'; + +export default function DashboardDiscussionPage() { + const { data: discussionList } = useDashboardDiscussion(); + + return ; +} diff --git a/frontend/src/pages/DashboardPage/DiscussionComment/index.tsx b/frontend/src/pages/DashboardPage/DiscussionComment/index.tsx new file mode 100644 index 00000000..ae1083fa --- /dev/null +++ b/frontend/src/pages/DashboardPage/DiscussionComment/index.tsx @@ -0,0 +1,8 @@ +import useDashboardDiscussionComment from '@/hooks/useDashboardDiscussionComment'; +import DiscussionCommentList from '@/components/DashBoard/DiscussionComment'; + +export default function DashboardDiscussionCommentPage() { + const { data: discussionCommentList } = useDashboardDiscussionComment(); + + return ; +} diff --git a/frontend/src/types/dashboard.ts b/frontend/src/types/dashboard.ts new file mode 100644 index 00000000..cab4d5ce --- /dev/null +++ b/frontend/src/types/dashboard.ts @@ -0,0 +1,28 @@ +import type { UserInfo } from './user'; +import type { HashTag } from './index'; + +export interface Discussion { + id: number; + title: string; + mission: string; + member: Omit; + hashTags: HashTag[]; + commentCount: number; +} + +export interface DashboardDiscussion { + data: Discussion[]; +} + +export interface DiscussionComment { + id: number; + discussionId: number; + content: string; + createdAt: string; + discussionTitle: string; + discussionCommentCount: number; +} + +export interface DashboardDiscussionComment { + data: DiscussionComment[]; +} diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts index d3eccd38..a9f1df51 100644 --- a/frontend/src/types/index.ts +++ b/frontend/src/types/index.ts @@ -79,6 +79,15 @@ export interface MyComments { solutionCommentCount: number; } +export interface Comments { + id: number; + contentId: number; + content: string; + createdAt: string; + contentTitle: string; + contentCommentCount: number; +} + export interface Discussion { id: number; title: string;