hotfix: 메인 아트워크 클릭 시 해당 아트워크 상세 페이지로 이동

STUDIO-EYE · Dec 18, 2024 · d9af4ee · d9af4ee
1 parent a419b2c
commit d9af4ee
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/src/components/PromotionPage/Main/ArtworkList.tsx b/src/components/PromotionPage/Main/ArtworkList.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import ArtworkNav from './ArtworkNav';
 import { theme } from '@/styles/theme';
 import useWindowSize from '@/hooks/useWindowSize';
+import { useNavigate } from 'react-router-dom';
 
 const defaultMainImg = lazy(() => import('@/assets/images/PP/defaultMainImg.jpg'));
 const SkeletonComponent = lazy(() => import('../SkeletonComponent/SkeletonComponent'));
@@ -13,6 +14,7 @@ interface SectionProps {
   elementHeight: number;
   index: number;
   data: {
+    id:number;
     backgroundImg: string;
     title: string;
     client: string;
@@ -24,6 +26,7 @@ interface SectionProps {
 }
 
 const ArtworkList = React.forwardRef<HTMLElement, SectionProps>(({ index, data, count, scrollToSection }, ref) => {
+  const navigate = useNavigate();
   const { width } = useWindowSize();
   const MotionBox = motion<BoxProps>(Box);
   const cardInView: Variants = {
@@ -34,11 +37,17 @@ const ArtworkList = React.forwardRef<HTMLElement, SectionProps>(({ index, data,
       opacity: 1,
     },
   };
+  const handleClick = () => {
+    if (data.id && data.id !== 0) { // id가 유효하고 0이 아닌 경우에만 이동
+      navigate(`/artwork/all/${data.id}`);
+    }
+  };
 
   return (
     <MotionBox data-cy="artworklist-section"
       w="100%"
       h="100vh"
+      onClick={handleClick} 
       scrollSnapType='y mandatory'
       overflowY='hidden'
       scrollSnapAlign="center"
@@ -47,7 +56,7 @@ const ArtworkList = React.forwardRef<HTMLElement, SectionProps>(({ index, data,
       position="relative"
       viewport={{ once: false, amount: 0.7 }}
       ref={ref}
-      backgroundImage={`linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), url(${data.backgroundImg || defaultMainImg})`}
+      backgroundImage={`linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url(${data.backgroundImg || defaultMainImg})`}
       backgroundSize="cover"
       backgroundPosition="center"
       css={`
@@ -60,6 +69,7 @@ const ArtworkList = React.forwardRef<HTMLElement, SectionProps>(({ index, data,
           overflow-y: auto;
         }
         image-rendering: crisp-edges; /* 선명도 향상 */
+        cursor:pointer;
       `}
     >
       <Suspense fallback={

diff --git a/src/components/PromotionPage/Main/ArtworkSlider.tsx b/src/components/PromotionPage/Main/ArtworkSlider.tsx
@@ -73,6 +73,7 @@ useEffect(() => {
         <ArtworkList
           key={0}
           data={{
+            id: ARTWORKLIST_DATA.ID,
             backgroundImg: defaultMainImg,
             title: ARTWORKLIST_DATA.TITLE,
             client: ARTWORKLIST_DATA.CLIENT,
@@ -94,6 +95,7 @@ useEffect(() => {
         <ArtworkList
           key={0}
           data={{
+            id: artworks[0].id || 0,
             backgroundImg: artworks[0].mainImg || '',
             title: artworks[0].name || '',
             client: artworks[0].client || '',
@@ -138,6 +140,7 @@ useEffect(() => {
             <ArtworkList
               key={index}
               data={{
+                id: artwork.id || ARTWORKLIST_DATA.ID,
                 backgroundImg: artwork.mainImg || defaultMainImg,
                 title: artwork.name || ARTWORKLIST_DATA.TITLE,
                 client: artwork.client || '',

diff --git a/src/constants/introdutionConstants.ts b/src/constants/introdutionConstants.ts
@@ -21,6 +21,7 @@ export const PARTER_DATA = {
 };
 
 export const ARTWORKLIST_DATA = {
+  ID: 0,
   TITLE: '이준호와 임윤아의 킹더랜드 인터뷰',
   CLIENT: 'NETFLIX Korea Youtube',
   OVERVIEW: '쉿!!🤫 소음을 내면 호텔의 별점이 내려가요! 배우 이준호와 임윤아의 조용조용 ASMR 인터뷰가 시작됩니다.',

diff --git a/src/pages/PromotionPage/Main/MainPage.tsx b/src/pages/PromotionPage/Main/MainPage.tsx
@@ -151,6 +151,7 @@ const MainPage = () => {
                   <ArtworkList
                     key={item.id}
                     data={{
+                      id:item.id ? item.id  : ARTWORKLIST_DATA.ID,
                       backgroundImg: item.mainImg ? item.mainImg : defaultMainImg,
                       title: item.name ? item.name : ARTWORKLIST_DATA.TITLE,
                       client: item.client ? item.client : ARTWORKLIST_DATA.CLIENT,
@@ -168,6 +169,7 @@ const MainPage = () => {
                 <ArtworkList
                   key={'default'}
                   data={{
+                    id: ARTWORKLIST_DATA.ID,
                     backgroundImg: defaultMainImg,
                     title: ARTWORKLIST_DATA.TITLE,
                     client: ARTWORKLIST_DATA.CLIENT,