UI 개선 및 신규 기능

src/components/common/RegionUpdateDialog.tsx

@@ -34,7 +34,7 @@ const RegionUpdateDialog: React.FC<Props> = ({
         className="relative bg-white rounded-[12px] overflow-hidden w-[287px] h-[415px]"
         role="dialog"
         aria-modal="true"
-        aria-label="서울 지역 가맹점 업데이트 안내"
+        aria-label="지역 업데이트 안내"
       >
         {/* 상단 배경 */}
         <div className="relative overflow-hidden w-[287px] h-[368px] bg-[#F3F5ED]">
@@ -46,12 +46,12 @@ const RegionUpdateDialog: React.FC<Props> = ({
           />
 
           {/* 텍스트 영역 */}
-          <div className="relative pt-[36px] text-center flex flex-col items-center z-10">
+          <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>
 
-            <div className="flex justify-center w-[182px] h-[64px] items-center flex-shrink-0">
+            <div className="flex justify-center w-[270px] h-[64px] items-center flex-shrink-0">
               <div
                 className="font-pretendard font-bold text-center flex flex-col gap-[6px] text-[24px] leading-[116%]"
                 style={{
@@ -61,23 +61,31 @@ const RegionUpdateDialog: React.FC<Props> = ({
                   WebkitTextFillColor: 'transparent',
                 }}
               >
-                <span>부산 지역 가맹점이</span>
-                <span>업데이트 되었어요!</span>
+                <span>서울 인천 부천 수원</span>
+                <span>고양 용인 부산 성남</span>
               </div>
             </div>
+
+            <div className="font-pretendard text-center mt-[6px] w-[270px] h-[18px] text-[12px] font-regular leading-[150%] tracking-[0.012px] text-white">
+              다른 지역은 추후에 추가될 예정이에요
+            </div>
           </div>
 
           {/* 콩쥐 이미지 */}
-          <div className="absolute bottom-0 justify-center left-1/2 -translate-x-1/2 w-[237px] aspect-[237/263] z-100">
-            <img src={CongG} alt="카드를 든 콩쥐" />
+          <div className="absolute mt-[2px]bottom-0 left-1/2 -translate-x-1/2 w-[226px] z-[50]">
+            <img
+              src={CongG}
+              alt="카드를 든 콩쥐"
+              className="w-full h-auto object-bottom"
+            />
           </div>
 
           {/* 블러 영역 */}
-          <div className="absolute bottom-0 w-full h-[41px] flex-shrink-0 bg-gradient-to-b from-[rgba(243,245,237,0)] to-[#F3F5ED] z-[999]"></div>
+          <div className="absolute bottom-0 w-full h-[41px] flex-shrink-0 bg-gradient-to-b from-[rgba(243,245,237,0)] to-[#F3F5ED] z-[200]"></div>
         </div>
 
         {/* 버튼 영역 */}
-        <div className="left-0 right-0 bottom-0 flex">
+        <div className="absolute left-0 right-0 bottom-0 flex h-[47px]">
           <button
             className="flex-1 h-[47px] border-sub-gray text-[#616161] font-pretendard text-[16px] font-semibold leading-[20px]"
             onClick={onGoHome}

src/components/home/CarouselBanner.tsx

@@ -44,12 +44,12 @@ export default function CarouselBanner({
     // 두 번째 슬라이드
     {
       content: (
-        <div className="pl-[16px] font-semibold text-title-sb-button flex flex-col gap-[12px] justify-center">
-          <div className="text-text-gray flex flex-col leading-[22px] tracking-[-1.28px]">
+        <div className="pl-[16px] font-semibold text-title-sb-button flex flex-col gap-[12px] justify-center align-self-stretch">
+          <div className="text-text-gray flex flex-col leading-[20px]">
             <span>
               현재는{' '}
               <span className="text-sub-color">
-                서울, 인천, 부천, 수원, 고양, 용인, 부산, 성남
+                서울, 인천 외 일부 지역
               </span>
               만 제공되며,{' '}
             </span>

src/components/home/QuickActionButton.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+interface QuickActionButtonProps {
+  icon: string;
+  text: string;
+  onClick?: () => void;
+  href?: string;
+}
+
+const QuickActionButton: React.FC<QuickActionButtonProps> = ({
+  icon,
+  text,
+  onClick,
+  href,
+}) => {
+  const content = (
+    <div className="flex flex-col items-center gap-[5px] cursor-pointer">
+      <div className="w-[48px] h-[48px] bg-[#F3F5ED] rounded-[12px] flex items-center justify-center">
+        <img src={icon} alt={text} />
+      </div>
+      <span className="font-pretendard text-[12px] font-regular leading-[150%] tracking-[0.012px] text-black text-center">
+        {text}
+      </span>
+    </div>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className="inline-block">
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button onClick={onClick} className="inline-block">
+      {content}
+    </button>
+  );
+};
+
+export default QuickActionButton;

src/components/home/QuickActionButtons.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import QuickActionButton from './QuickActionButton';
+import StoreMapIcon from '@/assets/svgs/home/store-map.svg';
+import StoreSearchIcon from '@/assets/svgs/home/store-search.svg';
+import ConvenienceStoreIcon from '@/assets/svgs/home/convenience-store.svg';
+import CommunityIcon from '@/assets/svgs/home/community.svg';
+
+interface QuickActionItem {
+  icon: string;
+  text: string;
+  onClick?: () => void;
+  href?: string;
+}
+
+interface QuickActionButtonsProps {
+  items?: QuickActionItem[];
+}
+
+const QuickActionButtons: React.FC<QuickActionButtonsProps> = ({ items }) => {
+  const navigate = useNavigate();
+
+  const defaultItems: QuickActionItem[] = [
+    {
+      icon: StoreMapIcon,
+      text: '가맹점지도',
+      onClick: () => navigate('/store-map'),
+    },
+    {
+      icon: StoreSearchIcon,
+      text: '가맹점찾기',
+      onClick: () => navigate('/store-search'),
+    },
+    {
+      icon: ConvenienceStoreIcon,
+      text: '편의점구매',
+      onClick: () => navigate('/convenience'),
+    },
+    {
+      icon: CommunityIcon,
+      text: '커뮤니티',
+      onClick: () => navigate('/community'),
+    },
+  ];
+
+  const buttons = items || defaultItems;
+
+  return (
+    <div className="flex pt-[28px] pb-[16px] justify-center items-center gap-[32px] self-stretch">
+      {buttons.map((item, index) => (
+        <QuickActionButton
+          key={index}
+          icon={item.icon}
+          text={item.text}
+          onClick={item.onClick}
+          href={item.href}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default QuickActionButtons;

src/pages/home/HomePage.tsx

@@ -3,6 +3,7 @@ import CategorySection from '@/components/home/CategorySection';
 import Top8StoreSection from '@/components/home/Top8StoreSection';
 import ConvenienceStoreSection from '@/components/home/ConvenienceStoreSection';
 import CommunitySection from '@/components/home/CommunitySection';
+import QuickActionButtons from '@/components/home/QuickActionButtons';
 import { useEffect, useState } from 'react';
 import RegionUpdateDialog from '@/components/common/RegionUpdateDialog';
 
@@ -18,6 +19,7 @@ function HomePage() {
     <>
       <div className="flex flex-col font-pretendard pb-[61px]">
         <HeaderToCarouselSection />
+        <QuickActionButtons />
 
         <div className="flex flex-col gap-[16px]">
           <CategorySection />