Merge pull request #107 from Devminjeong-eum/fix/DEV-162

[DEV-162] 단어장 페이지 QA 사항 반영

Author: ono212

src/components/pages/wordbook/QuizBanner.tsx

@@ -7,11 +7,11 @@ export default function QuizBanner() {
       href={QUIZ_PATH}
       className="w-10/12 h-24 rounded-2xl bg-[#242C4B] flex gap-6 items-center justify-center"
     >
-      <div className="flex flex-col gap-2">
-        <span className="text-white opacity-70 font-medium text-sm">
+      <div className="flex flex-col gap-2 h-full">
+        <span className="text-white opacity-70 font-medium text-sm flex items-end h-full">
           퀴즈 풀고 내 점수 알아보자!
         </span>
-        <span className="text-white font-semibold text-lg">
+        <span className="text-white font-semibold text-lg flex items-start h-full">
           나의 개발 용어 발음 실력은?
         </span>
       </div>

src/components/pages/wordbook/index.tsx

@@ -27,16 +27,16 @@ export default function Wordbook() {
   const { data: wordData, totalCount } = data.data.data;
 
   return (
-    <div>
+    <div className="bg-[#FBFCFE]">
       <div className="bg-wordbook-gradient h-32">
         <WordbookHeader />
       </div>
-      <div className="flex flex-col justify-between">
-        <div className="relative bottom-16 flex flex-col">
+      <div className="flex flex-col justify-between mt-[-4rem]">
+        <div className="flex flex-col">
           <div className="flex">
             <div className="w-[calc(46%+30px)] h-9 overflow-hidden rounded-tl-xl relative top-px">
               <div className="bg-[#FBFCFE] [transform:rotateY(180deg)_skew(-30deg)_translate(30px,0px)] h-full rounded-tl-md flex justify-center items-center">
-                <div className="[transform:rotateY(180deg)_skew(-30deg)_translate(-40px,0px)] pl-2.5 text-[#313140] font-medium text-[15px] leading-[18px] tracking-[-0.02em] opacity-90">
+                <div className="[transform:rotateY(180deg)_skew(-30deg)_translate(-40px,0px)] pl-2.5 pt-0.5 text-[#313140] font-medium text-[15px] leading-[18px] tracking-[-0.02em] opacity-90">
                   총 {totalCount}개
                 </div>
               </div>
@@ -47,7 +47,7 @@ export default function Wordbook() {
             />
           </div>
           {totalCount === 0 ? (
-            <div className="bg-[#FBFCFE] h-[calc(100vh-23rem)] flex flex-col justify-center items-center gap-2.5">
+            <div className="bg-[#FBFCFE] flex flex-col items-center gap-2.5 pt-[8.438rem] pb-[8.125rem]">
               <NoWordSvg />
               <span className="text-[#A8AEBC] font-medium text-center tracking-[-0.02em]">
                 좋아요를 누른 단어가 없어요.
@@ -72,7 +72,7 @@ export default function Wordbook() {
             </div>
           )}
         </div>
-        <div className="flex flex-col items-center gap-8 relative top-[-2rem]">
+        <div className="flex flex-col items-center gap-5 bg-[#FBFCFE] pb-7">
           {totalCount === 0 ? (
             <Link
               href={WORD_LIST_PATH}
@@ -81,13 +81,15 @@ export default function Wordbook() {
               <p className="text-[#383697] font-semibold">단어 검색하러 가기</p>
             </Link>
           ) : (
-            <Pagination
-              viewPaginationNums={4}
-              total={totalCount || 0}
-              limit={10}
-              setCurrent={setCurrentPage}
-              current={currentPage}
-            />
+            <div className="flex items-center justify-center w-10/12 h-14">
+              <Pagination
+                viewPaginationNums={4}
+                total={totalCount || 0}
+                limit={10}
+                setCurrent={setCurrentPage}
+                current={currentPage}
+              />
+            </div>
           )}
           <QuizBanner />
         </div>