Feature/policy api

src/components/BottomBar.tsx

@@ -1,11 +1,11 @@
 import { useLocation, useNavigate } from "react-router-dom";
 import { useSettingStore } from "../store/settingStore";
-import homeOn from "../assets/icon/home-on.png";
-import homeOff from "../assets/icon/home-off.png";
-import supportOn from "../assets/icon/support-on.png";
-import supportOff from "../assets/icon/support-off.png";
-import policyOn from "../assets/icon/policy-on.png";
-import policyOff from "../assets/icon/policy-off.png";
+import homeOn from "../assets/icon/home-on.svg";
+import homeOff from "../assets/icon/home-off.svg";
+import supportOn from "../assets/icon/support-on.svg";
+import supportOff from "../assets/icon/support-off.svg";
+import policyOn from "../assets/icon/policy-on.svg";
+import policyOff from "../assets/icon/policy-off.svg";
 
 const navItems = [
   {

src/components/Header.tsx

@@ -2,8 +2,8 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { useSettingStore } from "../store/settingStore";
 import { useUserStore } from "../store/userStore";
 import logo from "../assets/img/logo.svg";
-import alarmIcon from "../assets/icon/alarm-icon.png";
-import settingIcon from "../assets/icon/setting-icon.png";
+import alarmIcon from "../assets/icon/alarm-icon.svg";
+import settingIcon from "../assets/icon/setting-icon.svg";
 import { useQuery } from "@tanstack/react-query";
 import { notificationService } from "@/api";
 
@@ -129,7 +129,9 @@ export default function Header({
           <button
             type="button"
             aria-label="알림"
-            className={`relative cursor-pointer flex items-center justify-center w-11 h-11 rounded-full shrink-0 border-[3px] border-white ${darkMode ? "bg-white invert" : "bg-gradient-to-b from-white/0 to-white/100 to-42%"}`}
+            className="relative cursor-pointer flex items-center justify-center w-11 h-11 rounded-full shrink-0 border-[3px] border-white bg-gradient-to-b from-white/0 to-white/100 to-42%
+        transition-all duration-200 hover:scale-[1.08] hover:shadow-lg active:scale-[0.95]"
+            style={{ boxShadow: "0 2px 8px rgba(0,0,0,0.1)" }}
             onClick={() => navigate("/alarm")}
           >
             <img src={alarmIcon} alt="" className="w-6 h-6" />
@@ -146,7 +148,9 @@ export default function Header({
           <button
             type="button"
             aria-label="설정"
-            className={`cursor-pointer flex items-center justify-center w-11 h-11 rounded-full shrink-0 border-[3px] border-white ${darkMode ? "bg-white invert" : "bg-gradient-to-b from-white/0 to-white/100 to-42%"}`}
+            className="cursor-pointer flex items-center justify-center w-11 h-11 rounded-full shrink-0 border-[3px] border-white bg-gradient-to-b from-white/0 to-white/100 to-42%
+        transition-all duration-200 hover:scale-[1.08] hover:shadow-lg active:scale-[0.95]"
+            style={{ boxShadow: "0 2px 8px rgba(0,0,0,0.1)" }}
             onClick={() => navigate("/setting")}
           >
             <img src={settingIcon} alt="" className="w-6 h-6" />

src/components/common/GradientButton.tsx

@@ -31,17 +31,28 @@ export default function GradientButton({
 }: Props) {
   return (
     <div
-      className={`rounded-full ${fullWidth ? "w-full" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`}
+      className={`rounded-full transition-all duration-200
+    hover:scale-[1.03] hover:shadow-lg
+    active:scale-[0.97]
+    ${fullWidth ? "w-full" : ""} 
+    ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} 
+    ${className}`}
       style={{
         borderRadius: borderRadius ? `${borderRadius}px` : undefined,
         background: `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`,
         padding: borderWidth,
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
       }}
     >
       <button
         onClick={onClick}
         disabled={disabled}
-        className={`gradient-btn flex items-center justify-center gap-2 rounded-full font-semibold transition-opacity ${fullWidth ? "w-full" : ""} ${disabled ? "cursor-not-allowed" : "active:opacity-80"} ${buttonClassName}`}
+        className={`gradient-btn flex items-center justify-center gap-2 rounded-full font-semibold
+      hover:opacity-90
+      focus:outline-none
+      ${fullWidth ? "w-full" : ""} 
+      ${disabled ? "cursor-not-allowed" : ""} 
+      ${buttonClassName}`}
         style={{
           borderRadius: borderRadius ? `${borderRadius}px` : undefined,
           backgroundColor: bgColor,

src/components/common/RangeSlider.tsx

@@ -58,32 +58,44 @@ export default function RangeSlider({
         }}
       />
       <style>{`
-        input[type="range"]::-webkit-slider-thumb {
-          appearance: none;
-          width: 20px;
-          height: 20px;
-          border-radius: 50%;
-          background: rgba(217, 217, 217, 0.2);
-          border: 2px solid white;
-          cursor: pointer;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        }
-        input[type="range"]::-moz-range-thumb {
-          width: 20px;
-          height: 20px;
-          border-radius: 50%;
-          background: rgba(217, 217, 217, 0.2);
-          border: 2px solid white;
-          cursor: pointer;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        }
-        input[type="range"]:disabled::-webkit-slider-thumb {
-          background: #9CA3AF;
-        }
-        input[type="range"]:disabled::-moz-range-thumb {
-          background: #9CA3AF;
-        }
-      `}</style>
+  input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: rgba(217, 217, 217, 0.2);
+    border: 2px solid white;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transition: width 0.15s, height 0.15s, box-shadow 0.15s;
+  }
+  input[type="range"]::-webkit-slider-thumb:hover {
+    width: 26px;
+    height: 26px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+  input[type="range"]::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: rgba(217, 217, 217, 0.2);
+    border: 2px solid white;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transition: width 0.15s, height 0.15s, box-shadow 0.15s;
+  }
+  input[type="range"]::-moz-range-thumb:hover {
+    width: 26px;
+    height: 26px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+  input[type="range"]:disabled::-webkit-slider-thumb {
+    background: #9CA3AF;
+  }
+  input[type="range"]:disabled::-moz-range-thumb {
+    background: #9CA3AF;
+  }
+`}</style>
     </div>
   );
 }

src/page/Detail/DetailPage.tsx

@@ -276,6 +276,10 @@ export default function Detail() {
     try {
       await familyService.updateVisibility({ lineId, isPublic: newValue });
       setGlobalIsPublic(newValue);
+      showToast(
+        newValue ? "공개로 전환되었습니다." : "비공개로 전환되었습니다.",
+        "success",
+      ); // ← 추가
 
       const yearMonth = formatYearMonth(currentDate);
       const appData = await fetchAppUsage(lineId, yearMonth, newValue);

src/page/Login/LoginPage.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import GradientButton from "../../components/common/GradientButton";
-import { useSettingStore } from "../../store/settingStore";
 import logo from "../../assets/img/logo.svg";
 import backgroundImg from "../../assets/img/background.png";
 import loginBg1 from "../../assets/img/loginBg1.png";
@@ -22,8 +21,6 @@ export default function LoginPage() {
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
-  const darkMode = useSettingStore((state) => state.darkMode);
-  const largeTextMode = useSettingStore((state) => state.largeTextMode);
   const navigate = useNavigate();
   const setUserInfo = useUserStore((state) => state.setUserInfo);
   const appType = getAppType();
@@ -93,12 +90,9 @@ export default function LoginPage() {
   };
 
   return (
-    // Layout과 동일한 래퍼 구조
-    <div
-      className={`flex justify-center min-h-screen bg-[#f5f5f5] font-sans ${darkMode ? "dark" : ""}`}
-    >
+    <div className="flex justify-center min-h-screen bg-[#f5f5f5] font-sans">
       <div
-        className={`relative w-[480px] max-w-full min-h-[100dvh] overflow-hidden bg-cover bg-center bg-no-repeat ${darkMode ? "invert" : ""} ${largeTextMode ? "text-[1.25em]" : ""}`}
+        className="relative w-full desktop:w-[480px] max-w-full min-h-[100dvh] overflow-hidden bg-cover bg-center bg-no-repeat"
         style={{ backgroundImage: `url(${backgroundImg})` }}
       >
         {/* 슬라이딩 배경 */}
@@ -116,7 +110,6 @@ export default function LoginPage() {
 
         {/* 콘텐츠 */}
         <div className="relative z-10 flex flex-col items-center justify-center min-h-[100dvh] px-8">
-          {/* 로고 */}
           <motion.div
             className="mb-16"
             initial={{ opacity: 0, y: -30 }}
@@ -126,7 +119,6 @@ export default function LoginPage() {
             <img src={logo} alt="Pooli" className="w-32 h-32" />
           </motion.div>
 
-          {/* 입력 폼 */}
           <motion.div
             className="w-full max-w-sm space-y-6"
             initial={{ opacity: 0, y: 30 }}
@@ -163,15 +155,13 @@ export default function LoginPage() {
               />
             </div>
 
-            {/* 에러 메시지 */}
             {error && (
               <div className="text-red-600 text-sm text-center bg-red-50 py-2 px-4 rounded-lg">
                 {error}
               </div>
             )}
           </motion.div>
 
-          {/* 로그인 버튼 */}
           <motion.div
             className="max-w-sm mt-12 w-full"
             initial={{ opacity: 0, y: 30 }}