Merge pull request #1133 from peer-42seoul/release-1.0.8

peer-42seoul · Jun 26, 2024 · 8bc5af3 · 8bc5af3
2 parents 5fbaa3d + bf2ba5d
commit 8bc5af3
Show file tree

Hide file tree

Showing 55 changed files with 10,410 additions and 12,907 deletions.
diff --git a/next.config.js b/next.config.js
@@ -21,6 +21,7 @@ const nextConfig = withPWA({
     ignoreDuringBuilds: true,
   },
   images: {
+    formats: ['image/avif', 'image/webp'],
     domains: [
       'picsum.photos',
       'source.unsplash.com',
@@ -55,6 +56,10 @@ const runtimeCaching = {
   ],
 }
 
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: true,
+})
+
 module.exports = nextConfig
 
 // Next.js에서는 'next.config.js' 파일의 'images' 속성을 구성하여 이미지에 허용되는 도메인을 지정해야 합니다. 이는 승인되지 않거나 잠재적으로 안전하지 않은 외부 이미지 소스가 기본적으로 로드되는 것을 방지하는 보안 기능입니다.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,6 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.8",
-    "@mui/lab": "^5.0.0-alpha.163",
     "@mui/material": "^5.14.8",
     "@mui/material-nextjs": "^5.15.5",
     "@mui/x-date-pickers": "^6.19.2",
@@ -29,7 +28,6 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "@types/web-app-manifest": "^1.0.7",
-    "@uiw/react-md-editor": "^3.23.6",
     "axios": "^1.4.0",
     "babel-plugin-macros": "^3.1.0",
     "bufferutil": "^4.0.8",
@@ -45,19 +43,16 @@
     "net": "^1.0.2",
     "next": "^13.5.6",
     "next-auth": "^4.23.1",
-    "next-cookies": "^2.0.3",
-    "pretendard": "^1.3.9",
+    "octokit": "^4.0.2",
     "prettier": "^3.0.2",
     "react": "18.2.0",
     "react-big-calendar": "^1.8.5",
     "react-cookie": "^6.1.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "18.2.0",
-    "react-grid-layout": "^1.4.3",
+    "react-grid-layout": "^1.4.4",
     "react-hook-form": "^7.45.4",
     "react-slick": "^0.29.0",
-    "react-spring": "^9.7.3",
-    "react-virtuoso": "^4.6.2",
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.7.3",
     "swr": "^2.2.4",
@@ -68,6 +63,7 @@
     "zustand": "^4.4.1"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "^14.1.4",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",

diff --git a/src/app/my-page/profile/panel/SkillsEditor.tsx b/src/app/my-page/profile/panel/SkillsEditor.tsx
@@ -70,12 +70,16 @@ const SkillsEditor = ({
         endIconButton={
           <Tutorial title="스킬 추가 방법" content={<SkillsTutorial />} />
         }
+        sx={{
+          width: '100%',
+        }}
       >
         <SkillAutocomplete
           skillList={selected}
           setSkillList={setSelected}
           type="SKILL"
           placeholder="스킬을 입력해주세요"
+          autocompleteSx={{ width: '100%' }}
         />
       </FieldWithLabel>
     </CuModal>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,8 +1,22 @@
-import MainPage from './panel/MainPage'
 import axios from 'axios'
+import PushAlertBanner from '@/app/panel/PushAlertBanner'
+import MainMobileView from '@/app/panel/main-page/MainMobileView'
+import Footer from '@/app/panel/main-page/Footer'
+import MainPcView from '@/app/panel/main-page/MainPcView'
+import PwaInstallBanner from '@/app/panel/PwaInstallBanner'
 
 export const dynamic = 'force-dynamic'
 
+export interface BeforeInstallPromptEvent extends Event {
+  readonly platforms: string[]
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed'
+    platform: string
+  }>
+
+  prompt(): Promise<void>
+}
+
 export default async function Home({ searchParams }: { searchParams: any }) {
   let data
   try {
@@ -21,5 +35,20 @@ export default async function Home({ searchParams }: { searchParams: any }) {
     console.error('데이터를 불러오는데 실패했습니다.')
   }
 
-  return <MainPage initData={data} />
+  return (
+    <>
+      <PushAlertBanner />
+      {/* mobile view */}
+      <div className="mobile-layout">
+        <MainMobileView initData={data} />
+        <Footer />
+      </div>
+      {/* pc view */}
+      <div className="pc-layout">
+        <MainPcView initData={data} />
+        <Footer />
+      </div>
+      <PwaInstallBanner />
+    </>
+  )
 }
diff --git a/src/app/panel/MainPage.tsx b/src/app/panel/MainPage.tsx
diff --git a/src/app/panel/OthersProfile.tsx b/src/app/panel/OthersProfile.tsx
@@ -65,6 +65,7 @@ const OthersProfile = ({ name, userId, children }: IOthersProfile) => {
             color: 'inherit',
           }}
           onClick={handleClick}
+          aria-label="프로필 보기"
         >
           {children}
         </Button>
@@ -83,9 +84,15 @@ const OthersProfile = ({ name, userId, children }: IOthersProfile) => {
           <Typography sx={{ p: 1 }}>{name}</Typography>
           {nickname !== name ? (
             <>
-              <Button onClick={goOthersProfile}>프로필 보기</Button>
-              <Button onClick={messageOpen}>쪽지 보내기</Button>
-              <Button onClick={reportOpen}>신고하기</Button>
+              <Button onClick={goOthersProfile} aria-label="프로필 보기">
+                프로필 보기
+              </Button>
+              <Button onClick={messageOpen} aria-label="쪽지 보내기">
+                쪽지 보내기
+              </Button>
+              <Button onClick={reportOpen} aria-label="신고하기">
+                신고하기
+              </Button>
             </>
           ) : (
             <Button onClick={goMypage}>마이페이지</Button>

diff --git a/src/app/panel/PwaInstallBanner.tsx b/src/app/panel/PwaInstallBanner.tsx
@@ -3,9 +3,9 @@
 import useMedia from '@/hook/useMedia'
 import { Box, Button, IconButton, Stack, Typography } from '@mui/material'
 import { useEffect, useState } from 'react'
-import { BeforeInstallPromptEvent } from './MainPage'
 import IosShareIcon from '@mui/icons-material/IosShare'
 import CloseIcon from '@mui/icons-material/Close'
+import { BeforeInstallPromptEvent } from '@/app/page'
 
 declare global {
   interface Window {

diff --git a/src/app/panel/layout-panel/AlertIcon.tsx b/src/app/panel/layout-panel/AlertIcon.tsx
@@ -14,15 +14,7 @@ import { usePathname, useSearchParams } from 'next/navigation'
 
 // 알림탭 관련
 
-import {
-  Badge,
-  Button,
-  Drawer,
-  Stack,
-  Tab,
-  Tabs,
-  Typography,
-} from '@mui/material'
+import { Badge, Button, Stack, Tab, Tabs, Typography } from '@mui/material'
 import {
   Dispatch,
   SetStateAction,
@@ -40,6 +32,11 @@ import { useRouter } from 'next/navigation'
 import useAlarmStorage, { IAlarm } from '@/states/useAlarmStorage'
 import AlertCard from './alert-panel/AlertCard'
 import { debounce } from 'lodash'
+import dynamic from 'next/dynamic'
+
+const DynamicDrawer = dynamic(() => import('@mui/material/Drawer'), {
+  loading: () => <></>,
+})
 
 const useInfiniteScroll = ({
   setPage,
@@ -204,8 +201,7 @@ const AlertIcon = () => {
           />
         </Badge>
       </IconButton>
-
-      <Drawer
+      <DynamicDrawer
         PaperProps={{
           sx: {
             height: '100%',
@@ -315,7 +311,7 @@ const AlertIcon = () => {
             </Stack>
           )}
         </Box>
-      </Drawer>
+      </DynamicDrawer>
     </>
   )
 }

diff --git a/src/app/panel/layout-panel/PcNav.tsx b/src/app/panel/layout-panel/PcNav.tsx
@@ -78,6 +78,7 @@ const PcNav = () => {
               onClick={() => {
                 router.push('/')
               }}
+              aria-label="peer-logo"
             >
               <PeerLogo sx={{ width: 50, height: 50, color: 'text.normal' }} />
             </IconButton>

diff --git a/src/app/panel/main-page/Footer.tsx b/src/app/panel/main-page/Footer.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 import * as style from './Footer.style'
 import { Box, List, ListItem, Typography } from '@mui/material'

diff --git a/src/app/panel/main-page/MainCard.tsx b/src/app/panel/main-page/MainCard.tsx
@@ -10,11 +10,16 @@ import {
   Stack,
 } from '@mui/material'
 import Link from 'next/link'
-import OthersProfile from '../OthersProfile'
 import TagChip from '@/components/TagChip'
 import FavoriteButton from '@/components/FavoriteButton'
 import { ChipStyle } from '@/app/panel/main-page/MainCard.style'
 import CuPhotoBox from '@/components/CuPhotoBox'
+import dynamic from 'next/dynamic'
+import dayjs from 'dayjs'
+
+const DynamicOtherProfile = dynamic(() => import('@/app/panel/OthersProfile'), {
+  loading: () => <></>,
+})
 
 const MainCard = ({
   title,
@@ -32,7 +37,11 @@ const MainCard = ({
   sx,
   titleMaxLine = 2,
   tagMaxLine = 2,
+  createdAt,
+  member,
 }: IMainCard) => {
+  //글 생성일, 인원
+
   const statusLabel =
     status === 'ONGOING'
       ? '모집중'
@@ -78,7 +87,7 @@ const MainCard = ({
           <CuPhotoBox
             style={{
               width: '100%',
-              height: '194px',
+              height: '160px',
               position: 'relative',
               left: '-2px',
               top: '-2px',
@@ -111,7 +120,7 @@ const MainCard = ({
       </Link>
       <CardHeader
         avatar={
-          <OthersProfile userId={user_id} name={user_nickname}>
+          <DynamicOtherProfile userId={user_id} name={user_nickname}>
             <Avatar
               aria-label="profile"
               src={user_thumbnail}
@@ -120,13 +129,13 @@ const MainCard = ({
                 height: '2rem',
               }}
             />
-          </OthersProfile>
+          </DynamicOtherProfile>
         }
         action={
           <FavoriteButton
             recruit_id={recruit_id}
             favorite={favorite}
-            redirect_url={`/recruit/${recruit_id}?type=${type ?? 'STUDY'}`}
+            redirect_url={`/recruit/${recruit_id}`}
             onFavorite={onFavorite}
           />
         }
@@ -147,7 +156,7 @@ const MainCard = ({
         }
       />
       <Link
-        href={href ?? `/recruit/${recruit_id}?type=${type ?? 'STUDY'}`}
+        href={href ?? `/recruit/${recruit_id}`}
         style={{ textDecoration: 'none' }}
       >
         <CardContent
@@ -172,6 +181,16 @@ 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>
+            <Typography variant="Body2" color="text.alternative">
+              {member}명
+            </Typography>
+          </Stack>
+
           <Stack
             gap={'0.25rem'}
             mt={1}

diff --git a/src/app/panel/main-page/MainCarousel.tsx b/src/app/panel/main-page/MainCarousel.tsx
@@ -26,6 +26,7 @@ const MainCarousel = () => {
       <CuPhotoBox
         src={'/images/banners/default-mobile.svg'}
         alt="banner-1"
+        priorityOption={true}
         imgStyle={{ borderRadius: '0.75rem' }}
         style={{ width: 300, height: 130 }}
       />

diff --git a/src/app/panel/main-page/MainMobileView.tsx b/src/app/panel/main-page/MainMobileView.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import {
   cardStyle,
   containerStyle,
@@ -6,17 +8,17 @@ import {
 import { Box, Container, Pagination, Stack, Typography } from '@mui/material'
 import MainBanner from '@/app/panel/main-page/MainBanner'
 import SelectType from '@/app/panel/main-page/SelectType'
-import SearchOptionPanel from '@/app/panel/main-page/MainPanel'
 import SelectSort from '@/app/panel/main-page/SelectSort'
 import NoDataDolphin from '@/components/NoDataDolphin'
 import { IPost } from '@/types/IPostDetail'
 import MainCard from '@/app/panel/main-page/MainCard'
 import FloatEditButton from '@/app/panel/main-page/FloatEditButton'
 import { IPagination } from '@/types/IPagination'
 import useMainOptions from '@/hook/main-page/useMainOptions'
-import useMainCards from '@/hook/main-page/useMainCards'
 import useMainOptionsStore from '@/states/main-page/useMainOptionsStore'
 import useFavoriteList from '@/hook/main-page/useFavoriteList'
+import SearchOptionPanel from '@/app/panel/main-page/MainPanel'
+import useMainCards from '@/hook/main-page/useMainCards'
 
 const MainMobileView = ({ initData }: { initData: IPagination<IPost[]> }) => {
   const { isInit, handleSort, handleType, handleChangePage, queryKeyword } =