[1.0.7 / ABOUT] footer의 적용을 위해 라우팅 방식 변겅

src/app/about/@detail/page.tsx → src/app/about/announce/[id]/page.tsx

@@ -3,8 +3,8 @@
 import { defaultGetFetcher } from '@/api/fetchers'
 import CuCircularProgress from '@/components/CuCircularProgress'
 import DynamicToastViewer from '@/components/DynamicToastViewer'
-import useAboutLayout from '@/states/useAboutLayout'
 import { Avatar, Button, Card, Stack, Typography } from '@mui/material'
+import { useRouter } from 'next/navigation'
 import useSWR from 'swr'
 
 interface AnnounceDailProp {
@@ -33,10 +33,10 @@ function formatDate(dateStr: string | null) {
   return formattedDate
 }
 
-const DetailPage = () => {
-  const { setBoard, announceDetailId } = useAboutLayout()
+const DetailPage = ({ params }: { params: { id: string } }) => {
+  const router = useRouter()
   const { data, isLoading, error } = useSWR<AnnounceDailProp>(
-    `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/about/announcement/${announceDetailId}`,
+    `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/about/announcement/${params.id}`,
     defaultGetFetcher,
   )
 
@@ -49,7 +49,7 @@ const DetailPage = () => {
       <Stack>
         <Button
           sx={{ width: 'fit-content' }}
-          onClick={() => setBoard('ANNOUNCE')}
+          onClick={() => router.push('/about/announce')}
         >
           목록으로
         </Button>

src/app/about/@announce/page.tsx → src/app/about/announce/page.tsx

@@ -4,7 +4,6 @@ import { defaultGetFetcher } from '@/api/fetchers'
 import CuCircularProgress from '@/components/CuCircularProgress'
 import NoDataDolphin from '@/components/NoDataDolphin'
 import useMedia from '@/hook/useMedia'
-import useAboutLayout from '@/states/useAboutLayout'
 import { IPagination } from '@/types/IPagination'
 import {
   Card,
@@ -14,6 +13,7 @@ import {
   Stack,
   Typography,
 } from '@mui/material'
+import { useRouter } from 'next/navigation'
 import { ChangeEvent, useState } from 'react'
 import useSWR from 'swr'
 
@@ -43,7 +43,7 @@ function formatDate(dateStr: string | null) {
 }
 
 const AnnounceCard = ({ title, writer, date, id }: AnnounceCardProps) => {
-  const { setAnnounceDetail } = useAboutLayout()
+  const router = useRouter()
 
   return (
     <CardActions
@@ -55,7 +55,7 @@ const AnnounceCard = ({ title, writer, date, id }: AnnounceCardProps) => {
       }}
     >
       <CardActionArea
-        onClick={() => setAnnounceDetail(id)}
+        onClick={() => router.push(`/about/announce/${id}`)}
         sx={{
           '.MuiCardActionArea-focusHighlight': {
             background: 'transparent',

src/app/about/layout.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import useMedia from '@/hook/useMedia'
-import useAboutLayout from '@/states/useAboutLayout'
 import { Button, ButtonGroup, Stack, Typography, styled } from '@mui/material'
+import { useRouter } from 'next/navigation'
 import { ReactNode } from 'react'
 
 const StyledButtonGroup = styled(ButtonGroup)({
@@ -12,42 +12,38 @@ const StyledButtonGroup = styled(ButtonGroup)({
 })
 
 const Sidebar = () => {
+  const router = useRouter()
   const { isPc } = useMedia()
-  const { setBoard } = useAboutLayout()
 
   return (
     <Stack alignItems={!isPc ? 'center' : ''}>
       <Typography variant="Title1Emphasis">About Us</Typography>
       <StyledButtonGroup variant="text" orientation="vertical" fullWidth>
-        <Button onClick={() => setBoard('PEER')}>
+        <Button onClick={() => router.push('/about')}>
           Peer는 어떤 커뮤니티인가
         </Button>
-        <Button onClick={() => setBoard('MIND')}>Peer 철학 & 비전</Button>
-        <Button onClick={() => setBoard('ANNOUNCE')}>공지사항</Button>
-        <Button onClick={() => setBoard('DICTIONARY')}>Peer 개발백서</Button>
-        <Button onClick={() => setBoard('CONTACT')}>Contact us</Button>
-        <Button onClick={() => setBoard('PERSONAL')}>개인정보 보호 방침</Button>
-        <Button onClick={() => setBoard('SERVICE')}>
+        <Button onClick={() => router.push('/about/mind')}>
+          Peer 철학 & 비전
+        </Button>
+        <Button onClick={() => router.push('/about/announce')}>공지사항</Button>
+        <Button onClick={() => router.push('/about/dictionary')}>
+          Peer 개발백서
+        </Button>
+        <Button onClick={() => router.push('/about/contact')}>
+          Contact us
+        </Button>
+        <Button onClick={() => router.push('/about/personal')}>
+          개인정보 보호 방침
+        </Button>
+        <Button onClick={() => router.push('/about/service')}>
           통합 서비스 이용약관
         </Button>
       </StyledButtonGroup>
     </Stack>
   )
 }
 
-interface AboutPageProps {
-  contact: ReactNode
-  personal: ReactNode
-  announce: ReactNode
-  mind: ReactNode
-  dictionary: ReactNode
-  service: ReactNode
-  peer: ReactNode
-  detail: ReactNode
-}
-
-const AboutPage = (props: AboutPageProps) => {
-  const { boardType } = useAboutLayout()
+const AboutPage = ({ children }: { children: ReactNode }) => {
   const { isPc, isTablet } = useMedia()
 
   if (isPc) {
@@ -57,33 +53,15 @@ const AboutPage = (props: AboutPageProps) => {
           <Stack flex={1}>
             <Sidebar />
           </Stack>
-          <Stack flex={3}>
-            {boardType === 'PEER' && props.peer}
-            {boardType === 'MIND' && props.mind}
-            {boardType === 'ANNOUNCE' && props.announce}
-            {boardType === 'DICTIONARY' && props.dictionary}
-            {boardType === 'CONTACT' && props.contact}
-            {boardType === 'PERSONAL' && props.personal}
-            {boardType === 'SERVICE' && props.service}
-            {boardType === 'ANNOUNCE_DETAIL' && props.detail}
-          </Stack>
+          <Stack flex={3}>{children}</Stack>
         </Stack>
       </Stack>
     )
   }
 
   return (
     <Stack spacing={'2rem'}>
-      <Stack>
-        {boardType === 'PEER' && props.peer}
-        {boardType === 'MIND' && props.mind}
-        {boardType === 'ANNOUNCE' && props.announce}
-        {boardType === 'DICTIONARY' && props.dictionary}
-        {boardType === 'CONTACT' && props.contact}
-        {boardType === 'PERSONAL' && props.personal}
-        {boardType === 'SERVICE' && props.service}
-        {boardType === 'ANNOUNCE_DETAIL' && props.detail}
-      </Stack>
+      <Stack>{children}</Stack>
       <Sidebar />
     </Stack>
   )