Merge pull request #948 from peer-42seoul/1.0.3/J-TB/editbutton

[C-MAIN][J-TB][C-TB] 각종 디자인 수정, 에러 수정
peer-42seoul · Feb 13, 2024 · 3436f64 · 3436f64
2 parents aece636 + 592f04e
commit 3436f64
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 47 deletions.
diff --git a/src/app/panel/MainPage.tsx b/src/app/panel/MainPage.tsx
@@ -33,6 +33,7 @@ import SearchOptionPanel, {
   InfinityScrollPanel,
 } from '@/app/panel/main-page/MainPanel'
 import SelectSort from '@/app/panel/main-page/SelectSort'
+import useMedia from '@/hook/useMedia'
 
 export interface BeforeInstallPromptEvent extends Event {
   readonly platforms: string[]
@@ -84,6 +85,7 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
     undefined,
   )
   const [init, setInit] = useState<boolean>(true)
+  const { isTablet } = useMedia()
 
   useEffect(() => {
     if (keyword !== '') {
@@ -114,12 +116,7 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
   }&tag=${detailOption.tag}`
 
   const isInit =
-    page == 1 &&
-    type === 'STUDY' &&
-    !sort &&
-    detailOption.isInit &&
-    keyword == '' &&
-    init
+    page == 1 && !sort && detailOption.isInit && keyword == '' && init
 
   const { data: favoriteData } = useSWR<IFavorite[]>(
     isInit && isLogin
@@ -190,6 +187,7 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
 
   const handleType = useCallback(
     (value: ProjectType) => {
+      setInit(false)
       setType(value)
       //type이 변경될 경우 초기화
       setPage(1)
@@ -218,11 +216,13 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
     setPage(1)
   }, [])
 
-  const noContent = error
-    ? '에러 발생'
-    : content?.length == 0
-      ? '데이터가 없습니다'
-      : null
+  const noContent = !isLoading
+    ? error
+      ? '에러 발생'
+      : content?.length == 0
+        ? '데이터가 없습니다'
+        : null
+    : null
 
   return (
     <>
@@ -233,7 +233,6 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
           {keyword === '' ? (
             <>
               <MainBanner />
-
               <Box marginY={'0.5rem'}>
                 <SelectType type={type} setType={handleType} />
               </Box>
@@ -317,7 +316,6 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
               {keyword === '' ? (
                 <>
                   <MainBanner />
-
                   <Stack direction={'row'} justifyContent={'space-between'}>
                     <SelectType type={type} setType={handleType} />
                     <Tutorial
@@ -385,11 +383,13 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
                 </>
               )}
             </Stack>
-            <Stack sx={sideMenuStyle}>
-              <MainProfile />
-              <MainShowcase />
-              <MainCarousel />
-            </Stack>
+            {!isTablet && (
+              <Stack sx={sideMenuStyle}>
+                <MainProfile />
+                <MainShowcase />
+                <MainCarousel />
+              </Stack>
+            )}
           </Stack>
         </Container>
       </div>

diff --git a/src/app/panel/layout-panel/Header.tsx b/src/app/panel/layout-panel/Header.tsx
@@ -28,7 +28,13 @@ import useAuthStore from '@/states/useAuthStore'
  * - 오른쪽 아이콘 (있을 수도 있고 없을 수도 있음)
  */
 
-const Header = ({ pathname }: { pathname?: string }) => {
+const Header = ({
+  pathname,
+  backAction,
+}: {
+  pathname?: string
+  backAction?: () => void
+}) => {
   const theme = useTheme()
   const mobileHeader = {
     ...style.mobileHeader,
@@ -64,7 +70,7 @@ const Header = ({ pathname }: { pathname?: string }) => {
     } else {
       setTitle('')
     }
-  }, [pathname])
+  }, [keyword, pathname])
   const { headerTitle } = useHeaderStore()
 
   // 타이틀만 보여주고 싶은 경우 (뒤로 가기 버튼이 보이지 않았으면 하는 경우)
@@ -94,7 +100,8 @@ const Header = ({ pathname }: { pathname?: string }) => {
           <Stack sx={style.mobileHeaderStack}>
             <IconButton
               onClick={() => {
-                if (pathname === '/' && keyword !== '') {
+                if (backAction) backAction()
+                else if (pathname === '/' && keyword !== '') {
                   router.replace(`?type=${type}`)
                 } else router.back()
               }}

diff --git a/src/app/panel/layout-panel/MobileNav.tsx b/src/app/panel/layout-panel/MobileNav.tsx
@@ -27,7 +27,10 @@ const MobileNav = () => {
   useEffect(() => {
     if (pathname === '/') {
       setValue('home')
-    } else if (pathname.startsWith('/team-list')) {
+    } else if (
+      pathname.startsWith('/team-list') ||
+      pathname.startsWith('/teams')
+    ) {
       setValue('team-list')
     } else if (pathname.startsWith('/hitchhiking')) {
       setValue('hitchhiking')

diff --git a/src/app/panel/layout-panel/Nav.style.ts b/src/app/panel/layout-panel/Nav.style.ts
@@ -7,7 +7,7 @@ export const navContainerStyle = {
   overflow: 'hidden',
   zIndex: 1300,
   backgroundColor: 'background.primary',
-  flexDirection: 'column',
+  flexDirection: 'row',
   justifyContent: 'center',
   alignItems: 'center',
   width: '100%',

diff --git a/src/app/panel/layout-panel/PcNav.tsx b/src/app/panel/layout-panel/PcNav.tsx
@@ -6,6 +6,7 @@ import {
   Avatar,
   BottomNavigation,
   BottomNavigationAction,
+  Box,
   Button,
   Container,
   IconButton,
@@ -45,22 +46,28 @@ const PcNav = () => {
   useEffect(() => {
     if (pathname === '/') {
       setValue('home')
-    } else if (pathname.includes('/team-list')) {
+    } else if (
+      pathname.startsWith('/team-list') ||
+      pathname.startsWith('/teams')
+    ) {
       setValue('team-list')
-    } else if (pathname.includes('/hitchhiking')) {
+    } else if (pathname.startsWith('/hitchhiking')) {
       setValue('hitchhiking')
-    } else if (pathname.includes('/showcase')) {
+    } else if (pathname.startsWith('/showcase')) {
       setValue('showcase')
     }
   }, [pathname])
 
   return (
-    <Container sx={navContainerStyle}>
-      <Stack
-        direction={'row'}
-        maxWidth={1280}
-        width="100%"
-        justifyContent={'space-between'}
+    <Box sx={navContainerStyle}>
+      <Container
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          width: '100%',
+        }}
+        component={'nav'}
       >
         <Stack direction={'row'} gap={'1.25rem'}>
           <Stack alignItems={'center'} justifyContent={'center'}>
@@ -201,8 +208,8 @@ const PcNav = () => {
             )}
           </Link>
         </Stack>
-      </Stack>
-    </Container>
+      </Container>
+    </Box>
   )
 }
 

diff --git a/src/app/panel/main-page/SearchButton.tsx b/src/app/panel/main-page/SearchButton.tsx
@@ -4,6 +4,7 @@ import { useMediaQuery, IconButton, Modal, Box } from '@mui/material'
 import useModal from '@/hook/useModal'
 import SearchBody from '../../search/panel/SearchBody'
 import { SearchIcon } from '@/icons'
+import Header from '@/app/panel/layout-panel/Header'
 
 const StyleMobileSearch = {
   position: 'absolute' as 'absolute',
@@ -58,6 +59,7 @@ const SearchMobile = () => {
         aria-describedby="modal-description"
       >
         <Box sx={StyleMobileSearch}>
+          <Header backAction={closeModal} />
           <SearchBody onClose={closeModal} />
         </Box>
       </Modal>

diff --git a/src/app/recruit/[id]/panel/RecruitDetailPage.tsx b/src/app/recruit/[id]/panel/RecruitDetailPage.tsx
@@ -82,6 +82,7 @@ const RecruitDetailPage = ({ data, id }: { data: IPostDetail; id: string }) => {
             favorite={favoriteData}
             title={content?.title}
             content={content?.content}
+            status={content?.status}
             me={me}
           />
         </Stack>
@@ -121,7 +122,7 @@ const RecruitDetailPage = ({ data, id }: { data: IPostDetail; id: string }) => {
 
   /** 모바일 뷰 **/
   return (
-    <Stack height={'100%'} padding={'2.5rem'}>
+    <Stack height={'100%'} padding={'2.25rem'}>
       <Stack gap={'1.5rem'} width={'100%'}>
         <Stack>
           <RecruitQuickMenu
@@ -130,21 +131,22 @@ const RecruitDetailPage = ({ data, id }: { data: IPostDetail; id: string }) => {
             title={content?.title}
             content={content?.content}
             me={me}
+            status={content?.status}
           />
           <RecruitInfo data={content} type={type} />
         </Stack>
         <Divider />
         <RecruitDetailContent data={content} type={type} roleList={roleList} />
+        {isClient && !me && (
+          <ApplyFormButton
+            id={id}
+            type={type}
+            roleList={roleList}
+            data={content}
+            status={content.status}
+          />
+        )}
       </Stack>
-      {isClient && !me && (
-        <ApplyFormButton
-          id={id}
-          type={type}
-          roleList={roleList}
-          data={content}
-          status={content.status}
-        />
-      )}
     </Stack>
   )
 }

diff --git a/src/app/recruit/[id]/panel/RecruitInfo.tsx b/src/app/recruit/[id]/panel/RecruitInfo.tsx
@@ -23,6 +23,7 @@ const RecruitInfo = ({ data, type, children, pc }: RecruitInfoProps) => {
         <Stack direction={'row'} gap={4} marginBottom={6}>
           <RecruitImage
             image={data?.image}
+            maxWidth={'40vw'}
             width={'18.5rem'}
             height={'12.5rem'}
           />

diff --git a/src/app/recruit/[id]/panel/RecruitInfoElement.tsx b/src/app/recruit/[id]/panel/RecruitInfoElement.tsx
@@ -46,9 +46,11 @@ export const RecruitImage = ({
   image,
   width,
   height,
+  maxWidth,
 }: {
   image: string
   width: string
+  maxWidth?: string
   height: string
 }) => {
   return (
@@ -57,6 +59,7 @@ export const RecruitImage = ({
       alt="main_image"
       width={width}
       height={height}
+      maxWidth={maxWidth}
       component={'img'}
       borderRadius={'0.13rem'}
       sx={{

diff --git a/src/app/recruit/[id]/panel/RecruitQuickMenu.tsx b/src/app/recruit/[id]/panel/RecruitQuickMenu.tsx
@@ -20,12 +20,14 @@ const RecruitQuickMenu = ({
   title,
   content,
   me,
+  status,
 }: {
   favorite: boolean | undefined
   recruit_id: number
   title: string
   content: string
   me?: boolean
+  status: string
 }) => {
   const path = usePathname()
   const type = useSearchParams().get('type')
@@ -92,6 +94,7 @@ const RecruitQuickMenu = ({
               action={() => router.push(`/recruit/${recruit_id}/edit`)}
               icon={<WriteIcon sx={style.recruitMenuIcon} />}
               text={'수정'}
+              disabled={status === 'DONE'}
             />
           )}
           {me && (

diff --git a/src/app/search/panel/SearchBody.tsx b/src/app/search/panel/SearchBody.tsx
@@ -13,7 +13,6 @@ import { MouseEvent, useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { useRouter } from 'next/navigation'
 import SearchIcon from '@mui/icons-material/Search'
-import Header from '@/app/panel/layout-panel/Header'
 
 const SearchButton = () => {
   return (
@@ -112,7 +111,6 @@ export default function SearchBody({ onClose }: SearchBodyProps) {
   return (
     <>
       <Stack sx={{ m: 0, p: 0 }}>
-        {!isPc && <Header />}
         <Box sx={isPc ? StyleSeachPc : StyleSeachMobile}>
           <ToggleButtonGroup onChange={handleChanged} exclusive value={type}>
             <ToggleButton

diff --git a/src/components/dropdownMenu/IconMenuItem.tsx b/src/components/dropdownMenu/IconMenuItem.tsx
@@ -7,18 +7,20 @@ const IconMenuItem = ({
   icon,
   text,
   action,
+  disabled,
 }: {
   icon: React.ReactNode
   text: string
   action?: () => void
+  disabled?: boolean
 }) => {
   const handleClick = () => {
     if (action) {
       action()
     }
   }
   return (
-    <MenuItem dense onClick={handleClick}>
+    <MenuItem dense onClick={handleClick} disabled={disabled}>
       <Stack
         direction={'row'}
         spacing={'0.375rem'}