diff --git a/src/assets/img/workBackground.png b/src/assets/img/workBackground.png new file mode 100644 index 0000000..10a3ba6 Binary files /dev/null and b/src/assets/img/workBackground.png differ diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index dcc85eb..4b2204b 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -11,6 +11,8 @@ function Layout({ children }: { children: React.ReactNode }) { const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen); + const isWorkDetailRoute = /^\/work\/[^/]+\/[^/]+$/.test(location.pathname); + useEffect(() => { if (isDrawerOpen === true) { document.body.style.overflow = 'hidden'; @@ -31,38 +33,42 @@ function Layout({ children }: { children: React.ReactNode }) { return ( - + {isMobile && isWorkDetailRoute ? ( + <> + ) : ( + + )} {children} ); diff --git a/src/hooks/queries/useGetWorkList.tsx b/src/hooks/queries/useGetWorkList.tsx index 970e945..6baa843 100644 --- a/src/hooks/queries/useGetWorkList.tsx +++ b/src/hooks/queries/useGetWorkList.tsx @@ -40,8 +40,8 @@ export const useGetWorkList = ({ category, currentPage }: WorkListRequestType) = pageParams: data?.pageParams || [], }), staleTime: 1000 * 60 * 5, - // refetchOnWindowFocus: false, - // refetchOnMount: false, + refetchOnWindowFocus: false, + refetchOnMount: false, }); return { data, hasNextPage, fetchNextPage, isFetchingNextPage }; diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts index b5d9a68..0778746 100644 --- a/src/hooks/useIntersectionObserver.ts +++ b/src/hooks/useIntersectionObserver.ts @@ -8,11 +8,10 @@ interface useIntersectionObserverProps { } export const useIntersectionObserver = ({ - threshold = 0.5, + threshold = 0.2, hasNextPage, fetchNextPage, }: useIntersectionObserverProps) => { - //관찰할 요소 const [target, setTarget] = useState(null); diff --git a/src/main.tsx b/src/main.tsx index a246860..fd003d0 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import { RouterProvider } from 'react-router-dom'; import router from './routes/Router'; +import './../public/fonts/font.css'; ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/src/pages/Work/Work.tsx b/src/pages/Work/Work.tsx index d2884d6..b46eccd 100644 --- a/src/pages/Work/Work.tsx +++ b/src/pages/Work/Work.tsx @@ -7,6 +7,7 @@ import { useState } from 'react'; import { Category } from '../../types/types'; import { useIsMobile } from '../../hooks/useIsMobile'; import MobileHeader from './components/mobile/MobileHeader'; +import background from '../../assets/img/workBackground.png'; const Work = () => { const [category, setCategory] = useState('ALL'); @@ -18,6 +19,7 @@ const Work = () => { return ( + Digging Club - Work @@ -55,14 +57,27 @@ const WorkPage = styled.div` display: flex; justify-content: center; + + img { + width: 100vw; + height: 100vh; + position: fixed; + + z-index: 1; + } `; const PcDiv = styled.div` - padding: 6rem 0 10.4rem 0; + display: flex; + padding: 6rem 0; + + z-index: 2; `; const MobileDiv = styled.div` display: flex; flex-direction: column; align-items: center; + + z-index: 2; `; diff --git a/src/pages/Work/components/mobile/MobileCategoriesSection.tsx b/src/pages/Work/components/mobile/MobileCategoriesSection.tsx index 123799e..54da01d 100644 --- a/src/pages/Work/components/mobile/MobileCategoriesSection.tsx +++ b/src/pages/Work/components/mobile/MobileCategoriesSection.tsx @@ -54,7 +54,7 @@ const CategoriesItem = styled.span<{ selected: boolean }>` line-height: 120%; font-style: normal; font-weight: 900; - color: ${({ theme, selected }) => (selected ? theme.colors.primary : 'white')}; + color: ${({ theme, selected }) => (selected ? theme.colors.primaryBlue : 'white')}; cursor: pointer; diff --git a/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx b/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx index 2145f23..4d022d5 100644 --- a/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx +++ b/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx @@ -53,7 +53,7 @@ const WorkCategory = styled.span` font-size: 1.8rem; line-height: 120%; - color: ${({ theme }) => theme.colors.primary}; + color: ${({ theme }) => theme.colors.primaryBlue}; `; const WorkAuthorInfo = styled.div` @@ -85,7 +85,6 @@ const InfoBodyWrapper = styled.div` const WorkTitle = styled.span` margin-bottom: 1.2rem; - font: ${({ theme }) => theme.fonts.Primary}; font-size: 2.4rem; font-style: normal; font-weight: 900; diff --git a/src/pages/Work/components/work/CategoriesSection.tsx b/src/pages/Work/components/work/CategoriesSection.tsx index acac500..3621c9e 100644 --- a/src/pages/Work/components/work/CategoriesSection.tsx +++ b/src/pages/Work/components/work/CategoriesSection.tsx @@ -34,6 +34,7 @@ export default CategoriesSection; const CategoriesWrapper = styled.section` position: fixed; + width: 13rem; display: flex; flex-direction: column; @@ -42,11 +43,12 @@ const CategoriesWrapper = styled.section` `; const CategoriesItem = styled.span<{ selected: boolean }>` - ${({ theme }) => theme.fonts.primary}; - font-size: 4rem; + ${({ theme }) => theme.fonts.primaryBlue}; + font-size: 3rem; + font-style: normal; + font-weight: 500; line-height: 120%; - color: ${({ theme, selected }) => (selected ? theme.colors.primary : 'white')}; + color: ${({ theme, selected }) => (selected ? theme.colors.primaryBlue : 'white')}; cursor: pointer; `; -1920; diff --git a/src/pages/Work/components/work/ExhibitionSection.tsx b/src/pages/Work/components/work/ExhibitionSection.tsx index 40ce59a..186d5af 100644 --- a/src/pages/Work/components/work/ExhibitionSection.tsx +++ b/src/pages/Work/components/work/ExhibitionSection.tsx @@ -58,7 +58,7 @@ const ExhibitionWrapper = styled.div<{ isMobile: boolean }>` display: ${({ isMobile }) => (isMobile ? 'flex' : null)}; justify-content: ${({ isMobile }) => (isMobile ? 'center' : null)}; width: ${({ isMobile }) => (isMobile ? '34.3rem' : '95rem')}; - margin-left: ${({ isMobile }) => (isMobile ? null : '33.85%')}; + margin-left: ${({ isMobile }) => (isMobile ? null : '33rem')}; margin-top: ${({ isMobile }) => (isMobile ? '14.8rem' : null)}; display: grid; diff --git a/src/pages/Work/components/workDetail/WorkInfoSection.tsx b/src/pages/Work/components/workDetail/WorkInfoSection.tsx index 95a7cee..c818630 100644 --- a/src/pages/Work/components/workDetail/WorkInfoSection.tsx +++ b/src/pages/Work/components/workDetail/WorkInfoSection.tsx @@ -34,7 +34,7 @@ const WorkCategory = styled.span` font-size: 5rem; line-height: 120%; - color: ${({ theme }) => theme.colors.primary}; + color: ${({ theme }) => theme.colors.primaryBlue}; `; const WorkAuthorInfo = styled.div` diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts index 85d1942..c254434 100644 --- a/src/styles/globalStyles.ts +++ b/src/styles/globalStyles.ts @@ -53,7 +53,6 @@ const GlobalStyle = createGlobalStyle` body { margin: 0; padding: 0; - /* 폰트 */ color: #FFFFFF; font-family: 'Pretendard'; -webkit-text-size-adjust: 100%;