개발자

react 모바일웹 헤더가 Safari 상단 url 바 가림 현상

2024년 10월 30일•조회 69

React / typescript / tailwindcss 헤더를 fixed / sticky로 고정을 해서 크롬에서는 잘 적용됬는데 아이폰 safari 브라우저에서 설정 - 단일탭으로 하고 들어가면 첨부파일처럼 상단 URL 바를 제 헤더가 가려버리는 현상이 나옵니다. index.html에 아래 속성도 추가된 상태입니다ㅠㅠ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> 저와 비슷한 현상인 분 계실까요??

1import { SlArrowLeft } from 'react-icons/sl';
2import { useLocation, useNavigate } from 'react-router-dom';
3import { useHeaderStore } from '../../../stores/common/useheaderStore'; // 상태 가져오기
4import { useNavigationStore } from '../../../stores/common/useNavigationStore';
5import { useEffect } from 'react';
6
7export default function Header() {
8  const navigate = useNavigate();
9  const location = useLocation();
10
11  /** 페이지 기록 상태 */
12  const { previousPath, setPreviousPath } = useNavigationStore();
13
14  /** 타이틀 상태 */
15  const { title, rightContent } = useHeaderStore();
16
17  /** @todo 뒤로가기 기능 개선 필요 */
18  const handleBackClick = () => {
19    if (previousPath && previousPath !== location.pathname) {
20      navigate(previousPath); // 이전 경로로 이동
21    } else {
22      navigate(-1); // 기본 브라우저 히스토리로 이동
23    }
24  };
25
26  // 현재 경로를 zustand에 저장
27  useEffect(() => {
28    if (previousPath !== location.pathname) {
29      setPreviousPath(location.pathname);
30    }
31  }, [location.pathname, previousPath, setPreviousPath]);
32
33  return (
34    <header
35      className="sticky top-0 z-50 mx-auto flex max-w-lg items-center border-b border-b-line bg-line p-4"
36      style={{ paddingTop: 'calc(16px + env(safe-area-inset-top))', minHeight: '60px' }}
37    >
38      <button onClick={handleBackClick} className="text-xl font-bold">
39        <SlArrowLeft />
40      </button>
41      <h1 className="flex-grow text-center text-lg font-semibold">{title}</h1>
42      {/* 상태에 따라 오른쪽 콘텐츠 렌더링 */}
43      {rightContent && <div className="ml-auto">{rightContent}</div>}
44    </header>
45  );
46}

frontend

react

tailwindcss

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

익명님의 질문

답변 0

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

이미 회원이신가요?

AI 답변

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 10월 30일

이 문제는 Safari의 "상단 주소 표시줄"이 스크롤 시에 사라지고 다시 나타나는 동작으로 인한 것으로 보입니다. 이 동작은 웹사이트에 추가적인 화면 공간을 제공하려는 목적으로 설계되었지만, fixed 또는 sticky position 요소에 문제를 일으킬 수 있습니다. env(safe-area-inset-top)를 사용한 접근 방식은 일반적으로 적절합니다. 그러나 iOS Safari에서 이 값은 URL 바가 표시되거나 숨겨질 때 업데이트 되지 않기 때문에 문제가 발생할 수 있습니다. 다음과 같이 해결 방법을 시도해보실 수 있습니다: 1) 방금 언급했듯이, viewport 크기가 변화하는 경우 env() 값이 업데이트되지 않습니다. 그래서 JavaScript를 사용하여 window.innerHeight 값을 실시간으로 모니터링 하고, 이 값을 CSS로 전달하여 flexbox 레이아웃 또는 calc() 함수에서 사용할 수 있도록 합니다. 2) 웹사이트의 스크롤을 body가 아닌 별도의 div 내에서 처리하게 설계합니다. 이 방식은 주소 표시줄의 show/hide 동작을 방지하므로 이 문제를 완전히 피할 수 있습니다. 하지만 이는 사이트 설계에 많은 변화를 가져올 수 있으므로 주의가 필요합니다. 3) 라이브러리를 사용하여 문제를 해결하는 방법도 있습니다. 예를 들어, "react-use" 라이브러리의 useWindowSize hook을 사용하여 viewport 크기를 감지하고, 이 값을 헤더 높이에 따라 동적으로 조정할 수 있습니다.

목록으로