[SP3] 메인 QA 작업

src/hooks/useInfiniteCarousel.ts

@@ -1,12 +1,16 @@
-import { useEffect, useRef, useState } from 'react';
+import { MutableRefObject, useEffect, useRef, useState } from 'react';
 
 const SWIPE_THRESHOLD = 50;
 const NEXT = 1;
 const PREVIOUS = -1;
 
 export type DirectionType = typeof PREVIOUS | typeof NEXT;
 
-const useInfiniteCarousel = <T>(carouselList: Array<T>, x: string) => {
+const useInfiniteCarousel = <T>(
+  carouselList: Array<T>,
+  x: string,
+  dotRef?: MutableRefObject<HTMLElement[]>,
+) => {
   const TOTAL_SLIDE = carouselList.length;
   const [infiniteCarouselList, setInfiniteCarouselList] = useState(carouselList);
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -51,13 +55,24 @@ const useInfiniteCarousel = <T>(carouselList: Array<T>, x: string) => {
 
   const handleCarouselSwipe = (direction: DirectionType) => {
     const totalSlide = carouselList.length;
-    const newIndex = slideIndex + direction;
+    const nextIndex = slideIndex + direction;
+    let newIndex;
     if (direction === NEXT) {
-      setSlideIndex(newIndex === totalSlide ? 0 : newIndex);
+      newIndex = nextIndex === totalSlide ? 0 : nextIndex;
+      setSlideIndex(newIndex);
     } else {
-      setSlideIndex(newIndex === -1 ? totalSlide - 1 : newIndex);
+      newIndex = nextIndex === -1 ? totalSlide - 1 : nextIndex;
+      setSlideIndex(newIndex);
     }
     handleSwipe(direction);
+
+    if (dotRef) {
+      dotRef.current[newIndex].scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest',
+      });
+    }
   };
 
   const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {

src/lib/constants/main.ts

@@ -189,37 +189,33 @@ export const partList: PartListType = {
       { content: 'Kotlin 언어를 활용', weight: 'bold' },
       { content: '해 안드로이드 ', weight: 'normal' },
       { content: 'UI 구현 기초/심화', weight: 'bold' },
-      { content: '부터 ', weight: 'normal' },
+      { content: ', ', weight: 'normal' },
       { content: '서버 통신 ', weight: 'bold' },
       {
-        content: '등 앱 제작에 필요한 내용들을 배웁니다. 안드로이드에 몰입할 수 있는 세미나, ',
+        content: '등 앱 제작에 필요한 내용들을 배웁니다. 세미나, ',
         weight: 'normal',
       },
       { content: '페어 프로그래밍', weight: 'bold' },
-      { content: '을 통한 실습, 스터디, 합동세미나 등 여러 활동에 참여합니다.', weight: 'normal' },
+      { content: '을 통한 실습 등 여러 활동에 참여합니다.', weight: 'normal' },
     ],
   },
   [Part.IOS]: {
     value: 'iOS',
     label: 'iOS',
     description: [
       { content: 'Swift와 UI Kit', weight: 'bold' },
-      { content: '를 이용해서 ', weight: 'normal' },
+      { content: '를 이용해 ', weight: 'normal' },
       { content: 'iOS 앱 서비스', weight: 'bold' },
       {
-        content: '를 만들 수 있는 능력을 기를 수 있습니다. iOS가 처음인 분들을 위한',
+        content: '를 만들 수 있습니다. iOS가 처음인 분들을 위한',
         weight: 'normal',
       },
       { content: '왕초보 스터디', weight: 'bold' },
       { content: '와 ', weight: 'normal' },
       { content: '보충 세미나', weight: 'bold' },
-      { content: ', 그리고 실력적 도약을 위한 ', weight: 'normal' },
+      { content: ', 실력적 도약을 위한 ', weight: 'normal' },
       { content: '심화 세미나', weight: 'bold' },
-      {
-        content:
-          '까지. 자신의 성장을 위해 열정적으로 도전하는 사람들과 함께 활동에 필요한 부분들을 학습할 수 있습니다.',
-        weight: 'normal',
-      },
+      { content: '까지 존재합니다.', weight: 'normal' },
     ],
   },
   [Part.WEB]: {
@@ -229,7 +225,6 @@ export const partList: PartListType = {
       { content: 'UI 구현, 서버 통신 등 ', weight: 'normal' },
       { content: '웹 서비스 개발', weight: 'bold' },
       { content: '에 필요한 역량들을 ', weight: 'normal' },
-      { content: '기초부터 심화까지 ', weight: 'bold' },
       {
         content:
           '학습합니다. 또한 기획자, 디자이너, 서버 개발자와의 협업 경험을 통해 개발 협업 방식을 익힐 수 있습니다.',
@@ -244,16 +239,13 @@ export const partList: PartListType = {
       { content: 'Spring 프레임 워크', weight: 'bold' },
       { content: ', ', weight: 'normal' },
       { content: '관계형 데이터베이스', weight: 'bold' },
-      {
-        content: '와',
-        weight: 'normal',
-      },
+      { content: '와', weight: 'normal' },
       { content: 'AWS를 기반', weight: 'bold' },
       { content: '으로 ', weight: 'normal' },
-      { content: '서버 애플리케이션을 구축', weight: 'bold' },
+      { content: '서버를 구축', weight: 'bold' },
       {
         content:
-          '하고 운영하는 과정을 학습합니다. 또한 세미나, 코드리뷰, 스터디를 통해 개발 실력을 증진시키고, 기획자, 디자이너, 클라이언트 개발자와의 협업을 통해 협업 방식을 익힐 수 있습니다.',
+          '및 운영하는 과정을 학습합니다. 세미나, 코드리뷰, 스터디를 통해 개발 실력을 증진시킵니다.',
         weight: 'normal',
       },
     ],
@@ -367,29 +359,29 @@ export const keywordList: KeywordListType = {
       content: 'iOS 앱 서비스',
       ...indigoStyle,
       desktop: { top: '82.31px', right: 'calc(102px + 10vw)' },
-      tablet: { top: '305px', right: 'calc(100px + 9.11vw)' },
+      tablet: { top: '285px', right: 'calc(100px + 9.11vw)' },
       mobile: { top: '178px', right: 'calc(50px + 12vw)' },
     },
     {
       content: 'Swift와 UI Kit',
       ...yellowStyle,
       desktop: { top: '117.6px', right: '6.72vw' },
-      tablet: { top: '324px', right: '6.38vw' },
+      tablet: { top: '314px', right: '6.38vw' },
       mobile: { top: '188px', right: '6.07vw' },
     },
     {
       content: '보충 및 심화 세미나',
       backgroundColor: '#D65438',
       color: '#fff',
       desktop: { top: '223.74px', right: 'calc(33px + 5vw)' },
-      tablet: { top: '400px', right: '16.79vw' },
+      tablet: { top: '390px', right: '16.79vw' },
       mobile: { top: '235px', right: '15.42vw' },
     },
     {
       content: '왕초보 스터디',
       ...blueStyle,
       desktop: { top: '275.88px', right: '19.02vw' },
-      tablet: { top: '360px', right: '39.97vw' },
+      tablet: { top: '350px', right: '33.97vw' },
       mobile: { top: '212px', right: '38.78vw' },
     },
   ],
@@ -421,28 +413,28 @@ export const keywordList: KeywordListType = {
       content: '서버 애플리케이션 구축',
       ...greenStyle,
       desktop: { top: '92.97px', right: '8.16vw' },
-      tablet: { top: '301px', right: '12.10vw' },
+      tablet: { top: '301px', right: '10.10vw' },
       mobile: { top: '178px', right: '15.42vw' },
     },
     {
       content: '관계형 데이터베이스',
       ...indigoStyle,
       desktop: { top: '157.13px', right: 'calc(30px + 3.69vw)' },
-      tablet: { top: '346px', right: '5.2vw' },
+      tablet: { top: '346px', right: '4.2vw' },
       mobile: { top: '203px', right: '8.4vw' },
     },
     {
       content: 'AWS 기반',
       ...skyStyle,
       desktop: { top: '192px', right: 'calc(110px + 15.1vw)' },
-      tablet: { top: '323px', right: 'calc(110px + 28vw)' },
+      tablet: { top: '323px', right: 'calc(100px + 22vw)' },
       mobile: { top: '196px', right: '45.79vw' },
     },
     {
       content: 'Spring 프레임 워크',
       ...blueStyle,
       desktop: { top: '282.28px', right: '10.83vw' },
-      tablet: { top: '389px', right: '25vw' },
+      tablet: { top: '389px', right: '23vw' },
       mobile: { top: '235px', right: '25.7vw' },
     },
   ],

src/views/MainPage/components/Activity/Card/style.ts

@@ -12,17 +12,20 @@ export const Background = styled(motion.main)`
   position: relative;
   z-index: 2;
 
+  @media (max-width: 768px) {
+    width: calc(100% - 5.46vw - 54px);
+  }
+
   @media (max-width: 428px) and (min-width: 376px) {
     border-radius: 21px;
     max-width: 296px;
-    width: 100%;
+    width: calc(100% - 5.46vw - 31px);
     height: 188px;
   }
 
   @media (max-width: 375px) {
     border-radius: 21px;
     max-width: 258px;
-    width: 100%;
     height: 164px;
   }
 `;

src/views/MainPage/components/Activity/MobileCard/index.tsx

@@ -22,40 +22,51 @@ export default function MobileCard() {
 
   return (
     <S.Container>
-      <S.Carousel ref={carouselRef} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
-        {infiniteCarouselList.map(({ value }, index) => {
-          const { img, navKor, navEng, description } = Activity[value];
-          return (
-            <S.Slide key={index}>
-              <S.LeftArrow>
-                <Image
-                  src={IcArrowLeft}
-                  width="42"
-                  height="42"
-                  alt="왼쪽 화살표"
-                  onClick={() => handleCarouselSwipe(-1)}
-                />
-              </S.LeftArrow>
-              <Card
-                key={navEng}
-                img={img}
-                navKor={navKor}
-                navEng={navEng}
-                description={description}
-              />
-              <S.RightArrow>
-                <Image
-                  src={IcArrowRight}
-                  width="42"
-                  height="42"
-                  alt="오른쪽 화살표"
-                  onClick={() => handleCarouselSwipe(1)}
+      <S.CarouselWrapper>
+        <S.LeftArrow>
+          <Image
+            src={IcArrowLeft}
+            width="42"
+            height="42"
+            alt="왼쪽 화살표"
+            onClick={() => handleCarouselSwipe(-1)}
+          />
+        </S.LeftArrow>
+        <S.Carousel ref={carouselRef} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
+          {infiniteCarouselList.map(({ value }, index) => {
+            const { img, navKor, navEng, description } = Activity[value];
+            return (
+              <S.Slide key={index}>
+                <Card
+                  key={navEng}
+                  img={img}
+                  navKor={navKor}
+                  navEng={navEng}
+                  description={description}
                 />
-              </S.RightArrow>
-            </S.Slide>
-          );
-        })}
-      </S.Carousel>
+              </S.Slide>
+            );
+          })}
+        </S.Carousel>
+        <S.RightArrow>
+          <Image
+            src={IcArrowRight}
+            width="42"
+            height="42"
+            alt="오른쪽 화살표"
+            onClick={() => handleCarouselSwipe(1)}
+          />
+        </S.RightArrow>
+      </S.CarouselWrapper>
+      <S.RightArrow>
+        <Image
+          src={IcArrowRight}
+          width="42"
+          height="42"
+          alt="오른쪽 화살표"
+          onClick={() => handleCarouselSwipe(1)}
+        />
+      </S.RightArrow>
       <S.ButtonWrapper
         ref={dragRef}
         onMouseDown={handleMouseDown}

src/views/MainPage/components/Activity/MobileCard/style.ts

@@ -42,32 +42,31 @@ export const Carousel = styled.div`
 export const Slide = styled.div`
   display: flex;
   flex-shrink: 0;
-  position: relative;
   width: 100%;
   align-items: center;
   height: auto;
   justify-content: center;
-
-  position: static;
 `;
 
 export const Arrow = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0 0 0 1.5625vw;
+
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 99;
 
   & > img:hover {
     cursor: pointer;
   }
 
   @media (max-width: 768px) {
     width: 26px;
-    margin: 0 2.73vw 0 0;
   }
 
   @media (max-width: 428px) {
-    margin: 0 2.72vw 0 0;
     width: 15.293px;
     & > img {
       height: 24.138px;
@@ -76,25 +75,15 @@ export const Arrow = styled.div`
 `;
 
 export const LeftArrow = styled(Arrow)`
-  margin: 0 0 0 1.5625vw;
-
-  @media (max-width: 768px) {
-    margin: 0 2.73vw 0 0;
-  }
-
-  @media (max-width: 428px) {
-    margin: 0 2.72vw 0 0;
-  }
+  left: 0;
 `;
 
 export const RightArrow = styled(Arrow)`
-  margin: 0 1.5625vw 0 0;
-
-  @media (max-width: 768px) {
-    margin: 0 0 0 2.73vw;
-  }
+  right: 0;
+`;
 
-  @media (max-width: 428px) {
-    margin: 0 0 0 2.72vw;
-  }
+export const CarouselWrapper = styled.div`
+  position: relative;
+  overflow: hidden;
+  border-radius: 19px;
 `;

src/views/MainPage/components/ActivitySection/style.ts

@@ -6,4 +6,13 @@ export const Wrapper = styled.div`
   gap: 146px;
 
   margin-bottom: 300px;
+  padding-top: 68px;
+
+  @media (max-width: 768px) {
+    padding-top: 65px;
+  }
+
+  @media (max-width: 428px) {
+    padding-top: 37.36px;
+  }
 `;

src/views/MainPage/components/BottomLayout/index.tsx

@@ -62,6 +62,7 @@ function BottomLayout() {
         <div id="review" ref={review.ref}>
           <Comment />
         </div>
+        <div style={{ height: '5px' }} />
         <RecentNews ref={news.ref} />
         <RecruitMessage />
       </S.Layout>