[#685] [fix] iOS PWA 환경에서의 status bar 스타일 추가 (#687)

* fix: apple web app status bar style 태그 추가

* fix: statusBarStyle을 default로 수정 및 capable를 true로 명시

* fix: manifest와 metadata에서 theme, background color 제거

* fix: capable, statusBarStyle 속성 추가 및 layout 상단 패딩에 safeArea 추가

* fix: statusBarStyle을 black-translucent로 수정

* fix: RootLayout 패딩 값 수정

* feat: TopHeader safeArea값 추가 및 className props 추가

* feat: TopNavigation safeArea값 추가

* fix: TopHeader 수정 이후 애니메이션이 정상작동 하도록 수정

* feat: manifest에 themeColor, backgroundColor 추가

* fix: TopHeader에 누락된 safeArea 추가

* feat: useIsScrollAtTop 커스텀 훅 작성

* feat: TopHeader에 blur 스타일 및 props 추가

* refactor: 각 페이지에 변경된 TopHeader 적용

* chore: metadata에 themeColor 다시 추가

* fix: PWA환경에서의 도서검색 페이지 input position 수정

* fix: 도서 검색 페이지 safeArea 수정

* fix: 도서 검색 페이지 translate값 수정

* refactor: TopHeader 컴포넌트의 text props의존성을 제거

* fix: 각 페이지의 리팩토링 된 TopHeader 적용

* fix: PWA환경에서 상단 노치부분에 컨탠츠가 노출되던 현상 수정

* fix: body 스크롤 시 컨탠츠가 좁은 틈새로 보이는 버그 수정

* fix: PWA환경에서 Login 페이지의 로그인 섹션이 비정상적인 위치에 있던 버그 수정

* fix: TopHeader 스토리북에 appLayoutMeta 적용

* feat: 도서 검색 페이지에 누락된 TopHeader blur 추가

Author: harryk-im

src/app/book/search/page.tsx

@@ -14,6 +14,7 @@ import bookAPI from '@/apis/book';
 import SSRSafeSuspense from '@/components/common/SSRSafeSuspense';
 import useDebounceValue from '@/hooks/useDebounce';
 import useQueryParams from '@/hooks/useQueryParams';
+import useIsScrollAtTop from '@/hooks/useIsScrollAtTop';
 import { checkAuthentication } from '@/utils/helpers';
 
 import Loading from '@/components/common/Loading';
@@ -46,6 +47,8 @@ const BookSearchPage = () => {
   const watchedKeyword = watch('searchValue');
   const debouncedKeyword = useDebounceValue(watchedKeyword, 1000);
 
+  const { isScrollAtTop } = useIsScrollAtTop();
+
   /* debounce된 keyword값에 따라 queryParameter를 수정하는 useEffect */
   useEffect(() => {
     const queryValue = getQueryParam(KEYWORD);
@@ -57,24 +60,29 @@ const BookSearchPage = () => {
     }
   }, [debouncedKeyword, getQueryParam, setQueryParams, removeQueryParam]);
 
-  /* TopHeader가 사라졌을 때 input의 위치 top: 5.8rem */
-  const inputPositionClasses = watchedKeyword && 'sticky top-[5.8rem]';
+  /* TopHeader가 사라졌을 때 input의 위치 top: topSafeArea + 6.15rem */
+  const inputPositionClasses =
+    watchedKeyword && 'sticky top-[calc(env(safe-area-inset-top)+6.15rem)]';
+
+  /* 검색어가 입력되었을 때 각 컨테이너의 애니메이션 class */
+  const discoverPageAnimationClasses = `transition duration-500 ${
+    watchedKeyword ? '-translate-y-[6.05rem]' : 'translate-y-0'
+  }`;
+  const headingOpacityClasses = `${
+    watchedKeyword ? 'opacity-0' : 'opacity-100'
+  }`;
 
   return (
     <>
-      <div
-        className={`transition duration-500 ${
-          watchedKeyword
-            ? '-translate-y-[5.8rem] opacity-0'
-            : 'translate-y-0 opacity-100'
-        }`}
-      >
-        <TopHeader text={'Discover'} />
-      </div>
+      <TopHeader blur={!isScrollAtTop} className={discoverPageAnimationClasses}>
+        <h1
+          className={`text-main-900 font-heading-bold ${headingOpacityClasses}`}
+        >
+          Discover
+        </h1>
+      </TopHeader>
       <article
-        className={`flex w-full flex-col gap-[3rem] transition duration-500 ${
-          watchedKeyword ? '-translate-y-[5.8rem]' : 'translate-y-0'
-        }`}
+        className={`flex w-full flex-col gap-[3rem] ${discoverPageAnimationClasses}`}
       >
         <Input
           type="search"

src/app/bookarchive/page.tsx

@@ -9,10 +9,16 @@ import BookArchiveForAuth from '@/components/bookArchive/BookArchiveForAuth';
 import BookArchiveForUnAuth from '@/components/bookArchive/BookArchiveForUnAuth';
 import TopHeader from '@/components/common/TopHeader';
 
+import useIsScrollAtTop from '@/hooks/useIsScrollAtTop';
+
 export default function BookArchivePage() {
+  const { isScrollAtTop } = useIsScrollAtTop();
+
   return (
     <div className="flex w-full flex-col gap-[1rem] pb-[2rem]">
-      <TopHeader text="BookArchive" />
+      <TopHeader blur={!isScrollAtTop}>
+        <h1 className="text-main-900 font-heading-bold">BookArchive</h1>
+      </TopHeader>
       {/* TODO: 스켈레톤 컴포넌트로 교체 */}
       <SSRSafeSuspense fallback={null}>
         <Contents />

src/app/group/page.tsx

@@ -12,6 +12,7 @@ import { useMyProfileId } from '@/queries/user/useMyProfileQuery';
 import useMounted from '@/hooks/useMounted';
 import { checkAuthentication } from '@/utils/helpers';
 import useToast from '@/components/common/Toast/useToast';
+import useIsScrollAtTop from '@/hooks/useIsScrollAtTop';
 
 import FloatingButton from '@/components/common/FloatingButton';
 import Loading from '@/components/common/Loading';
@@ -28,6 +29,7 @@ import CreateGroupBanner from '@/components/bookGroup/banner/CreateGroupBanner';
 const GroupPage = () => {
   const router = useRouter();
   const { show: showToast } = useToast();
+  const { isScrollAtTop } = useIsScrollAtTop();
 
   const isAuthenticated = checkAuthentication();
 
@@ -50,7 +52,9 @@ const GroupPage = () => {
 
   return (
     <>
-      <TopHeader text="Group" />
+      <TopHeader blur={!isScrollAtTop}>
+        <h1 className="text-main-900 font-heading-bold">Group</h1>
+      </TopHeader>
       <div className="flex w-full flex-col gap-[2rem]">
         <SearchGroupInput onClick={handleSearchInputClick} />
         <SSRSafeSuspense fallback={<PageSkeleton />}>

src/app/layout.tsx

@@ -34,7 +34,9 @@ export const metadata: Metadata = {
     { rel: 'icon', url: '/favicon.ico' },
   ],
   appleWebApp: {
+    capable: true,
     title: '다독다독',
+    statusBarStyle: 'black-translucent',
     startupImage: appleSplashScreens,
   },
 };

src/app/login/page.tsx

@@ -27,7 +27,7 @@ const LoginPage = () => {
         </p>
       </article>
 
-      <section className="absolute inset-x-[2rem] bottom-[calc(env(safe-area-inset-bottom)+2rem)] mx-auto flex max-w-[41rem] flex-col justify-center gap-[1rem]">
+      <section className="absolute inset-x-[2rem] bottom-[2rem] mx-auto flex max-w-[41rem] flex-col justify-center gap-[1rem]">
         <LoginLink>
           <Button size="full" colorScheme="kakao">
             <div className="flex w-full items-center justify-center">

src/app/profile/me/page.tsx

@@ -10,6 +10,8 @@ import userKeys from '@/queries/user/key';
 import { deleteAuthSession } from '@/server/session';
 import { deleteCookie } from '@/utils/cookie';
 import { checkAuthentication } from '@/utils/helpers';
+import useIsScrollAtTop from '@/hooks/useIsScrollAtTop';
+
 import { SESSION_COOKIES_KEYS } from '@/constants';
 import { IconArrowRight } from '@public/icons';
 
@@ -30,6 +32,7 @@ const USER_ID = 'me';
 
 const MyProfilePage = () => {
   const isAuthenticated = checkAuthentication();
+
   return (
     <SSRSafeSuspense fallback={<Loading fullpage />}>
       {isAuthenticated ? <MyProfileForAuth /> : <MyProfileForUnAuth />}
@@ -38,9 +41,13 @@ const MyProfilePage = () => {
 };
 
 const MyProfileForUnAuth = () => {
+  const { isScrollAtTop } = useIsScrollAtTop();
+
   return (
     <>
-      <TopHeader text="Profile" />
+      <TopHeader blur={!isScrollAtTop}>
+        <h1 className="text-main-900 font-heading-bold">Profile</h1>
+      </TopHeader>
       <div className="flex flex-col gap-[3rem]">
         <div className="mb-[2rem] flex items-center gap-[1rem]">
           <Avatar size="large" />
@@ -81,6 +88,7 @@ const MyProfileForUnAuth = () => {
 const MyProfileForAuth = () => {
   const queryClient = useQueryClient();
   const router = useRouter();
+  const { isScrollAtTop } = useIsScrollAtTop();
 
   const handleLogoutButtonClick = async () => {
     try {
@@ -95,7 +103,11 @@ const MyProfileForAuth = () => {
 
   return (
     <>
-      <TopHeader text="Profile">
+      <TopHeader
+        className="flex items-center justify-between"
+        blur={!isScrollAtTop}
+      >
+        <h1 className="text-main-900 font-heading-bold">Profile</h1>
         <Menu>
           <Menu.Toggle />
           <Menu.BottomSheetList>

src/components/common/TopHeader.tsx

@@ -1,13 +1,25 @@
 import { PropsWithChildren } from 'react';
 
 type TopHeaderProps = PropsWithChildren<{
-  text: string;
+  blur?: boolean;
+  className?: string;
 }>;
 
-const TopHeader = ({ text, children }: TopHeaderProps) => {
+const DEFAULT_HEADER_CLASSES =
+  'fixed left-0 right-0 top-0 z-30 mx-auto w-full max-w-[43rem] border-0 px-[2rem] pb-[1rem] pt-[calc(env(safe-area-inset-top)+2rem)] transition duration-1000';
+
+const BLUR_HEADER_CLASSES =
+  'border-b-black-100 border-b-[0.01rem] bg-[#FFFFFFBF] backdrop-blur-[1.6rem]';
+
+const TopHeader = ({
+  blur = false,
+  className = '',
+  children,
+}: TopHeaderProps) => {
+  const blurClasses = blur ? BLUR_HEADER_CLASSES : 'bg-white';
+
   return (
-    <header className="flex w-full items-center justify-between pb-[2rem]">
-      <h1 className="text-main-900 font-heading-bold">{text}</h1>
+    <header className={`${DEFAULT_HEADER_CLASSES} ${blurClasses} ${className}`}>
       {children}
     </header>
   );

src/components/common/TopNavigation.tsx

@@ -8,17 +8,17 @@ type ItemProps = TopNavigationProps;
 
 const TopNavigation = ({ children }: TopNavigationProps) => {
   return (
-    <div className="fixed left-0 right-0 top-0 z-50 mx-auto flex h-[2.4rem] w-full max-w-[43rem] items-center justify-center bg-white px-[4rem] py-[2.7rem] font-body1-regular">
+    <header className="fixed left-0 right-0 top-0 z-50 mx-auto flex h-[2.4rem] w-full max-w-[43rem] items-center justify-center bg-white px-[4rem] pb-[2.7rem] pt-[calc(env(safe-area-inset-top)+2.7rem)] font-body1-regular">
       {children}
-    </div>
+    </header>
   );
 };
 
 const LeftItem = ({ children }: ItemProps) => {
   return (
-    <div className="absolute left-[0rem] flex pl-[2rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
+    <nav className="absolute left-[0rem] flex pl-[2rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
       {children}
-    </div>
+    </nav>
   );
 };
 

src/components/layout/Layout.tsx

@@ -15,8 +15,8 @@ const Layout = ({ children }: LayoutProps) => {
   const isRootPath = pathname && rootPaths.includes(pathname);
 
   const dynamicClass = isRootPath
-    ? 'pb-[calc(env(safe-area-inset-bottom)+7rem)] pt-[2rem]'
-    : 'pb-[calc(env(safe-area-inset-bottom)+2rem)] pt-[5.4rem]';
+    ? 'pb-[calc(env(safe-area-inset-bottom)+7rem)] pt-[calc(env(safe-area-inset-top)+7.15rem)]'
+    : 'pb-[calc(env(safe-area-inset-bottom)+2rem)] pt-[calc(env(safe-area-inset-top)+5.4rem)]';
 
   return (
     <>

src/hooks/useIsScrollAtTop.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+const useIsScrollAtTop = () => {
+  const [isScrollAtTop, setIsScrollAtTop] = useState(true);
+
+  const listener = () => {
+    setIsScrollAtTop(window.scrollY === 0);
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', listener);
+    return () => {
+      window.removeEventListener('scroll', listener);
+    };
+  }, []);
+
+  return { isScrollAtTop };
+};
+
+export default useIsScrollAtTop;