From 4b1b7ce861951d422ace4bbefa15ab00697bffa2 Mon Sep 17 00:00:00 2001 From: spde3289 Date: Mon, 17 Nov 2025 16:31:11 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20ui=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95,=20lint,=20stylelint=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .stylelintrc.json | 69 +------------------ src/components/Chart/ChartSection.jsx | 43 ++++++------ src/components/ListItem/ListItem.jsx | 2 +- src/components/ListItem/ListItem.style.js | 16 +++-- src/components/common/Modal.style.js | 3 + src/components/common/Toast.style.js | 13 ++-- .../donation/DonationModalUi.style.js | 29 ++++---- .../donation/DonationSection.style.js | 6 ++ .../donation/DonationSlider.style.js | 10 ++- src/components/donation/FundingCard.jsx | 4 +- .../donation/FundingCardSkeleton.style.js | 13 ++-- .../modal/RechargeModalContent.style.js | 3 +- src/components/mypage/IdolCard.style.js | 27 ++++---- src/components/vote/CreditLimitModal.jsx | 2 +- ...imitModal.js => CreditLimitModal.style.js} | 32 +++++---- src/components/vote/VoteSection.jsx | 7 +- src/components/vote/VoteSection.style.js | 14 ++-- src/pages/Homepage.jsx | 34 ++++++--- src/pages/Homepage.style.js | 10 +-- src/pages/ListPage.jsx | 4 +- src/pages/Mypage.style.js | 49 +++++++------ 21 files changed, 183 insertions(+), 207 deletions(-) rename src/components/vote/{CreditLimitModal.js => CreditLimitModal.style.js} (89%) diff --git a/.stylelintrc.json b/.stylelintrc.json index ecc8c68..fcb335d 100644 --- a/.stylelintrc.json +++ b/.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 } } diff --git a/src/components/Chart/ChartSection.jsx b/src/components/Chart/ChartSection.jsx index f1ade4c..fab4d4f 100644 --- a/src/components/Chart/ChartSection.jsx +++ b/src/components/Chart/ChartSection.jsx @@ -1,8 +1,8 @@ -import React, { useState, useEffect } from "react"; -import * as S from "./ChartSection.styles"; +import { useEffect, useState } from "react"; +import client from "../../api/client"; import ListItem from "../listItem/ListItem"; import VoteSection from "../Vote/VoteSection"; -import client from "../../api/client.js"; +import * as S from "./ChartSection.styles"; 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]); diff --git a/src/components/ListItem/ListItem.jsx b/src/components/ListItem/ListItem.jsx index 837321a..2b02407 100644 --- a/src/components/ListItem/ListItem.jsx +++ b/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(); diff --git a/src/components/ListItem/ListItem.style.js b/src/components/ListItem/ListItem.style.js index b60bb0f..abfbfdf 100644 --- a/src/components/ListItem/ListItem.style.js +++ b/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` diff --git a/src/components/common/Modal.style.js b/src/components/common/Modal.style.js index 2634e93..0f3e763 100644 --- a/src/components/common/Modal.style.js +++ b/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` diff --git a/src/components/common/Toast.style.js b/src/components/common/Toast.style.js index 0731cd2..5015027 100644 --- a/src/components/common/Toast.style.js +++ b/src/components/common/Toast.style.js @@ -2,14 +2,15 @@ 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)}%); @@ -17,12 +18,12 @@ export const ToastContainer = styled.div` 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; `; diff --git a/src/components/donation/DonationModalUi.style.js b/src/components/donation/DonationModalUi.style.js index e9cb73e..7833a85 100644 --- a/src/components/donation/DonationModalUi.style.js +++ b/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); } `; diff --git a/src/components/donation/DonationSection.style.js b/src/components/donation/DonationSection.style.js index f5481f6..9fab3c0 100644 --- a/src/components/donation/DonationSection.style.js +++ b/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; } `; diff --git a/src/components/donation/DonationSlider.style.js b/src/components/donation/DonationSlider.style.js index 38c8b03..00577d3 100644 --- a/src/components/donation/DonationSlider.style.js +++ b/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; } diff --git a/src/components/donation/FundingCard.jsx b/src/components/donation/FundingCard.jsx index 9ce8c83..b393cc9 100644 --- a/src/components/donation/FundingCard.jsx +++ b/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 }} /> diff --git a/src/components/donation/FundingCardSkeleton.style.js b/src/components/donation/FundingCardSkeleton.style.js index 2fcc1be..2d25d4e 100644 --- a/src/components/donation/FundingCardSkeleton.style.js +++ b/src/components/donation/FundingCardSkeleton.style.js @@ -11,8 +11,9 @@ const shimmer = keyframes` `; const SkeletonBase = styled.div` - background: linear-gradient(90deg, #2a2a2a 0px, #3a3a3a 40px, #2a2a2a 80px); + background: linear-gradient(90deg, #2a2a2a 0, #3a3a3a 40px, #2a2a2a 80px); background-size: 200px 100%; + animation: ${shimmer} 1.4s ease-in-out infinite; border-radius: 4px; `; @@ -23,17 +24,16 @@ export const FundingCardSkeleton = styled.div` `; export const ImgSkeleton = styled(SkeletonBase)` - margin-bottom: 8px; - border-radius: 8px; overflow: hidden; width: 158px; height: 206px; + margin-bottom: 8px; border-radius: 8px; @media ${media.tablet} { - margin-bottom: 12px; width: 282px; height: 294px; + margin-bottom: 12px; } `; @@ -71,11 +71,12 @@ export const TitleSkeleton = styled(SkeletonBase)` export const DirectionWrapper = styled.div` display: flex; - justify-content: space-between; margin-bottom: 8px; - font-size: 1.2rem; + font-weight: 400; + font-size: 1.2rem; line-height: 1.8rem; + justify-content: space-between; `; export const ToolTipSkeleton = styled(SkeletonBase)` diff --git a/src/components/modal/RechargeModalContent.style.js b/src/components/modal/RechargeModalContent.style.js index 965b4c6..d0d5c6b 100644 --- a/src/components/modal/RechargeModalContent.style.js +++ b/src/components/modal/RechargeModalContent.style.js @@ -15,7 +15,8 @@ export const CreditList = styled.div` export const Credit = styled.div` display: flex; padding: 18px 20px; - border: 1px solid ${({ selected }) => (selected ? "var(--orange-F96D69)" : "var(--white-F7F7F8)")}; + border: 1px solid + ${({ selected }) => (selected ? "var(--color-primary)" : "var(--color-white-90)")}; align-items: center; border-radius: 8px; cursor: pointer; diff --git a/src/components/mypage/IdolCard.style.js b/src/components/mypage/IdolCard.style.js index e3ce3f9..638cd4e 100644 --- a/src/components/mypage/IdolCard.style.js +++ b/src/components/mypage/IdolCard.style.js @@ -19,7 +19,7 @@ export const CardContainer = styled.div` align-items: center; gap: 8px; cursor: ${(props) => (props.$clickable ? "pointer" : "default")}; - + &:hover { opacity: ${(props) => (props.$clickable ? "0.9" : "1")}; } @@ -27,12 +27,12 @@ export const CardContainer = styled.div` // 이미지 wrapper (외곽 border) export const ImageWrapper = styled.div` + display: flex; position: relative; width: ${(props) => WRAPPER_SIZES[props.$size]}px; - aspect-ratio: 1; border: 1.31px solid ${(props) => (props.$selected ? "#F96D69" : "#f96868")}; + aspect-ratio: 1; border-radius: 50%; - display: flex; justify-content: center; align-items: center; opacity: ${(props) => (props.$selected ? "0.7" : "1")}; @@ -48,19 +48,20 @@ export const IdolImage = styled.img` // 삭제 버튼 export const DeleteButton = styled.button` + display: flex; position: absolute; top: 0; right: 0; width: 31px; height: 31px; - background-color: #ffffff; + padding: 0; border: 2.8px solid #02000e; + + background-color: #fff; border-radius: 50%; - display: flex; justify-content: center; align-items: center; cursor: pointer; - padding: 0; &:hover { opacity: 0.8; @@ -69,10 +70,10 @@ export const DeleteButton = styled.button` // 체크 아이콘 export const CheckIcon = styled.div` + display: flex; position: absolute; top: 0; right: 0; - display: flex; justify-content: center; align-items: center; `; @@ -87,16 +88,16 @@ export const InfoSection = styled.div` // 멤버 이름 export const MemberName = styled.div` - font-size: 16px; + color: #fff; font-weight: 700; - color: #ffffff; + font-size: 16px; `; // 그룹 이름 export const GroupName = styled.div` - font-size: 14px; - font-weight: 400; - color: rgba(255, 255, 255, 0.6); padding: 0 12px; -`; + color: rgb(255 255 255 / 60%); + font-weight: 400; + font-size: 14px; +`; diff --git a/src/components/vote/CreditLimitModal.jsx b/src/components/vote/CreditLimitModal.jsx index 09a37e3..a0b894b 100644 --- a/src/components/vote/CreditLimitModal.jsx +++ b/src/components/vote/CreditLimitModal.jsx @@ -1,4 +1,4 @@ -import * as S from "./CreditLimitModal.js"; +import * as S from "./CreditLimitModal.style"; const CreditLimitModal = ({ onClose }) => { return ( diff --git a/src/components/vote/CreditLimitModal.js b/src/components/vote/CreditLimitModal.style.js similarity index 89% rename from src/components/vote/CreditLimitModal.js rename to src/components/vote/CreditLimitModal.style.js index 798dd13..ee607ba 100644 --- a/src/components/vote/CreditLimitModal.js +++ b/src/components/vote/CreditLimitModal.style.js @@ -2,24 +2,24 @@ import styled from "styled-components"; import credit_icon from "../../assets/credit_113px.png"; import closePng from "../../assets/btn_delete_24px.png"; export const Overlay = styled.div` + display: flex; position: fixed; + z-index: 999; inset: 0; - background: rgba(0, 0, 0, 0.6); - display: flex; + background: rgb(0 0 0 / 60%); justify-content: center; align-items: center; - z-index: 999; `; export const ModalBox = styled.div` + display: flex; + position: relative; width: 339px; height: 330px; - background: rgba(24, 29, 38, 1); + background: rgb(24 29 38 / 100%); border-radius: 12px; - display: flex; flex-direction: column; align-items: center; - position: relative; `; export const Icon = styled.div` @@ -29,17 +29,18 @@ export const Icon = styled.div` background-repeat: no-repeat; background-size: cover; background-position: center; - margin: 56px 24px 0px; + margin: 56px 24px 0; `; export const Message = styled.p` - color: #ffffff; + margin-top: 31px; + + color: #fff; font-size: 16px; line-height: 1.5; - margin-top: 31px; span { - color: #ff7777; + color: #f77; font-weight: 600; } `; @@ -47,15 +48,16 @@ export const Message = styled.p` export const ConfirmButton = styled.button` width: 295px; height: 42px; - border-radius: 3px; + margin-top: 31px; border: none; - cursor: pointer; - font-size: 15px; + + color: #fff; font-weight: 600; - margin-top: 31px; + font-size: 15px; + border-radius: 3px; + cursor: pointer; background: linear-gradient(90deg, #f86f65 0%, #fe5493 100%); - color: #ffffff; `; export const CloseBtn = styled.button` diff --git a/src/components/vote/VoteSection.jsx b/src/components/vote/VoteSection.jsx index 90efed1..d070f72 100644 --- a/src/components/vote/VoteSection.jsx +++ b/src/components/vote/VoteSection.jsx @@ -1,9 +1,9 @@ +import { creditStorage } from "@/storage/credit.storage"; import { useEffect, useState } from "react"; -import * as S from "./VoteSection.style"; -import ListItem from "../listItem/ListItem"; import client from "../../api/client"; -import { creditStorage } from "@/storage/credit.storage"; +import ListItem from "../listItem/ListItem"; import CreditLimitModal from "./CreditLimitModal"; +import * as S from "./VoteSection.style"; const VoteSection = ({ onClose, initialGender = "female" }) => { const [gender] = useState(initialGender); @@ -33,7 +33,6 @@ const VoteSection = ({ onClose, initialGender = "female" }) => { }; fetchIdols(); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [gender]); const submit = async () => { diff --git a/src/components/vote/VoteSection.style.js b/src/components/vote/VoteSection.style.js index 02e35ec..cbe8c0c 100644 --- a/src/components/vote/VoteSection.style.js +++ b/src/components/vote/VoteSection.style.js @@ -56,14 +56,13 @@ export const Header = styled.div` export const MobileHeader = styled.div` display: none; - @media (max-width: 524px) { + @media (width <= 524px) { display: flex; + position: relative; width: 100%; height: 44px; justify-content: space-between; align-items: center; - - position: relative; } `; @@ -85,7 +84,7 @@ export const BackBtn = styled.button` border: 0; cursor: pointer; - @media (max-width: 524px) { + @media (width <= 524px) { display: block; } `; @@ -148,9 +147,8 @@ export const Vote = styled.div` export const TransparentOverlay = styled.div` display: none; - @media (max-width: 524px) { + @media (width <= 524px) { display: block; - height: 106px; position: fixed; right: 0; bottom: 0; @@ -176,14 +174,14 @@ export const Votebtn = styled.button` opacity: ${({ disabled }) => (disabled ? 0.5 : 1)}; @media (width <= 524px) { + display: block; width: calc(100% - 32px); - margin: 16px auto; height: 44px; + margin: 16px auto; margin: 16px 0; font-size: 15px; pointer-events: auto; - display: block; } `; diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.jsx index 2b92b5c..ab42e2e 100644 --- a/src/pages/Homepage.jsx +++ b/src/pages/Homepage.jsx @@ -1,13 +1,13 @@ +import useCreditContext from "@/app/contexts/CreditContext"; import { useNavigate } from "react-router-dom"; -import imgStartBg from "../assets/imgs/home_start_bg.png"; -import imgSponsorBg from "../assets/imgs/home_sponsor_bg.png"; -import imgSponsorPhone from "../assets/imgs/home_sponsor_phone.png"; import imgMonthlyBg from "../assets/imgs/home_monthly_bg.png"; import imgMonthyPhone from "../assets/imgs/home_monthly_phone.png"; import imgMyArtistBg from "../assets/imgs/home_my_artist_bg.png"; import imgMyArtistPhone from "../assets/imgs/home_my_artist_phone.png"; +import imgSponsorBg from "../assets/imgs/home_sponsor_bg.png"; +import imgSponsorPhone from "../assets/imgs/home_sponsor_phone.png"; +import imgStartBg from "../assets/imgs/home_start_bg.png"; import imgLogo from "../assets/imgs/logo.svg"; -import useCreditContext from "@/app/contexts/CreditContext"; import * as S from "./Homepage.style"; function Homepage() { @@ -15,13 +15,16 @@ function Homepage() { const [_, actions] = useCreditContext(); const goListPage = () => { - actions.resetCredit(); navigate("/list"); }; + const resetCredit = () => { + actions.resetCredit(); + }; + return ( - + @@ -30,7 +33,7 @@ function Homepage() { ); } -const StartSection = ({ goListPage }) => { +const StartSection = ({ onClick }) => { return ( @@ -41,10 +44,23 @@ const StartSection = ({ goListPage }) => {
가장 쉽게 덕질 하는 방법 - 팬덤케이 로고 + 팬덤케이 로고 { + onClick.goListPage(); + }} + /> 지금 시작하기 - 지금 시작하기 + { + onClick.goListPage(); + onClick.resetCredit(); + }} + > + 지금 시작하기 + ); diff --git a/src/pages/Homepage.style.js b/src/pages/Homepage.style.js index c206f3d..96658f0 100644 --- a/src/pages/Homepage.style.js +++ b/src/pages/Homepage.style.js @@ -217,7 +217,7 @@ export const SectionImg1 = styled.img` width: 240px; height: 520.25px; margin-top: 47px; - animation-name: phoneAni; + animation-name: phone-ani; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; @@ -233,15 +233,17 @@ export const SectionImg1 = styled.img` margin-top: 60px; } - @keyframes phoneAni { + @keyframes phone-ani { 0% { - transform: translateY(0px); + transform: translateY(0); } + 50% { transform: translateY(10px); } + 100% { - transform: translateY(0px); + transform: translateY(0); } } `; diff --git a/src/pages/ListPage.jsx b/src/pages/ListPage.jsx index eeda80c..6d76079 100644 --- a/src/pages/ListPage.jsx +++ b/src/pages/ListPage.jsx @@ -1,13 +1,13 @@ +import ChartSection from "@/components/Chart/ChartSection"; import MyCredit from "@/components/credit/MyCredit"; import DonationSection from "@/components/donation/DonationSection"; -import VoteSection from "@/components/vote/VoteSection"; function ListPage() { return ( <> - + ); } diff --git a/src/pages/Mypage.style.js b/src/pages/Mypage.style.js index cf9d215..8303b98 100644 --- a/src/pages/Mypage.style.js +++ b/src/pages/Mypage.style.js @@ -24,10 +24,11 @@ export const AddIdolsSection = styled.section` // 섹션 제목 - 아래 마진 32px export const SectionTitle = styled.h2` - font-size: 24px; - font-weight: 700; - color: var(--white-FFFFFF); margin-bottom: 32px; + + color: var(--color-white-100); + font-weight: 700; + font-size: 24px; `; // 내가 관심있는 아이돌 리스트 @@ -42,17 +43,19 @@ export const FavoriteIdolsList = styled.div` // 빈 상태 메시지 export const EmptyMessage = styled.div` width: 100%; - text-align: center; - color: rgba(255, 255, 255, 0.6); - font-size: 16px; padding: 40px 0; + + color: rgb(255 255 255 / 60%); + font-size: 16px; + text-align: center; `; // 구분선 export const Divider = styled.div` width: 100%; height: 1px; - background-color: var(--white-FFFFFF); + + background-color: var(--color-white-100); `; // 아이돌 그리드 컨테이너 (화살표 버튼 포함) @@ -64,26 +67,27 @@ export const IdolsGridContainer = styled.div` // 화살표 버튼 export const ArrowButton = styled.button` + display: flex; width: 29px; height: 135px; - background-color: rgba(27, 27, 27, 0.8); border: none; + + background-color: rgb(27 27 27 / 80%); border-radius: 8px; - display: flex; justify-content: center; align-items: center; cursor: pointer; flex-shrink: 0; transform: ${(props) => (props.$isRight ? "scaleX(-1)" : "none")}; - &:hover:not(:disabled) { - opacity: 0.8; - } - &:disabled { opacity: 0.3; cursor: not-allowed; } + + &:hover:not(:disabled) { + opacity: 0.8; + } `; // 아이돌 그리드 - 8열 2행 고정, 행간 32px @@ -96,28 +100,29 @@ export const IdolsGrid = styled.div` // 추가하기 버튼 - 255x48px, radius 24px, 위 마진 48px export const AddButton = styled.button` + display: flex; width: 255px; height: 48px; margin-top: 48px; - background: linear-gradient(90deg, var(--orange-F96D69) 0%, var(--pink-FE5493) 100%); border: none; + + color: var(--color-white-100); + font-weight: 700; + font-size: 16px; + background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%); border-radius: 24px; - color: var(--white-FFFFFF); cursor: pointer; align-self: center; - display: flex; justify-content: center; align-items: center; gap: 8px; - font-size: 16px; - font-weight: 700; - - &:hover:not(:disabled) { - opacity: 0.9; - } &:disabled { opacity: 0.5; cursor: not-allowed; } + + &:hover:not(:disabled) { + opacity: 0.9; + } `; From d07ec6838bb47df5911abcc3f9f108b3f6434cf6 Mon Sep 17 00:00:00 2001 From: spde3289 Date: Mon, 17 Nov 2025 16:40:43 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20eslint=EC=97=90=EB=9F=AC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95(=EB=8C=80=EC=86=8C=EB=AC=B8=EC=9E=90=20=EA=B5=AC?= =?UTF-8?q?=EB=B6=84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Chart/ChartSection.jsx | 4 ++-- src/components/vote/VoteSection.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Chart/ChartSection.jsx b/src/components/Chart/ChartSection.jsx index fab4d4f..ade6706 100644 --- a/src/components/Chart/ChartSection.jsx +++ b/src/components/Chart/ChartSection.jsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; import client from "../../api/client"; -import ListItem from "../listItem/ListItem"; -import VoteSection from "../Vote/VoteSection"; +import ListItem from "../ListItem/ListItem"; +import VoteSection from "../vote/VoteSection"; import * as S from "./ChartSection.styles"; const BREAKPOINT = 744; diff --git a/src/components/vote/VoteSection.jsx b/src/components/vote/VoteSection.jsx index d070f72..e1c50f8 100644 --- a/src/components/vote/VoteSection.jsx +++ b/src/components/vote/VoteSection.jsx @@ -1,7 +1,7 @@ import { creditStorage } from "@/storage/credit.storage"; import { useEffect, useState } from "react"; import client from "../../api/client"; -import ListItem from "../listItem/ListItem"; +import ListItem from "../ListItem/ListItem"; import CreditLimitModal from "./CreditLimitModal"; import * as S from "./VoteSection.style";