[FIX] 3차 스프린트 QA-2

src/app/homePage.css.ts

@@ -35,10 +35,9 @@ export const modalOverlay = style({
   width: '100%',
   height: 'calc(100% + 1.2rem)',
   marginTop: '-1.2rem',
-  backgroundColor: theme.COLORS.black60,
   justifyContent: 'center',
   alignItems: 'center',
-  zIndex: 1,
+  zIndex: 100,
 });
 
 export const titleWithIconStyle = style({

src/app/page.tsx

@@ -1,16 +1,16 @@
 import HomeClient from '@app/HomeClient';
 import RecommendTempleClient from '@app/RecommendTempleClient';
+import Icon from '@assets/svgs';
 import MainBanner from '@components/banner/MainBanner';
 import DetailTitle from '@components/detailTitle/DetailTitle';
 import FilterTypeBoxClient from '@components/filter/filterTypeBox/FilterTypeBoxClient';
 import Footer from '@components/footer/Footer';
 import Header from '@components/header/Header';
 import TestBanner from '@components/test/testBanner/TestBanner';
 import { cookies } from 'next/headers';
+import Link from 'next/link';
 
 import * as styles from './homePage.css';
-import Link from 'next/link';
-import Icon from '@assets/svgs';
 
 const HomePage = async () => {
   const cookieStore = await cookies();

src/app/search/page.tsx

@@ -8,7 +8,7 @@ import leftPaddingStyle from './searchPage.css';
 const SearchPage = () => {
   return (
     <>
-      <SearchHeader prevPath={'/'} />
+      <SearchHeader prevPath={'/'} inputAutoFocus={true} />
       <div className={leftPaddingStyle}>
         <RecentBtnBox />
       </div>

src/app/searchResult/searchResultPage.css.ts

@@ -17,7 +17,7 @@ export const headerContainer = style({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
-  paddingTop: '1rem',
+  paddingTop: '1.2rem',
   marginBottom: '1rem',
   zIndex: 3,
 });

src/components/banner/MainBanner.tsx

@@ -1,131 +1,39 @@
 'use client';
 
+import useInfiniteCarousel from '@hooks/useInfiniteCarousel';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React from 'react';
 
-import BANNER_DATA, { BannerItem } from './bannerData';
+import BANNER_DATA from './bannerData';
 import * as styles from './mainBanner.css';
 
-type SlideItem = BannerItem & { uniqueKey: string };
-
 const MainBanner = () => {
   const router = useRouter();
 
-  const slides = [
-    { ...BANNER_DATA[BANNER_DATA.length - 1], uniqueKey: 'clone-last' },
-    ...BANNER_DATA.map((item) => ({ ...item, uniqueKey: `real-${item.id}` })),
-    { ...BANNER_DATA[0], uniqueKey: 'clone-first' },
-  ];
-
-  const totalOriginalSlides = BANNER_DATA.length;
-
-  const [currentIndex, setCurrentIndex] = useState(1);
-  const [isAnimate, setIsAnimate] = useState(true);
-  const [isDragging, setIsDragging] = useState(false);
-  const [startX, setStartX] = useState(0);
-  const [currentX, setCurrentX] = useState(0);
-
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-
-  const moveNext = useCallback(() => {
-    setIsAnimate(true);
-    setCurrentIndex((prev) => prev + 1);
-  }, []);
-
-  const movePrev = useCallback(() => {
-    setIsAnimate(true);
-    setCurrentIndex((prev) => prev - 1);
-  }, []);
-
-  const stopAutoSlide = useCallback(() => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-    }
-  }, []);
-
-  const startAutoSlide = useCallback(() => {
-    stopAutoSlide();
-    timerRef.current = setInterval(() => {
-      moveNext();
-    }, 4000);
-  }, [moveNext, stopAutoSlide]);
-
-  useEffect(() => {
-    startAutoSlide();
-    return () => stopAutoSlide();
-  }, [startAutoSlide, stopAutoSlide, currentIndex]);
-
-  const handleTransitionEnd = () => {
-    if (currentIndex === 0) {
-      setIsAnimate(false);
-      setCurrentIndex(totalOriginalSlides);
-    } else if (currentIndex === slides.length - 1) {
-      setIsAnimate(false);
-      setCurrentIndex(1);
-    }
-  };
-
-  const handleMouseDown = (e: React.MouseEvent) => {
-    stopAutoSlide();
-    setIsDragging(true);
-    setStartX(e.clientX);
-    setCurrentX(e.clientX);
-    setIsAnimate(false);
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isDragging) return;
-    setCurrentX(e.clientX);
-  };
-
-  const handleMouseUp = () => {
-    if (!isDragging) return;
-    setIsDragging(false);
-    startAutoSlide();
-
-    const diff = currentX - startX;
-    const threshold = 50;
-
-    if (diff < -threshold) {
-      moveNext();
-    } else if (diff > threshold) {
-      movePrev();
-    } else {
-      setIsAnimate(true);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (isDragging) {
-      setIsDragging(false);
-      setIsAnimate(true);
-      startAutoSlide();
-    }
-  };
-
-  const handleBannerClick = (banner: SlideItem) => {
-    if (Math.abs(currentX - startX) > 5) return;
+  const {
+    slides,
+    currentIndex,
+    isAnimate,
+    dragOffset,
+    displayIndex,
+    totalOriginalSlides,
+    isSwiped,
+    handlers,
+  } = useInfiniteCarousel({
+    data: BANNER_DATA,
+    autoPlayInterval: 4000,
+  });
+
+  const handleBannerClick = (banner: (typeof BANNER_DATA)[0]) => {
+    if (isSwiped) return;
 
     if (banner.type === 'internal') {
       router.push(banner.link);
     } else {
       window.open(banner.link, '_blank');
     }
   };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, banner: SlideItem) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      handleBannerClick(banner);
-    }
-  };
-
-  let displayIndex = currentIndex;
-  if (currentIndex === 0) displayIndex = totalOriginalSlides;
-  else if (currentIndex === slides.length - 1) displayIndex = 1;
-
-  const dragOffset = isDragging ? currentX - startX : 0;
-
   return (
     <div className={styles.container}>
       {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
@@ -135,19 +43,15 @@ const MainBanner = () => {
           transform: `translateX(calc(-${currentIndex * 100}% + ${dragOffset}px))`,
           transition: isAnimate ? 'transform 0.5s ease-in-out' : 'none',
         }}
-        onTransitionEnd={handleTransitionEnd}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseLeave}>
+        {...handlers}>
         {slides.map((banner) => (
           <div
             key={banner.uniqueKey}
             className={styles.slideItem}
             onClick={() => handleBannerClick(banner)}
             role="button"
             tabIndex={0}
-            onKeyDown={(e) => handleKeyDown(e, banner)}
+            onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && handleBannerClick(banner)}
             aria-label={`${banner.alt} 배너로 이동`}
             onDragStart={(e) => e.preventDefault()}>
             <Image

src/components/banner/mainBanner.css.ts

@@ -7,6 +7,7 @@ export const container = style({
   overflow: 'hidden',
   aspectRatio: '375 / 347',
   marginBottom: '40px',
+  touchAction: 'pan-y',
 });
 
 export const slideList = style({

src/components/card/popularCard/PopularCard.tsx

@@ -1,10 +1,9 @@
 'use client';
 
 import Icon from '@assets/svgs';
-import RankBtn from '@components/card/popularCard/RankBtn';
 import Image from 'next/image';
-
 import * as styles from './popularCard.css';
+import RankBtn from '@components/card/popularCard/RankBtn';
 
 interface PopularCardProps {
   ranking: number;
@@ -15,8 +14,8 @@ interface PopularCardProps {
   isLiked: boolean;
   onLikeToggle: (templestayId: number) => void;
   templestayId: number;
-  link: string;
   onClick: () => void;
+  priority?: boolean;
 }
 
 const PopularCard = ({
@@ -28,8 +27,8 @@ const PopularCard = ({
   isLiked,
   onLikeToggle,
   templestayId,
-  link,
   onClick,
+  priority = false,
 }: PopularCardProps) => {
   const handleLikeClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -39,22 +38,26 @@ const PopularCard = ({
   };
 
   return (
-    <a
-      href={link}
-      className={styles.cardWrapper}
-      draggable={false}
-      onDragStart={(e) => e.preventDefault()}
-      onClick={onClick}>
-      <div>
-        <div className={styles.imgBox}>
+    <div
+      className={styles.slideItem}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => e.key === 'Enter' || (e.key === ' ' && onClick())}
+      aria-label={`${templestayName} 로 이동`}
+      onDragStart={(e) => e.preventDefault()}>
+      <div className={styles.slideContent}>
+        <div className={styles.imageWrapper}>
           <Image
             src={templeImg}
             alt={`${templestayName} 대표 이미지`}
             fill
-            style={{ objectFit: 'cover' }}
+            style={{ objectFit: 'cover', objectPosition: 'center' }}
+            priority={priority}
           />
           <RankBtn ranking={ranking} />
         </div>
+
         <div className={styles.bottomWrapper}>
           <div className={styles.bottomContainer}>
             <h3 className={styles.templestayName}>{templestayName}</h3>
@@ -64,12 +67,13 @@ const PopularCard = ({
               <span>{templeName}</span>
             </div>
           </div>
+
           <button className={styles.likeBtn} onClick={handleLikeClick}>
             {isLiked ? <Icon.IcnFlowerPink /> : <Icon.IcnFlowerGray />}
           </button>
         </div>
       </div>
-    </a>
+    </div>
   );
 };
 

src/components/card/popularCard/popularCard.css.ts

@@ -1,27 +1,43 @@
 import theme from '@styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
-export const cardWrapper = style({
-  width: '33.5rem',
-  cursor: 'pointer',
+export const container = style({
+  width: '100%',
+  overflow: 'hidden',
+  touchAction: 'pan-y',
 });
 
-export const cardContainer = style({
+export const slideList = style({
   display: 'flex',
-  flexDirection: 'column',
-  gap: '0.8rem',
+  width: '33.5rem',
+  gap: '2rem',
 });
 
-export const templeInfoBox = style({
-  display: 'flex',
-  flexDirection: 'column',
+export const slideItem = style({
+  minWidth: '100%',
+  height: '100%',
+  cursor: 'pointer',
+});
+
+export const imageWrapper = style({
+  position: 'relative',
+  width: '100%',
+  height: '137px',
+  overflow: 'hidden',
+  borderRadius: 8,
 });
 
 export const templestayName = style({
   ...theme.FONTS.h3Sb18,
   textAlign: 'left',
 });
 
+export const slideContent = style({
+  display: 'flex',
+
+  flexDirection: 'column',
+});
+
 export const bottomBox = style({
   display: 'flex',
   color: theme.COLORS.gray8,
@@ -34,17 +50,6 @@ export const likeBtn = style({
   padding: '1rem',
 });
 
-export const imgBox = style({
-  height: '13.7rem',
-  borderRadius: 8,
-  display: 'flex',
-  justifyContent: 'flex-end',
-  color: theme.COLORS.white,
-  overflow: 'hidden',
-  backgroundPosition: 'center',
-  position: 'relative',
-});
-
 export const bottomContainer = style({
   display: 'flex',
   flexDirection: 'column',

src/components/card/popularCard/rankBtn.css.ts

@@ -10,7 +10,8 @@ const rankBox = style({
   borderRadius: '0 0 8px 8px',
   backgroundColor: theme.COLORS.black60,
   ...theme.FONTS.c2R14,
-  marginRight: '2rem',
+  color: theme.COLORS.white,
+  right: '2rem',
   position: 'absolute',
   zIndex: 1,
 });