[04-28] 데일리 스크럼 - 송시은

[sgoldenbird]

📅 Daily Scrum | 04-28

---

✅ Done

#225 #230 #243

• 🎯 이미지 파일 명 kebab으로 안됐던 부분 통일했습니다.
• 🎯 에러버튼 display: flex로 변경하고 center로 변경했습니다.
• 🎯모달 밖 화면 부분을 클릭했을때도 x눌렀을 때처럼 모달이 꺼지도록 구현했었는데 드래그했을때도 모달이 꺼지는 문제 발견, 수정
• 🎯 모든 파일 import 순서 기준 정하고 정리했는데 린터로 인해 원상복구되었어요. Biome이 정상 작동 안하는 것 같아요.
• 🎯arrow button 을 button폴더안으로 이동하고 경로수정했습니다.
• 🎯라우터 로더와 각 컴포넌트에서 API 호출을 fetchCharts, fetchDonations, fetchIdols 함수로 분리
• 🎯데이터가 빈 매열일때 404 에러를 던지는 기능 throwIfEmptyArray 유틸 함수를 생성해 분리
• 🎯request 유틸리티 함수 하나의 request파일로 통합 (별개의 requestGet, requestPost.. 가 아닌 하나의 request파일에서 export )
  -> 요청 로직을 재사용 가능하게 만들고, 가독성과 유지보수성을 높임

기본적으로 큰 범위를 먼저 import. 

1. 외부 라이브러리 (css는 마지막)
import React from 'react';
import axios from 'axios';
import { css } from '@emotion/react';

2. 절대 경로 기반 내부 모듈
컴포넌트 > 유틸함수 > assets(이미지,gif) 
import { Avatar } from '@/components/avatar';
import { requestGet } from '@/utils/api';
import exitIcon from '@/assets/icons/exit-icon-black.png';

3. 상대 경로 기반 내부 모듈 (스타일 파일 마지막) 
import * as S from './avatarButton.styles';

• 🎯 폴더 구조를 변경했습니다.

  • 폴더 안에 폴더들이 있을 경우, 즉 index를 두번 거쳐야하는 경우,
    최종 index에서 default as로 가져오고 그 전 idnex는 default로 가져옵니다.
  • styles/index는 최종 index에 포함될 일이 없어서 default as 로 가져옵니다.

• errorBounday폴더 생성
  기존에 components/error/ -> ErrorBoundary/ 안에 아래와 같이 각 바운더리 폴더로 변경

errorBoundary
├── ApiErrorBoundary
│   ├── ApiErrorBoundary.jsx
│   └── index.js
├── GlobalErrorBoundary
│   ├── GlobalErrorBoundary.jsx
│   └── index.js
├── RenderErrorBoundary
│   ├── RenderErrorBoundary.jsx
│   └── index.js
├── styles
│   ├── errorBoundary.styles.js
│   └── index.js
└── index.js

• components/modals/
  template/폴더를 만들려고 보니 그 안에 들어갈 만한것이 Modal밖에 없어서 차라리 modals안에 commonModal로 넣었습니다.
  이 부분 확인하시고 논의후에 수정 필요하면 변경할게요.

modals
├── commonModal/
│   ├── Modal.jsx
│   ├── modal.styles.js
│   └── index.js    //    export { default } from './Modal';
├── voteModal
│   ├── VoteModal.jsx
│   ├── voteModal.styles.js
│   └── index.js
├── donationModal
│   ├── DonationModal.jsx
│   ├── donationModal.styles.js
│   └── index.js
├── creditChargeModal
│   ├── CreditChargeModal.jsx
│   ├── creditChargeModal.styles.js
│   └── index.js
├── creditLackModal
│   ├── CreditLackModal.jsx
│   ├── creditLackModal.styles.js
│   └── index.js
└── index.js  //   export { default as Modal } from './commonModal';

• components/button

button
├── customButton/
├── avatarButton/
│   ├── AvatarButton.jsx
│   ├── avatarButton.styles.js
│   └── index.js
├── radioButton/
└── index.js

---

🚧 Doing

• 🔧 develop에 최종 머지 후 전체 웹사이트 점검
• 🔧 credit이미지를 star로 변경
• 🔧 pendingUI가 보이고 화면이 보이는게 아니라 pendingUI보이고 스크롤로 내리면 화면이 보이는 문제
• 🔧 라우터에서 donation첫데이터 30개 보내기
• 🔧 모달 border radius 지정
• 🔧 서버에러 나는거 한번 더 체크

---

📝 Todo

• 📌 데모 제작 (리드미, 가이드라인) starsync.wiki

---

💬 ETC

| 논의 사항

• ❗캐러셀 후원하기 버튼 눌렀을때 경고창 떠도 버튼이 활성화되는 문제발견
• ❗ import순서를 기준을 세우고 맞춰 수정하려고 했는데 린터가 import 순서를 맘대로 수정하는 것 같아요.
  -> 확인해보니 Biome이 자기 기준을 가지고 수정해도록 설정이 되어있고 그 기준이 제가 정했던 기준과 같아서 문제가 없어야하는데
  이부분에서 Biome자체가 뭔가 제대로 작동하지 않고 있는 것 같아요.
  ♻️Refactor: 폴더구조 변경, 에러버튼 display 변경, import 순서 정리 #225 (comment)
• ❗GIF도 import할때 로딩스피너 Gif 붙이면 좋겠습니다.
• ❗List페이지 좌우여백 헤더 로고에 안맞춰지고 있어요 -> 헤더 수정하기로
• ❗마이페이지 버튼 아이돌 없을때 disabled 안되고 있음
• ❗리스트 페이지 상단 크레딧 충전하는 부분이 위아래폭 좀 넓은거 같아요. -> 헤더안으로 이동
• ❗리스트 페이지 진입 시 아래와 같은 에러가 나와요.
  

| 아이디어, 제안

• 🔦 이번에는 html을 10px로 고정하고 했지만 여유가 된다면 html단에서 font size에 반응형을 거는걸로 리팩토링 하면 어떨까 싶네요.
  시간이 안되면 다음 프로젝트에는 이렇게 해보시면 좋을것 같습니다.
  그랬다면 예를 들어 리스트페이지와 마이페이지의 좌우 여백을 헤더에 맞추는 것도 아래처럼 간단했을 것 같아요.
  현재는 수진님과 시도해봤으나 반응형때문에 이쪽이 너무 장황해 질 것 같아서 일단 개별로 하는 쪽으로 수정했어요.

// Root.jsx

function Root() {

  return (
    <>
      {isLoading && <PendingUI />}
      {!isLanding && <Header />}
      <main
        style={{
          paddingTop: !isLanding ? `${LAYOUT.HEADER_HEIGHT}px` : 0,
          paddingLeft: '6rem',
          paddingRight: '6rem',
        }}
      >
        <Outlet />
      </main>
      {!isLanding && <Footer />}
    </>
  );
}

export default Root;

• 🔦 page에는 UI위주로 놓는걸 생각해보시면 좋을 것 같아요. 현재 좀 장황합니다.

| 질문

• ❔

[HarrySeop]

PendingUI 로딩 중 스크롤 문제와 해결 방법

🟥 문제 상황

React Router v6 + loader + PendingUI 패턴에서 페이지 이동 시:

• 이전 페이지 DOM이 unmount 되지 않고 남아있음.

• PendingUI는 단순히 오버레이로 덮고 있을 뿐, 스크롤을 막지 않음.

• 페이지 전환 중 유저가 스크롤하면 이전 페이지가 움직이는 현상 발생.

---

🟡 문제 원인

• PendingUI는 로딩 중이라는 표시만 할 뿐, 이전 페이지의 DOM이 완전히 제거되지 않음.

• React Router는 loader가 데이터 준비 중일 때 기존 Outlet을 유지하기 때문.

• 따라서 PendingUI가 떠 있어도 아래에 이전 페이지의 스크롤이 살아있음.

---

🛠️ 해결 방법: 스크롤 잠금 적용

PendingUI가 활성화될 때 body { overflow: hidden; } 적용해서 스크롤을 막기.

✅ 커스텀 Hook 방식 (useScrollLockDuringPending)

import { useEffect } from 'react';
import { useNavigation } from 'react-router-dom';
export const useScrollLockDuringPending = () => {

const navigation = useNavigation();

const isLoading = navigation.state !== 'idle';
useEffect(() => {

if (isLoading) {

document.body.style.overflow = 'hidden'; // 스크롤 잠금

} else {

document.body.style.overflow = ''; // 원래대로 돌림

}

}, [isLoading]);

};

🔥 Root.jsx 적용 예시

import { useScrollLockDuringPending } from '@/hooks/useScrollLockDuringPending';
function Root() {

useScrollLockDuringPending();
// ... 기존 코드 (PendingUI, Header, Footer 등)

}

---

🟢 PendingUI 안에 직접 적용하는 방법

import { useEffect } from 'react';
const PendingUI = () => {

useEffect(() => {

document.body.style.overflow = 'hidden';

return () => {

document.body.style.overflow = '';

};

}, []);
return (

<div css={S.pendingWrapper}>

<div>로딩 중...</div>

</div>

);

};
export default PendingUI;

⚠️ 전제: PendingUI가 loader 동작 중에만 렌더링되고 있다는 조건 하에 정상 작동.

---

🟣 참고 옵션

• html { overflow: hidden; } → 가능하지만 body가 더 안전.

• 특정 컨테이너만 잠그려면 main { overflow: hidden; } 가능.

---

✅ 요약

문제	원인	해결 방법
페이지 전환 중 스크롤 가능	이전 페이지 DOM 유지	Pending 중 overflow: hidden 적용
스크롤 시 이전 페이지 밀림	같은 이유	body { overflow: hidden; } 사용

✅ 추천: 커스텀 Hook 방식으로 재사용성을 높이는 패턴.