Merge pull request #24 from Help-M-Ssaem/feat/#23

[Fix] 게시판 MBTI, 페이지네이션 query string 설정
Help-M-Ssaem · Aug 9, 2024 · a8400b0 · a8400b0
2 parents 476f15d + be80d9a
commit a8400b0
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 47 deletions.
diff --git a/src/app/board/[id]/page.tsx b/src/app/board/[id]/page.tsx
@@ -10,13 +10,11 @@ import {
   usePostBoardLike,
 } from '@/service/board/useBoardService'
 import { useParams } from 'next/navigation'
-import { useState } from 'react'
 import CommentList from '@/components/board/CommentList'
 
 const BoardDetail = () => {
-  const [mbti, setMbti] = useState<string>('all')
   const { id } = useParams()
-  const { data } = useBoardDetail(Number(id))
+  const { data: boardDetail } = useBoardDetail(Number(id))
   const { mutate } = usePostBoardLike()
 
   const handleLikeToggle = () => {
@@ -25,49 +23,64 @@ const BoardDetail = () => {
 
   return (
     <>
-      <MbtiCategories selectedMbti={mbti} setMbti={setMbti} />
-      <div className="text-title3 text-maindark font-semibold my-5">
-        {mbti === 'all' ? '전체' : 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" />
-        {data && (
-          <>
+      {boardDetail && (
+        <>
+          <MbtiCategories selectedMbti={boardDetail.boardMbti} />
+          <div className="text-title3 text-maindark font-semibold my-5">
+            {boardDetail.boardMbti === 'all' ? '전체' : boardDetail.boardMbti}{' '}
+            게시판
+          </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" />
+
             <div className="flex justify-between my-7.5">
-              <Profile user={data?.memberSimpleInfo} />
+              <Profile user={boardDetail.memberSimpleInfo} />
               <div className="flex gap-3.5 text-caption text-gray2">
-                <p>조회수 {data.hits}회</p> | <p>{data.createdAt}</p>
+                <p>조회수 {boardDetail.hits}회</p> |{' '}
+                <p>{boardDetail.createdAt}</p>
               </div>
             </div>
 
             <div className="flex flex-col gap-1">
-              <p className="text-title3 font-bold">{data.title}</p>
+              <p className="text-title3 font-bold">{boardDetail.title}</p>
               <div
                 className="text-body text-mainblack"
-                dangerouslySetInnerHTML={{ __html: data.content }}
+                dangerouslySetInnerHTML={{ __html: boardDetail.content }}
               />
             </div>
 
             <div className="flex justify-center items-center gap-7.5">
               <div className="text-main2 text-title1 font-semibold">
-                {data.likeCount}
+                {boardDetail.likeCount}
               </div>
               <Image
-                src={`/images/board/${data.isLiked ? 'like_fill' : 'like_empty'}.svg`}
+                src={`/images/board/${boardDetail.isLiked ? 'like_fill' : 'like_empty'}.svg`}
                 width={90}
                 height={90}
                 alt="like_btn"
                 className="cursor-pointer my-10"
                 onClick={handleLikeToggle}
               />
             </div>
-          </>
-        )}
+          </Container>
+        </>
+      )}
 
+      <Container color="purple">
         <CommentList id={Number(id)} page={0} size={10} />
       </Container>
     </>

diff --git a/src/app/board/page.tsx b/src/app/board/page.tsx
@@ -1,28 +1,43 @@
 'use client'
 
+import { useSearchParams, useRouter } from 'next/navigation'
 import Board from '@/components/board/Board'
 import MbtiCategories from '@/components/board/MbtiCategories'
 import Button from '@/components/common/Button'
 import Container from '@/components/common/Container'
 import Pagination from '@/components/common/Pagination'
 import SearchBar from '@/components/common/SearchBar'
 import { useBoardList } from '@/service/board/useBoardService'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 const BoardPage = () => {
-  const [mbti, setMbti] = useState<string>('all')
-  const [page, setPage] = useState<number>(1)
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const mbtiQuery = searchParams.get('mbti') || 'all'
+  const pageQuery = searchParams.get('page') || '1'
+
+  const [mbti, setMbti] = useState<string>(mbtiQuery)
+  const [page, setPage] = useState<number>(Number(pageQuery))
   const pageSize = 6
 
   const { data: boardList } = useBoardList(mbti, page - 1, pageSize)
 
   const handlePageChange = (newPage: number) => {
     setPage(newPage)
+    router.push(`/board?mbti=${mbti}&page=${newPage}`)
   }
 
+  useEffect(() => {
+    if (mbti !== mbtiQuery) {
+      setMbti(mbtiQuery)
+      setPage(1)
+      router.push(`/board?mbti=${mbtiQuery}&page=1`)
+    }
+  }, [mbtiQuery])
+
   return (
     <>
-      <MbtiCategories selectedMbti={mbti} setMbti={setMbti} />
+      <MbtiCategories selectedMbti={mbti} />
       <div className="text-title3 text-maindark font-semibold my-5">
         {mbti === 'all' ? '전체' : mbti} 게시판
       </div>

diff --git a/src/app/discussion/page.tsx b/src/app/discussion/page.tsx
@@ -3,18 +3,31 @@
 import DiscussionBoard from '@/components/discussion/DiscussionBoard'
 import Pagination from '@/components/common/Pagination'
 import { useDiscussionList } from '@/service/discussion/useDiscussionService'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import SearchBar from '@/components/common/SearchBar'
+import { useRouter, useSearchParams } from 'next/navigation'
 
 const DiscussionPage = () => {
-  const [page, setPage] = useState<number>(1)
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const pageQuery = searchParams.get('page') || '1'
+
+  const [page, setPage] = useState<number>(Number(pageQuery))
   const pageSize = 6
 
   const { data: discussionList } = useDiscussionList(page - 1, pageSize)
+
   const handlePageChange = (newPage: number) => {
     setPage(newPage)
+    router.push(`/discussion?page=${newPage}`)
   }
 
+  useEffect(() => {
+    if (page !== Number(pageQuery)) {
+      setPage(Number(pageQuery))
+    }
+  }, [pageQuery])
+
   return (
     <>
       <div className="text-title3 text-maindark font-semibold my-5">

diff --git a/src/app/worry/page.tsx b/src/app/worry/page.tsx
@@ -8,12 +8,21 @@ import {
   useSolvedWorryList,
   useWaitingWorryList,
 } from '@/service/worry/useWorryService'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import SearchBar from '@/components/common/SearchBar'
+import { useRouter, useSearchParams } from 'next/navigation'
 
 const WorryPage = () => {
-  const [waitingPage, setWaitingPage] = useState<number>(1)
-  const [solvedPage, setSolvedPage] = useState<number>(1)
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  const waitingPageQuery = searchParams.get('waitingPage') || '1'
+  const solvedPageQuery = searchParams.get('solvedPage') || '1'
+
+  const [waitingPage, setWaitingPage] = useState<number>(
+    Number(waitingPageQuery),
+  )
+  const [solvedPage, setSolvedPage] = useState<number>(Number(solvedPageQuery))
 
   const [waitingStrFromMbti, setWaitingStrFromMbti] = useState('ALL')
   const [waitingStrToMbti, setWaitingStrToMbti] = useState('ALL')
@@ -37,11 +46,26 @@ const WorryPage = () => {
 
   const handleWaitingPageChange = (newPage: number) => {
     setWaitingPage(newPage)
+    router.push(`/worry?waitingPage=${newPage}&solvedPage=${solvedPage}`)
   }
+
   const handleSolvedPageChange = (newPage: number) => {
     setSolvedPage(newPage)
+    router.push(`/worry?waitingPage=${waitingPage}&solvedPage=${newPage}`)
   }
 
+  useEffect(() => {
+    if (waitingPage !== Number(waitingPageQuery)) {
+      setWaitingPage(Number(waitingPageQuery))
+    }
+  }, [waitingPageQuery])
+
+  useEffect(() => {
+    if (solvedPage !== Number(solvedPageQuery)) {
+      setSolvedPage(Number(solvedPageQuery))
+    }
+  }, [solvedPageQuery])
+
   return (
     <div className="flex flex-col">
       <div className="text-title3 text-maindark font-semibold my-5">

diff --git a/src/components/board/MbtiCategories.tsx b/src/components/board/MbtiCategories.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import Image from 'next/image'
+import { useRouter } from 'next/navigation'
 import mbtiList from '@/constants/mbtiList'
 import {
   useBoardListNumber,
@@ -10,16 +11,20 @@ import { useState } from 'react'
 
 export interface MbtiCategoriesProps {
   selectedMbti: string
-  setMbti: (mbti: string) => void
 }
 
-const MbtiCategories = ({ selectedMbti, setMbti }: MbtiCategoriesProps) => {
+const MbtiCategories = ({ selectedMbti }: MbtiCategoriesProps) => {
+  const router = useRouter()
   const { data } = useBoardListNumber()
   const totalBoardCount = data?.boardCount || 0
 
   const { mutate } = usePostCategoryBookmark()
   const [favorites, setFavorites] = useState<Record<string, boolean>>({})
 
+  const handleMbtiChange = (mbti: string) => {
+    router.push(`/board?mbti=${mbti}&page=1`)
+  }
+
   const toggleFavorite = (mbti: string) => {
     setFavorites((prevFavorites) => ({
       ...prevFavorites,
@@ -39,7 +44,7 @@ const MbtiCategories = ({ selectedMbti, setMbti }: MbtiCategoriesProps) => {
         <div className="min-w-max grid grid-cols-5 gap-4">
           <div
             className={`col-span-1 flex items-start justify-center cursor-pointer ${selectedMbti === 'all' ? 'underline' : ''}`}
-            onClick={() => setMbti('all')}
+            onClick={() => handleMbtiChange('all')}
           >
             전체 ({totalBoardCount})
           </div>
@@ -51,7 +56,7 @@ const MbtiCategories = ({ selectedMbti, setMbti }: MbtiCategoriesProps) => {
                 <div
                   key={index}
                   className="flex gap-3 items-center cursor-pointer min-w-[150px]"
-                  onClick={() => setMbti(mbti)}
+                  onClick={() => handleMbtiChange(mbti)}
                 >
                   <p
                     className={`whitespace-nowrap text-gray2 min-w-20 ${selectedMbti === mbti ? 'underline' : ''}`}

diff --git a/src/components/common/Category.tsx b/src/components/common/Category.tsx
@@ -1,14 +1,14 @@
 'use client'
 
-import { usePathname, useRouter } from 'next/navigation'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
 import Image from 'next/image'
 
 const categories = [
   { path: '/', label: 'HOME' },
-  { path: '/board', label: '게시판' },
-  { path: '/worry', label: 'M쌤 매칭' },
-  { path: '/discussion', label: 'MBTI 과몰입 토론' },
+  { path: '/board?mbti=all&page=1', label: '게시판' },
+  { path: '/worry?waitingPage=1&solvedPage=1', label: 'M쌤 매칭' },
+  { path: '/discussion?page=1', label: 'MBTI 과몰입 토론' },
 ]
 
 const extraCategories = [
@@ -19,14 +19,16 @@ const extraCategories = [
 
 const Category = () => {
   const pathname = usePathname()
+  const searchParams = useSearchParams()
   const router = useRouter()
   const [selected, setSelected] = useState<string | null>(null)
 
   useEffect(() => {
     if (pathname) {
-      setSelected(pathname)
+      const fullPath = pathname + searchParams.toString()
+      setSelected(fullPath)
     }
-  }, [pathname])
+  }, [pathname, searchParams])
 
   const handleClick = (path: string) => {
     setSelected(path)
@@ -38,7 +40,7 @@ const Category = () => {
       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)) {
+    } else if (selected?.startsWith(categoryPath.split('?')[0])) {
       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 ''

diff --git a/src/components/discussion/DiscussionOption.stories.tsx b/src/components/discussion/DiscussionOption.stories.tsx
@@ -26,7 +26,6 @@ SmallPrimary.args = {
     disabled: false,
   },
   size: 'small',
-  onClick: () => {},
 }
 
 export const SmallImageButton = Template.bind({})
@@ -40,7 +39,6 @@ SmallImageButton.args = {
     disabled: false,
   },
   size: 'small',
-  onClick: () => {},
 }
 
 export const LargePrimary = Template.bind({})
@@ -53,7 +51,6 @@ LargePrimary.args = {
     disabled: false,
   },
   size: 'large',
-  onClick: () => {},
 }
 
 export const LargeImageButton = Template.bind({})
@@ -67,5 +64,4 @@ LargeImageButton.args = {
     disabled: false,
   },
   size: 'large',
-  onClick: () => {},
 }