Merge pull request #1087 from peer-42seoul/release-1.0.6

next.config.js

@@ -6,6 +6,7 @@ const withPWA = require('@ducanh2912/next-pwa').default({
   register: true,
   skipWaiting: true,
   disable: prod ? false : true, // 나중에 true로 바꿔야함
+  // disable: true,
   // runtimeCaching,
 })
 

src/app/about/@contact/page.tsx

@@ -179,7 +179,10 @@ const ContactPage = () => {
                 }}
                 {...register('text', {
                   required: '필수 입력 내용입니다.',
-                  maxLength: 300,
+                  maxLength: {
+                    value: 1000,
+                    message: '1000자 이내로 입력해주세요.',
+                  },
                   minLength: {
                     value: 1,
                     message: '1글자 이상 입력해주세요.',

src/app/panel/MainPage.tsx

@@ -1,6 +1,13 @@
 'use client'
 
-import { Container, Box, Grid, Stack, Typography } from '@mui/material'
+import {
+  Container,
+  Box,
+  Grid,
+  Stack,
+  Typography,
+  Pagination,
+} from '@mui/material'
 import { useCallback, useEffect, useState } from 'react'
 import FloatEditButton from './main-page/FloatEditButton'
 import MainCard from './main-page/MainCard'
@@ -11,7 +18,6 @@ import MainProfile from './main-page/MainProfile'
 import MainShowcase from './main-page/MainShowcase'
 import MainCarousel from './main-page/MainCarousel'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { useInfiniteScrollHook } from '@/hook/useInfiniteScroll'
 import { IFavorite, IPost, ProjectType } from '@/types/IPostDetail'
 import useAuthStore from '@/states/useAuthStore'
 import useAxiosWithAuth from '@/api/config'
@@ -29,9 +35,7 @@ import {
   floatButtonStyle,
   sideMenuStyle,
 } from '@/app/panel/main-page/Mainpage.style'
-import SearchOptionPanel, {
-  InfinityScrollPanel,
-} from '@/app/panel/main-page/MainPanel'
+import SearchOptionPanel from '@/app/panel/main-page/MainPanel'
 import SelectSort from '@/app/panel/main-page/SelectSort'
 import useMedia from '@/hook/useMedia'
 
@@ -81,9 +85,6 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
 
   const { isLogin } = useAuthStore()
   const axiosInstance: AxiosInstance = useAxiosWithAuth()
-  const [prevScrollHeight, setPrevScrollHeight] = useState<number | undefined>(
-    undefined,
-  )
   const [init, setInit] = useState<boolean>(true)
   const { isTablet } = useMedia()
 
@@ -130,59 +131,18 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
     return res?.favorite
   }
 
-  const {
-    data: newData,
-    isLoading,
-    error,
-  } = useSWR<IPagination<IPost[]>>(
-    isInit
-      ? null
-      : `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/recruit` + option,
+  const { data, isLoading, error } = useSWR<IPagination<IPost[]>>(
+    `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/recruit` + option,
     isLogin
       ? (url: string) =>
           axiosInstance.get(url).then((res) => {
             return res.data
           })
       : defaultGetFetcher,
-  )
-
-  const [content, setContent] = useState<IPost[] | []>(
-    initData?.content.map((v) => ({
-      ...v,
-      favorite: getFavoriteData(v.recruit_id),
-    })) ?? [],
-  )
-
-  useEffect(() => {
-    if (!newData || !newData?.content) return
-
-    //page가 1일 경우 == initData가 설정되어있을경우, 무한스크롤시 page는 무조건 2부터 시작함.
-    //따라서 page가 1일 경우에는 옵션이 달라진 것임. 고로 무조건 새로운 데이터로 setContent를 해준다.
-    if (page == 1) {
-      return setContent(newData.content)
-    }
-    //여기서부터는 무한스크롤 영역. 길이가 0이면 더해주지 않는다.
-    if (newData?.content.length == 0) return
-    //이전 데이터와 새로운 데이터를 더해준다
-    setContent([...content, ...newData.content])
-    //이전 스크롤 높이로 설정
-    setPrevScrollHeight(target.current?.scrollHeight)
-    if (target.current && prevScrollHeight)
-      scrollTo(target.current.scrollHeight - prevScrollHeight)
-  }, [newData])
-
-  const { target, spinner, scrollTo } = useInfiniteScrollHook(
-    setPage,
-    isLoading,
-    (newData?.last || initData?.last) ?? true, //isEnd
-    page,
-  )
-
-  const { target: pcTarget, spinner: pcSpinner } = useInfiniteScrollHook(
-    setPage,
-    isLoading,
-    (newData?.last || initData?.last) ?? true, //isEnd
-    page,
+    {
+      fallbackData: initData,
+      keepPreviousData: true,
+    },
   )
 
   const handleType = useCallback(
@@ -216,10 +176,14 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
     setPage(1)
   }, [])
 
+  const handleChangePage = (_: any, newPage: number) => {
+    setPage(newPage)
+  }
+
   const noContent = !isLoading
     ? error
       ? '에러 발생'
-      : content?.length == 0
+      : data?.content?.length == 0
         ? '데이터가 없습니다'
         : null
     : null
@@ -229,7 +193,7 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
       {/* <PushAlertBanner /> */}
       {/* mobile view */}
       <div className="mobile-layout">
-        <Container sx={{ ...containerStyle, paddingBottom: '1.25rem' }}>
+        <Container sx={{ ...containerStyle, paddingBottom: '2rem' }}>
           {keyword === '' ? (
             <>
               <Box width={'100%'}>
@@ -278,7 +242,7 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
             <>
               <Stack alignItems={'center'}>
                 <Stack gap={2} width={'100%'}>
-                  {content?.map((project: IPost) => (
+                  {data?.content?.map((project: IPost) => (
                     <Box key={project.recruit_id}>
                       <MainCard
                         {...project}
@@ -294,13 +258,13 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
                   ))}
                 </Stack>
               </Stack>
-              {/* 무한 스크롤 */}
-              <Stack
-                width={'100%'}
-                justifyContent={'center'}
-                alignItems={'center'}
-              >
-                <InfinityScrollPanel target={target} spinner={spinner} />
+              <Stack alignItems={'center'} mt={'1rem'}>
+                <Pagination
+                  count={data?.totalPages}
+                  page={page}
+                  onChange={handleChangePage}
+                  siblingCount={0}
+                />
               </Stack>
             </>
           )}
@@ -367,7 +331,7 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
               ) : (
                 <>
                   <Grid container spacing={'1rem'}>
-                    {content?.map((project: IPost) => (
+                    {data?.content?.map((project: IPost) => (
                       <Grid item key={project.recruit_id} sm={12} md={6} lg={4}>
                         <MainCard
                           {...project}
@@ -382,10 +346,15 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
                       </Grid>
                     ))}
                   </Grid>
-                  {/* 무한 스크롤 */}
-                  <InfinityScrollPanel target={pcTarget} spinner={pcSpinner} />
                 </>
               )}
+              <Stack alignItems={'center'} mt={'1rem'}>
+                <Pagination
+                  count={data?.totalPages}
+                  page={page}
+                  onChange={handleChangePage}
+                />
+              </Stack>
             </Stack>
             {!isTablet && (
               <Stack sx={sideMenuStyle}>

src/app/panel/PwaInstallBanner.tsx

@@ -93,11 +93,13 @@ const PwaInstallBanner = () => {
             }}
           >
             <Stack
+              padding={1}
               margin={1}
               direction={'row'}
               justifyContent={'space-between'}
+              alignItems={'center'}
             >
-              <Typography color={'white'} variant="Caption">
+              <Typography color={'white'} variant="Body1">
                 사용하시는 브라우저는 PWA 기능을 사용하기 위해서는{' '}
                 <IosShareIcon fontSize="small" />
                 [공유하기 버튼]을 눌러서 [홈 화면에 추가]를 해주셔야 합니다.
@@ -126,23 +128,32 @@ const PwaInstallBanner = () => {
           width={'100%'}
           sx={{
             backgroundColor: 'primary.main',
-            zIndex: 9999,
+            zIndex: 400,
             paddingBottom: 0.2,
           }}
         >
-          <Stack margin={1}>
-            <Typography color={'white'} variant="Caption">
+          <Stack margin={1} padding={1} spacing={'1rem'}>
+            <Typography color={'white'} variant="Body1">
               사용하시는 브라우저는 PWA 기능을 사용할 수 있습니다.{' '}
               {isPc ? '데스크탑' : '모바일'}에 설치하시겠습니까?
             </Typography>
-            <Stack direction="row">
-              <Button onClick={handleInstall}>
-                <Typography color={'white'} variant="Caption">
+            <Stack
+              direction="row"
+              alignItems={'center'}
+              display={'flex'}
+              flexDirection={isPc ? 'row' : 'row-reverse'}
+            >
+              <Button
+                variant={'contained'}
+                color="secondary"
+                onClick={handleInstall}
+              >
+                <Typography color={'white'} variant="Body1">
                   설치
                 </Typography>
               </Button>
               <Button onClick={() => setIsShowInstall(false)}>
-                <Typography color={'white'} variant="Caption">
+                <Typography color={'white'} variant="Body1">
                   다음에
                 </Typography>
               </Button>
@@ -152,7 +163,7 @@ const PwaInstallBanner = () => {
                   localStorage.setItem('isShowInstall', 'false')
                 }}
               >
-                <Typography color={'white'} variant="Caption">
+                <Typography color={'white'} variant="Body1">
                   닫기
                 </Typography>
               </Button>

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

@@ -1,37 +1,36 @@
 import { Box } from '@mui/material'
-import Slider from 'react-slick'
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
 import CuPhotoBox from '@/components/CuPhotoBox'
 
 const MainCarousel = () => {
-  const settings = {
-    dots: true,
-    infinite: true,
-    speed: 500,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    arrows: false,
-    autoplay: true,
-    autoplaySpeed: 5000,
-  }
+  // const settings = {
+  //   dots: true,
+  //   infinite: true,
+  //   speed: 500,
+  //   slidesToShow: 1,
+  //   slidesToScroll: 1,
+  //   arrows: false,
+  //   autoplay: true,
+  //   autoplaySpeed: 5000,
+  // }
 
   const BoxStyle = {
     width: '100%',
     height: '100%',
   }
 
   return (
-    <Slider {...settings}>
-      <Box sx={BoxStyle}>
-        <CuPhotoBox
-          src={'/images/banners/default-mobile.svg'}
-          alt="banner-1"
-          imgStyle={{ borderRadius: '0.75rem' }}
-          style={{ width: 300, height: 130 }}
-        />
-      </Box>
-    </Slider>
+    // <Slider {...settings}>
+    <Box sx={BoxStyle}>
+      <CuPhotoBox
+        src={'/images/banners/default-mobile.svg'}
+        alt="banner-1"
+        imgStyle={{ borderRadius: '0.75rem' }}
+        style={{ width: 300, height: 130 }}
+      />
+    </Box>
+    // </Slider>
   )
 }
 

src/app/showcase/page.tsx

@@ -17,7 +17,7 @@ const Showcase = () => {
   const [page, setPage] = useState<number>(1)
   const [cardList, setCardList] = useState<Array<ICardData>>([])
   const [draggedCardList, setDraggedCardList] = useState<ICardData[]>([])
-  const { isPc } = useMedia()
+  const { isPc, isTablet } = useMedia()
   const { isLogin } = useAuthStore()
   const axiosWithAuth = useAxiosWithAuth()
   const { data, isLoading, error } = useSWR<IPagination<ICardData[]>>(
@@ -85,7 +85,7 @@ const Showcase = () => {
   else if (isLoading && !cardList.length) message = '로딩중'
   else if (error) message = '에러 발생'
 
-  if (isPc) {
+  if (isPc && !isTablet) {
     return (
       <Stack
         height={'100%'}
@@ -97,12 +97,15 @@ const Showcase = () => {
       </Stack>
     )
   }
+
   return (
     <CardContainer
       cardList={cardList}
       removeCard={removeCard}
       message={message}
       addCard={addCard}
+      addDisabled={draggedCardList.length === 0}
+      mutate={setCardList}
     />
   )
 }

src/app/showcase/panel/CardContainer.style.ts

@@ -1,4 +1,10 @@
 import { SxProps } from '@mui/material'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
 
 export const cardContainerStyleBase: SxProps = {
   width: '100%',
@@ -26,7 +32,7 @@ export const gnbContainerStyle: SxProps = {
 export const gnbTypographyStyle: SxProps = {
   color: 'text.normal',
   textAlign: 'center',
-  fontFamily: 'Inter',
+  fontFamily: `${inter.style.fontFamily} !important` as string,
   fontSize: '13px',
   fontStyle: 'normal',
   fontWeight: 700,