Merge pull request #35 from GCVD-2024/feat/#29-work-qa

[WORKS] QA 진행
GCVD-2024 · Oct 15, 2024 · fa923b0 · fa923b0
2 parents e6063ad + 71d93bc
commit fa923b0
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 46 deletions.
diff --git a/src/assets/img/workBackground.png b/src/assets/img/workBackground.png
diff --git 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 (
     <LayoutWrapper>
-      <Nav isMobile={isMobile}>
-        {isMobile ? (
-          <>
-            <HamburgerButton onClick={toggleDrawer} src="/svg/hamburger.svg" />
-            <Drawer isOpen={isDrawerOpen}>
-              <DrawerContent>
-                <DrawerButton onClick={toggleDrawer} src="/svg/left-arrow.svg" />
-                <NavLinkContainer isMobile={isMobile}>
-                  {NAVIGATION_ITEMS.map((item) => (
-                    <NavLink
-                      key={item.name}
-                      to={item.path}
-                      isActive={location.pathname === item.path}
-                      onClick={toggleDrawer}
-                    >
-                      {item.name}
-                    </NavLink>
-                  ))}
-                </NavLinkContainer>
-              </DrawerContent>
-            </Drawer>
-          </>
-        ) : (
-          <NavLinkContainer isMobile={isMobile}>
-            {NAVIGATION_ITEMS.map((item) => (
-              <NavLink key={item.name} to={item.path} isActive={location.pathname === item.path}>
-                {item.name}
-              </NavLink>
-            ))}
-          </NavLinkContainer>
-        )}
-      </Nav>
+      {isMobile && isWorkDetailRoute ? (
+        <></>
+      ) : (
+        <Nav isMobile={isMobile}>
+          {isMobile ? (
+            <>
+              <HamburgerButton onClick={toggleDrawer} src="/svg/hamburger.svg" />
+              <Drawer isOpen={isDrawerOpen}>
+                <DrawerContent>
+                  <DrawerButton onClick={toggleDrawer} src="/svg/left-arrow.svg" />
+                  <NavLinkContainer isMobile={isMobile}>
+                    {NAVIGATION_ITEMS.map((item) => (
+                      <NavLink
+                        key={item.name}
+                        to={item.path}
+                        isActive={location.pathname === item.path}
+                        onClick={toggleDrawer}
+                      >
+                        {item.name}
+                      </NavLink>
+                    ))}
+                  </NavLinkContainer>
+                </DrawerContent>
+              </Drawer>
+            </>
+          ) : (
+            <NavLinkContainer isMobile={isMobile}>
+              {NAVIGATION_ITEMS.map((item) => (
+                <NavLink key={item.name} to={item.path} isActive={location.pathname === item.path}>
+                  {item.name}
+                </NavLink>
+              ))}
+            </NavLinkContainer>
+          )}
+        </Nav>
+      )}
       {children}
     </LayoutWrapper>
   );

diff --git 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
@@ -8,11 +8,10 @@ interface useIntersectionObserverProps {
 }
 
 export const useIntersectionObserver = ({
-  threshold = 0.5,
+  threshold = 0.2,
   hasNextPage,
   fetchNextPage,
 }: useIntersectionObserverProps) => {
-
   //관찰할 요소
   const [target, setTarget] = useState<HTMLDivElement | null | undefined>(null);
 

diff --git 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<Category>('ALL');
@@ -18,6 +19,7 @@ const Work = () => {
 
   return (
     <WorkPage>
+      <img src={background} />
       <Helmet>
         <title>Digging Club - Work</title>
       </Helmet>
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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`