[NEXT]최종프로젝트 트러블슈팅(2)

🐞 Trouble Shooting

미디어쿼리 적용이 의도대로 작동하지 않음

문제 정의

sign-in, sign-up 페이지에서 모바일에서는 흰색 헤더, 데스크탑에서는 기존 헤더가 적용되야합니다.
하지만 모바일에서도 기존(검정) 헤더가 적용되는 문제 발생했습니다.
md:hidden을 사용했지만, 의도한 대로 동작하지 않았습니다.

문제 원인 분석

(1) 전역 레이아웃에서 헤더가 항상 렌더링

RootLayout.tsx에서 모든 페이지에 Header.tsx(검정 헤더)를 렌더링하고 있었습니다.
즉, auth 페이지에서도 Header.tsx가 렌더링되면서 모바일에서도 검정 헤더가 그대로 표시되었습니다.

(2)미디어 쿼리 적용이 의도대로 작동 안됨

md:hidden을 사용하여 AuthHeader.tsx(흰색 헤더)를 모바일에서 보이게 했지만, 전역적으로 렌더링되는 Header.tsx가 덮어씌워지는 문제가 발생했습니다.
데스크탑에서는 md:hidden이 적용되지 않으므로, 정상적으로 기존 헤더가 유지되었습니다.
하지만 모바일에서는 전역적으로 렌더링된 헤더가 최상위에서 유지되면서 원하는 대로 동작하지 않았습니다.

해결 과정

(1) RootLayout.tsx에서 auth 페이지 여부 체크하여 기존 헤더 제외

headers().get("next-url")을 사용해 현재 경로가 sign-in 또는 sign-up인지 확인했습니다.
isAuthPage가 true면 Header.tsx(기존 헤더)를 렌더링하지 않도록 수정했습니다.

const pathname = headers().get("next-url") || "";
const isAuthPage = pathname.startsWith("/sign-in") || pathname.startsWith("/sign-up");

return (
  <body className="font-pretendard">
    {!isAuthPage && <Header />} 
    {children}
    <Footer />
    <InquiryFloatingButton />
  </body>
);

(2) auth 페이지에 별도 레이아웃(AuthLayout.tsx) 적용

AuthHeader.tsx(흰색 헤더)를 모바일에서만 보이도록 추가했습니다.
데스크탑에서는 기존 헤더를 유지하게 했습니다.

import AuthHeader from "@/components/layout/AuthHeader";
import Header from "@/components/layout/Header";
import { headers } from "next/headers";

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  const pathname = headers().get("next-url") || "";
  const isAuthPage = pathname.startsWith("/sign-in") || pathname.startsWith("/sign-up");

  return (
    <>
      <div className="md:hidden">
        <AuthHeader />
      </div>
      <div className="hidden md:block">
        <Header />
      </div>
      <main>{children}</main>
    </>
  );
}

최종 결과

모바일에서는 AuthHeader.tsx(흰색 헤더)만 적용하였습니다.
데스크탑에서는 기존 Header.tsx(검정 헤더) 유지됩니다.
auth 페이지에서만 기존 헤더를 제외하도록 RootLayout.tsx 수정 완료하였습니다.

저작자표시 변경금지 (새창열림)

'sparta > Trouble Shooting' 카테고리의 다른 글

[NEXT]최종프로젝트 트러블슈팅(3) - 로그인 및 상태 관리 문제 해결 (0)	2025.02.11
[NEXT]최종프로젝트 트러블슈팅(1) - Redirect URI와 OAuth 토큰 유출 문제 해결 (0)	2025.01.09
[NEXT]React 심화 Intro : 실무와 가까운 수준의 프로젝트 - Trouble Shooting (0)	2024.12.29
[NEXT]CH 5 주특기 플러스주차 과제-Riot API를 활용한 리그 오브 레전드 정보 앱 만들기 - Trouble Shooting (0)	2024.12.17
[REACT]Q. 트러블 슈팅은 어떻게 하나요? (0)	2024.11.28

FE_hansol

[NEXT]최종프로젝트 트러블슈팅(2) - 미디어쿼리

🐞 Trouble Shooting

미디어쿼리 적용이 의도대로 작동하지 않음

문제 정의

해결 과정

최종 결과

'sparta > Trouble Shooting' 카테고리의 다른 글

티스토리툴바

[NEXT]최종프로젝트 트러블슈팅(2) - 미디어쿼리

🐞 Trouble Shooting

미디어쿼리 적용이 의도대로 작동하지 않음

문제 정의

해결 과정

최종 결과

'sparta > Trouble Shooting' 카테고리의 다른 글

'sparta/Trouble Shooting' Related Articles

티스토리툴바