git-goods · sumi-0011 · Dec 22, 2025 · Dec 18, 2025 · Dec 22, 2025 · Dec 22, 2025
@@ -11,7 +11,7 @@
     }
   ],
   "typescript.tsdk": "node_modules/typescript/lib",
-  "cSpell.words": ["hyesungoh"],
+  "cSpell.words": ["embla", "hyesungoh"],
 
   "i18n-ally.localesPaths": ["apps/web/messages"], // 다국어 파일이 위치한 경로를 설정
   "i18n-ally.keystyle": "nested", // 번역 키의 스타일을 설정 (nested: 중첩)

@@ -39,6 +39,8 @@
     "@tanstack/react-query": "*",
     "@vercel/analytics": "^1.5.0",
     "axios": "^1.6.8",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "framer-motion": "^11.1.7",
     "google-auth-library": "^9.11.0",
     "google-spreadsheet": "^4.1.2",

@@ -6,7 +6,8 @@ export const LABORATORY_FEEDBACK_QUERY_KEYS = {
   all: ['laboratory-upvote'] as const,
   byLab: (laboratoryId: string) => ['laboratory-upvote', 'lab', laboratoryId] as const,
   count: (laboratoryId: string) => ['laboratory-upvote', 'count', laboratoryId] as const,
-  userCheck: (userId: string, laboratoryId: string) => ['laboratory-upvote', 'user', userId, 'lab', laboratoryId] as const,
+  userCheck: (userId: string, laboratoryId: string) =>
+    ['laboratory-upvote', 'user', userId, 'lab', laboratoryId] as const,
 };
 
 /**

@@ -11,13 +11,12 @@ import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-quer
 import { AxiosError } from 'axios';
 import { toast } from 'sonner';
 
+import EmblaCarousel from '@/components/EmblaCarousel';
 import { trackEvent } from '@/lib/analytics';
 import { useClientUser } from '@/utils/clientAuth';
 import { getBackgroundImage } from '@/utils/image';
 import { addNumberComma } from '@/utils/number';
 
-import BackgroundSlider from './BackgroundSlider/BackgroundSlider';
-
 interface BackgroundSectionProps {
   possibleBgTypes: string[];
 }
@@ -79,7 +78,7 @@ export const BackgroundSection = wrap
     return (
       <div className={sectionCss}>
         <h2 className={h2Css}>Background</h2>
-        <BackgroundSlider>
+        <EmblaCarousel>
           {backgroundList?.map((item) => (
             <BackgroundItem
               key={item.type}
@@ -89,7 +88,7 @@ export const BackgroundSection = wrap
               isLoggedIn={isLoggedIn}
             />
           ))}
-        </BackgroundSlider>
+        </EmblaCarousel>
       </div>
     );
   });

@@ -1,7 +1,5 @@
 import { css } from '_panda/css';
 
-import { FeedbackUpvote } from '@/app/[locale]/laboratory/_component/FeedbackUpvote';
-
 export default async function LaboratoryLayout({ children }: { children: React.ReactNode }) {
   return <div className={containerStyle}>{children}</div>;
 }

@@ -1,4 +1,5 @@
 import { LaboratoryLayout } from '../_component/LaboratoryLayout';
+
 import PetMergeUI from './client';
 
 export default function MultiMergePage() {

@@ -1,7 +1,6 @@
 'use client';
 
 import { memo, useMemo, useState } from 'react';
-import { LaboratoryLayout } from '../_component/LaboratoryLayout';
 import { useTranslations } from 'next-intl';
 import { css, cx } from '_panda/css';
 import { Flex } from '_panda/jsx';
@@ -17,6 +16,8 @@ import { customScrollStyle } from '@/styles/scrollStyle';
 import { useClientUser } from '@/utils/clientAuth';
 import { getPersonaImage } from '@/utils/image';
 
+import { LaboratoryLayout } from '../_component/LaboratoryLayout';
+
 export default function PropertyPetSellPage() {
   return (
     <LaboratoryLayout

@@ -12,14 +12,13 @@ import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { toast } from 'sonner';
 
+import EmblaCarousel from '@/components/EmblaCarousel';
 import { trackEvent } from '@/lib/analytics';
 import { getQueryClient } from '@/lib/react-query/queryClient';
 import { useClientUser } from '@/utils/clientAuth';
 import { getBackgroundImage } from '@/utils/image';
 import { addNumberComma } from '@/utils/number';
 
-import BackgroundSlider from '../../event/(common)/BackgroundSlider/BackgroundSlider';
-
 export const BackgroundSection = wrap
   .ErrorBoundary({
     fallback: () => <></>,
@@ -71,7 +70,7 @@ export const BackgroundSection = wrap
         <h2 ref={backgroundRef} className={h2Css}>
           Background
         </h2>
-        <BackgroundSlider>
+        <EmblaCarousel>
           {backgroundList?.map((item) => (
             <BackgroundItem
               key={item.type}
@@ -80,7 +79,7 @@ export const BackgroundSection = wrap
               isPurchased={item.isPurchased ?? false}
             />
           ))}
-        </BackgroundSlider>
+        </EmblaCarousel>
       </div>
     );
   });
@@ -176,7 +175,6 @@ const cardCss = css({
 const cardImageCss = css({
   width: '100%',
   aspectRatio: '2 / 1',
-  bg: 'white',
   position: 'relative',
 });
 

@@ -1,2 +1,2 @@
-export * from './useDragSelect';
 export * from './DragSelectContainer';
+export * from './useDragSelect';
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 export interface DragSelectItem {
   id: string;

@@ -0,0 +1,74 @@
+import Image from 'next/image';
+import { css, cx } from '_panda/css';
+
+export function ArrowButton({
+  onClick,
+  direction,
+  disabled,
+}: {
+  onClick: () => void;
+  direction: 'prev' | 'next';
+  disabled: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cx(
+        direction === 'prev' ? prevArrowStyle : nextArrowStyle,
+        css({
+          rotate: direction === 'prev' ? '180deg' : '0deg',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          width: disabled ? '36px' : '40px',
+          height: disabled ? '36px' : '40px',
+          _mobile: {
+            width: disabled ? '24px' : '26px',
+            height: disabled ? '24px' : '26px',
+          },
+        }),
+      )}
+    >
+      {disabled ? (
+        <Image src="/icon/circle-arrow-disable.svg" alt="arrow" width={36} height={36} />
+      ) : (
+        <Image src="/icon/circle-arrow.svg" alt="arrow" width={40} height={40} />
+      )}
+    </button>
+  );
+}
+
+const arrowStyle = css({
+  position: 'absolute',
+  top: '0',
+  bottom: '64px',
+  margin: 'auto',
+  zIndex: 'floating',
+
+  '& img': {
+    width: '100%',
+    height: '100%',
+  },
+
+  _mobile: {
+    bottom: '72px',
+  },
+});
+
+const prevArrowStyle = cx(
+  arrowStyle,
+  css({
+    left: '-62px',
+    _mobile: {
+      left: '-26px',
+    },
+  }),
+);
+
+const nextArrowStyle = cx(
+  arrowStyle,
+  css({
+    right: '-62px',
+    _mobile: {
+      right: '-26px',
+    },
+  }),
+);
@@ -0,0 +1,122 @@
+'use client';
+
+import { Children } from 'react';
+import { css, cx } from '_panda/css';
+import useIsMobile from '@gitanimals/react/src/hooks/useIsMobile/useIsMobile';
+import useEmblaCarousel from 'embla-carousel-react';
+
+import { NextButton, PrevButton, usePrevNextButtons } from './EmblaCarouselArrowButtons';
+import { DotButton, useDotButton } from './EmblaCarouselDotButton';
+
+interface EmblaCarouselProps {
+  children: React.ReactNode;
+}
+
+function EmblaCarousel({ children }: EmblaCarouselProps) {
+  const isMobile = useIsMobile();
+  const slidesPerView = isMobile ? 1 : 2;
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    align: 'start',
+    slidesToScroll: 1,
+    containScroll: 'trimSnaps',
+    skipSnaps: false,
+  });
+
+  const childrenArray = Children.toArray(children);
+  const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi);
+
+  const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi);
+
+  return (
+    <div className={containerStyle}>
+      <div className={css({ display: 'flex', mb: '8px', justifyContent: 'space-between', alignItems: 'center' })}>
+        <div className={arrowContainerStyle}>
+          <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+          <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+        </div>
+        <div
+          className={css({
+            display: 'flex',
+            gap: 1,
+          })}
+        >
+          {scrollSnaps.map((_, index) => (
+            <DotButton
+              key={index}
+              onClick={() => onDotButtonClick(index)}
+              className={cx(index === selectedIndex && 'selected')}
+            />
+          ))}
+        </div>
+      </div>
+      <div className={sliderContainerStyle}>
+        <div className={emblaViewportStyle} ref={emblaRef}>
+          <div className={emblaContainerStyle}>
+            {childrenArray.map((child, idx) => (
+              <div className={emblaSlideStyle(slidesPerView)} key={idx}>
+                {child}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+const arrowContainerStyle = css({
+  display: 'flex',
+  gap: '10px',
+});
+
+const containerStyle = css({
+  width: '100%',
+  maxWidth: '1200px',
+  margin: '0 auto',
+  padding: '0 60px',
+  position: 'relative',
+
+  _mobile: {
+    padding: '0 35px',
+  },
+});
+
+const sliderContainerStyle = css({
+  position: 'relative',
+  width: '100%',
+
+  _mobile: {
+    marginTop: '0px',
+  },
+});
+
+const emblaViewportStyle = css({
+  overflow: 'hidden',
+  width: '100%',
+});
+
+const emblaContainerStyle = css({
+  display: 'flex',
+  gap: '20px',
+});
+
+const emblaSlideStyle = (slidesPerView: number) =>
+  css({
+    flex: slidesPerView === 1 ? '0 0 100%' : '0 0 calc(50% - 10px)',
+    minWidth: 0,
+    padding: '10px',
+    textAlign: 'center',
+
+    '& img': {
+      width: '100%',
+      height: 'auto',
+      borderRadius: '8px',
+    },
+
+    '& p': {
+      marginTop: '10px',
+      fontSize: '16px',
+    },
+  });
+
+export default EmblaCarousel;