fix: 모달창 ui 오류 수정, lint, stylelint 수정

.stylelintrc.json

@@ -12,74 +12,7 @@
     ],
     "order/order": ["custom-properties", "declarations"],
 
-    "order/properties-order": [
-      {
-        "groupName": "Layout",
-        "noEmptyLineBetween": true,
-        "properties": [
-          "display",
-          "visibility",
-          "overflow",
-          "float",
-          "clear",
-          "position",
-          "top",
-          "right",
-          "bottom",
-          "left",
-          "z-index"
-        ]
-      },
-      {
-        "groupName": "Box",
-        "emptyLineBefore": "always",
-        "noEmptyLineBetween": true,
-        "properties": [
-          "width",
-          "height",
-          "margin",
-          "margin-top",
-          "margin-right",
-          "margin-bottom",
-          "margin-left",
-          "padding",
-          "padding-top",
-          "padding-right",
-          "padding-bottom",
-          "padding-left",
-          "border"
-        ]
-      },
-      {
-        "groupName": "Background",
-        "emptyLineBefore": "always",
-        "noEmptyLineBetween": true,
-        "properties": ["background-color"]
-      },
-      {
-        "groupName": "Font",
-        "emptyLineBefore": "always",
-        "noEmptyLineBetween": true,
-        "properties": [
-          "color",
-          "font-style",
-          "font-weight",
-          "font-size",
-          "line-height",
-          "letter-spacing",
-          "text-align",
-          "text-indent",
-          "vertical-align",
-          "white-space"
-        ]
-      },
-      {
-        "groupName": "Animation",
-        "emptyLineBefore": "always",
-        "noEmptyLineBetween": true,
-        "properties": ["animation"]
-      }
-    ],
+    "order/properties-order": null,
     "nesting-selector-no-missing-scoping-root": null
   }
 }

src/components/Chart/ChartSection.jsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+import client from "../../api/client";
+import ListItem from "../ListItem/ListItem";
+import VoteSection from "../vote/VoteSection";
 import * as S from "./ChartSection.styles";
-import ListItem from "../listItem/ListItem";
-import VoteSection from "../Vote/VoteSection";
-import client from "../../api/client.js";
 
 const BREAKPOINT = 744;
 
@@ -17,26 +17,25 @@ const ChartSection = () => {
 
   const [list, setList] = useState([]);
 
-  const loadIdols = async () => {
-    const res = await client.get("/idols");
-    const idols = res.data.list;
-
-    const filtered = idols.filter((i) => i.gender === gender);
-
-    const sorted = filtered
-      .sort((a, b) => b.totalVotes - a.totalVotes)
-      .map((i, idx) => ({
-        id: i.id,
-        name: i.name,
-        img: i.profilePicture,
-        votes: i.totalVotes,
-        rank: idx + 1,
-      }));
-
-    setList(sorted);
-  };
-
   useEffect(() => {
+    const loadIdols = async () => {
+      const res = await client.get("/idols");
+      const idols = res.data.list;
+
+      const filtered = idols.filter((i) => i.gender === gender);
+
+      const sorted = filtered
+        .sort((a, b) => b.totalVotes - a.totalVotes)
+        .map((i, idx) => ({
+          id: i.id,
+          name: i.name,
+          img: i.profilePicture,
+          votes: i.totalVotes,
+          rank: idx + 1,
+        }));
+
+      setList(sorted);
+    };
     loadIdols();
   }, [gender]);
 

src/components/ListItem/ListItem.jsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Item, Img, Rank, TextGroup, Name, ListVotes, RadioVisual } from "./ListItem.style.js";
+import { Item, Img, Rank, TextGroup, Name, ListVotes, RadioVisual } from "./ListItem.style";
 
 const ListItem = ({ id, img, rank, name, votes, selected, onSelect, variant = "vote" }) => {
   const commaNum = (num) => Number(num).toLocaleString();

src/components/ListItem/ListItem.style.js

@@ -5,7 +5,6 @@ export const Item = styled.div`
   align-items: center;
   gap: 10px;
   height: 70px;
-  border-bottom: 1px solid rgba(225, 225, 225, 0.1);
   padding: ${({ $variant }) => ($variant === "vote" ? "0 12px" : "0")};
   border-bottom: ${({ $variant }) =>
     $variant === "chart" ? "none" : "1px solid rgba(225, 225, 225, 0.1)"};
@@ -23,11 +22,12 @@ export const Img = styled.img`
 `;
 
 export const Rank = styled.span`
-  font-size: 14px;
   width: 18px;
+
+  color: rgb(249 109 105 / 100%);
+  font-size: 14px;
   text-align: right;
   opacity: 0.9;
-  color: rgba(249, 109, 105, 1);
 `;
 
 export const TextGroup = styled.div`
@@ -39,17 +39,19 @@ export const TextGroup = styled.div`
 `;
 
 export const Name = styled.p`
-  font-weight: 500;
+  overflow: hidden;
   margin: 0;
+
+  font-weight: 500;
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
 `;
 
 export const ListVotes = styled.p`
-  font-size: 14px;
-  color: #aaa;
   margin: 0 0 0 auto;
+
+  color: #aaa;
+  font-size: 14px;
 `;
 
 export const RadioVisual = styled.span`

src/components/common/Modal.style.js

@@ -1,10 +1,13 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
+  display: flex;
   position: fixed;
   inset: 0;
   justify-content: center;
   align-items: center;
+
+  background-color: #000c;
 `;
 
 export const ModalContainer = styled.div`

src/components/common/Toast.style.js

@@ -2,27 +2,28 @@ import styled from "styled-components";
 
 export const ToastContainer = styled.div`
   position: absolute;
-  bottom: 20px;
   right: 20px;
-  max-width: 200px;
+  bottom: 20px;
+  z-index: 2000;
   padding: 15px;
-  background-color: #ffffffcc;
+
+  background-color: #fffc;
+  max-width: 200px;
   border-radius: 8px;
   pointer-events: none;
-  z-index: 2000;
   transition: all 0.5s;
   opacity: ${({ isToasting }) => (isToasting ? 1 : 0.1)};
   transform: translateY(${({ isToasting }) => (isToasting ? 0 : 100)}%);
 `;
 
 export const ToastTitle = styled.h2`
   color: black;
-  font-size: 12px;
   font-weight: 600;
+  font-size: 12px;
 `;
 
 export const ToastMessage = styled.p`
   color: #333;
-  font-size: 14px;
   font-weight: 500;
+  font-size: 14px;
 `;

src/components/donation/DonationModalUi.style.js

@@ -24,16 +24,16 @@ export const TitleWrapper = styled.div`
 `;
 
 export const SubTitle = styled.h4`
-  font-size: 1.2rem;
+  color: #666;
   font-weight: 400;
+  font-size: 1.2rem;
   line-height: 1.8rem;
-  color: #666666;
 `;
 
 export const Title = styled.h4`
-  color: var(--white-F7F7F8);
-  font-size: 1.4rem;
+  color: var(--color-white-90);
   font-weight: 500;
+  font-size: 1.4rem;
 `;
 
 export const FormContainer = styled.form`
@@ -44,18 +44,19 @@ export const FormContainer = styled.form`
 
 export const InputWrapper = styled.div`
   position: relative;
-  border: solid 1px var(--white-FFFFFF);
+  border: solid 1px var(--color-white-100);
   border-radius: 8px;
   padding: 16px;
   padding-right: 48px;
 
   input {
-    padding: 0;
     width: 231px;
     height: 26px;
-    color: var(--white-FFFFFF);
-    font-size: 2rem;
+    padding: 0;
+
+    color: var(--color-white-100);
     font-weight: 700;
+    font-size: 2rem;
     line-height: 2.6rem;
   }
 
@@ -72,8 +73,9 @@ export const InputWrapper = styled.div`
 
 export const MessageBox = styled.div`
   margin-top: 8px;
-  font-size: 1.2rem;
+
   font-weight: 500;
+  font-size: 1.2rem;
   color: #ff2626;
 
   ${({ $color }) => $color && { color: $color }}
@@ -82,13 +84,14 @@ export const MessageBox = styled.div`
 export const SubmitButton = styled.button`
   width: 295px;
   height: 42px;
-  border-radius: 4px;
-  background: linear-gradient(to right, #f86f65, var(--pink-FE5493));
-  font-size: 1.4rem;
+
   font-weight: 700;
+  font-size: 1.4rem;
   line-height: 2.6rem;
+  border-radius: 4px;
+  background: linear-gradient(to right, #f86f65, var(--color-primary));
 
   &:disabled {
-    background: var(--gray-828282);
+    background: var(--color-gray-500);
   }
 `;

src/components/donation/DonationSection.style.js

@@ -3,11 +3,17 @@ import styled from "styled-components";
 
 export const Contaier = styled.section`
   padding-left: 24px;
+  margin-bottom: 40px;
+
+  @media ${media.tablet} {
+    margin-bottom: 60px;
+  }
 
   @media ${media.desktop} {
     width: 1200px;
     margin: 0 auto;
     padding-left: 0;
+    margin-bottom: 80px;
   }
 `;
 

src/components/donation/DonationSlider.style.js

@@ -2,13 +2,15 @@ import { media } from "@/styles/media";
 import styled from "styled-components";
 
 export const SlideWrapper = styled.div`
-  position: relative;
   display: flex;
+  position: relative;
   align-items: center;
+
   @media ${media.desktop} {
     gap: 40px;
     width: 1200px;
   }
+
   @media ${media.desktopSlider} {
     gap: 40px;
   }
@@ -30,8 +32,8 @@ export const SlideTrack = styled.div`
 
 export const FundingCardWrapper = styled.div`
   display: flex;
-  width: 100%;
   overflow: hidden;
+  width: 100%;
 `;
 
 export const SlideArrow = styled.button`
@@ -40,7 +42,7 @@ export const SlideArrow = styled.button`
     $direction === "left" ? { left: "-80px" } : { right: "-80px", transform: "rotate(180deg)" }}
 
   &:disabled {
-    background: var(--gray-828282);
+    background: var(--color-gray-500);
   }
 
   @media ${media.desktop} {
@@ -50,8 +52,10 @@ export const SlideArrow = styled.button`
     width: 40px;
     height: 80px;
     border-radius: 8px;
+
     background-color: #1b1b1bcc;
   }
+
   @media ${media.desktopSlider} {
     position: absolute;
   }

src/components/donation/FundingCard.jsx

@@ -67,8 +67,8 @@ const FundingCard = ({ item, onClick }) => {
               barSize={2}
               radius={2}
               dataKey="pv"
-              fill="#F96D69"
-              background={{ fill: "var(--white-FFFFFF)", radius: 2 }}
+              fill="var(--color-primary)"
+              background={{ fill: "var(--color-white-100)", radius: 2 }}
             />
           </BarChart>
         </ResponsiveContainer>