Merge pull request #20 from Help-M-Ssaem/feat/#19

[Feat] 토론 게시판 UI, API 연동
Help-M-Ssaem · Aug 9, 2024 · 9b2d96a · 9b2d96a
2 parents dacffe4 + d08c1c2
commit 9b2d96a
Show file tree

Hide file tree

Showing 29 changed files with 595 additions and 116 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -35,6 +35,7 @@
     "jsx-a11y/no-static-element-interactions": "off",
     "import/no-named-as-default": "off",
     "import/no-cycle": "off",
-    "arrow-body-style": "off"
+    "arrow-body-style": "off",
+    "no-else-return": "off"
   }
 }
diff --git a/src/app/board/[id]/page.tsx b/src/app/board/[id]/page.tsx
@@ -68,7 +68,7 @@ const BoardDetail = () => {
           </>
         )}
 
-        <CommentList boardId={Number(id)} page={0} size={10} />
+        <CommentList id={Number(id)} page={0} size={10} />
       </Container>
     </>
   )

diff --git a/src/app/discussion/[id]/page.tsx b/src/app/discussion/[id]/page.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import Image from 'next/image'
+import Button from '@/components/common/Button'
+import Container from '@/components/common/Container'
+import Profile from '@/components/common/Profile'
+import { useDiscussionDetail } from '@/service/discussion/useDiscussionService'
+import { useParams } from 'next/navigation'
+import CommentList from '@/components/board/CommentList'
+import { DiscussionOptionI } from '@/model/Discussion'
+import DiscussionOption from '@/components/discussion/DiscussionOption'
+
+const DiscussionDetail = () => {
+  const { id } = useParams()
+  const { data: discussionDetail } = useDiscussionDetail(Number(id))
+
+  const discussion = discussionDetail && discussionDetail.discussionSimpleInfo
+  const formattedCreatedAt = discussion && discussion.createdAt.split(' ')[0]
+
+  return (
+    <>
+      <div className="text-title3 text-maindark font-semibold my-5">
+        MBTI 과몰입 토론
+      </div>
+      <Container color="purple">
+        <div className="flex justify-end gap-2.5 mb-5">
+          <Button text="수정" color="PURPLE" size="small" onClick={() => {}} />
+          <Button text="삭제" color="PURPLE" size="small" onClick={() => {}} />
+        </div>
+        <div className="h-[1px] bg-main" />
+        {discussion && (
+          <>
+            <div className="flex justify-between my-7.5">
+              <Profile user={discussion?.memberSimpleInfo} />
+              <div className="flex gap-3.5 text-caption text-gray2">
+                <p>{formattedCreatedAt}</p>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-9">
+              <div className="flex flex-col gap-1">
+                <p className="text-title3 font-bold">{discussion.title}</p>
+                <div className="text-body text-mainblack">
+                  {discussion.content}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                {discussion.options &&
+                  discussion.options.map((option: DiscussionOptionI) => (
+                    <DiscussionOption
+                      discussionOption={option}
+                      size="small"
+                      boardId={Number(id)}
+                    />
+                  ))}
+              </div>
+
+              <div className="flex justify-between">
+                <div className="flex gap-1">
+                  <Image
+                    src="/images/discussion/red_circle.svg"
+                    alt="red"
+                    width={12}
+                    height={12}
+                  />
+                  <p className="text-caption text-gray2">
+                    {discussion.participantCount}명이 참여 중!
+                  </p>
+                </div>
+                <p className="text-caption text-gray2">
+                  댓글 {discussion.commentCount}
+                </p>
+              </div>
+            </div>
+          </>
+        )}
+        <CommentList id={Number(id)} page={0} size={10} />
+      </Container>
+    </>
+  )
+}
+
+export default DiscussionDetail
diff --git a/src/app/discussion/page.tsx b/src/app/discussion/page.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import DiscussionBoard from '@/components/discussion/DiscussionBoard'
+import { useDiscussionList } from '@/service/discussion/useDiscussionService'
+
+const DiscussionPage = () => {
+  const { data: discussionList } = useDiscussionList(0, 10)
+
+  return (
+    <>
+      <div className="text-title3 text-maindark font-semibold my-5">
+        MBTI 과몰입 토론
+      </div>
+      <div className="flex flex-col gap-2.5 sm:gap-16.5">
+        {discussionList &&
+          discussionList.result.map((discussion) => (
+            <>
+              <DiscussionBoard
+                key={discussion.id}
+                discussionBoard={discussion}
+              />
+              <div className="h-[1px] bg-gray4" />
+            </>
+          ))}
+      </div>
+    </>
+  )
+}
+
+export default DiscussionPage
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next'
-import './globals.css'
+import '../styles/globals.css'
 import Recoil from '@/recoil/Recoil'
 import localFont from 'next/font/local'
 import dynamic from 'next/dynamic'

diff --git a/src/app/worry/[id]/page.tsx b/src/app/worry/[id]/page.tsx
@@ -10,6 +10,8 @@ const WorryDetail = () => {
   const { id } = useParams()
   const { data: worryDetail } = useWorryDetail(Number(id))
 
+  const formattedCreatedAt = worryDetail?.createdAt.split(' ')[0]
+
   return (
     <>
       <div className="text-title3 text-maindark font-semibold my-5">
@@ -30,9 +32,9 @@ const WorryDetail = () => {
                 strFromMbti={worryDetail.memberSimpleInfo.mbti}
                 strToMbti={worryDetail.targetMbti}
               />
-              <div className="flex gap-3.5 text-caption text-gray2">
+              <div className="flex flex-col items-end gap-1 sm:flex-row sm:gap-3.5 sm:items-start text-caption text-gray2">
                 <p>조회수 {worryDetail.hits}회</p>
-                <p>{worryDetail.createdAt}</p>
+                <p>{formattedCreatedAt}</p>
               </div>
             </div>
 

diff --git a/src/app/worry/page.tsx b/src/app/worry/page.tsx
@@ -30,7 +30,7 @@ const WorryPage = () => {
 
   return (
     <div className="flex flex-col">
-      <div className="text-title3 text-maindark font-semibold m-5">
+      <div className="text-title3 text-maindark font-semibold my-5">
         M쌤 매칭을 기다리는 고민
       </div>
       <Container color="purple">
@@ -50,7 +50,7 @@ const WorryPage = () => {
           ))}
       </Container>
 
-      <div className="text-title3 text-maindark font-semibold m-5">
+      <div className="text-title3 text-maindark font-semibold my-5">
         해결 완료된 고민
       </div>
       <Container color="purple">

diff --git a/src/components/board/CommentList.stories.tsx b/src/components/board/CommentList.stories.tsx
@@ -13,7 +13,7 @@ const Template: StoryFn<CommentListProps> = (args: CommentListProps) => (
 
 export const Primary = Template.bind({})
 Primary.args = {
-  boardId: 1,
+  id: 1,
   page: 0,
   size: 10,
 }
diff --git a/src/components/board/CommentList.tsx b/src/components/board/CommentList.tsx
@@ -4,17 +4,18 @@ import { useCommentList } from '@/service/comment/useCommentService'
 import Comment from './Comment'
 
 interface CommentListProps {
-  boardId: number
+  id: number
   page: number
   size: number
 }
 
-const CommentList = ({ boardId, page, size }: CommentListProps) => {
-  const { data } = useCommentList({ boardId, page, size })
+const CommentList = ({ id, page, size }: CommentListProps) => {
+  const { data: commentList } = useCommentList({ id, page, size })
 
   return (
     <div className="flex flex-col gap-5">
-      {data && data.result.map((comment) => <Comment comment={comment} />)}
+      {commentList &&
+        commentList.result.map((comment) => <Comment comment={comment} />)}
     </div>
   )
 }

diff --git a/src/components/common/Category.tsx b/src/components/common/Category.tsx
@@ -7,8 +7,8 @@ import Image from 'next/image'
 const categories = [
   { path: '/', label: 'HOME' },
   { path: '/board', label: '게시판' },
-  { path: '/match/matching', label: 'M쌤 매칭' },
-  { path: '/debate/postlist', label: 'MBTI 과몰입 토론' },
+  { path: '/worry', label: 'M쌤 매칭' },
+  { path: '/discussion', label: 'MBTI 과몰입 토론' },
 ]
 
 const extraCategories = [
@@ -33,6 +33,18 @@ const Category = () => {
     router.push(path)
   }
 
+  const getButtonClass = (categoryPath: string) => {
+    if (categoryPath === '/') {
+      return selected === '/'
+        ? 'text-main1 font-bold after:content-[""] after:absolute after:bottom-[-8px] after:left-0 after:w-full after:h-[3px] after:bg-main1 after:opacity-100'
+        : ''
+    } else if (selected?.startsWith(categoryPath)) {
+      return 'text-main1 font-bold after:content-[""] after:absolute after:bottom-[-8px] after:left-0 after:w-full after:h-[3px] after:bg-main1 after:opacity-100'
+    } else {
+      return ''
+    }
+  }
+
   return (
     <div className="h-12 border-t border-t-gray5 whitespace-nowrap flex justify-between items-center overflow-x-scroll scrollbar-hide">
       <ul className="flex items-center text-title3 font-normal">
@@ -41,11 +53,7 @@ const Category = () => {
             <button
               type="button"
               onClick={() => handleClick(category.path)}
-              className={`mr-7 cursor-pointer relative hover:text-main1 transition-all ${
-                selected === category.path
-                  ? 'text-main1 font-bold after:content-[""] after:absolute after:bottom-[-8px] after:left-0 after:w-full after:h-[3px] after:bg-main1 after:opacity-100'
-                  : ''
-              }`}
+              className={`mr-7 cursor-pointer relative hover:text-main1 transition-all ${getButtonClass(category.path)}`}
             >
               {category.label}
             </button>
@@ -59,11 +67,7 @@ const Category = () => {
             <button
               type="button"
               onClick={() => handleClick(category.path)}
-              className={`ml-7 cursor-pointer relative hover:text-main1 transition-all ${
-                selected === category.path
-                  ? 'text-main1 font-bold after:content-[""] after:absolute after:bottom-[-10px] after:left-0 after:w-full after:h-[3px] after:bg-main1 after:opacity-100'
-                  : ''
-              }`}
+              className={`ml-7 cursor-pointer relative hover:text-main1 transition-all ${getButtonClass(category.path)}`}
             >
               {category.label}
             </button>

diff --git a/src/components/common/Container.tsx b/src/components/common/Container.tsx
@@ -14,14 +14,22 @@ type Color = keyof typeof ContainerTheme.color
 export interface ContainerProps {
   children: ReactNode
   color: Color
+  onClick?: () => void
+  className?: string
 }
 
-const Container = ({ children, color }: ContainerProps) => (
+const Container = ({ children, color, onClick, className }: ContainerProps) => (
   <div
-    className={`w-full h-full px-7.5 py-5 rounded-7.5 ${ContainerTheme.color[color]}`}
+    className={`w-full h-full px-7.5 py-5 rounded-7.5 ${ContainerTheme.color[color]} ${className}`}
+    onClick={onClick}
   >
     {children}
   </div>
 )
 
+Container.defaultProps = {
+  onClick: undefined,
+  className: '',
+}
+
 export default Container
diff --git a/src/components/discussion/DiscussionBoard.tsx b/src/components/discussion/DiscussionBoard.tsx
@@ -2,6 +2,7 @@
 
 import { DiscussionBoardI, DiscussionOptionI } from '@/model/Discussion'
 import Image from 'next/image'
+import { useRouter } from 'next/navigation'
 import Container from '../common/Container'
 import Profile from '../common/Profile'
 import DiscussionOption from './DiscussionOption'
@@ -12,6 +13,7 @@ export interface DiscussionBoardProps {
 
 const DiscussionBoard = ({ discussionBoard }: DiscussionBoardProps) => {
   const {
+    id,
     title,
     content,
     createdAt,
@@ -21,31 +23,40 @@ const DiscussionBoard = ({ discussionBoard }: DiscussionBoardProps) => {
     options,
   } = discussionBoard
 
-  // TODO: Discussion Button Click API 연동
-  const handleDiscussionOptionClick = () => {}
+  const router = useRouter()
+  const handleDiscussionBoardClick = () => {
+    router.push(`/discussion/${id}`)
+  }
+
+  const formattedCreatedAt = createdAt.split(' ')[0]
 
   return (
-    <Container color="purple">
+    <Container
+      color="purple"
+      onClick={handleDiscussionBoardClick}
+      className="cursor-pointer"
+    >
       <div className="flex flex-col gap-6">
         <div className="flex flex-col justify-between gap-5">
           <div className="flex justify-between">
             <Profile user={memberSimpleInfo} />
-            <div className="text-cpation text-gray2">{createdAt}</div>
+            <div className="text-caption text-gray2">{formattedCreatedAt}</div>
           </div>
-          <div className="flex flex-col gap -1">
+          <div className="flex flex-col gap-1">
             <p className="text-title3 font-bold">{title}</p>
             <p className="text-body text-mainblack">{content}</p>
           </div>
         </div>
 
         <div className="flex flex-col gap-4">
-          <div className="flex justify-between gap-8">
+          <div className="grid grid-cols-2 gap-4">
             {options &&
-              options.map((option: DiscussionOptionI) => (
+              options.map((option: DiscussionOptionI, index: number) => (
                 <DiscussionOption
+                  key={index}
                   discussionOption={option}
                   size="small"
-                  onClick={handleDiscussionOptionClick}
+                  boardId={id}
                 />
               ))}
           </div>