[#570] [도서 검색] 도서 검색 결과 렌더링 시 search 헤더 숨기고 input sticky 적용 (#589)

* feat: Layout.tsx main 엘리먼트의 overflow 속성 제거 * feat: 도서 검색 결과 페이지 Input 컴포넌트 sticky 적용 * feat: Safari 브라우저를 위한 -webkit-sticky 속성 추가 * fix: 모바일 환경에서 입력창 focus시 Auto Zoom되던 현상 제거 * feat: 검색 키워드 입력 시 Header 숨기기 기능 추가 * feat: 검색 결과 페이지에 transition 추가 * chore: 주석 추가 * Merge branch 'main' of https://github.com/prgrms-web-devcourse/Team-Gaerval-Dadok-FE into feat/#570
prgrms-web-devcourse · Jun 17, 2024 · 0ff4ca0 · 0ff4ca0
1 parent 6a054a4
commit 0ff4ca0
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 7 deletions.
diff --git a/src/app/book/search/page.tsx b/src/app/book/search/page.tsx
@@ -39,14 +39,30 @@ const BookSearchPage = () => {
   const watchedKeyword = watch('searchValue');
   const debouncedKeyword = useDebounceValue(watchedKeyword, 1000);
 
+  /* TopHeader가 사라졌을 때 input의 위치 top: 5.8rem */
+  const inputPositionClasses = watchedKeyword && 'sticky top-[5.8rem]';
+
   return (
     <>
-      <TopHeader text={'Discover'} />
-      <article className="flex max-h-[calc(100%-6rem)] w-full flex-col gap-[3rem]">
+      <div
+        className={`transition duration-500 ${
+          watchedKeyword
+            ? '-translate-y-[5.8rem] opacity-0'
+            : 'translate-y-0 opacity-100'
+        }`}
+      >
+        <TopHeader text={'Discover'} />
+      </div>
+      <article
+        className={`flex w-full flex-col gap-[3rem] transition duration-500 ${
+          watchedKeyword ? '-translate-y-[5.8rem]' : 'translate-y-0'
+        }`}
+      >
         <Input
           inputStyle="line"
           leftIconType="search"
           placeholder="책 제목, 작가를 검색해보세요"
+          className={`z-10 bg-white ${inputPositionClasses}`}
           {...register('searchValue')}
         />
 
@@ -64,13 +80,13 @@ const BookSearchPage = () => {
 
         {/** 도서 검색 결과 */}
         {watchedKeyword && (
-          <section className="flex-grow overflow-y-scroll pb-[1rem]">
-            <Suspense fallback={<Loading fullpage />}>
+          <section className="flex-grow pb-[1rem]">
+            <Suspense fallback={<BookSearchLoading />}>
               {watchedKeyword === debouncedKeyword ? (
                 <BookSearchResult queryKeyword={debouncedKeyword} />
               ) : (
                 /* 타이핑 중 debounce가 적용되어 keyword가 업데이트 되지 않는 경우에 Loading 컴포넌트로 대체 */
-                <Loading fullpage />
+                <BookSearchLoading />
               )}
             </Suspense>
           </section>
@@ -144,6 +160,18 @@ const RecentSearchResult = ({
   return <RecentSearchList keywords={keywords} onClick={onItemClick} />;
 };
 
+const BookSearchLoading = () => {
+  return (
+    /**
+     * Loading 컴포넌트가 화면 중앙에 올바르게 표시되도록 height가 존재하는 relative div 요소 추가
+     * 화면이 스크롤 되지 않는 크기: 100dvh - 23.3rem
+     */
+    <div className="relative flex h-[calc(100dvh-23.3rem)]">
+      <Loading fullpage />
+    </div>
+  );
+};
+
 const ContentsSkelton = () => {
   return (
     <>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -9,7 +9,10 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
     <html lang="ko">
       <head>
         <title>다독다독</title>
-        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <meta
+          content="width=device-width, initial-scale=1, maximum-scale=1"
+          name="viewport"
+        />
         <link rel="icon" href="/favicon.ico" />
       </head>
       {/* @todo Chakra 제거시 app-layout 프로퍼티 제거. */}

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -32,6 +32,12 @@
     margin: 0 auto;
   }
 
+  .sticky {
+    /* -webkit-sticky: Safari 브라우저 호환 */
+    position: -webkit-sticky;
+    position: sticky;
+  }
+
   /* DatePicker Calendar 스타일링 */
   input[type='date']::-webkit-calendar-picker-indicator {
     background-image: none;

diff --git a/src/v1/layout/Layout.tsx b/src/v1/layout/Layout.tsx
@@ -21,7 +21,7 @@ const Layout = ({ children }: LayoutProps) => {
   return (
     <>
       <main
-        className={`h-auto min-h-[100dvh] w-full max-w-[43rem] animate-page-transition overflow-auto px-[2rem] ${dynamicClass}`}
+        className={`h-auto min-h-[100dvh] w-full max-w-[43rem] animate-page-transition px-[2rem] ${dynamicClass}`}
       >
         {children}
       </main>