Skip to content

fix: #156/ MonthlyChart 수정 #157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hyeonjiroh merged 2 commits into from
Feb 11, 2025
Merged

fix: #156/ MonthlyChart 수정 #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a3be4b6
fix: MonthlyChart
jihye5081 Feb 10, 2025
b189daf
fix: change variable
jihye5081 Feb 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions src/components/IdolCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const IdolCard = ({
isDisabled = false,
sizeClass = 'w-[98px] h-[98px] tablet:w-[128px] tablet:h-[128px]',
onClick,
isMyPage = true,
}) => {
const defaultImage = 'https://link24.kr/9iFIhh0';

Expand All @@ -22,7 +23,7 @@ const IdolCard = ({
} // 비활성화된 경우 클릭 방지
>
{children}
<div className="absolute inset-0 rounded-full border-[1.3px] border-coralRed z-10"></div>
<div className="absolute inset-0 rounded-full border-[1.3px] border-coralRed"></div>

<div className="absolute inset-0 m-1.5 rounded-full overflow-hidden">
<img
Expand All @@ -42,15 +43,21 @@ const IdolCard = ({

{isSelected && isSelectable && (
<>
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-coralRed to-pinkPunch opacity-50 z-20" />
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-coralRed to-pinkPunch opacity-50" />
<img
src={checkIcon}
alt="check"
className="absolute w-[40%] h-[40%] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-30"
className="absolute w-[40%] h-[40%] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
/>
</>
)}
</div>
{isMyPage && (
<div className="mt-1 text-center">
<p className="text-white text-mobile font-bold">{idol.name}</p>
<p className="text-white/70 text-xs">{idol.group || '그룹 없음'}</p>
</div>
)}
</div>
);
};
Expand Down
13 changes: 4 additions & 9 deletions src/components/Modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import exitArrow from '@/assets/icons/exitArrow.svg';
import { useEffect, useState } from 'react';

function Modal({ title, onClose, children }) {
const [isMobile, setIsMobile] = useState(false);
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

useEffect(() => {
document.body.style.overflow = 'hidden'; // 모달창 열려 있으면 뒤의 배경 스크롤 막기
Expand All @@ -14,19 +14,14 @@ function Modal({ title, onClose, children }) {
}, []);

useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth < 768);
};

const handleResize = () => setIsMobile(window.innerWidth < 768);
window.addEventListener('resize', handleResize);
handleResize();
return () => window.removeEventListener('resize', handleResize);
}, []);

if (title.includes('아이돌') && isMobile) {
return (
// z-[9999] : 모달창이 열렸을 때 리스트 페이지에 있는 아이돌 이미지 보더가 같이 보이는 현상 해결을 위해 작성
<div className="fixed flex flex-col top-0 left-0 size-full bg-midnightBlack z-[9999]">
<div className="fixed flex flex-col top-0 left-0 size-full bg-midnightBlack">
<img
src={leftTopGradient}
alt="leftTopGradient"
Expand All @@ -53,7 +48,7 @@ function Modal({ title, onClose, children }) {
}

return (
<div className="fixed top-0 left-0 w-[100%] h-[100%] flex justify-center items-center bg-midnightBlack/80 font-pretendard z-[9999]">
<div className="fixed top-0 left-0 w-[100%] h-[100%] flex justify-center items-center bg-midnightBlack/80 font-pretendard">
<div className="relative bg-deepCharcoal p-[20px] rounded-[8px] py-[24px] px-[16px]">
<img
src={closeButton}
Expand Down
14 changes: 9 additions & 5 deletions src/pages/listPage/monthlyChart/MonthlyChartItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,14 @@ const MonthlyChartItem = ({
{layout === 'default' ? (
<div className="flex w-full h-[70px] justify-between items-center">
<div className="flex items-center gap-[12px] font-medium">
<IdolCard
idol={idol}
isSelected={false}
sizeClass="w-[70px] h-[70px]"
/>
<div className="pointer-events-none">
<IdolCard
idol={idol}
isSelected={false}
isMyPage={false}
sizeClass="w-[70px] h-[70px]"
/>
</div>
<h4 className="text-coralRed">{rank}</h4>
<div className="flex justify-between w-max">
<p className="text-white/[0.87]">
Expand All @@ -40,6 +43,7 @@ const MonthlyChartItem = ({
isSelected={selectedIdol === idol.id}
sizeClass="w-[70px] h-[70px]"
isSelectable={false}
isMyPage={false}
/>
{selectedIdol === idol.id && (
<div className="absolute inset-0 m-1.5 rounded-full overflow-hidden z-10">
Expand Down
1 change: 0 additions & 1 deletion src/pages/listPage/monthlyChart/MonthlyChartSection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ const MonthlyChartSection = ({

const loadIdolData = async () => {
setLoading(true);
console.log('loadIdolData:', gender, voteTrigger, cursor);
const cursorValue = voteTrigger ? 0 : cursor;
try {
const response = await getLists(gender, cursorValue, pageSize);
Expand Down