Release 1.0.9

src/app/job/JobCard.tsx

@@ -0,0 +1,67 @@
+import { Card, CardContent, CardHeader, Stack, Typography } from '@mui/material'
+import Link from 'next/link'
+
+import { IJob } from '@/types/IJob'
+import dayjs from 'dayjs'
+
+const JobCard = ({ title, writerName, createdAt, id }: IJob) => {
+  return (
+    <Card
+      sx={{
+        borderRadius: '0.75rem',
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        borderColor: 'background.tertiary',
+        boxShadow: 'none',
+      }}
+    >
+      <CardHeader
+        title={
+          <Typography
+            variant="Body2"
+            color="text.alternative"
+            sx={{
+              display: '-webkit-box',
+              WebkitLineClamp: 1,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {writerName}
+          </Typography>
+        }
+      />
+      <Link href={`/job/${id}`} style={{ textDecoration: 'none' }}>
+        <CardContent
+          sx={{
+            '&:last-child': {
+              paddingBottom: '1rem !important',
+            },
+            paddingY: 0,
+          }}
+        >
+          <Stack>
+            <Typography
+              variant="Body1"
+              color="text.normal"
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                display: '-webkit-box',
+                WebkitBoxOrient: 'vertical',
+              }}
+            >
+              {title}
+            </Typography>
+            <Typography variant="Body2" color="text.alternative">
+              {dayjs(createdAt).format('YYYY-MM-DD')}
+            </Typography>
+          </Stack>
+        </CardContent>
+      </Link>
+    </Card>
+  )
+}
+
+export default JobCard

src/app/job/[id]/page.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import useAxiosWithAuth from '@/api/config'
+import CuCircularProgress from '@/components/CuCircularProgress'
+import HitsCounter from '@/components/HitsCounter'
+import {
+  DetailContent,
+  DetailContentCotainer,
+  DetailPage,
+} from '@/components/board/DetailPanel'
+import useToast from '@/states/useToast'
+import UTCtoLocalTime from '@/utils/UTCtoLocalTime'
+import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
+import useSWR from 'swr'
+
+export interface IJobDetail {
+  title: string // 글 제목
+  writerName: string // 글 작성자
+  createdAt: Date // 글 작성일
+  content: string // 글 내용
+  id: number // 글 id
+}
+
+const JobDetailPage = ({ params }: { params: { id: string } }) => {
+  const router = useRouter()
+  const axiosWithAuth = useAxiosWithAuth()
+  const { data, isLoading } = useSWR<IJobDetail>(
+    `/api/v1/job/${params.id}`,
+    async (url: string) => axiosWithAuth.get(url).then((res) => res.data),
+  )
+  const { openToast } = useToast()
+  useEffect(() => {
+    if (!data && !isLoading) {
+      openToast({
+        severity: 'error',
+        message: '게시글을 불러오는 데 실패했습니다.',
+      })
+      router.push('/job')
+    }
+  }, [data, isLoading, openToast, router])
+
+  if (isLoading) return <CuCircularProgress color="primary" />
+  if (!data) return null
+
+  return (
+    <DetailPage
+      boardType="JOB"
+      handleGoBack={() => {
+        router.push('/job')
+      }}
+    >
+      <DetailContentCotainer
+        containerTitle="채용 공고"
+        onClickEditButton={() => {}}
+        author={false}
+      >
+        <DetailContent
+          title={data.title}
+          createdAt={UTCtoLocalTime(data.createdAt)}
+          authorNickname={data.writerName}
+          content={data.content}
+        />
+      </DetailContentCotainer>
+      <HitsCounter
+        targetUrl={`https://www.peer-study.co.kr/job/${params.id}`}
+      />
+    </DetailPage>
+  )
+}
+
+export default JobDetailPage

src/app/job/layout.tsx

@@ -0,0 +1,10 @@
+import * as style from '@/components/NavBarLayout.style'
+import { Box, Container } from '@mui/material'
+
+const Layout = ({ children }: { children: React.ReactNode }) => (
+  <Container sx={style.container}>
+    <Box sx={style.fullPageContentBox}>{children}</Box>
+  </Container>
+)
+
+export default Layout

src/app/job/page.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import {
+  CircularProgress,
+  Container,
+  Grid,
+  Stack,
+  Typography,
+} from '@mui/material'
+import { containerStyle } from '@/app/panel/main-page/Mainpage.style'
+
+import NoDataDolphin from '@/components/NoDataDolphin'
+
+import { IPagination } from '@/types/IPagination'
+import { IJob } from '@/types/IJob'
+import JobCard from '@/app/job/JobCard'
+import useSWR from 'swr'
+import { defaultGetFetcher } from '@/api/fetchers'
+import { Suspense } from 'react'
+
+const JobInfo = () => {
+  const { data, isLoading, error } = useSWR<IPagination<IJob[]>>(
+    `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/job?page=1&pageSize=10`,
+    defaultGetFetcher,
+  )
+  const noContent = !isLoading
+    ? error
+      ? '에러 발생'
+      : data?.content?.length == 0
+        ? '데이터가 없습니다'
+        : null
+    : null
+
+  return (
+    <Container sx={containerStyle}>
+      <Stack mb={'0.5rem'} spacing={4}>
+        <Typography color={'text.strong'} variant={'Title1'}>
+          채용 공고
+        </Typography>
+      </Stack>
+      <Stack direction={'row'} spacing={4}>
+        <Suspense fallback={<CircularProgress />}>
+          {noContent ? (
+            <Stack
+              width={'100%'}
+              height={'100%'}
+              justifyContent={'center'}
+              alignItems={'center'}
+            >
+              <NoDataDolphin
+                message={noContent}
+                backgroundColor={'background.primary'}
+              />
+            </Stack>
+          ) : (
+            <Grid container spacing={'1rem'}>
+              {data?.content?.map((job: IJob) => (
+                <Grid item key={job.id} sm={12} md={6} lg={4}>
+                  <JobCard {...job} />
+                </Grid>
+              ))}
+            </Grid>
+          )}
+        </Suspense>
+      </Stack>
+    </Container>
+  )
+}
+
+export default JobInfo

src/app/job/template.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Template = ({ children }: { children: React.ReactNode }) => {
+  return <div className="layout-container">{children}</div>
+}
+
+export default Template

src/app/panel/layout-panel/Header.tsx

@@ -67,6 +67,8 @@ const Header = ({
       if (!isLogin) {
         router.push('/login?redirect=/my-page')
       } else setTitle('마이페이지')
+    } else if (pathname == '/job') {
+      setTitle('채용공고')
     } else {
       setTitle('')
     }
@@ -77,7 +79,8 @@ const Header = ({
   const onlyTitle =
     pathname?.startsWith('/my-page') ||
     pathname?.startsWith('/team-list') ||
-    pathname?.startsWith('/login')
+    pathname?.startsWith('/login') ||
+    pathname?.startsWith('/job')
 
   return (
     <AppBar position="fixed" sx={mobileHeader}>

src/app/panel/layout-panel/MobileNav.tsx

@@ -39,6 +39,8 @@ const MobileNav = () => {
       else setValue('my-page')
     } else if (pathname.startsWith('/showcase')) {
       setValue('showcase')
+    } else if (pathname.startsWith('/job')) {
+      setValue('job')
     } else {
       setValue('')
     }
@@ -82,12 +84,21 @@ const MobileNav = () => {
             router.push('/hitchhiking')
           }}
         />
+        {/*<BottomNavigationAction*/}
+        {/*  sx={bottomNavStyle}*/}
+        {/*  label={<Typography fontSize={'0.6875rem'}>쇼케이스</Typography>}*/}
+        {/*  value={'showcase'}*/}
+        {/*  onClick={() => {*/}
+        {/*    router.push('/showcase')*/}
+        {/*  }}*/}
+        {/*  icon={<ShowcaseIcon />}*/}
+        {/*/>*/}
         <BottomNavigationAction
           sx={bottomNavStyle}
-          label={<Typography fontSize={'0.6875rem'}>쇼케이스</Typography>}
-          value={'showcase'}
+          label={<Typography fontSize={'0.6875rem'}>채용공고</Typography>}
+          value={'job'}
           onClick={() => {
-            router.push('/showcase')
+            router.push('/job')
           }}
           icon={<ShowcaseIcon />}
         />

src/app/panel/layout-panel/PcNav.tsx

@@ -136,19 +136,49 @@ const PcNav = () => {
               }}
               sx={navStyle}
             />
+            {/*<BottomNavigationAction*/}
+            {/*  value={'showcase'}*/}
+            {/*  label={*/}
+            {/*    <Stack*/}
+            {/*      direction={'row'}*/}
+            {/*      alignItems={'center'}*/}
+            {/*      spacing={'0.15rem'}*/}
+            {/*    >*/}
+            {/*      <Typography*/}
+            {/*        color={value === 'showcase' ? 'primary' : 'text.normal'}*/}
+            {/*        variant="Caption"*/}
+            {/*      >*/}
+            {/*        쇼케이스*/}
+            {/*      </Typography>*/}
+            {/*      <BetaIcon*/}
+            {/*        style={{*/}
+            {/*          position: 'relative',*/}
+            {/*          top: '-0.5rem',*/}
+            {/*        }}*/}
+            {/*      />*/}
+            {/*    </Stack>*/}
+            {/*  }*/}
+            {/*  onClick={() => {*/}
+            {/*    router.push('/showcase')*/}
+            {/*  }}*/}
+            {/*  sx={{*/}
+            {/*    ...navStyle,*/}
+            {/*    wordBreak: 'keep-all',*/}
+            {/*  }}*/}
+            {/*/>*/}
             <BottomNavigationAction
-              value={'showcase'}
+              value={'job'}
               label={
                 <Stack
                   direction={'row'}
                   alignItems={'center'}
                   spacing={'0.15rem'}
                 >
                   <Typography
-                    color={value === 'showcase' ? 'primary' : 'text.normal'}
+                    color={value === 'job' ? 'primary' : 'text.normal'}
                     variant="Caption"
                   >
-                    쇼케이스
+                    채용공고
                   </Typography>
                   <BetaIcon
                     style={{
@@ -159,7 +189,7 @@ const PcNav = () => {
                 </Stack>
               }
               onClick={() => {
-                router.push('/showcase')
+                router.push('/job')
               }}
               sx={{
                 ...navStyle,

src/app/panel/main-page/MainCard.tsx

@@ -16,6 +16,8 @@ import { ChipStyle } from '@/app/panel/main-page/MainCard.style'
 import CuPhotoBox from '@/components/CuPhotoBox'
 import dynamic from 'next/dynamic'
 import dayjs from 'dayjs'
+import { TypeChip } from '@/app/recruit/[id]/panel/RecruitInfoElement'
+import React from 'react'
 
 const DynamicOtherProfile = dynamic(() => import('@/app/panel/OthersProfile'), {
   loading: () => <></>,
@@ -181,13 +183,10 @@ const MainCard = ({
           >
             {title}
           </Typography>
-
-          <Stack justifyContent={'space-between'} direction={'row'} mt={0.5}>
-            <Typography variant="Body2" color="text.alternative">
-              {dayjs(createdAt).format('YYYY-MM-DD')}
-            </Typography>
+          <Stack direction={'row'} mt={0.5} alignItems={'center'} gap={1}>
+            <TypeChip type={type} />
             <Typography variant="Body2" color="text.alternative">
-              {member}명
+              {dayjs(createdAt).format('YYYY-MM-DD')} · {member}명
             </Typography>
           </Stack>
 

src/app/panel/main-page/MainMobileView.tsx

@@ -29,7 +29,7 @@ const MainMobileView = ({ initData }: { initData: IPagination<IPost[]> }) => {
 
   return (
     <Container sx={{ ...containerStyle, paddingBottom: '2rem' }}>
-      {queryKeyword === '' ? (
+      {queryKeyword == '' ? (
         <>
           <Box width={'100%'}>
             <MainBanner />
@@ -74,7 +74,6 @@ const MainMobileView = ({ initData }: { initData: IPagination<IPost[]> }) => {
                 <Box key={project.recruit_id}>
                   <MainCard
                     {...project}
-                    type={type}
                     favorite={
                       isInit
                         ? getFavoriteData(project.recruit_id)

src/app/panel/main-page/MainPcView.tsx

@@ -101,7 +101,6 @@ const MainPcView = ({ initData }: { initData: IPagination<IPost[]> }) => {
                   <Grid item key={project.recruit_id} sm={12} md={6} lg={4}>
                     <MainCard
                       {...project}
-                      type={type}
                       favorite={
                         isInit
                           ? getFavoriteData(project.recruit_id)