광고 구좌 QA (#826)

* upgrade: api 업데이트 * feat: 피드 광고 인터랙션 추가, 캐러셀 요소 랜덤 순서로 보여주기, 하나의 캐러셀에 여러 링크 추가 * feat: 전체모임 페이지네이션 방식 변경 (첫 페이지 take 개수 변경) * fix: after loading 스크롤 복원 훅 fix
sopt-makers · Aug 30, 2024 · a32c770 · a32c770
1 parent dcf2326
commit a32c770
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 72 deletions.
diff --git a/src/__generated__/schema2.d.ts b/src/__generated__/schema2.d.ts
diff --git a/src/api/API_LEGACY/meeting/index.ts b/src/api/API_LEGACY/meeting/index.ts
@@ -156,7 +156,7 @@ export const fetchMeetingListOfAll = async ({
   part,
 }: filterData) => {
   return api.get<PromiseResponse<MeetingListOfFilterResponse>>(
-    `/meeting?${page ? `&page=${page}` : ''}${
+    `/meeting?${page ? `&page=${page}` : ''}${page === 1 ? `&take=${11}` : `&take=${12}`}${
       status?.length
         ? `&status=${status
             .map(item => parseStatusToNumber(item, RECRUITMENT_STATUS))

diff --git a/src/components/page/meetingList/Advertisement/AdCarousel.tsx b/src/components/page/meetingList/Advertisement/AdCarousel.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel';
 import { DotButton, useDotButton } from './AdCarouselDotBtn';
 import { PrevButton, NextButton, usePrevNextButtons } from './AdCarouselArrowBtn';
@@ -10,13 +10,25 @@ import Link from 'next/link';
 import { useDisplay } from '@hooks/useDisplay';
 
 type PropType = {
-  slides: paths['/advertisement/v2']['get']['responses']['200']['content']['application/json;charset=UTF-8']['advertisementImages'];
-  link: paths['/advertisement/v2']['get']['responses']['200']['content']['application/json;charset=UTF-8']['advertisementLink'];
+  slides: paths['/advertisement/v2']['get']['responses']['200']['content']['application/json;charset=UTF-8']['advertisements'];
   options?: EmblaOptionsType;
 };
 
 const AdCarousel: React.FC<PropType> = props => {
-  const { slides, link, options } = props;
+  const { slides, options } = props;
+
+  const shuffledSlides = useMemo(() => {
+    const shuffleArray = (array: typeof slides) => {
+      for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+      }
+      return array;
+    };
+
+    return shuffleArray([...slides]);
+  }, [slides]);
+
   const { isDesktop } = useDisplay();
   const [emblaRef, emblaApi] = useEmblaCarousel(options, [Autoplay()]);
 
@@ -37,51 +49,51 @@ const AdCarousel: React.FC<PropType> = props => {
   );
 
   return (
-    <Link href={link} target="_blank">
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <Embla>
-          <EmblaViewport ref={emblaRef}>
-            <EmblaContainer>
-              {slides?.map((slide, index) => (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <Embla>
+        <EmblaViewport ref={emblaRef}>
+          <EmblaContainer>
+            {shuffledSlides?.map((slide, index) => (
+              <Link href={slide?.advertisementLink} target="_blank">
                 <EmblaSlide key={index}>
-                  <EmblaSlideImage src={slide.imageUrl}></EmblaSlideImage>
+                  <EmblaSlideImage src={slide?.mobileImageUrl}></EmblaSlideImage>
                 </EmblaSlide>
+              </Link>
+            ))}
+          </EmblaContainer>
+        </EmblaViewport>
+
+        {isDesktop ? (
+          <>
+            <EmblaButtons onClick={e => e.preventDefault()}>
+              <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+              <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+            </EmblaButtons>
+            <EmblaDots onClick={e => e.preventDefault()}>
+              {scrollSnaps.map((_, index) => (
+                <DotButton
+                  key={index}
+                  onClick={() => onDotButtonClick(index)}
+                  className={'embla__dot'.concat(index === selectedIndex ? ' embla__dot--selected' : '')}
+                />
               ))}
-            </EmblaContainer>
-          </EmblaViewport>
-
-          {isDesktop ? (
-            <>
-              <EmblaButtons onClick={e => e.preventDefault()}>
-                <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
-                <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
-              </EmblaButtons>
-              <EmblaDots onClick={e => e.preventDefault()}>
-                {scrollSnaps.map((_, index) => (
-                  <DotButton
-                    key={index}
-                    onClick={() => onDotButtonClick(index)}
-                    className={'embla__dot'.concat(index === selectedIndex ? ' embla__dot--selected' : '')}
-                  />
-                ))}
-              </EmblaDots>
-            </>
-          ) : (
-            <div style={{ position: 'relative' }}>
-              <EmblaDots onClick={e => e.preventDefault()}>
-                {scrollSnaps.map((_, index) => (
-                  <DotButton
-                    key={index}
-                    onClick={() => onDotButtonClick(index)}
-                    className={'embla__dot'.concat(index === selectedIndex ? ' embla__dot--selected' : '')}
-                  />
-                ))}
-              </EmblaDots>
-            </div>
-          )}
-        </Embla>
-      </div>
-    </Link>
+            </EmblaDots>
+          </>
+        ) : (
+          <div style={{ position: 'relative' }}>
+            <EmblaDots onClick={e => e.preventDefault()}>
+              {scrollSnaps.map((_, index) => (
+                <DotButton
+                  key={index}
+                  onClick={() => onDotButtonClick(index)}
+                  className={'embla__dot'.concat(index === selectedIndex ? ' embla__dot--selected' : '')}
+                />
+              ))}
+            </EmblaDots>
+          </div>
+        )}
+      </Embla>
+    </div>
   );
 };
 
@@ -90,6 +102,7 @@ export default AdCarousel;
 export const Embla = styled('div', {
   width: '380px',
   height: '380px',
+
   '@mobile': {
     width: '320px',
     height: '320px',
@@ -98,11 +111,18 @@ export const Embla = styled('div', {
     width: '280px',
     height: '280px',
   },
+
+  transition: 'transform 0.3s ease',
+  '&:hover': {
+    transform: 'translateY(-10px)',
+  },
 });
 
 export const EmblaViewport = styled('div', {
-  overflow: 'hidden',
   borderRadius: '12px',
+  overflow: 'hidden',
+  '-webkit-backface-visibility': 'hidden',
+  '-webkit-transform': 'translate3d(0, 0, 0)',
 });
 
 export const EmblaContainer = styled('div', {
@@ -121,6 +141,7 @@ export const EmblaSlideImage = styled('img', {
   userSelect: 'none',
   width: '380px',
   height: '380px',
+
   '@mobile': {
     width: '320px',
     height: '320px',

diff --git a/src/components/page/meetingList/Advertisement/index.tsx b/src/components/page/meetingList/Advertisement/index.tsx
@@ -70,9 +70,7 @@ const RenderPostsWithAds = () => {
               </Link>
             );
           })}
-          {postAds && (
-            <AdCarousel slides={postAds.advertisementImages} link={postAds.advertisementLink} options={OPTIONS} />
-          )}
+          {postAds && <AdCarousel slides={postAds.advertisements} options={OPTIONS} />}
           {postsData?.pages.slice(3).map(post => {
             if (!post) return;
             return (
@@ -142,9 +140,7 @@ const RenderPostsWithAds = () => {
               </Link>
             );
           })}
-          {postAds && (
-            <AdCarousel slides={postAds.advertisementImages} link={postAds.advertisementLink} options={OPTIONS} />
-          )}
+          {postAds && <AdCarousel slides={postAds.advertisements} options={OPTIONS} />}
 
           {postsData?.pages.slice(3).map(post => {
             if (!post) return;

diff --git a/src/components/page/meetingList/Grid/List.tsx b/src/components/page/meetingList/Grid/List.tsx
@@ -31,16 +31,16 @@ export function MeetingListOfAll() {
               <Card key={meetingData.id} meetingData={meetingData} mobileType="list" />
             ))}
 
-            {meetingAds && (
-              <Link href={meetingAds?.advertisementLink} target="_blank">
+            {meetingAds && meetingListData?.meta.page === 1 && (
+              <Link href={meetingAds?.advertisements[0]?.advertisementLink} target="_blank">
                 {isDesktop ? (
                   <img
-                    src={meetingAds?.advertisementImages[0].imageUrl}
+                    src={meetingAds?.advertisements[0].desktopImageUrl}
                     style={{ width: '380px', height: '478px', borderRadius: '12px' }}
                   ></img>
                 ) : (
                   <img
-                    src={meetingAds?.advertisementImages[1].imageUrl}
+                    src={meetingAds?.advertisements[0].mobileImageUrl}
                     style={{ width: '328px', height: '82px', borderRadius: '8px' }}
                   ></img>
                 )}

diff --git a/src/hooks/useScrollRestoration.ts b/src/hooks/useScrollRestoration.ts
@@ -36,7 +36,10 @@ export default function useScrollRestoration() {
 }
 
 export const restoreScrollPosition = (router: NextRouter) => {
-  const scrollPos = JSON.parse(sessionStorage.getItem(router.asPath) || '{"x": 0, "y": 0}');
+  //const scrollPos = JSON.parse(sessionStorage.getItem(router.asPath) || '{"x": 0, "y": 0}');
+  const scrollPos = JSON.parse('{"x": 0, "y": 0}'); // router.asPath 가 기록된 경우, 페이지 재진입 시 scroll 이 아래쪽으로 기억되어 있는 문제가 발생
+
+  console.log(scrollPos);
   window.scroll(scrollPos.x, scrollPos.y);
 };