[refactor] 알콜도수 도수 색 변화

Author: mtm-git1018

src/domains/mypage/components/pages/my-bar/MyBar.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { getApi } from '@/app/api/config/appConfig';
 import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
+import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
 interface MyCocktail {
@@ -37,14 +38,15 @@ function MyBar() {
   "
         >
           {myCocktail.map(({ cocktailId, cocktailName, imageUrl }) => (
-            <CocktailCard
-              key={cocktailId}
-              src={imageUrl}
-              textSize1="text-xl"
-              name={cocktailName}
-              nameKo="올드 패션드"
-              keep={false}
-            ></CocktailCard>
+            <Link href={`/recipe/${cocktailId}`} key={cocktailId}>
+              <CocktailCard
+                src={imageUrl}
+                textSize1="text-xl"
+                name={cocktailName}
+                nameKo="올드 패션드"
+                keep={false}
+              ></CocktailCard>
+            </Link>
           ))}
         </div>
       ) : (

src/domains/mypage/main/MyAbv.tsx

@@ -9,6 +9,18 @@ function MyAbv({ abv }: { abv: number }) {
   const viewPoint = isMd ? 'web' : 'mobileLongText';
   const fixedAbv = abv.toFixed(1);
 
+  const t = Math.min(1, Math.max(0, abv / 100));
+
+  // HEX → RGB
+  const from = [255, 202, 141]; // FFCA8D
+  const to = [250, 36, 36]; // FA2424
+
+  // RGB
+  const r = Math.round(from[0] + (to[0] - from[0]) * t);
+  const g = Math.round(from[1] + (to[1] - from[1]) * t);
+  const b = Math.round(from[2] + (to[2] - from[2]) * t);
+  const color = `rgb(${r}, ${g}, ${b})`;
+
   return (
     <dl className="flex justify-between items-center text-gray-dark gap-2">
       <dt className="flex gap-1 items-center">
@@ -23,7 +35,10 @@ function MyAbv({ abv }: { abv: number }) {
         </ToolTip>
       </dt>
       <dd className="text-base">
-        <span className="text-2xl md:text-4xl font-bold">{fixedAbv}</span>%
+        <span className="text-2xl md:text-4xl font-bold" style={{ color }}>
+          {fixedAbv}
+        </span>
+        %
       </dd>
     </dl>
   );

src/domains/mypage/main/MySetting.tsx

@@ -5,7 +5,6 @@ import WithdrawModal from '@/domains/mypage/components/WithdrawModal';
 import TextButton from '@/shared/components/button/TextButton';
 import { useEffect, useState } from 'react';
 import useFetchProfile from '../api/fetchProfile';
-import AlarmConfirm from '../components/pages/my-alarm/AlarmConfirm';
 
 function MySetting() {
   const { profile } = useFetchProfile();

src/domains/shared/components/abv-graph/AbvGraph.tsx

@@ -28,7 +28,7 @@ function AbvGraph({ max, abv, type = 'cocktail' }: Props) {
 
   const bandClass = clsx(
     'h-full rounded-full transition-[width] duration-500',
-    'bg-gradient-to-r from-amber-300 to-red-500', // 기본 그라데이션
+    'bg-gradient-to-r from-[#FFCA8D] to-[#FA2424]', // 기본 그라데이션
     pct >= 80 && 'shadow-[0_0_12px_rgba(250,36,36,0.45)]'
   );