seojaechek · fullkeem · Jan 27, 2025 · Jan 25, 2025 · Jan 25, 2025 · Jan 25, 2025
diff --git a/public/Logo.png b/public/Logo.png
diff --git a/public/icons/Books.png b/public/icons/Books.png
diff --git a/public/logo.png b/public/logo.png
diff --git a/src/app/components/Dropdown.tsx b/src/app/components/Dropdown.tsx
@@ -78,12 +78,14 @@ export default function Dropdown({
       </select>
       <div className="flex w-full items-center justify-between gap-2">
         <button
+          type="button"
           onClick={handleConfirm}
           className="w-full rounded bg-font-textPrimary px-2 py-1 text-sm text-brown-1"
         >
           추가
         </button>
         <button
+          type="button"
           className="w-full rounded bg-gray-300 px-2 py-1 text-sm text-black"
           onClick={() => setOpenDropdownId(null)}
         >

diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
@@ -1,40 +1,45 @@
 "use client";
+
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 
-import Logo from "/public/logo.png";
+import Logo from "/public/Logo.png";
 import BookIcon from "/public/icons/Books.png";
+
 import { useSearchStore } from "@/stores/searchStore";
+import SearchBar from "./SearchBar";
 
 export default function Navbar() {
   const router = useRouter();
   const { resetSearchState } = useSearchStore();
 
   return (
-    <div className="flex h-[100px] w-full items-center justify-between bg-navbar">
+    <div className="flex w-full items-center justify-between border-b-2 border-borderColor bg-navbar p-4">
       <Image
         className="cursor-pointer"
         src={Logo}
-        sizes="100"
-        priority={true}
         alt="Logo"
+        width={75}
+        height={75}
+        priority={true}
+        style={{ width: 75, height: 75 }}
         onClick={() => {
           resetSearchState();
           router.push("/");
         }}
       />
-      <div className="flex w-10">
-        <Image
-          className="cursor-pointer"
-          src={BookIcon}
-          sizes="28"
-          alt="books"
-          onClick={() => {
-            resetSearchState();
-            router.push("/bookshelf");
-          }}
-        />
-      </div>
+      <SearchBar />
+      <Image
+        className="cursor-pointer"
+        src={BookIcon}
+        width={45}
+        height={45}
+        alt="books"
+        onClick={() => {
+          resetSearchState();
+          router.push("/bookshelf");
+        }}
+      />
     </div>
   );
 }
diff --git a/src/app/components/SearchBar.tsx b/src/app/components/SearchBar.tsx
@@ -7,22 +7,20 @@ import searchBtn from "/public/icons/SearchSearch.svg";
 
 export default function SearchBar() {
   const router = useRouter();
-  const { query, setQuery, currentPage } = useSearchStore();
+  const { query, setQuery } = useSearchStore();
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!query.trim()) return;
-    router.push(
-      `/search?query=${encodeURIComponent(query)}&page=${currentPage}`,
-    );
+    router.push(`/search?query=${encodeURIComponent(query)}&page=1`);
   };
   return (
     <form
       role="search"
       aria-label="도서 검색"
       onSubmit={handleSubmit}
-      className="mb-14 flex w-5/12 min-w-72 rounded-lg bg-white px-4 py-5 shadow-sm"
+      className="flex w-2/5 min-w-72 rounded-lg bg-white p-4 shadow-md"
     >
       <label htmlFor="searchInput" className="sr-only">
         검색

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,7 +5,7 @@ import localFont from "next/font/local";
 import Navbar from "./components/Navbar";
 
 export const metadata: Metadata = {
-  title: "서재췍",
+  title: "서재췤",
   description: "내가 읽은 책을 관리하는 페이지",
 };
 
@@ -24,7 +24,7 @@ export default function RootLayout({
   return (
     <html lang="ko">
       <body className={`${myFont.className} bg-neutral-100`}>
-        <div id="global-modal"></div>
+        <div id="global-modal" />
         <Navbar />
         <ReactQueryClientProvider>{children}</ReactQueryClientProvider>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,7 +2,6 @@ import { todayTopic } from "@/libs/apis/todayTopic";
 import { todayAuthors } from "../libs/apis/todayAuthors";
 import topics from "@/data/topics";
 import authors from "@/data/authors";
-import SearchBar from "./components/SearchBar";
 import Carousel from "./components/home/Carousel";
 import GetRevalidationTime from "@/libs/isr/GetRevalidationTime";
 
@@ -16,8 +15,7 @@ export default async function Home() {
   };
 
   return (
-    <main className="mt-[121px] flex w-full flex-col items-center gap-4">
-      <SearchBar />
+    <main className="mt-20 flex w-full flex-col items-center gap-4">
       <div className="flex w-2/3 flex-col gap-4 px-5 py-3">
         <div className="flex items-center gap-7">
           <h1 className="text-2xl font-bold">오늘의 주제</h1>

diff --git a/src/app/search/_components/Pagination.tsx b/src/app/search/_components/Pagination.tsx
@@ -14,7 +14,7 @@ interface PaginationProps {
 
 export default function Pagination({ meta, currentPageNum }: PaginationProps) {
   const router = useRouter();
-  const { query, setOpenDropdownId, setCurrentPage } = useSearchStore();
+  const { query, setOpenDropdownId } = useSearchStore();
 
   const size = 15;
   const totalCount = meta.pageable_count;
@@ -37,7 +37,6 @@ export default function Pagination({ meta, currentPageNum }: PaginationProps) {
 
   const handlePageChange = (page: number) => {
     setOpenDropdownId(null);
-    setCurrentPage(page);
 
     router.push(`/search?query=${encodeURIComponent(query)}&page=${page}`);
 

diff --git a/src/app/search/_components/SortSelect.tsx b/src/app/search/_components/SortSelect.tsx
@@ -15,22 +15,36 @@ export default function SortSearch({ query, page, sort }: SortProps) {
   const currentQuery = query ?? "";
   const currentPage = page ?? 1;
 
-  const handleSortChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const newSort = e.target.value;
+  const sortOption = [
+    { value: "accuracy", label: "정확도순" },
+    { value: "latest", label: "발간일순" },
+  ];
 
+  const handleSortChange = (newSort: string) => {
     router.push(
       `/search?query=${encodeURIComponent(currentQuery)}&page=${currentPage}&sort=${newSort}`,
     );
   };
 
   return (
-    <select
-      value={currentSort}
-      onChange={handleSortChange}
-      className="mb-3 rounded border border-borderColor p-2"
-    >
-      <option value="accuracy">정확도순</option>
-      <option value="latest">발간일순</option>
-    </select>
+    <div className="my-1 flex">
+      {sortOption.map((option, index) => (
+        <div key={option.value} className="flex items-center">
+          <button
+            onClick={() => handleSortChange(option.value)}
+            className={`py-1 ${
+              currentSort === option.value
+                ? "text-font-textPrimary"
+                : "text-font-textSecondary"
+            }`}
+          >
+            {option.label}
+          </button>
+          {index < sortOption.length - 1 && (
+            <div className="mx-2 h-4 w-[1px] bg-borderColor"></div>
+          )}
+        </div>
+      ))}
+    </div>
   );
 }
diff --git a/src/app/search/_components/presentation/SearchResult.tsx b/src/app/search/_components/presentation/SearchResult.tsx
@@ -31,7 +31,7 @@ export default function SearchResult({
       <ul className="flex flex-col items-center gap-5">
         {allDocs.map((book) => {
           return (
-            <li key={book.isbn} className="searchList">
+            <li key={book.isbn.split(" ")[1]} className="searchList">
               <article className="relative flex justify-center">
                 <picture className="flexCenter relative mx-8 my-3 h-60 w-36 self-center shadow-md">
                   <Image
@@ -46,9 +46,10 @@ export default function SearchResult({
 
                 <div className="my-4 ml-8 mr-14 flex w-8/12 flex-col justify-between gap-2">
                   <div className="flex flex-col gap-2">
-                    <h2 className="font-styled text-2xl font-extrabold text-font-textPrimary">
+                    <h2 className="text-2xl font-black text-font-textPrimary">
                       {book.title}
                     </h2>
+
                     <p className="line-clamp-4 text-sm font-medium text-font-textSecondary">
                       {book.contents}
                     </p>
@@ -59,6 +60,7 @@ export default function SearchResult({
                       <dt className="searchDetail">작가</dt>
                       <dd className="font-semibold">{book.authors}</dd>
                     </div>
+
                     {book.translators && book.translators.length > 0 ? (
                       <div className="flex">
                         <dt className="searchDetail">번역</dt>
@@ -78,12 +80,14 @@ export default function SearchResult({
                       </dd>
                     </div>
 
-                    <div className="flex">
-                      <dt className="searchDetail">ISBN-10</dt>
-                      <dd className="font-semibold">
-                        {book.isbn.split(" ")[0]}
-                      </dd>
-                    </div>
+                    {book.isbn.split(" ")[0] && (
+                      <div className="flex">
+                        <dt className="searchDetail">ISBN-10</dt>
+                        <dd className="font-semibold">
+                          {book.isbn.split(" ")[0]}
+                        </dd>
+                      </div>
+                    )}
 
                     <div className="flex">
                       <dt className="searchDetail">ISBN-13</dt>

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -1,5 +1,4 @@
 import { BookResponse } from "@/types/common";
-import SearchBar from "../components/SearchBar";
 import { getBookSearch } from "@/libs/apis/searchApi";
 import SearchResultContainer from "./_components/container/SearchResultContainer";
 
@@ -18,9 +17,7 @@ export default async function Search({ searchParams }: SearchProps) {
   const searchData: BookResponse = await getBookSearch(query, page, 15, sort);
 
   return (
-    <section className="flexCenter relative mb-10 mt-20 flex-col font-main">
-      <SearchBar />
-
+    <section className="flexCenter relative mb-10 mt-10 flex-col font-main">
       <SearchResultContainer
         query={query}
         page={page}

diff --git a/src/stores/searchStore.ts b/src/stores/searchStore.ts
@@ -3,13 +3,11 @@ import { persist } from "zustand/middleware";
 
 interface State {
   query: string;
-  currentPage: number;
   openDropdownId: string | null;
 }
 
 interface Action {
   setQuery: (query: string) => void;
-  setCurrentPage: (page: number) => void;
   setOpenDropdownId: (id: string | null) => void;
 
   resetSearchState: () => void;
@@ -24,13 +22,9 @@ export const useSearchStore = create<State & Action>()(
       openDropdownId: null,
       setOpenDropdownId: (id) => set({ openDropdownId: id }),
 
-      currentPage: 1,
-      setCurrentPage: (page) => set({ currentPage: page }),
-
       resetSearchState: () =>
         set({
           query: "",
-          currentPage: 1,
           openDropdownId: null,
         }),
     }),