트러블슈팅 | Notion

이슈 #1: 반응형 브레이크포인트 일관성 관리

1. 이슈 상황

항목	내용
발생 환경	페이지 전체 반응형 작업 중
증상	각 컴포넌트마다 다른 브레이크포인트 사용, 특정 화면 크기에서 레이아웃 깨짐
영향 범위	메인, Voting, My Wallet, Profile 등 전체 페이지

문제 코드 예시:

// 컴포넌트마다 다른 브레이크포인트 하드코딩
const MainSection = styled.div`
  @media (max-width: 768px) { ... }  // 여기는 768px
`;

const VotingCard = styled.div`
  @media (max-width: 750px) { ... }  // 여기는 750px
`;

const WalletLayout = styled.div`
  @media (max-width: 800px) { ... }  // 여기는 800px
`;
// 일관성 없는 브레이크포인트로 레이아웃 전환 시점 불일치

2. 해결 방안 후보

방안	장점	단점
A. 중앙 theme 파일에서 관리	일관된 브레이크포인트, 한 곳에서 수정	초기 설정 필요
B. CSS 변수 사용	네이티브 CSS 활용	styled-components와 혼용 어려움
C. 각 컴포넌트에서 상수화	구현 간단	여전히 분산 관리

3. 선택한 해결법

선택: A안 (중앙 theme 파일에서 관리)

// utils/theme.ts
export const breakpoints = {
  mobile: '480px',
  tablet: '768px',
  desktop: '1024px',
  wide: '1280px',
} as const;

export const media = {
  mobile: `@media (max-width: ${breakpoints.mobile})`,
  tablet: `@media (max-width: ${breakpoints.tablet})`,
  desktop: `@media (max-width: ${breakpoints.desktop})`,
  wide: `@media (max-width: ${breakpoints.wide})`,
} as const;

// 컴포넌트에서 사용
import { media } from '@/utils/theme';

const MainSection = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  ${media.tablet} {
    grid-template-columns: repeat(2, 1fr);
  }

  ${media.mobile} {
    grid-template-columns: 1fr;
  }
`;

const VotingCard = styled.div`
  padding: 24px;

  ${media.tablet} {
    padding: 16px;
  }

  ${media.mobile} {
    padding: 12px;
  }
`;

4. 선택 이유

관점	이유
일관성	모든 컴포넌트가 동일한 브레이크포인트 사용
유지보수	브레이크포인트 변경 시 한 곳만 수정
가독성	media.tablet 같은 시맨틱한 네이밍으로 의도 명확
타입 안전성	as const 로 자동완성 및 오타 방지

이슈 #2: 모바일 Drawer 메뉴 스크롤 잠금

1. 이슈 상황

항목	내용
발생 환경	Header Drawer 모바일 메뉴 열린 상태
증상	Drawer 열린 상태에서 배경 스크롤 가능, 메뉴 뒤로 콘텐츠 이동
영향 범위	모바일 전체 네비게이션 UX

문제 코드 예시:

// Drawer만 열고 body 스크롤 제어 없음
function HeaderDrawer({ isOpen, onClose }) {
  return (
    <>
      {isOpen && <Overlay onClick={onClose} />}
      <DrawerContainer $isOpen={isOpen}>
        <NavLinks />
      </DrawerContainer>
    </>
  );
}
// Drawer 열린 상태에서도 배경 스크롤 됨

2. 해결 방안 후보

방안	장점	단점
A. body overflow hidden	간단하고 확실한 스크롤 방지	스크롤 위치 점프 이슈
B. position fixed + 스크롤 위치 저장	스크롤 위치 유지	구현 복잡
C. overscroll-behavior CSS	CSS만으로 해결	일부 브라우저 미지원