feat: 투표 상세 페이지 구현

CLAUDE.md

@@ -46,6 +46,12 @@ TanStack Router with file-based routing. Route files live in `src/pages/routes/`
 
 `src/main.tsx` → `src/app/App.tsx` wraps the app in: `Sentry.ErrorBoundary` → `HelmetProvider` → `QueryClientProvider` → `RouterProvider`. `PushNotificationBridge` and `Toast` (Sonner) are injected globally inside the router.
 
+## Docs
+
+- [FSD Architecture Guide](src/docs/architecture/fsd.md)
+- [Auth API](src/docs/api-spec/auth.md)
+- [Vote API](src/docs/api-spec/vote.md)
+
 ## Key conventions
 
 - **Package manager**: `pnpm` only

src/app/styles/index.css

@@ -127,6 +127,38 @@
   }
 }
 
+@keyframes modal-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes modal-backdrop-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes modal-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes modal-panel-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+  }
+}
+
 @keyframes shimmer {
   from {
     background-position: 200% 0;

src/base/api/client.ts

@@ -0,0 +1,7 @@
+import axios from "axios";
+
+export const apiClient = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  headers: { "Content-Type": "application/json" },
+  withCredentials: true,
+});

src/base/ui/AgeBarChart/index.tsx

@@ -42,10 +42,10 @@ function AgeBarGroup({ group, animated, duration }: AgeBarGroupProps) {
     <div>
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center gap-2">
-          <span className={`${isPrimary ? "text-primary text-body-m" : "text-grey-dark text-label-m"}`}>{label}</span>
+          <span className={`${isMyGroup ? "text-primary text-body-m" : "text-grey-dark text-label-m"}`}>{label}</span>
           {isMyGroup && <span className="bg-primary text-white text-label-s px-[6px] py-1 rounded-full">내 그룹</span>}
         </div>
-        <span className={`${isPrimary ? "text-primary text-body-m" : "text-grey-dark text-label-m"}`}>
+        <span className={`${isMyGroup ? "text-primary text-body-m" : "text-grey-dark text-label-m"}`}>
           {percentage}%
         </span>
       </div>

src/base/ui/Modal/index.tsx

@@ -0,0 +1,148 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+const EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
+const DURATION_IN = 220;
+const DURATION_OUT = 180;
+
+const FOCUSABLE_SELECTOR =
+  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+function Modal({ isOpen, onClose, children, className }: ModalProps) {
+  const [mounted, setMounted] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDialogElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+  const hasOpenedRef = useRef(false);
+
+  // Mount/unmount with animation
+  useEffect(() => {
+    if (isOpen) {
+      hasOpenedRef.current = true;
+      previousFocusRef.current = document.activeElement as HTMLElement;
+      setIsClosing(false);
+      setMounted(true);
+      return;
+    }
+    if (!hasOpenedRef.current) return;
+    setIsClosing(true);
+    const t = setTimeout(() => {
+      setMounted(false);
+      setIsClosing(false);
+      previousFocusRef.current?.focus();
+    }, DURATION_OUT);
+    return () => clearTimeout(t);
+  }, [isOpen]);
+
+  // Scroll lock — iOS Safari needs position:fixed + stored scrollY
+  useEffect(() => {
+    if (!mounted) return;
+    const scrollY = window.scrollY;
+    const { style } = document.body;
+    style.overflow = "hidden";
+    style.position = "fixed";
+    style.top = `-${scrollY}px`;
+    style.width = "100%";
+    return () => {
+      style.overflow = "";
+      style.position = "";
+      style.top = "";
+      style.width = "";
+      window.scrollTo(0, scrollY);
+    };
+  }, [mounted]);
+
+  // Focus initial element when panel mounts
+  useEffect(() => {
+    if (!mounted || !panelRef.current) return;
+    const first = panelRef.current.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
+    (first ?? panelRef.current).focus();
+  }, [mounted]);
+
+  // Focus trap + Escape
+  useEffect(() => {
+    if (!mounted) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !panelRef.current) return;
+
+      const focusables = Array.from(panelRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
+        (el) => el.offsetParent !== null,
+      );
+
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+
+      if (!first || !last) {
+        e.preventDefault();
+        return;
+      }
+
+      if (e.shiftKey) {
+        if (document.activeElement === first || !panelRef.current.contains(document.activeElement)) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last || !panelRef.current.contains(document.activeElement)) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [mounted, onClose]);
+
+  if (!mounted) return null;
+
+  return createPortal(
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 z-[9999] flex items-center justify-center px-5"
+      style={{
+        animation: isClosing
+          ? `modal-backdrop-out ${DURATION_OUT}ms ${EASING} both`
+          : `modal-backdrop-in ${DURATION_IN}ms ${EASING} both`,
+        backgroundColor: "rgba(0,0,0,0.5)",
+      }}
+      onPointerDown={(e) => {
+        if (e.target === overlayRef.current) onClose();
+      }}
+    >
+      <dialog
+        ref={panelRef}
+        open
+        aria-modal="true"
+        tabIndex={-1}
+        className={clsx("relative border-0 p-0 m-0 bg-white rounded-[20px] w-full max-w-sm outline-none", className)}
+        style={{
+          animation: isClosing
+            ? `modal-panel-out ${DURATION_OUT}ms ${EASING} both`
+            : `modal-panel-in ${DURATION_IN}ms ${EASING} both`,
+        }}
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        {children}
+      </dialog>
+    </div>,
+    document.body,
+  );
+}
+
+export { Modal };

src/base/ui/Spinner/index.tsx

@@ -0,0 +1,7 @@
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <div
+      className={`w-6 h-6 rounded-full border-2 border-transparent border-t-primary animate-spin ${className ?? ""}`}
+    />
+  );
+}