Heroineeee · YerinDoi · Mar 12, 2026 · Mar 2, 2026 · Mar 6, 2026 · Mar 6, 2026
diff --git a/src/api/store.ts b/src/api/store.ts
@@ -0,0 +1,8 @@
+// api/store.ts
+import axios from '@/api/axiosInstance';
+
+// 메인화면 가맹점 개수 조회 API
+export const getRegionCount = async () => {
+  const res = await axios.get('/api/v1/store/region-count');
+  return res.data.results.count as number;
+};
diff --git a/src/components/common/RegionUpdateDialog.tsx b/src/components/common/RegionUpdateDialog.tsx
@@ -47,8 +47,8 @@ const RegionUpdateDialog: React.FC<Props> = ({
 
           {/* 텍스트 영역 */}
           <div className="relative pt-[33px] text-center flex flex-col items-center z-[100]">
-            <div className="mx-auto truncate mb-[6px] font-pretendard text-[16px] font-semibold leading-[130%] text-white">
-              현재 서비스 지역은
+            <div className="mx-auto truncate mb-[6px] font-pretendard text-[16px] font-semibold leading-[116%] text-white">
+              많은 분들이 요청해주신
             </div>
 
             <div className="flex justify-center w-[270px] h-[64px] items-center flex-shrink-0">
@@ -61,8 +61,8 @@ const RegionUpdateDialog: React.FC<Props> = ({
                   WebkitTextFillColor: 'transparent',
                 }}
               >
-                <span>서울 인천 부천 수원</span>
-                <span>고양 용인 부산 성남</span>
+                <span>경산 지역 가맹점이</span>
+                <span>업데이트 되었어요!</span>
               </div>
             </div>
 

diff --git a/src/components/home/AllRegionBottomSheet.tsx b/src/components/home/AllRegionBottomSheet.tsx
@@ -0,0 +1,78 @@
+import { useNavigate } from "react-router-dom";
+
+interface RegionBottomSheetProps {
+    onClose: () => void;
+  }
+
+  export default function RegionBottomSheet({
+    onClose,
+  }: RegionBottomSheetProps) {
+    const navigate = useNavigate();
+
+    return (
+      <div className="flex flex-col w-full py-[16px]">
+
+        {/* 헤더 */}
+        <div className="text-center text-body-md-title font-regular pb-[8px]">
+          현재 서비스 중인 지역
+        </div>
+
+        {/* 지역 내용 전체 wrapper */}
+        <div className="flex flex-col pt-[12px] gap-[8px] border-t-2 border-bg-gray">
+
+          {/* 좌우 영역 */}
+          <div className="flex pb-[24px]">
+
+            {/* 왼쪽 */}
+            <div className="flex flex-col px-[24px] gap-[6px] flex-1 text-title-sb-button">
+              <p className="font-semibold py-[10px]">서울특별시</p>
+              <p className="font-semibold py-[10px]">인천광역시</p>
+              <p className="font-semibold py-[10px]">대구광역시</p>
+              <p className="font-semibold py-[10px]">부산광역시</p>
+            </div>
+
+            {/* 오른쪽 */}
+            <div className="flex flex-col px-[24px] gap-[6px] flex-1">
+
+              <div className="flex flex-col py-[8px] gap-[8px]">
+                <p className="font-semibold py-[2px] text-title-sb-button">경기도</p>
+                <div className="flex flex-col gap-[4px] text-[14px] text-body-md-title">
+                  <p className="font-regular">부천시</p>
+                  <p className="font-regular">수원시</p>
+                  <p className="font-regular">성남시</p>
+                  <p className="font-regular">고양시</p>
+                  <p className="font-regular">용인시</p>
+                </div>
+              </div>
+
+              <div className="flex flex-col py-[8px] gap-[8px]">
+                <p className="font-semibold py-[2px] text-title-sb-button">경상북도</p>
+                <div className="flex flex-col text-[14px] text-body-md-title">
+                  <p className="font-regular">경산시</p>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+        </div>
+
+        {/* 하단 버튼 */}
+        <div className="grid grid-cols-2 border-t-[2px] border-bg-gray text-[16px]">
+          <button
+            className="py-[12px] font-bold"
+            onClick={onClose}
+          >
+            취소
+          </button>
+
+          <button 
+            className="py-[12px] font-bold"
+            onClick={() => navigate("/feedback")}
+          >
+            지역 요청하기
+          </button>
+        </div>
+      </div>
+    );
+  }
diff --git a/src/components/home/CarouselBanner.tsx b/src/components/home/CarouselBanner.tsx
@@ -4,20 +4,23 @@ import { Autoplay } from 'swiper/modules';
 import 'swiper/css';
 import { useEffect, useState } from 'react';
 import CongG from '@/assets/svgs/logo/congG.svg';
-import AddIcon from '@/assets/svgs/common/add-icon.svg';
 import CongG3D from '@/assets/svgs/common/3DCongG.svg';
 import { useNavigate } from 'react-router-dom';
+import { getRegionCount } from '@/api/store';
 
 interface CarouselBannerProps {
   onSlideChange: (index: number) => void;
   swiperRef: React.MutableRefObject<any>;
+  onOpenRegionBottomSheet: () => void;
 }
 
 export default function CarouselBanner({
   onSlideChange,
   swiperRef,
+  onOpenRegionBottomSheet,
 }: CarouselBannerProps) {
   const [activeIndex, setActiveIndex] = useState(0);
+  const [regionCount, setRegionCount] = useState<number>(0);
   const navigate = useNavigate();
 
   // ✅ CongG3D 미리 로드 (Safari object 로딩 지연 방지)
@@ -26,6 +29,19 @@ export default function CarouselBanner({
     preload.src = CongG3D;
   }, []);
 
+  // region-count 조회
+  useEffect(() => {
+    const fetchRegionCount = async () => {
+      try {
+        const count = await getRegionCount();
+        setRegionCount(count);
+      } catch (e) {
+        console.error('region count 조회 실패:', e);
+      }
+    };
+    fetchRegionCount();
+  }, []);
+
   const slides = [
     // 첫 번째 슬라이드
     {
@@ -49,19 +65,18 @@ export default function CarouselBanner({
             <span>
               현재는{' '}
               <span className="text-sub-color">
-                서울, 인천 외 일부 지역
+                서울, 인천 외 {regionCount}개 지역
               </span>
               만 제공되며,{' '}
             </span>
             <span>다른 지역은 요청이 많은 순으로 추가될 예정이에요.</span>
           </div>
 
           <button
-            className="px-[16px] w-[129px] h-[28px] bg-main-color text-white rounded-[12px] text-body-md-title font-regular items-center flex gap-[8px]"
-            onClick={() => navigate('/feedback', { state: { returnTo: '/' } })}
+            className="px-[16px] w-[112px] h-[28px] bg-main-color text-white rounded-[12px] text-body-md-title font-regular items-center flex gap-[8px]"
+            onClick={onOpenRegionBottomSheet}
           >
-            <img src={AddIcon} className="w-[12px] h-[12px]" />
-            지역 요청하기
+            전체 지역 보기
           </button>
         </div>
       ),

diff --git a/src/components/home/HeaderToCarouselSection.tsx b/src/components/home/HeaderToCarouselSection.tsx
@@ -8,12 +8,15 @@ import { useGps } from '@/contexts/GpsContext';
 import axiosInstance from '@/api/axiosInstance';
 import { Store } from '@/types/store';
 import { trackSearchStore } from '@/analytics/ga';
+import BottomSheet from '@/components/common/BottomSheet';
+import AllRegionBottomSheet from '@/components/home/AllRegionBottomSheet';
 
 const bgColors = ['#F3F5ED', '#F4F6F8', '#F3F5ED'];
 
 function HeaderToCarouselSection() {
   const [inputValue, setInputValue] = useState('');
   const [activeSlide, setActiveSlide] = useState(0);
+  const [isRegionBottomSheetOpen, setIsRegionBottomSheetOpen] = useState(false);
   const navigate = useNavigate();
   const swiperRef = useRef<any>(null); // Swiper에 대한 ref
 
@@ -119,7 +122,15 @@ function HeaderToCarouselSection() {
         />
       </div>
 
-      <CarouselBanner onSlideChange={setActiveSlide} swiperRef={swiperRef} />
+      <CarouselBanner 
+        onSlideChange={setActiveSlide} 
+        swiperRef={swiperRef} 
+        onOpenRegionBottomSheet={() => setIsRegionBottomSheetOpen(true)} 
+      />
+
+      <BottomSheet isOpen={isRegionBottomSheetOpen} onClose={() => setIsRegionBottomSheetOpen(false)}>
+        <AllRegionBottomSheet onClose={() => setIsRegionBottomSheetOpen(false)} />
+      </BottomSheet>
     </div>
   );
 }