depromeet · thwjddlqslek · Apr 17, 2025 · Apr 17, 2025 · Apr 17, 2025 · Apr 17, 2025
@@ -23,6 +23,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^5.0.0",
+    "swiper": "^11.2.6",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

@@ -0,0 +1,96 @@
+export const NoVoteIcon = () => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask id="path-2-inside-1_4956_21575" fill="white">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.8126 32.6733C11.8053 32.6045 11.7469 32.5518 11.6776 32.5518C9.00958 32.5518 6.84668 30.3889 6.84668 27.7208C6.84668 26.7592 7.12764 25.8632 7.61194 25.1104C8.01302 24.487 8.0017 23.6074 7.58457 22.9947C7.05786 22.2209 6.75 21.2862 6.75 20.2796C6.75 17.6115 8.9129 15.4486 11.581 15.4486C11.6928 15.4486 11.7842 15.3568 11.7833 15.245C11.7833 15.2319 11.7832 15.2188 11.7832 15.2056C11.7832 12.347 14.1006 10.0296 16.9592 10.0296C17.3158 10.0296 17.664 10.0657 18.0003 10.1343C18.8115 10.3 19.7598 9.86177 20.1776 9.147C21.0154 7.71322 22.571 6.75 24.3515 6.75C26.132 6.75 27.6875 7.7132 28.5254 9.14695C28.9432 9.86194 29.8921 10.3003 30.7035 10.1345C31.0401 10.0657 31.3885 10.0296 31.7454 10.0296C34.604 10.0296 36.9214 12.347 36.9214 15.2056C36.9214 15.3627 37.0354 15.4983 37.19 15.5263C39.4439 15.9352 41.1531 17.9078 41.1531 20.2796C41.1531 21.2412 40.8722 22.1372 40.3879 22.8899C39.9868 23.5133 39.9981 24.3929 40.4153 25.0057C40.942 25.7795 41.2498 26.7142 41.2498 27.7208C41.2498 29.8821 39.8306 31.7119 37.8732 32.329C37.327 32.5012 36.8873 32.9487 36.7347 33.5007C36.1298 35.688 34.1251 37.294 31.7454 37.294C31.4964 37.294 31.2516 37.2765 31.012 37.2425C30.1328 37.1178 29.0971 37.6927 28.7152 38.4944C27.9389 40.1239 26.2767 41.25 24.3515 41.25C22.4262 41.25 20.7639 40.1237 19.9876 38.4941C19.6059 37.6927 18.5709 37.118 17.6919 37.2426C17.4526 37.2765 17.208 37.294 16.9592 37.294C14.2882 37.294 12.0897 35.2708 11.8126 32.6733Z"
+        />
+      </mask>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.8126 32.6733C11.8053 32.6045 11.7469 32.5518 11.6776 32.5518C9.00958 32.5518 6.84668 30.3889 6.84668 27.7208C6.84668 26.7592 7.12764 25.8632 7.61194 25.1104C8.01302 24.487 8.0017 23.6074 7.58457 22.9947C7.05786 22.2209 6.75 21.2862 6.75 20.2796C6.75 17.6115 8.9129 15.4486 11.581 15.4486C11.6928 15.4486 11.7842 15.3568 11.7833 15.245C11.7833 15.2319 11.7832 15.2188 11.7832 15.2056C11.7832 12.347 14.1006 10.0296 16.9592 10.0296C17.3158 10.0296 17.664 10.0657 18.0003 10.1343C18.8115 10.3 19.7598 9.86177 20.1776 9.147C21.0154 7.71322 22.571 6.75 24.3515 6.75C26.132 6.75 27.6875 7.7132 28.5254 9.14695C28.9432 9.86194 29.8921 10.3003 30.7035 10.1345C31.0401 10.0657 31.3885 10.0296 31.7454 10.0296C34.604 10.0296 36.9214 12.347 36.9214 15.2056C36.9214 15.3627 37.0354 15.4983 37.19 15.5263C39.4439 15.9352 41.1531 17.9078 41.1531 20.2796C41.1531 21.2412 40.8722 22.1372 40.3879 22.8899C39.9868 23.5133 39.9981 24.3929 40.4153 25.0057C40.942 25.7795 41.2498 26.7142 41.2498 27.7208C41.2498 29.8821 39.8306 31.7119 37.8732 32.329C37.327 32.5012 36.8873 32.9487 36.7347 33.5007C36.1298 35.688 34.1251 37.294 31.7454 37.294C31.4964 37.294 31.2516 37.2765 31.012 37.2425C30.1328 37.1178 29.0971 37.6927 28.7152 38.4944C27.9389 40.1239 26.2767 41.25 24.3515 41.25C22.4262 41.25 20.7639 40.1237 19.9876 38.4941C19.6059 37.6927 18.5709 37.118 17.6919 37.2426C17.4526 37.2765 17.208 37.294 16.9592 37.294C14.2882 37.294 12.0897 35.2708 11.8126 32.6733Z"
+        fill="#FBFBFB"
+      />
+      <path
+        d="M37.8732 32.329L37.4221 30.8984L37.8732 32.329ZM36.7347 33.5007L38.1804 33.9005L36.7347 33.5007ZM40.3879 22.8899L39.1264 22.0783L40.3879 22.8899ZM40.4153 25.0057L41.6552 24.1617L40.4153 25.0057ZM31.012 37.2425L31.2227 35.7573L31.012 37.2425ZM28.7152 38.4944L27.361 37.8492L28.7152 38.4944ZM20.1776 9.147L21.4726 9.90383L20.1776 9.147ZM37.19 15.5263L36.9223 17.0023L37.19 15.5263ZM7.61194 25.1104L8.87341 25.922L7.61194 25.1104ZM7.58457 22.9947L6.34459 23.8387L7.58457 22.9947ZM17.6919 37.2426L17.9024 38.7277L17.6919 37.2426ZM28.5254 9.14695L27.2303 9.9038L28.5254 9.14695ZM30.7035 10.1345L30.4032 8.66487L30.7035 10.1345ZM11.7833 15.245L10.2834 15.2562L11.7833 15.245ZM11.8126 32.6733L10.3211 32.8324L11.8126 32.6733ZM5.34668 27.7208C5.34668 31.2173 8.18115 34.0518 11.6776 34.0518V31.0518C9.838 31.0518 8.34668 29.5604 8.34668 27.7208H5.34668ZM6.35047 24.2988C5.71511 25.2864 5.34668 26.4629 5.34668 27.7208H8.34668C8.34668 27.0555 8.54016 26.44 8.87341 25.922L6.35047 24.2988ZM5.25 20.2796C5.25 21.5967 5.65383 22.8239 6.34459 23.8387L8.82456 22.1506C8.4619 21.6178 8.25 20.9757 8.25 20.2796H5.25ZM11.581 13.9486C8.08447 13.9486 5.25 16.7831 5.25 20.2796H8.25C8.25 18.4399 9.74132 16.9486 11.581 16.9486V13.9486ZM10.2832 15.2056C10.2832 15.2225 10.2833 15.2393 10.2834 15.2562L13.2833 15.2338C13.2832 15.2244 13.2832 15.215 13.2832 15.2056H10.2832ZM16.9592 8.5296C13.2722 8.5296 10.2832 11.5186 10.2832 15.2056H13.2832C13.2832 13.1754 14.929 11.5296 16.9592 11.5296V8.5296ZM18.3004 8.66467C17.8659 8.57594 17.4172 8.5296 16.9592 8.5296V11.5296C17.2145 11.5296 17.4621 11.5554 17.7002 11.604L18.3004 8.66467ZM24.3515 5.25C22.0163 5.25 19.9783 6.51512 18.8825 8.39017L21.4726 9.90383C22.0526 8.91132 23.1257 8.25 24.3515 8.25V5.25ZM29.8204 8.3901C28.7246 6.51509 26.6866 5.25 24.3515 5.25V8.25C25.5773 8.25 26.6503 8.9113 27.2303 9.9038L29.8204 8.3901ZM31.7454 8.5296C31.287 8.5296 30.838 8.57601 30.4032 8.66487L31.0039 11.6041C31.2421 11.5554 31.49 11.5296 31.7454 11.5296V8.5296ZM38.4214 15.2056C38.4214 11.5186 35.4324 8.5296 31.7454 8.5296V11.5296C33.7756 11.5296 35.4214 13.1754 35.4214 15.2056H38.4214ZM42.6531 20.2796C42.6531 17.1697 40.4124 14.5864 37.4577 14.0504L36.9223 17.0023C38.4754 17.284 39.6531 18.6458 39.6531 20.2796H42.6531ZM41.6494 23.7015C42.2847 22.714 42.6531 21.5375 42.6531 20.2796H39.6531C39.6531 20.9448 39.4597 21.5604 39.1264 22.0783L41.6494 23.7015ZM42.7498 27.7208C42.7498 26.4037 42.346 25.1764 41.6552 24.1617L39.1753 25.8498C39.5379 26.3826 39.7498 27.0247 39.7498 27.7208H42.7498ZM38.3242 33.7596C40.888 32.9513 42.7498 30.5554 42.7498 27.7208H39.7498C39.7498 29.2087 38.7731 30.4725 37.4221 30.8984L38.3242 33.7596ZM31.7454 38.794C34.8169 38.794 37.4004 36.721 38.1804 33.9005L35.2889 33.1009C34.8592 34.655 33.4333 35.794 31.7454 35.794L31.7454 38.794ZM30.8014 38.7276C31.1105 38.7715 31.4257 38.794 31.7454 38.794L31.7454 35.794C31.5671 35.794 31.3927 35.7814 31.2227 35.7573L30.8014 38.7276ZM24.3515 42.75C26.8767 42.75 29.0536 41.2715 30.0694 39.1395L27.361 37.8492C26.8241 38.9762 25.6767 39.75 24.3515 39.75V42.75ZM18.6334 39.1392C19.6491 41.2713 21.8261 42.75 24.3515 42.75V39.75C23.0262 39.75 21.8787 38.9761 21.3418 37.849L18.6334 39.1392ZM16.9592 38.794C17.2786 38.794 17.5935 38.7715 17.9024 38.7277L17.4815 35.7574C17.3116 35.7815 17.1373 35.794 16.9592 35.794V38.794ZM10.3211 32.8324C10.6786 36.1843 13.5132 38.794 16.9592 38.794V35.794C15.0632 35.794 13.5008 34.3574 13.3042 32.5142L10.3211 32.8324ZM37.4221 30.8984C36.4021 31.2201 35.5801 32.0481 35.2889 33.1009L38.1804 33.9005C38.1945 33.8494 38.2519 33.7824 38.3242 33.7596L37.4221 30.8984ZM39.1264 22.0783C38.3997 23.2078 38.4193 24.7393 39.1753 25.8498L41.6552 24.1617C41.5769 24.0466 41.5739 23.8189 41.6494 23.7015L39.1264 22.0783ZM31.2227 35.7573C30.3985 35.6404 29.5945 35.8557 28.9561 36.2057C28.3172 36.5559 27.7117 37.1133 27.361 37.8492L30.0694 39.1395C30.1007 39.0738 30.204 38.9428 30.3982 38.8364C30.5929 38.7296 30.7463 38.7198 30.8014 38.7276L31.2227 35.7573ZM17.7002 11.604C19.1592 11.9019 20.7403 11.157 21.4726 9.90383L18.8825 8.39017C18.7794 8.56655 18.4637 8.69801 18.3004 8.66467L17.7002 11.604ZM35.4214 15.2056C35.4214 16.0934 36.0596 16.8458 36.9223 17.0023L37.4577 14.0504C38.0112 14.1508 38.4214 14.632 38.4214 15.2056H35.4214ZM8.87341 25.922C9.6001 24.7925 9.58048 23.2611 8.82456 22.1506L6.34459 23.8387C6.42293 23.9538 6.42595 24.1815 6.35047 24.2988L8.87341 25.922ZM21.3418 37.849C20.9913 37.1133 20.3861 36.5561 19.7474 36.2058C19.1091 35.8559 18.3054 35.6407 17.4815 35.7574L17.9024 38.7277C17.9574 38.7199 18.1106 38.7298 18.3051 38.8364C18.499 38.9427 18.6021 39.0735 18.6334 39.1392L21.3418 37.849ZM27.2303 9.9038C27.9628 11.1572 29.5445 11.9023 31.0039 11.6041L30.4032 8.66487C30.2397 8.69827 29.9236 8.56666 29.8204 8.3901L27.2303 9.9038ZM11.581 16.9486C12.5229 16.9486 13.2904 16.1811 13.2833 15.2338L10.2834 15.2562C10.278 14.5325 10.8627 13.9486 11.581 13.9486V16.9486ZM11.6776 34.0518C10.9772 34.0518 10.3948 33.5232 10.3211 32.8324L13.3042 32.5142C13.2158 31.6857 12.5166 31.0518 11.6776 31.0518V34.0518Z"
+        fill="#DBDBDB"
+        mask="url(#path-2-inside-1_4956_21575)"
+      />
+      <mask
+        id="mask0_4956_21575"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="6"
+        y="6"
+        width="36"
+        height="36"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.8126 32.6733C11.8053 32.6045 11.7469 32.5518 11.6776 32.5518C9.00958 32.5518 6.84668 30.3889 6.84668 27.7208C6.84668 26.7592 7.12764 25.8632 7.61194 25.1104C8.01302 24.487 8.0017 23.6074 7.58457 22.9947C7.05786 22.2209 6.75 21.2862 6.75 20.2796C6.75 17.6115 8.9129 15.4486 11.581 15.4486C11.6928 15.4486 11.7842 15.3568 11.7833 15.245C11.7833 15.2319 11.7832 15.2188 11.7832 15.2056C11.7832 12.347 14.1006 10.0296 16.9592 10.0296C17.3158 10.0296 17.664 10.0657 18.0003 10.1343C18.8115 10.3 19.7598 9.86177 20.1776 9.147C21.0154 7.71322 22.571 6.75 24.3515 6.75C26.132 6.75 27.6875 7.7132 28.5254 9.14695C28.9432 9.86194 29.8921 10.3003 30.7035 10.1345C31.0401 10.0657 31.3885 10.0296 31.7454 10.0296C34.604 10.0296 36.9214 12.347 36.9214 15.2056C36.9214 15.3627 37.0354 15.4983 37.19 15.5263C39.4439 15.9352 41.1531 17.9078 41.1531 20.2796C41.1531 21.2412 40.8722 22.1372 40.3879 22.8899C39.9868 23.5133 39.9981 24.3929 40.4153 25.0057C40.942 25.7795 41.2498 26.7142 41.2498 27.7208C41.2498 29.8821 39.8306 31.7119 37.8732 32.329C37.327 32.5012 36.8873 32.9487 36.7347 33.5007C36.1298 35.688 34.1251 37.294 31.7454 37.294C31.4964 37.294 31.2516 37.2765 31.012 37.2425C30.1328 37.1178 29.0971 37.6927 28.7152 38.4944C27.9389 40.1239 26.2767 41.25 24.3515 41.25C22.4262 41.25 20.7639 40.1237 19.9876 38.4941C19.6059 37.6927 18.5709 37.118 17.6919 37.2426C17.4526 37.2765 17.208 37.294 16.9592 37.294C14.2882 37.294 12.0897 35.2708 11.8126 32.6733Z"
+          fill="#D42F4B"
+        />
+      </mask>
+      <g mask="url(#mask0_4956_21575)">
+        <g style={{ mixBlendMode: "overlay" }} opacity="0.4">
+          <rect
+            x="49.6953"
+            y="6.07324"
+            width="35.8529"
+            height="51.398"
+            transform="rotate(90 49.6953 6.07324)"
+            fill="url(#pattern0_4956_21575)"
+          />
+        </g>
+      </g>
+      <g clip-path="url(#clip0_4956_21575)">
+        <path
+          d="M21.5 26.5L26.4497 21.5503"
+          stroke="#C3C3C3"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+        <path
+          d="M26.5 26.5L21.5503 21.5503"
+          stroke="#C3C3C3"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+      </g>
+      <defs>
+        <pattern
+          id="pattern0_4956_21575"
+          patternContentUnits="objectBoundingBox"
+          width="18.507"
+          height="12.9096"
+        >
+          <use transform="scale(0.00925349 0.00645482)" />
+        </pattern>
+        <clipPath id="clip0_4956_21575">
+          <rect
+            width="8"
+            height="8"
+            fill="white"
+            transform="translate(20 20)"
+          />
+        </clipPath>
+        <image
+          id="image0_4956_21575"
+          width="2000"
+          height="2000"
+          preserveAspectRatio="none"
+        />
+      </defs>
+    </svg>
+  );
+};
@@ -0,0 +1,26 @@
+const SmallXIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.25391 10.5901L10.5572 5.28679"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M10.5586 10.5898L5.25529 5.28654"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+export default SmallXIcon;
@@ -1,25 +1,17 @@
-import React from "react";
-
 const XIcon = () => {
   return (
     <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
+      width="64"
+      height="32"
+      viewBox="0 0 64 32"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M5.25391 10.5901L10.5572 5.28679"
-        stroke="white"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-      <path
-        d="M10.5586 10.5898L5.25529 5.28654"
-        stroke="white"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M54.593 20.9854C54.9973 21.3938 54.9387 22.1152 54.4621 22.5966C53.9855 23.078 53.2714 23.1372 52.8671 22.7288L48.0009 17.8134L43.1347 22.7288C42.7304 23.1372 42.0162 23.078 41.5396 22.5966C41.063 22.1152 41.0044 21.3938 41.4088 20.9854L46.275 16.07L41.2707 11.0151C40.8664 10.6067 40.9249 9.88528 41.4015 9.40386C41.8781 8.92244 42.5923 8.86328 42.9966 9.27171L48.0009 14.3266L53.0051 9.27171C53.4095 8.86328 54.1236 8.92244 54.6002 9.40386C55.0768 9.88528 55.1354 10.6067 54.7311 11.0151L49.7268 16.07L54.593 20.9854Z"
+        fill="#6D6D6D"
       />
     </svg>
   );

@@ -7,6 +7,7 @@ export const container = style({
   width: "100%",
   height: "100%",
   backgroundColor: "#ffffff",
+  zIndex: zIndex.toast,
 });
 
 export const searchSection = style({

@@ -28,7 +28,7 @@ export const headerStyle = style({
   width: "100%",
   maxWidth: "600px",
   height: "58px",
-  zIndex: zIndex.toast,
+  zIndex: zIndex.header,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",

@@ -3,6 +3,7 @@ import { Candidate } from "../templates/types";
 import * as Style from "./PlaceItem.css";
 import { theme } from "@repo/ui/tokens";
 import Image from "next/image";
+import { NoVoteIcon } from "@/assets/icons/NoVoteIcon";
 
 export function PlaceItem({
   stationName,
@@ -21,22 +22,36 @@ export function PlaceItem({
         {stationName}
       </Text>
       <Spacing size={28} />
-      <div className={Style.imgContainerStyle}>
-        {members.map(({ id, imageUrl }) => (
-          <Image
-            key={id}
-            className={Style.imgStyle}
-            width={32}
-            height={32}
-            alt=""
-            src={imageUrl}
-          />
-        ))}
-      </div>
-      <Spacing size={12} />
-      <Text variant="caption" color={theme.colors.text4}>
-        {`${votedCount}명의 친구들이 찬성 중`}
-      </Text>
+
+      {votedCount > 0 ? (
+        <>
+          <div className={Style.imgContainerStyle}>
+            {members.map(({ id, imageUrl }) => (
+              <Image
+                key={id}
+                className={Style.imgStyle}
+                width={32}
+                height={32}
+                alt=""
+                src={imageUrl}
+              />
+            ))}
+          </div>
+          <Spacing size={12} />
+          <Text variant="caption" color={theme.colors.text4}>
+            {`${votedCount}명의 친구들이 찬성 중`}
+          </Text>
+        </>
+      ) : (
+        <>
+          <NoVoteIcon />
+          <Spacing size={12} />
+          <Text variant="caption" color={theme.colors.text4}>
+            아무도 콕하지 않은 장소
+          </Text>
+        </>
+      )}
+
       {resultTag !== "NONE" && (
         <div
           className={Style.iconStyle}

@@ -7,7 +7,7 @@ export const listContainer = style({
   overflow: "auto",
   gap: 12,
   flexWrap: "nowrap",
-  paddingTop: "10.2vh",
+  paddingLeft: "50px",
 
   "::-webkit-scrollbar": {
     display: "none",

@@ -1,19 +1,44 @@
 import { Candidate } from "../templates/types";
 import { PlaceItem } from "./PlaceItem";
 import * as Style from "./PlaceList.css";
+import "swiper/css";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { FreeMode } from "swiper/modules"; // FreeMode 모듈 추가
 
 interface Props {
   placeList: Candidate[];
 }
 
 export function PlaceList({ placeList }: Props) {
   return (
-    <ul className={Style.listContainer}>
-      <div style={{ marginLeft: "100px" }} />
-      {placeList.map((place) => (
-        <PlaceItem key={place.stationId} {...place} />
-      ))}
-      <div style={{ marginLeft: "100px" }} />
-    </ul>
+    <div className={Style.listContainer}>
+      <Swiper
+        modules={[FreeMode]}
+        slidesPerView="auto"
+        spaceBetween={12}
+        freeMode={true}
+        direction="horizontal"
+        slidesOffsetBefore={30}
+        style={{
+          width: "100%",
+          maxWidth: "600px",
+          paddingTop: "10.2vh",
+          height: "auto",
+        }}
+      >
+        {placeList.map((place) => (
+          <SwiperSlide
+            key={place.stationId}
+            style={{
+              width: "auto",
+              height: "auto",
+              display: "flex",
+            }}
+          >
+            <PlaceItem {...place} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
   );
 }
@@ -1,5 +1,4 @@
 import { Flex, Text } from "@repo/ui/components";
-import XIcon from "@/assets/icons/XIcon";
 import { Triangle } from "./Triangle";
 import {
   floatingAnimation,
@@ -8,6 +7,7 @@ import {
 import { theme } from "@repo/ui/tokens";
 import { useState, useEffect } from "react";
 import { motion } from "@repo/motion";
+import SmallXIcon from "@/assets/icons/SmallXIcon";
 
 export const Tooltip = ({ view }: { view: "card" | "list" }) => {
   const [show, setShow] = useState(true);
@@ -52,7 +52,7 @@ export const Tooltip = ({ view }: { view: "card" | "list" }) => {
           역을 누르고 주변을 둘러보세요!
         </Text>
         <Flex onClick={handleClose} style={{ cursor: "pointer" }}>
-          <XIcon />
+          <SmallXIcon />
         </Flex>
         <div
           style={{

@@ -152,12 +152,12 @@ export const floatingAnimation = {
   floating: style({
     animation: `${float} 3s ease-in-out infinite`,
     position: "relative",
-    zIndex: zIndex.floating,
+    zIndex: zIndex.tooltip,
   }),
   fadeOut: style({
     animation: `${fadeOutKeyframes} 0.5s ease-out forwards`,
     position: "relative",
-    zIndex: zIndex.floating,
+    zIndex: zIndex.tooltip,
   }),
 };
 

@@ -8,10 +8,10 @@ export const fullScreenMapContainerStyle = style({
   width: "100%",
   maxWidth: "600px",
   height: "100vh",
-  zIndex: zIndex.overlay,
   display: "flex",
   flexDirection: "column",
   overflow: "hidden",
+  zIndex: zIndex.floating,
 });
 
 export const containerStyle = style({

@@ -32,7 +32,7 @@ export const AnimationBottomSheet = ({
             width: "100%",
             maxWidth: "600px",
             bottom: bannerBottom,
-            zIndex: zIndex.toast,
+            zIndex: zIndex.overlay,
           }}
           initial={{ y: "150%" }}
           animate={{ y: "0%" }}

@@ -12,6 +12,6 @@ export const containerRecipe = recipe({
     borderTopLeftRadius: "32px",
     borderTopRightRadius: "32px",
     backgroundColor: theme.colors.bg.base2,
-    zIndex: zIndex.toast,
+    zIndex: zIndex.overlay,
   },
 });
@@ -1,15 +1,20 @@
 import { style } from "@vanilla-extract/css";
 import { theme } from "../../tokens";
+import { zIndex } from "@repo/z-index";
 
 export const container = style({
   padding: "13px 16px",
   backgroundColor: "#ffffff",
+  zIndex: zIndex.header,
 });
 
 export const title = style({
   height: "32px",
   color: theme.colors.text.primary,
   textAlign: "center",
+  position: "absolute",
+  left: "50%",
+  transform: "translateX(-50%)",
 });
 
 export const emptyDiv = style({ width: "32px", height: "32px" });