From 592f04eba1f02a7420b2b01b5528dc22e36be1cb Mon Sep 17 00:00:00 2001 From: Hyeon Ji Kim Date: Tue, 13 Feb 2024 21:37:34 +0900 Subject: [PATCH] fix styles --- src/app/panel/MainPage.tsx | 36 +++++++++---------- src/app/panel/layout-panel/Header.tsx | 13 +++++-- src/app/panel/layout-panel/MobileNav.tsx | 5 ++- src/app/panel/layout-panel/Nav.style.ts | 2 +- src/app/panel/layout-panel/PcNav.tsx | 29 +++++++++------ src/app/panel/main-page/SearchButton.tsx | 2 ++ .../recruit/[id]/panel/RecruitDetailPage.tsx | 22 ++++++------ src/app/recruit/[id]/panel/RecruitInfo.tsx | 1 + .../recruit/[id]/panel/RecruitInfoElement.tsx | 3 ++ .../recruit/[id]/panel/RecruitQuickMenu.tsx | 3 ++ src/app/search/panel/SearchBody.tsx | 2 -- src/components/dropdownMenu/IconMenuItem.tsx | 4 ++- 12 files changed, 75 insertions(+), 47 deletions(-) diff --git a/src/app/panel/MainPage.tsx b/src/app/panel/MainPage.tsx index 16e9cc39d..a55c283d6 100644 --- 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 }) => { undefined, ) const [init, setInit] = useState(true) + const { isTablet } = useMedia() useEffect(() => { if (keyword !== '') { @@ -114,12 +116,7 @@ const MainPage = ({ initData }: { initData: IPagination }) => { }&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( isInit && isLogin @@ -190,6 +187,7 @@ const MainPage = ({ initData }: { initData: IPagination }) => { const handleType = useCallback( (value: ProjectType) => { + setInit(false) setType(value) //type이 변경될 경우 초기화 setPage(1) @@ -218,11 +216,13 @@ const MainPage = ({ initData }: { initData: IPagination }) => { 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 }) => { {keyword === '' ? ( <> - @@ -317,7 +316,6 @@ const MainPage = ({ initData }: { initData: IPagination }) => { {keyword === '' ? ( <> - }) => { )} - - - - - + {!isTablet && ( + + + + + + )} diff --git a/src/app/panel/layout-panel/Header.tsx b/src/app/panel/layout-panel/Header.tsx index e82a62c9e..9587a4fe8 100644 --- 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 }) => { { - 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 index 0685fe5f2..eaed3d5ff 100644 --- 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 index 0c6a17571..bb121e2e1 100644 --- 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 index 1608cb838..892681bcf 100644 --- 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 ( - - + @@ -201,8 +208,8 @@ const PcNav = () => { )} - - + + ) } diff --git a/src/app/panel/main-page/SearchButton.tsx b/src/app/panel/main-page/SearchButton.tsx index a03138c4b..f673f941e 100644 --- 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" > +
diff --git a/src/app/recruit/[id]/panel/RecruitDetailPage.tsx b/src/app/recruit/[id]/panel/RecruitDetailPage.tsx index 8785b0d22..07baa42af 100644 --- 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} /> @@ -121,7 +122,7 @@ const RecruitDetailPage = ({ data, id }: { data: IPostDetail; id: string }) => { /** 모바일 뷰 **/ return ( - + { title={content?.title} content={content?.content} me={me} + status={content?.status} /> + {isClient && !me && ( + + )} - {isClient && !me && ( - - )} ) } diff --git a/src/app/recruit/[id]/panel/RecruitInfo.tsx b/src/app/recruit/[id]/panel/RecruitInfo.tsx index fd6a26c32..19658f236 100644 --- 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) => { diff --git a/src/app/recruit/[id]/panel/RecruitInfoElement.tsx b/src/app/recruit/[id]/panel/RecruitInfoElement.tsx index 66ef41930..aa1e2c040 100644 --- 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 index 5f1db82d7..d592a0c1d 100644 --- 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={} text={'수정'} + disabled={status === 'DONE'} /> )} {me && ( diff --git a/src/app/search/panel/SearchBody.tsx b/src/app/search/panel/SearchBody.tsx index bba2903c6..f7d7b1e38 100644 --- 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 ( <> - {!isPc &&
} void + disabled?: boolean }) => { const handleClick = () => { if (action) { @@ -18,7 +20,7 @@ const IconMenuItem = ({ } } return ( - +