Merge branch 'feat/#570' into develop

prgrms-web-devcourse · May 20, 2024 · c3d6218 · c3d6218
2 parents 500e8d6 + c7e2bfc
commit c3d6218
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 11 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/bookGroup/BookGroupNavigation.tsx b/src/v1/bookGroup/BookGroupNavigation.tsx
@@ -245,8 +245,8 @@ const DeleteBookGroupModal = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="leading-loose font-subheading-bold">
-        모임을 정말 삭제할까요?
+      <div className="flex flex-col gap-[0.5rem] leading-loose font-subheading-bold">
+        <p>모임을 정말 삭제할까요?</p>
         <p className="leading-tight text-black-500 font-body2-regular">
           참여 중인 모임원이 있는 경우, 모임을 삭제할 수 없어요.
         </p>

diff --git a/src/v1/comment/CommentList.tsx b/src/v1/comment/CommentList.tsx
@@ -186,8 +186,8 @@ const DeleteCommentModal = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="font-subheading-bold">
-        정말 삭제할까요?
+      <div className="flex flex-col gap-[0.5rem] leading-loose font-subheading-bold">
+        <p>정말 삭제할까요?</p>
         <p className="text-black-500 font-body2-regular">
           한번 삭제하면 되돌릴 수 없어요.
         </p>

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>