Merge pull request #932 from peer-42seoul/1.0.3/C-MAIN/querystring-911

[C-MAIN] 메인페이지 스터디/프로젝트 선택을 url 쿼리스트링에 저장 / 모집글 마감 시 지원버튼 텍스트 수정
peer-42seoul · Feb 13, 2024 · aece636 · aece636
2 parents 23380bf + 3d0c5a8
commit aece636
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 24 deletions.
diff --git a/src/app/panel/MainPage.tsx b/src/app/panel/MainPage.tsx
@@ -22,7 +22,6 @@ import PwaInstallBanner from './PwaInstallBanner'
 import MainBanner from '@/app/panel/main-page/MainBanner'
 import Tutorial from '@/components/Tutorial'
 import { MainPageTutorial } from '@/components/tutorialContent/MainPageTutorial'
-import useHeaderStore from '@/states/useHeaderStore'
 import NoDataDolphin from '@/components/NoDataDolphin'
 import {
   cardStyle,
@@ -61,12 +60,11 @@ export interface IDetailOption {
 const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
   const searchParams = useSearchParams()
   const keyword = searchParams.get('keyword') ?? ''
-  const searchType = searchParams.get('type') === 'STUDY' ? 'STUDY' : 'PROJECT'
+  const searchType =
+    searchParams.get('type') === 'PROJECT' ? 'PROJECT' : 'STUDY'
   const router = useRouter()
   const [page, setPage] = useState<number>(1)
-  const [type, setType] = useState<ProjectType | undefined>(
-    keyword !== '' ? searchType : undefined,
-  ) //'STUDY'
+  const [type, setType] = useState<ProjectType>(searchType) //'STUDY'
   const [openOption, setOpenOption] = useState<boolean>(false)
   const [sort, setSort] = useState<ProjectSort | undefined>(undefined) //'latest'
   const [detailOption, setDetailOption] = useState<IDetailOption>({
@@ -85,15 +83,13 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
   const [prevScrollHeight, setPrevScrollHeight] = useState<number | undefined>(
     undefined,
   )
-  const { headerTitle, setHeaderTitle } = useHeaderStore()
   const [init, setInit] = useState<boolean>(true)
 
   useEffect(() => {
     if (keyword !== '') {
-      setHeaderTitle(keyword + ' 검색 결과')
       setType(searchType)
       setInit(false)
-    } else setHeaderTitle('')
+    }
   }, [keyword, searchType])
 
   /* page가 1이면 서버가 가져온 데이터(initData)로 렌더링 */
@@ -118,7 +114,12 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
   }&tag=${detailOption.tag}`
 
   const isInit =
-    page == 1 && !type && !sort && detailOption.isInit && keyword == '' && init
+    page == 1 &&
+    type === 'STUDY' &&
+    !sort &&
+    detailOption.isInit &&
+    keyword == '' &&
+    init
 
   const { data: favoriteData } = useSWR<IFavorite[]>(
     isInit && isLogin
@@ -186,6 +187,7 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
     (newData?.last || initData?.last) ?? true, //isEnd
     page,
   )
+
   const handleType = useCallback(
     (value: ProjectType) => {
       setType(value)
@@ -201,7 +203,7 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
         tag: '',
       })
       setSort('latest')
-      router.push('/')
+      router.replace(`?type=${value}`)
     },
     [router],
   )
@@ -251,7 +253,10 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
               justifyContent={'space-between'}
               my={'0.75rem'}
             >
-              <Typography variant={'Body1'}>{headerTitle}</Typography>
+              <Stack direction="row" gap={'0.25rem'}>
+                <Typography variant={'Body1Emphasis'}>{keyword}</Typography>
+                <Typography variant={'Body1'}>검색 결과</Typography>
+              </Stack>
               <SelectSort sort={sort} setSort={handleSort} />
             </Stack>
           )}
@@ -337,7 +342,10 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
                   justifyContent={'space-between'}
                   mb={'0.75rem'}
                 >
-                  <Typography variant={'Body1'}>{headerTitle}</Typography>
+                  <Stack direction="row" gap={'0.25rem'}>
+                    <Typography variant={'Body1Emphasis'}>{keyword}</Typography>
+                    <Typography variant={'Body1'}>검색 결과 </Typography>
+                  </Stack>
                   <SelectSort sort={sort} setSort={handleSort} />
                 </Stack>
               )}

diff --git a/src/app/panel/layout-panel/Header.tsx b/src/app/panel/layout-panel/Header.tsx
@@ -39,12 +39,14 @@ const Header = ({ pathname }: { pathname?: string }) => {
   const [title, setTitle] = useState('')
   const searchParams = useSearchParams()
   const keyword = searchParams.get('keyword') ?? ''
+  const type = searchParams.get('type') ?? 'STUDY'
   const regex = /^\/recruit\/\d+\/edit$/
 
   useEffect(() => {
     if (!pathname) return setTitle('')
     if (pathname === '/') {
-      setTitle('메인')
+      if (keyword !== '') setTitle('검색 결과')
+      else setTitle('메인')
     } else if (pathname.startsWith('/login')) {
       setTitle('로그인')
     } else if (pathname === '/recruit/write') {
@@ -67,7 +69,9 @@ const Header = ({ pathname }: { pathname?: string }) => {
 
   // 타이틀만 보여주고 싶은 경우 (뒤로 가기 버튼이 보이지 않았으면 하는 경우)
   const onlyTitle =
-    title === '마이페이지' || title === '나의 팀' || title === '로그인'
+    pathname?.startsWith('/my-page') ||
+    pathname?.startsWith('/team-list') ||
+    pathname?.startsWith('/login')
 
   return (
     <AppBar position="fixed" sx={mobileHeader}>
@@ -89,7 +93,11 @@ const Header = ({ pathname }: { pathname?: string }) => {
         ) : (
           <Stack sx={style.mobileHeaderStack}>
             <IconButton
-              onClick={() => router.back()}
+              onClick={() => {
+                if (pathname === '/' && keyword !== '') {
+                  router.replace(`?type=${type}`)
+                } else router.back()
+              }}
               sx={{
                 visibility: onlyTitle ? 'hidden' : 'visible',
               }}

diff --git a/src/app/panel/main-page/MainCard.tsx b/src/app/panel/main-page/MainCard.tsx
@@ -177,7 +177,7 @@ const MainCard = ({
             mt={1}
             direction={'row'}
             sx={{
-              height: `${1.5 * tagMaxLine + 0.5}rem`,
+              height: `${1.5 * tagMaxLine + 0.25}rem`,
               overflow: 'auto',
               flexWrap: 'wrap',
               '&::-webkit-scrollbar': {

diff --git a/src/app/panel/main-page/MainPanel.tsx b/src/app/panel/main-page/MainPanel.tsx
@@ -9,7 +9,7 @@ interface ISearchOptionPanel {
   openOption: boolean
   setOpenOption: (value: boolean) => void
   handleOption: (value: IDetailOption) => void
-  type: ProjectType | undefined
+  type: ProjectType
   sort: ProjectSort | undefined
   handleSort: (value: ProjectSort) => void
   isPc?: boolean

diff --git a/src/app/panel/main-page/SearchOption.tsx b/src/app/panel/main-page/SearchOption.tsx
@@ -13,7 +13,7 @@ const SearchOption = ({
   openOption: boolean
   setOpenOption: any
   setDetailOption: any
-  type: ProjectType | undefined
+  type: ProjectType
 }) => {
   const { isPc } = useMedia()
   const typeTitle = type === 'PROJECT' ? '프로젝트' : '스터디'

diff --git a/src/app/panel/main-page/SelectType.tsx b/src/app/panel/main-page/SelectType.tsx
@@ -5,7 +5,7 @@ const SelectType = ({
   type,
   setType,
 }: {
-  type: ProjectType | undefined
+  type: ProjectType
   setType: (value: ProjectType) => void
 }) => {
   {
@@ -14,7 +14,7 @@ const SelectType = ({
   return (
     <Stack flexDirection={'row'} gap={'0.75rem'} alignItems={'center'}>
       <Typography
-        color={!type || type === 'STUDY' ? 'text.strong' : 'text.assistive'}
+        color={type === 'STUDY' ? 'text.strong' : 'text.assistive'}
         variant={'Title1'}
         onClick={() => {
           setType('STUDY')

diff --git a/src/app/recruit/[id]/panel/ApplyDefaultButton.tsx b/src/app/recruit/[id]/panel/ApplyDefaultButton.tsx
@@ -21,7 +21,7 @@ const ApplyDefaultButton = ({
       disabled={disabled}
     >
       <Typography variant={'Body1'} color={'white'}>
-        지원하기
+        {disabled ? '마감' : '지원하기'}
       </Typography>
     </Button>
   )

diff --git a/src/app/recruit/[id]/panel/ApplyDrawerButton.tsx b/src/app/recruit/[id]/panel/ApplyDrawerButton.tsx
@@ -64,7 +64,7 @@ const ApplyDrawerButton = ({
         }}
       >
         <Typography variant={'Body1'} color={'white'}>
-          지원하기
+          {disabled ? '마감' : '지원하기'}
         </Typography>
       </Button>
     </>

diff --git a/src/app/recruit/[id]/panel/ApplyMenuButton.tsx b/src/app/recruit/[id]/panel/ApplyMenuButton.tsx
@@ -52,7 +52,7 @@ const ApplyMenuButton = ({
         sx={sx}
       >
         <Typography variant={'Body1'} color={'white'}>
-          지원하기
+          {disabled ? '마감' : '지원하기'}
         </Typography>
       </Button>
       <Menu

diff --git a/src/types/IPostDetail.ts b/src/types/IPostDetail.ts
@@ -20,7 +20,7 @@ export interface IMainCard {
   tagList: ITag[]
   favorite?: boolean
   recruit_id: number
-  type: ProjectType | undefined
+  type: ProjectType
   href?: string
   onFavorite?: () => void
   sx?: SxProps