Feat: 마이페이지 온도 색상, 숫자 표시 (#407)

Related to: #392

Author: choiseona

src/components/Common/LoginMobCard.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from "react";
 const LoginMobCard = ({ children }: { children: ReactNode }) => {
   return (
     <div className="flex justify-center items-center">
-      <div className="w-[773px] min-h-[100vh] bg-white flex">
+      <div className="w-[773px] min-h-[100vh] bg-white max-w-[50rem] flex">
         <div className="w-full px-[15.3rem] py-[11.2rem] _sm:px-[2rem] _sm:py-[11.2rem] _md:px-[2rem] _md:py-[11.2rem]">
           {children}
         </div>

src/components/MyPage/MyPage/MyProfile/MyProfile.tsx

@@ -12,7 +12,7 @@ function MyProfile() {
   const { data } = useGetMyProfile();
 
   if (!data) {
-    return;
+    return null;
   }
 
   const frameGet = localStorage.getItem(FRAMEID);
@@ -63,7 +63,7 @@ function MyProfile() {
                 <SettingButton />
               </div>
             </div>
-            <div className="w-full flex justify-end h-full items-end">
+            <div className="w-full flex justify-end h-full items-end pr-[2rem]">
               <Temperature temperature={data.progressBar} />
             </div>
           </div>

src/components/MyPage/MyPage/Temperature/Temperature.tsx

@@ -1,28 +1,56 @@
 import temperatureIndicator from "@/assets/icon/temperature-indicator.svg";
+
 interface Props {
   temperature: number;
 }
+
 function Temperature({ temperature }: Props) {
-  let realTemperature;
-  if (temperature <= -36.5) {
-    realTemperature = `calc(0% - 0.78rem)`;
-  } else if (temperature > -36.5 && temperature < 63.5)
-    realTemperature = `calc(${36.5 + temperature}% - 0.78rem)`;
-  else if (temperature >= 63.5) realTemperature = `calc(100% - 0.78rem)`;
+  temperature += 36.5;
+
+  if (temperature <= 0) {
+    temperature = 0;
+  } else if (temperature >= 100) {
+    temperature = 100;
+  }
+
+  const temperatureColorConditions = [
+    { max: 10, color: "#7EC7FC" },
+    { max: 20, color: "#72EF86" },
+    { max: 36.5, color: "#FFEF5C" },
+    { max: 65, color: "#FFAD62" },
+    { max: 100, color: "#E76B6B" },
+  ];
+
+  const getTemperatureColor = () => {
+    for (const condition of temperatureColorConditions) {
+      if (temperature <= condition.max) {
+        return `bg-[${condition.color}]`;
+      }
+    }
+  };
 
   return (
-    <div className="w-[22.4rem] _sm:w-[18rem] h-[2.5rem] _sm:h-[1.9rem] flex relative">
-      <img
-        src={temperatureIndicator}
-        alt="temperature-indicator"
-        className="absolute top-[-1rem] "
-        style={{ left: realTemperature }}
-      />
-      <div className="bg-[#7EC7FC] w-[12%] h-full rounded-l-[2.4rem]" />
-      <div className="bg-[#72EF86] w-[21%] h-full" />
-      <div className="bg-[#FFEF5C] w-[24%] h-full" />
-      <div className="bg-[#FFAD62] w-[21%] h-full" />
-      <div className="bg-[#E76B6B] w-[22%] h-full rounded-r-[2.4rem]" />
+    <div className="w-[21.5rem] _sm:w-[18rem] h-[2.5rem] _sm:h-[1.9rem] flex relative">
+      <div
+        className="z-10 w-[4.5rem] absolute top-[-2.7rem] -translate-x-[0.75rem]"
+        style={{ left: `${temperature}%` }}
+      >
+        <p className="text-center text-[1.4rem] _sm:text-[1.2rem] font-medium text-[#777] -translate-x-[1.5rem]">
+          {temperature}℃
+        </p>
+        <img
+          src={temperatureIndicator}
+          alt="temperature-indicator"
+          className="w-[1.5rem]"
+        />
+      </div>
+
+      <div className="relative h-full w-full bg-[#D9D9D9] rounded-[2.4rem]">
+        <div
+          className={`${getTemperatureColor()} absolute h-full rounded-[2.4rem]`}
+          style={{ width: `${temperature}%` }}
+        />
+      </div>
     </div>
   );
 }