feat: #45/이달의 차트 투표 모달창 레이아웃 구현

[jihye5081]

#️⃣ Issue Number

#45

📝 요약(Summary)

파일명 변경

• idolListApi -> MonthlyChartApi

이달의 차트 투표 모달창 레이아웃 구현

🛠️ PR 유형

어떤 변경 사항이 있나요?

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항(오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

📸스크린샷 (선택)

1. PC 버전
   
   

2. 태블릿 버전
   
   

3. 모바일 버전
   
   

💬 공유사항

css 추가 수정 예정입니다.
무한 스크롤 구현 예정입니다.
전체 작업이 끝난 후 시간 여유가 생긴다면 재사용성 고려해 코드 수정해 보겠습니다!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fandom-k	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 6, 2025 11:51am

[doctor-taco]

오 좋습니다! 수고하셨어요!👍

[hyeonjiroh]

정말 많은 일이 있었네요... 고생 많으셨습니다!

[hyeonjiroh]

저희 tailwind.config.js 파일 확인해보시면

screens: {
        pc: '1200px',
        tablet: '768px',
        mobile: '375px',
      },

모바일 화면 breakpoint가 375라 375px 이상이 모바일 화면인 것으로 알고 있습니다. 그래서 innerWidth가 768px 미만일 때 모바일 버전 투표 모달창을 보여주도록 조건을 바꿔줘야 할 것 같습니다!

[hyeonjiroh]

그리고 지금은 화면이 375px 이하일 때 '차트 투표하기를 눌렀을 경우에만 제대로 모바일 버전 모달창이 나오는 것 같습니다.

• 375px 이하의 화면에서 차트 투표하기를 눌렀을 때
  

• 위 상태에서 화면 사이즈가 375px을 초과했을 때
  
  이렇게 화면 크기가 375px을 초과했는데도 여전히 모바일 버전 모달창으로 보입니다!

• 375px을 초과한 사이즈의 화면에서 차트 투표하기를 눌렀을 때
  

• 위 상태에서 화면 사이즈가 375px 이하가 되었을 때
  
  이렇게 화면 크기가 375px 이하가 되니 모바일 버전 모달창이 되는 것이 아닌, pc와 tablet에서 쓰이는 모달창이 계속 쓰여서 모달창이 많이 깨져있는 것을 확인했습니다.

[hyeonjiroh]

그래서 여기서도 반응형을 사용하는 건 어떨까 싶습니다

const [isMobile, setIsMobile] = useState(false);

...

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

[hyeonjiroh]

아 그리고 아직 구현 안 하신 걸 수도 있지만, 투표 모달창에서 스크롤바 없애는 게 더 깔끔하고 좋을 것 같습니다!