피드백 내용 수정 최신화

package.json

@@ -16,6 +16,7 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-hot-toast": "^2.6.0",
+    "zod": "^4.3.6",
     "zustand": "^5.0.10"
   },
   "devDependencies": {
@@ -27,6 +28,7 @@
     "@types/react-dom": "^19",
     "autoprefixer": "^10.4.21",
     "babel-plugin-react-compiler": "1.0.0",
+    "baseline-browser-mapping": "^2.9.19",
     "eslint": "^9",
     "eslint-config-next": "^16.1.6",
     "postcss": "^8.5.6",

src/app/(main)/books/[id]/page.tsx

@@ -3,8 +3,8 @@
 import { useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import SearchBookResult from "@/components/base-ui/Search/search_bookresult";
-import BookStoryCard from "@/components/base-ui/BookStory/bookstory_card";
 import { DUMMY_STORIES } from "@/data/dummyStories";
+import BookStoryCardLarge from "@/components/base-ui/BookStory/bookstory_card_large";
 
 export default function BookDetailPage() {
   const params = useParams();
@@ -23,58 +23,61 @@ export default function BookDetailPage() {
 
   // 관련된 책 이야기들 (더미 데이터에서 필터링)
   const relatedStories = DUMMY_STORIES.filter(
-    (story) => story.bookTitle === bookData.title
+    (story) => story.bookTitle === bookData.title,
   );
 
   return (
-    <div className="max-w-[1040px] mx-auto px-4 py-6 t:px-6 t:py-8">
-      <p className="text-Gray-7 body_1 t:subhead_1 mb-5">
-        도서 선택 <span className="text-primary-2">{bookData.title}</span> 중
-      </p>
+    <div className="mx-auto px-4 py-6 t:px-6 t:py-8">
+      <div className="max-w-[1043px] mx-auto">
+        <p className="text-Gray-7 body_1 t:subhead_1 mb-5">
+          도서 선택 <span className="text-primary-2">{bookData.title}</span> 중
+        </p>
 
-      {/* 선택한 책 카드 */}
-      <div className="mb-14">
-        <SearchBookResult
-          imgUrl={bookData.imgUrl}
-          title={bookData.title}
-          author={bookData.author}
-          detail={bookData.detail}
-          liked={liked}
-          onLikeChange={setLiked}
-          onPencilClick={() => {
-            router.push(`/stories/new?bookId=${bookId}`);
-          }}
-        />
-      </div>
+        {/* 선택한 책 카드 */}
+        <div className="mb-14">
+          <SearchBookResult
+            imgUrl={bookData.imgUrl}
+            title={bookData.title}
+            author={bookData.author}
+            detail={bookData.detail}
+            liked={liked}
+            onLikeChange={setLiked}
+            onPencilClick={() => {
+              router.push(`/stories/new?bookId=${bookId}`);
+            }}
+          />
+        </div>
 
-      {/* 책이야기 */}
-      <div className="mb-5">
-        <h2 className="text-Gray-7 body_1 t:subhead_1">
-          책이야기 <span className="text-primary-2">{relatedStories.length}</span>
-        </h2>
-      </div>
+        {/* 책이야기 */}
+        <div className="mb-5">
+          <h2 className="text-Gray-7 body_1 t:subhead_1">
+            책이야기{" "}
+            <span className="text-primary-2">{relatedStories.length}</span>
+          </h2>
+        </div>
 
-      {/* 책 이야기 카드 */}
-      <div className="grid grid-cols-1 t:grid-cols-2 d:grid-cols-3 gap-3.5 justify-items-center">
-        {relatedStories.map((story) => (
-          <div
-            key={story.id}
-            onClick={() => router.push(`/stories/${story.id}`)}
-            className="cursor-pointer"
-          >
-            <BookStoryCard
-              authorName={story.authorName}
-              createdAt={story.createdAt}
-              viewCount={story.viewCount}
-              coverImgSrc={story.bookImageUrl}
-              title={story.title}
-              content={story.content}
-              likeCount={story.likeCount}
-              commentCount={story.commentCount}
-              subscribeText="구독"
-            />
-          </div>
-        ))}
+        {/* 책 이야기 카드 */}
+        <div className="grid grid-cols-1 t:grid-cols-2 d:grid-cols-3 gap-5 justify-items-center">
+          {relatedStories.map((story) => (
+            <div
+              key={story.id}
+              onClick={() => router.push(`/stories/${story.id}`)}
+              className="cursor-pointer"
+            >
+              <BookStoryCardLarge
+                authorName={story.authorName}
+                createdAt={story.createdAt}
+                viewCount={story.viewCount}
+                coverImgSrc={story.bookImageUrl}
+                title={story.title}
+                content={story.content}
+                likeCount={story.likeCount}
+                commentCount={story.commentCount}
+                subscribeText="구독"
+              />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

src/app/(main)/news/[id]/page.tsx

@@ -1,3 +1,4 @@
+import FloatingFab from "@/components/base-ui/Float";
 import TodayRecommendedBooks from "@/components/base-ui/News/today_recommended_books";
 import Image from "next/image";
 import { notFound } from "next/navigation";
@@ -159,21 +160,10 @@ export default async function NewsDetailPage({ params }: Props) {
       <div className="w-screen -mx-4 my-8 border-b-4 border-Gray-1 mt-25"></div>
       <TodayRecommendedBooks books={DUMMY_BOOKS} className="mt-10" />
 
-      {/* 문의하기 */}
-      <button
-        type="button"
-        className="fixed bottom-[86px] right-6 t:bottom-8 t:right-8 z-[60] cursor-pointer hover:opacity-80 transition-opacity w-12 h-12 t:w-[88px] t:h-[88px]"
-        aria-label="문의하기"
-      >
-        <Image
-          src="/inquiry.svg"
-          alt="문의하기"
-          width={88}
-          height={88}
-          className="w-full h-full"
-          priority
-        />
-      </button>
+      <FloatingFab
+              iconSrc="/icons_calling.svg"
+              iconAlt="문의하기"
+      />
     </>
   );
 }

src/app/(main)/news/page.tsx

@@ -3,6 +3,7 @@
 import Image from "next/image";
 import NewsList from "@/components/base-ui/News/news_list";
 import TodayRecommendedBooks from "@/components/base-ui/News/today_recommended_books";
+import FloatingFab from "@/components/base-ui/Float";
 
 const DUMMY_NEWS = [
   {
@@ -105,21 +106,11 @@ export default function NewsPage() {
       <div className="w-full my-8 border-b-4 border-Gray-1"></div>
 
       <TodayRecommendedBooks books={DUMMY_BOOKS} className="hidden d:flex" />
-      {/* 문의하기 */}
-      <button
-        type="button"
-        className="fixed bottom-21 right-4 t:bottom-8 t:right-8 z-[60] cursor-pointer hover:opacity-80 transition-opacity w-18 h-18 t:w-22 t:h-22"
-        aria-label="문의하기"
-      >
-        <Image
-          src="/inquiry.svg"
-          alt="문의하기"
-          width={88}
-          height={88}
-          className="w-full h-full"
-          priority
-        />
-      </button>
+
+      <FloatingFab
+        iconSrc="/icons_calling.svg"
+        iconAlt="문의하기"
+      />
     </div>
   );
 }