diff --git a/src/asset/css/Tags.css b/src/asset/css/Tags.css
index 0561c8ce..2d7fb64e 100644
--- a/src/asset/css/Tags.css
+++ b/src/asset/css/Tags.css
@@ -13,7 +13,7 @@
   line-height: 3rem;
   font-size: 1.5rem;
   font-weight: bold;
-  padding: 1rem 2rem 1rem 2rem;
+  padding: 1rem 2rem 1rem 1rem;
   text-align: center;
   margin: 1rem;
   border-radius: 10px;
@@ -43,12 +43,18 @@
 }
 
 .button_tag-create-box {
-  position: flex;
   line-height: 4rem;
   font-size: large;
   margin: 1rem;
   background-color: rgba(95, 63, 54, 1);
   color: rgba(255, 255, 255, 0.9);
+  width: 100%;
+}
+
+@media screen and (min-width: 767px) {
+  .button_tag-create-box {
+    width: 50%;
+  }
 }
 
 .button_tag-create-box::placeholder {
@@ -66,7 +72,6 @@
   height: 100%;
   min-height: 12rem;
   overflow: hidden;
-  padding: 1.5rem 1rem;
   margin: 6rem 0rem 0rem 0rem;
   background-color: rgb(232, 232, 232, 0.9);
   border-radius: 1rem;
@@ -83,7 +88,6 @@
   height: 100%;
   min-height: 12rem;
   overflow: hidden;
-  padding: 1.5rem 1rem;
   margin: -1.3rem 0rem 10rem 0rem;
   background-color: rgb(232, 232, 232, 0.9);
   border-radius: 1rem;
@@ -116,7 +120,18 @@
   background-color: rgba(00, 00, 00, 0);
   z-index: 1;
   top: 50%;
-  left: 50%;
+  left: 0;
+}
+
+.button_tag-image-button-disabled {
+  display: flex;
+  cursor: not-allowed;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.tooltip_cursor-message {
+  cursor: "help";
 }
 
 @keyframes rotateImage {
diff --git a/src/component/book/tag/TagList.tsx b/src/component/book/tag/TagList.tsx
index d974dae1..aeaf9a7f 100644
--- a/src/component/book/tag/TagList.tsx
+++ b/src/component/book/tag/TagList.tsx
@@ -1,12 +1,14 @@
 import { useState, useRef, useEffect } from "react";
 import { TagType } from "../../../type/TagType";
 import { useLocation } from "react-router-dom";
-import { AxiosResponse, AxiosError } from "axios";
 import { useApi } from "../../../hook/useApi";
 import Tag from "./Tag";
 import TagModal from "./TagModal";
 import plusicon from "../../../asset/img/tag_plus.svg";
 import Tooltip from "../../utils/Tooltip";
+import { useRecoilValue } from "recoil";
+import { userAtom } from "../../../atom/userAtom";
+import { AxiosError, AxiosResponse } from "axios";
 
 type TagListProps = {
   tagData: TagType[];
@@ -14,6 +16,7 @@ type TagListProps = {
 };
 
 const TagList = ({ tagData, setTagData }: TagListProps) => {
+  const { isLogin } = useRecoilValue(userAtom);
   const inputRef = useRef<HTMLInputElement>(null);
   const location = useLocation();
   const bookId = location.pathname.split("/")[2];
@@ -22,12 +25,25 @@ const TagList = ({ tagData, setTagData }: TagListProps) => {
   const [lastPress, setLastPress] = useState(Date.now());
   const [active, setActive] = useState<boolean>(false);
   const [errorCode, setErrorCode] = useState<number | null>(null);
+  const errorCodeRef = useRef<number | null>(null);
   const [showErrorMassege, setShowErrorMassege] = useState(false);
-  const { request } = useApi("post", `/tags/default`, {
+  const { request } = useApi("post", "tags/default", {
     bookInfoId: +bookId,
     content: createTag.trim().replace(/ /g, "_"),
   });
 
+  useEffect(() => {
+    if (errorCode !== null && errorCode > 0) {
+      errorActive();
+    }
+  }, [errorCode]);
+
+  const onSuccess = (response: AxiosResponse) => {
+    const resTagdata: TagType = response.data;
+    setTagData(prev => [...prev, resTagdata]);
+    resetCreateContent();
+  };
+
   const onError = (error: AxiosError) => {
     setErrorCode(parseInt(error?.response?.data?.errorCode, 10));
     errorActive();
@@ -42,14 +58,11 @@ const TagList = ({ tagData, setTagData }: TagListProps) => {
     setTimeout(() => {
       setShowErrorMassege(false);
     }, 2500);
+    errorCodeRef.current = null;
   };
 
   const postTag = () => {
-    request((res: AxiosResponse) => {
-      const resTagdata: TagType = res.data;
-      setTagData(prev => [...prev, resTagdata]);
-      resetCreateContent();
-    }, onError);
+    request(onSuccess, onError);
   };
 
   const openModalFunc = (tagId: number) => {
@@ -79,15 +92,19 @@ const TagList = ({ tagData, setTagData }: TagListProps) => {
       const now = Date.now();
       if (now - lastPress < 300) return;
       setLastPress(now);
+      if (!isLogin) {
+        setErrorCode(102);
+        errorCodeRef.current = 102;
+      }
       if (createTag === "") {
         setErrorCode(1);
+        errorCodeRef.current = 1;
       } else if (createTag.length > 42) {
         setErrorCode(2);
+        errorCodeRef.current = 2;
       }
 
-      if (errorCode !== null && errorCode > 0) {
-        errorActive();
-      } else {
+      if (errorCodeRef.current === null) {
         postTag();
       }
       if (inputRef.current !== null) {
@@ -97,7 +114,10 @@ const TagList = ({ tagData, setTagData }: TagListProps) => {
   };
 
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (errorCode !== null) setErrorCode(null);
+    if (errorCode !== null) {
+      setErrorCode(null);
+      errorCodeRef.current = null;
+    }
     setCreateTag(event.target.value);
   };
 
@@ -167,14 +187,15 @@ const TagList = ({ tagData, setTagData }: TagListProps) => {
             onKeyUp={handleKeyPress}
           />
 
-          <Tooltip description="태그 등록">
+          <Tooltip
+            className={`${isLogin ? "" : "button_tag-image-button-disabled"}`}
+            description="태그 등록"
+          >
             <img
               className="button_tag-image-button"
               src={plusicon}
               alt="plus"
-              onClick={() => {
-                onClickCreateButton();
-              }}
+              onClick={onClickCreateButton}
             />
           </Tooltip>
         </button>
diff --git a/src/component/rent/RentModalBooks.tsx b/src/component/rent/RentModalBooks.tsx
new file mode 100644
index 00000000..d28cb7ba
--- /dev/null
+++ b/src/component/rent/RentModalBooks.tsx
@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import { Book } from "../../type";
+import BookInformationWithCover from "../utils/BookInformationWithCover";
+import TextWithLabel from "../utils/TextWithLabel";
+import TextareaWithLabel from "../utils/TextareaWithLabel";
+
+interface RentModalBooksProps {
+  selectedBooks: Book[];
+  handleRemarkChange: (index: number, value: string) => void;
+  remarksRef: React.MutableRefObject<string[]>;
+}
+
+const RentModalBooks = ({ selectedBooks, handleRemarkChange, remarksRef }: RentModalBooksProps) => {
+  return (
+    <div className="rent-modal__books">
+      {selectedBooks.map((selectBook, index) => (
+        <div
+          key={selectBook.bookId}
+          className={`rent-modal__book-info ${index}`}
+        >
+          <BookInformationWithCover
+            bookCoverAlt={selectBook.title}
+            bookCoverImg={selectBook.image}
+          >
+            <TextWithLabel
+              wrapperClassName="rent-modal__book"
+              topLabelText="도서정보"
+              mainText={selectBook.title}
+              bottomLabelText={`청구기호 : ${selectBook.callSign}`}
+            />
+            <TextareaWithLabel
+              wrapperClassName="rent-modal__remark"
+              topLabelText="비고"
+              textareaPlaceHolder="비고를 입력해주세요. (책 상태 등)"
+              setTextareaValue={(value: string) => handleRemarkChange(index, value)}
+              isTextareaFocusedOnMount={index === 0}
+              isVisibleBottomMessage={!remarksRef.current[index]?.length}
+              bottomMessageText="비고를 입력해주세요"
+              bottomMessageColor="red"
+            />
+          </BookInformationWithCover>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default memo(RentModalBooks); 
\ No newline at end of file
diff --git a/src/component/rent/RentModalConfirm.tsx b/src/component/rent/RentModalConfirm.tsx
index c9ce7296..065a9928 100644
--- a/src/component/rent/RentModalConfirm.tsx
+++ b/src/component/rent/RentModalConfirm.tsx
@@ -1,12 +1,10 @@
-import { FormEventHandler, useState } from "react";
+import { FormEventHandler, useCallback, useState, useRef } from "react";
 import Button from "../utils/Button";
-import BookInformationWithCover from "../utils/BookInformationWithCover";
-import TextWithLabel from "../utils/TextWithLabel";
-import TextareaWithLabel from "../utils/TextareaWithLabel";
 import { usePostLendingsMultiple } from "../../api/lendings/usePostLendingsMultiple";
 import { Book, User } from "../../type";
 import "../../asset/css/RentModalConfirm.css";
 import { userRoleStatusEnum } from "~/constant/status";
+import RentModalBooks from "./RentModalBooks";
 
 type Props = {
   selectedUser: User;
@@ -23,7 +21,8 @@ const RentModalConfirm = ({
   setSelectedBooks,
   closeModal,
 }: Props) => {
-  const [remarks, setRemarks] = useState<string[]>([]);
+  const remarksRef = useRef<string[]>([]);
+  const [isRentable, setIsRentable] = useState(false);
 
   const { requestLending } = usePostLendingsMultiple({
     selectedBooks,
@@ -35,20 +34,19 @@ const RentModalConfirm = ({
 
   const postData: FormEventHandler = e => {
     e.preventDefault();
-    requestLending(remarks);
-  };
-
-  const isRentable =
-    selectedBooks.length > 1
-      ? remarks.slice(0, selectedBooks.length).every(remark => remark.length > 0)
-      : remarks[0]?.length > 0;
-
-  const handleRemarkChange = (index: number, value: string) => {
-    const updatedRemarks = [...remarks];
-    updatedRemarks[index] = value;
-    setRemarks(updatedRemarks);
+    requestLending(remarksRef.current);
   };
 
+  const handleRemarkChange = useCallback((index: number, value: string) => {
+    remarksRef.current = [...remarksRef.current];
+    remarksRef.current[index] = value;
+    
+    const newIsRentable = selectedBooks.length > 1
+      ? remarksRef.current.slice(0, selectedBooks.length).every(remark => remark?.length > 0)
+      : remarksRef.current[0]?.length > 0;
+    setIsRentable(newIsRentable);
+  }, [selectedBooks.length]);
+  
   return (
     <form className="rent-modal">
       <div className="rent-modal__user">
@@ -64,41 +62,11 @@ const RentModalConfirm = ({
           </div>
         )}
       </div>
-      <div className="rent-modal__books">
-        {selectedBooks.map((selectBook, index) => {
-          const isFirst = index === 0;
-
-          return (
-            <div
-              key={selectBook.bookId}
-              className={`rent-modal__book-info ${index}`}
-            >
-              <BookInformationWithCover
-                bookCoverAlt={selectBook.title}
-                bookCoverImg={selectBook.image}
-              >
-                <TextWithLabel
-                  wrapperClassName="rent-modal__book"
-                  topLabelText="도서정보"
-                  mainText={selectBook.title}
-                  bottomLabelText={`청구기호 : ${selectBook.callSign}`}
-                />
-                <TextareaWithLabel
-                  wrapperClassName="rent-modal__remark"
-                  topLabelText="비고"
-                  textareaPlaceHolder="비고를 입력해주세요. (책 상태 등)"
-                  textareaValue={remarks[index]}
-                  setTextareaValue={(value: string) => handleRemarkChange(index, value)}
-                  isTextareaFocusedOnMount={index === 0}
-                  isVisibleBottomMessage={!remarks[index]?.length}
-                  bottomMessageText="비고를 입력해주세요"
-                  bottomMessageColor="red"
-                />
-              </BookInformationWithCover>
-            </div>
-          );
-        })}
-      </div>
+      <RentModalBooks 
+        selectedBooks={selectedBooks}
+        handleRemarkChange={handleRemarkChange}
+        remarksRef={remarksRef}
+      />
       <div className="rent-modal__buttons">
         <Button
           type="submit"
diff --git a/src/component/reservedloan/ReservedModalContents.tsx b/src/component/reservedloan/ReservedModalContents.tsx
index 68991181..22cbb01d 100644
--- a/src/component/reservedloan/ReservedModalContents.tsx
+++ b/src/component/reservedloan/ReservedModalContents.tsx
@@ -1,4 +1,4 @@
-import { FormEventHandler, useState } from "react";
+import { FormEventHandler, useRef, useState } from "react";
 import { usePostLendings } from "../../api/lendings/usePostLendings";
 import { usePatchReservationsCancel } from "../../api/reservations/usePatchReservationsCancel";
 import Button from "../utils/Button";
@@ -16,7 +16,8 @@ type Props = {
 };
 
 const ReservedModalContents = ({ reservedInfo, closeModal }: Props) => {
-  const [remark, setRemark] = useState("");
+  const remarkRef = useRef<string>('');
+  const [isRentable, setIsRentable] = useState(false);
 
   const { setReservationId: cancelReservation } = usePatchReservationsCancel();
 
@@ -27,13 +28,17 @@ const ReservedModalContents = ({ reservedInfo, closeModal }: Props) => {
     closeModal,
   });
 
+  const setTextareaValue = (value: string) => {
+    remarkRef.current = value;
+    setIsRentable(Boolean(isRent && isValidString(value)));
+  };
+
   const postRent: FormEventHandler = e => {
     e.preventDefault();
-    requestLending(remark);
+    requestLending(remarkRef.current || "");
   };
 
   const isRent = !reservedInfo.status && reservedInfo?.endAt;
-  const isRentable = isRent && isValidString(remark);
   const isAvaliableReservation = !reservedInfo.status && !reservedInfo?.endAt;
 
   return (
@@ -67,9 +72,8 @@ const ReservedModalContents = ({ reservedInfo, closeModal }: Props) => {
             wrapperClassName="reserved-modal__remark"
             topLabelText="비고"
             textareaPlaceHolder="비고를 입력해주세요. (책 상태 등)"
-            textareaValue={remark}
-            setTextareaValue={setRemark}
-            isVisibleBottomMessage={!remark.length}
+            setTextareaValue={setTextareaValue}
+            isVisibleBottomMessage={!remarkRef.current}
             bottomMessageText="비고를 입력해주세요"
             bottomMessageColor="red"
           />
diff --git a/src/component/return/ReturnModalContents.tsx b/src/component/return/ReturnModalContents.tsx
index 88b1ba8d..3b5f64e3 100644
--- a/src/component/return/ReturnModalContents.tsx
+++ b/src/component/return/ReturnModalContents.tsx
@@ -5,6 +5,7 @@ import Button from "../utils/Button";
 import "../../asset/css/ReturnModalContents.css";
 import { usePatchLendingsReturn } from "../../api/lendings/usePatchLendingsReturn";
 import { useGetLendingsId } from "../../api/lendings/useGetLendingsId";
+import { useRef, useCallback, useState } from "react";
 
 type Props = {
   lendingId: number;
@@ -13,12 +14,22 @@ type Props = {
 
 const ReturnModalContents = ({ lendingId, closeModal }: Props) => {
   const { lendingData } = useGetLendingsId({ lendingId, closeModal });
+  const [isReturnable, setIsReturnable] = useState(false);
+  const conditionRef = useRef<string>('');
 
-  const { condition, setCondition, requestReturn } = usePatchLendingsReturn({
+  const { requestReturn } = usePatchLendingsReturn({
     lendingId,
     title: lendingData?.title || "",
     closeModal,
   });
+
+  const setCondition = useCallback((value: string) => {
+      conditionRef.current = value;
+      setIsReturnable(conditionRef.current.length > 0);
+    },
+    [],
+  );
+
   if (!lendingData) return null;
 
   return (
@@ -50,18 +61,17 @@ const ReturnModalContents = ({ lendingId, closeModal }: Props) => {
       <TextareaWithLabel
         wrapperClassName="return-modal__remark"
         topLabelText="비고"
-        textareaValue={condition}
         setTextareaValue={setCondition}
         textareaPlaceHolder={`대출당시 : ${lendingData.lendingCondition}`}
-        isVisibleBottomMessage={!condition.length}
+        isVisibleBottomMessage={!conditionRef.current.length}
         bottomMessageText="비고를 입력해주세요"
         bottomMessageColor="red"
       />
       <div className="return-modal__buttons">
         <Button
           value="반납 완료하기"
-          color={condition.length ? "red" : undefined}
-          disabled={!condition.length}
+          color={conditionRef.current.length ? "red" : undefined}
+          disabled={!conditionRef.current.length}
           onClick={requestReturn}
         />
         <Button
diff --git a/src/component/search/BookInfo.tsx b/src/component/search/BookInfo.tsx
index 7ac5b462..82e9676a 100644
--- a/src/component/search/BookInfo.tsx
+++ b/src/component/search/BookInfo.tsx
@@ -1,5 +1,6 @@
 import { Link } from "react-router-dom";
-import { BookInfo } from "../../type";
+import { memo } from "react";
+import type { BookInfo } from "../../type";
 import { splitDate } from "../../util/date";
 import Image from "../utils/Image";
 import LinkToDetail from "../../asset/img/link_to_detail.svg";
@@ -76,4 +77,4 @@ const BookInfo = ({
   );
 };
 
-export default BookInfo;
+export default memo(BookInfo);
diff --git a/src/component/search/CategoryFilter.tsx b/src/component/search/CategoryFilter.tsx
index 419edf5d..2e05c222 100644
--- a/src/component/search/CategoryFilter.tsx
+++ b/src/component/search/CategoryFilter.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, memo } from "react";
 import Image from "../utils/Image";
 import Category from "./Category";
 import ArrLeftGray from "../../asset/img/arrow_left_gray.svg";
@@ -111,4 +111,4 @@ const CategoryFilter = ({ selectedCategory, categoryList }: Props) => {
   );
 };
 
-export default CategoryFilter;
+export default memo(CategoryFilter);
diff --git a/src/component/search/Search.tsx b/src/component/search/Search.tsx
index c7da788f..57333314 100644
--- a/src/component/search/Search.tsx
+++ b/src/component/search/Search.tsx
@@ -1,18 +1,14 @@
-import { useRef, useCallback } from "react";
+import { useRef, useCallback, useEffect, memo } from "react";
 import { useSearchParams } from "react-router-dom";
-import Sort from "./Sort";
-import BookInfo from "./BookInfo";
 import WishBook from "./WishBook";
 import SearchBanner from "./SearchBanner";
-import CategoryFilter from "./CategoryFilter";
-import SubTitle from "../utils/SubTitle";
-import Pagination from "../utils/Pagination";
 import { useParseUrlQueryString } from "../../hook/useParseUrlQueryString";
 import { useDebounce } from "../../hook/useDebounce";
 import { useGetBooksInfoSearchUrl } from "../../api/books/useGetBooksInfoSearchUrl";
 import { searchUrlQueryKeys } from "../../constant/key";
 import "../../asset/css/Books.css";
 import "../../asset/css/Search.css";
+import SearchSection from "./SearchSection";
 
 const Search = () => {
   const myRef = useRef<HTMLDivElement>(null);
@@ -55,49 +51,18 @@ const Search = () => {
   return (
     <main>
       <SearchBanner setQuery={setQuery} />
-      <section className="search-section">
-        <div className="search-subtitle" ref={myRef}>
-          <SubTitle
-            subTitle={
-              query === null || query === ""
-                ? "전체 도서 목록"
-                : `'${query}' 도서 검색 결과`
-            }
-            alignItems="start"
-            description=""
-          />
-        </div>
-        <CategoryFilter
-          selectedCategory={categoryIndex}
-          categoryList={categoryList}
-        />
-        <div className="search-sort">
-          <Sort sort={sort || "title"} setSort={setSort} />
-        </div>
-        <section className="books">
-          {bookList.map(items => (
-            <BookInfo
-              key={items.id}
-              id={items.id}
-              isbn={items.isbn}
-              title={items.title}
-              author={items.author}
-              publisher={items.publisher}
-              image={items.image}
-              publishedAt={items.publishedAt}
-              category={items.category}
-              bread="검색"
-            />
-          ))}
-        </section>
-        <Pagination
-          lastPage={lastPage}
-          page={parseInt(page, 10) || 1}
-          setPage={setPage}
-          isReplaceUrl
-          scrollRef={myRef}
-        />
-      </section>
+      <SearchSection
+        query={query}
+        categoryIndex={categoryIndex}
+        categoryList={categoryList}
+        sort={sort || "title"}
+        setSort={setSort}
+        bookList={bookList}
+        lastPage={lastPage}
+        page={page}
+        setPage={setPage}
+        myRef={myRef}
+      />
       <section className="wish-book-wraper">
         <WishBook />
       </section>
@@ -105,4 +70,4 @@ const Search = () => {
   );
 };
 
-export default Search;
+export default memo(Search);
diff --git a/src/component/search/SearchBanner.tsx b/src/component/search/SearchBanner.tsx
index e5b7399b..79cad1a0 100644
--- a/src/component/search/SearchBanner.tsx
+++ b/src/component/search/SearchBanner.tsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import BookSearchBar from "../utils/BookSearchBar";
 import "../../asset/css/Banner.css";
 import "../../asset/css/SearchBanner.css";
@@ -24,4 +25,4 @@ const SearchBanner = ({ setQuery }: Props) => {
   );
 };
 
-export default SearchBanner;
+export default memo(SearchBanner);
diff --git a/src/component/search/SearchSection.tsx b/src/component/search/SearchSection.tsx
new file mode 100644
index 00000000..d77398de
--- /dev/null
+++ b/src/component/search/SearchSection.tsx
@@ -0,0 +1,80 @@
+import { memo } from "react";
+import Sort from "./Sort";
+import BookInfo from "./BookInfo";
+import CategoryFilter from "./CategoryFilter";
+import SubTitle from "../utils/SubTitle";
+import Pagination from "../utils/Pagination";
+
+interface SearchSectionProps {
+  query: string | null;
+  categoryIndex: number;
+  categoryList: { name: string; count: number }[];
+  sort: string;
+  setSort: (newSort: string) => void;
+  bookList: any[];
+  lastPage: number;
+  page: string;
+  setPage: (newPage: number) => void;
+  myRef: React.RefObject<HTMLDivElement>;
+}
+
+const SearchSection = ({
+  query,
+  categoryIndex,
+  categoryList,
+  sort,
+  setSort,
+  bookList,
+  lastPage,
+  page,
+  setPage,
+  myRef
+}: SearchSectionProps) => {
+  return (
+    <section className="search-section">
+      <div className="search-subtitle" ref={myRef}>
+        <SubTitle
+          subTitle={
+            query === null || query === ""
+              ? "전체 도서 목록"
+              : `'${query}' 도서 검색 결과`
+          }
+          alignItems="start"
+          description=""
+        />
+      </div>
+      <CategoryFilter
+        selectedCategory={categoryIndex}
+        categoryList={categoryList}
+      />
+      <div className="search-sort">
+        <Sort sort={sort || "title"} setSort={setSort} />
+      </div>
+      <section className="books">
+        {bookList.map(items => (
+          <BookInfo
+            key={items.id}
+            id={items.id}
+            isbn={items.isbn}
+            title={items.title}
+            author={items.author}
+            publisher={items.publisher}
+            image={items.image}
+            publishedAt={items.publishedAt}
+            category={items.category}
+            bread="검색"
+          />
+        ))}
+      </section>
+      <Pagination
+        lastPage={lastPage}
+        page={parseInt(page, 10) || 1}
+        setPage={setPage}
+        isReplaceUrl
+        scrollRef={myRef}
+      />
+    </section>
+  );
+};
+
+export default memo(SearchSection); 
\ No newline at end of file
diff --git a/src/component/search/Sort.tsx b/src/component/search/Sort.tsx
index 74914557..e3e801d4 100644
--- a/src/component/search/Sort.tsx
+++ b/src/component/search/Sort.tsx
@@ -16,6 +16,7 @@ const Sort = ({ sort, setSort }: Props) => {
       {sortInfo.map(item => {
         return (
           <button
+            key={item.key}
             type="button"
             onClick={() => setSort(item.key)}
             className={`sort-by__button ${
diff --git a/src/component/search/WishBook.tsx b/src/component/search/WishBook.tsx
index b21c372d..0b4615f8 100644
--- a/src/component/search/WishBook.tsx
+++ b/src/component/search/WishBook.tsx
@@ -1,5 +1,6 @@
 import Image from "../utils/Image";
 import AlretIcon from "../../asset/img/alret_icon.svg";
+import { memo } from "react";
 import "../../asset/css/WishBook.css";
 
 const WishBook = () => {
@@ -28,4 +29,4 @@ const WishBook = () => {
   );
 };
 
-export default WishBook;
+export default memo(WishBook);
diff --git a/src/component/utils/BarcodeReader.tsx b/src/component/utils/BarcodeReader.tsx
index 44e4cad5..54eb776e 100644
--- a/src/component/utils/BarcodeReader.tsx
+++ b/src/component/utils/BarcodeReader.tsx
@@ -1,15 +1,13 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { BrowserMultiFormatReader, Result } from "@zxing/library";
 import "../../asset/css/BarcodeReader.css";
-import { useState, useRef, useEffect, ChangeEventHandler } from "react";
-import { BrowserMultiFormatReader, Result, BrowserQRCodeReader } from "@zxing/library";
+import { useNewDialog } from "~/hook/useNewDialog";
 
 type Props = {
   wrapperClassName?: string;
   toDoAfterRead: (text: string) => void;
 };
 
-const updateNewData = <T,>(prevData: T, newData: T) =>
-  prevData === newData ? prevData : newData;
-
 const codeReader = new BrowserMultiFormatReader();
 
 const BarcodeReader = ({ toDoAfterRead, wrapperClassName = "" }: Props) => {
@@ -17,74 +15,80 @@ const BarcodeReader = ({ toDoAfterRead, wrapperClassName = "" }: Props) => {
   const [selectedDeviceId, setSelectedDeviceId] = useState("");
   const videoRef = useRef<HTMLVideoElement>(null);
 
+  const { addDialogWithTitleAndMessage } = useNewDialog();
+  const alertError = (message: string) => {
+    addDialogWithTitleAndMessage("barcodeReader", "바코드 리더 에러", message);
+  };
+
+  const loadVideoInputDeviceList = useCallback(async () => {
+    try {
+      const videoDeviceList = await codeReader.listVideoInputDevices();
+      setVideoDeviceList(videoDeviceList);
+    } catch (error) {
+      alertError("기기 목록을 불러오는데 실패했습니다.");
+      setVideoDeviceList([]);
+    }
+  }, []);
+
   useEffect(() => {
     /** 바코드리더 초기 로드시, 사용가능한 카메라 목록을 가져옵니다. */
-    const loadVideoInputDeviceList = async () => {
-      let videoDeviceList: MediaDeviceInfo[] = [];
-      try {
-        videoDeviceList = await codeReader.listVideoInputDevices();
-      } catch (error) {
-        console.error(error);
-      }
-      setVideoDeviceList((prev) => updateNewData(prev, videoDeviceList));
-    };
     loadVideoInputDeviceList();
     return () => codeReader.reset();
   }, []);
 
   useEffect(() => {
-    /** 바코드리더 초기 로드시 & 목록 변화시, 사용가능한 카메라 목록중 하나를 디폴트로 선택합니다. */
-    if (videoDeviceList.length) {
-      const firstVideoDeviceId = videoDeviceList[0].deviceId;
-      setSelectedDeviceId((prev) => updateNewData(prev, firstVideoDeviceId));
-    }
+    if (!videoDeviceList.length) return;
+    /** 사용가능한 기기중 마지막, 주로 후면카메라를 기본으로 설정 */
+    const initialDevice = videoDeviceList[videoDeviceList.length - 1];
+    setSelectedDeviceId(initialDevice.deviceId);
   }, [videoDeviceList]);
-  
+
   useEffect(() => {
-    /** 디바이스ID로 스트림을 받아옵니다. */
-    if (selectedDeviceId !== "" && videoRef.current) {
-      const setMedia = async (htmlVideoElement: HTMLVideoElement) => {
-        codeReader.reset(); /* 기존 연결 해제 */
-        const constraints = { video: { deviceId: { exact: selectedDeviceId } } };
-        let newVideoStream: MediaStream | null = null;
-        try {
-          /** 디바이스 목록엔 떴지만 사용불가시 throw */
-          newVideoStream = await navigator.mediaDevices.getUserMedia(constraints);
-        } catch (error) {
-          console.error(error);
-        } finally {
-          htmlVideoElement.srcObject = newVideoStream;
-          htmlVideoElement.autoplay = true;
-        }
-        if (newVideoStream) {
-          /** 연결된 디바이스에 콜백함수를 전달해줍니다. */
-          codeReader.decodeFromVideoElementContinuously(
-            htmlVideoElement,
-            (result: Result) => result && toDoAfterRead(result.getText())
-          );
-        } else {
-          /** 사용 불가능한 디바이스는 선택지에서 제거합니다. */
-          alert(`해당 디바이스는 사용할 수 없습니다. (${selectedDeviceId})`)
-          setVideoDeviceList((prev) => prev.filter(prev => prev.deviceId !== selectedDeviceId));
+    if (selectedDeviceId === "" || !videoRef.current) return;
+
+    const setMedia = async (htmlVideoElement: HTMLVideoElement) => {
+      codeReader.reset();
+
+      try {
+        /** 해당 기기 확인 및 카메라 권한 요청 */
+        const newVideoStream = await navigator.mediaDevices.getUserMedia({
+          video: { deviceId: { exact: selectedDeviceId } },
+        });
+        /** 권한 변경 대비 목록 업데이트 */
+        loadVideoInputDeviceList(); 
+        htmlVideoElement.srcObject = newVideoStream;
+        htmlVideoElement.autoplay = true;
+        /** 연결된 디바이스에 콜백함수를 전달해줍니다. */
+        codeReader.decodeFromVideoElementContinuously(
+          htmlVideoElement,
+          (result: Result) => result && toDoAfterRead(result.getText()),
+        );
+      } catch (error) {
+        htmlVideoElement.srcObject = null;
+        htmlVideoElement.autoplay = false;
+        if (error instanceof DOMException && error.name === "NotAllowedError") {
+          alertError("카메라 접근 권한을 확인해주세요.");
+          return;
         }
-      };
-      setMedia(videoRef.current);
-    }
+        alertError(`해당 디바이스는 사용할 수 없습니다. (${selectedDeviceId})`);
+        setVideoDeviceList(
+          videoDeviceList.filter(v => v.deviceId !== selectedDeviceId),
+        );
+      }
+    };
+    setMedia(videoRef.current);
   }, [selectedDeviceId]);
 
-  const handleSelectedIdChange: ChangeEventHandler<HTMLSelectElement> = (e) =>
-    setSelectedDeviceId((prev) => updateNewData(prev, e.target.value));
-
   return (
     <div className={`barcode-reader__wrapper ${wrapperClassName || ""}`}>
       <video id="video" ref={videoRef} muted />
       <select
         id="sourceSelect"
-        onChange={handleSelectedIdChange}
+        onChange={e => setSelectedDeviceId(e.target.value)}
         value={selectedDeviceId}
       >
-        {(videoDeviceList ?? []).map((device) => (
-          <option key={device.deviceId} value={device.deviceId}>
+        {videoDeviceList.map(device => (
+          <option key={device.deviceId ?? ""} value={device.deviceId}>
             {device.label}
           </option>
         ))}
diff --git a/src/component/utils/BookInformationWithCover.tsx b/src/component/utils/BookInformationWithCover.tsx
index 3181f06e..d10e9d7b 100644
--- a/src/component/utils/BookInformationWithCover.tsx
+++ b/src/component/utils/BookInformationWithCover.tsx
@@ -1,5 +1,6 @@
 import Image from "./Image";
 import "../../asset/css/BookInformationWithCover.css";
+import { memo } from "react";
 
 type Props = {
   wrapperClassName?: string;
@@ -28,7 +29,7 @@ const BookInformationWithCover = ({
   );
 };
 
-export default BookInformationWithCover;
+export default memo(BookInformationWithCover);
 
 BookInformationWithCover.defaultProps = {
   wrapperClassName: "",
diff --git a/src/component/utils/Button.tsx b/src/component/utils/Button.tsx
index dc197f47..66e3f020 100644
--- a/src/component/utils/Button.tsx
+++ b/src/component/utils/Button.tsx
@@ -1,6 +1,6 @@
 import colorPalette from "../../constant/color";
 import "../../asset/css/Button.css";
-import { HTMLProps } from "react";
+import { HTMLProps, memo } from "react";
 
 type Palette = (typeof colorPalette)[number]["string"];
 
@@ -28,4 +28,4 @@ export const Button = ({
   );
 };
 
-export default Button;
+export default memo(Button);
diff --git a/src/component/utils/CarouselContainer.tsx b/src/component/utils/CarouselContainer.tsx
index 308e86ca..660c2fc5 100644
--- a/src/component/utils/CarouselContainer.tsx
+++ b/src/component/utils/CarouselContainer.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, useContext } from "react";
+import { ComponentProps, memo, useContext } from "react";
 import { CarouselContext } from "~/component/utils/Carousel";
 
 /**
@@ -27,4 +27,4 @@ const CarouselContainer = ({
   );
 };
 
-export default CarouselContainer;
+export default memo(CarouselContainer);
diff --git a/src/component/utils/CarouselList.tsx b/src/component/utils/CarouselList.tsx
index a8843444..ab961c87 100644
--- a/src/component/utils/CarouselList.tsx
+++ b/src/component/utils/CarouselList.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ComponentProps, useContext, useMemo } from "react";
+import { CSSProperties, ComponentProps, memo, useContext, useMemo } from "react";
 import { CarouselContext } from "~/component/utils/Carousel";
 
 /**
@@ -85,4 +85,4 @@ const CarouselList = <T extends { id: number }>({
   );
 };
 
-export default CarouselList;
+export default memo(CarouselList);
diff --git a/src/component/utils/Pagination.tsx b/src/component/utils/Pagination.tsx
index 5e79a277..d05795cb 100644
--- a/src/component/utils/Pagination.tsx
+++ b/src/component/utils/Pagination.tsx
@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import { RefObject, memo } from "react";
 import { useSearchParams } from "react-router-dom";
 import Paginations from "~/component/utils/Paginations";
 
@@ -54,4 +54,4 @@ const Pagination = ({
   );
 };
 
-export default Pagination;
+export default memo(Pagination);
diff --git a/src/component/utils/Paginations.tsx b/src/component/utils/Paginations.tsx
index db95f8f4..a592080d 100644
--- a/src/component/utils/Paginations.tsx
+++ b/src/component/utils/Paginations.tsx
@@ -62,7 +62,7 @@ const Pages = (props: { length: number }) => {
   return (
     <div className="pagination__pages">
       {range.map(i => (
-        <Page number={i} />
+        <Page key={i} number={i} />
       ))}
     </div>
   );
diff --git a/src/component/utils/SearchRankingItem.tsx b/src/component/utils/SearchRankingItem.tsx
index 537f556f..b9704d57 100644
--- a/src/component/utils/SearchRankingItem.tsx
+++ b/src/component/utils/SearchRankingItem.tsx
@@ -1,5 +1,6 @@
 import { type SearchKeyword } from "~/type/SearchKeyword";
 import Tooltip from "./Tooltip";
+import { memo } from "react";
 
 type Props = { item: SearchKeyword & { id: number }; height: number };
 
@@ -25,4 +26,4 @@ const SearchRankingItem = ({ item, height }: Props) => {
   );
 };
 
-export default SearchRankingItem;
+export default memo(SearchRankingItem);
diff --git a/src/component/utils/SearchRankingList.tsx b/src/component/utils/SearchRankingList.tsx
index 7dc57a02..1fc0a341 100644
--- a/src/component/utils/SearchRankingList.tsx
+++ b/src/component/utils/SearchRankingList.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, useEffect, useState } from "react";
+import { ComponentProps, memo, useEffect, useState } from "react";
 import { type SearchKeyword } from "~/type/SearchKeyword";
 import Carousel from "./Carousel";
 import SearchRankingItem from "./SearchRankingItem";
@@ -61,4 +61,4 @@ const SearchRankingList = ({ list }: Props) => {
   );
 };
 
-export default SearchRankingList;
+export default memo(SearchRankingList);
diff --git a/src/component/utils/SubTitle.tsx b/src/component/utils/SubTitle.tsx
index 5a3339eb..ee22bdde 100644
--- a/src/component/utils/SubTitle.tsx
+++ b/src/component/utils/SubTitle.tsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import "../../asset/css/SubTitle.css";
 
 type Props = {
@@ -16,4 +17,4 @@ const SubTitle = ({ subTitle, description, alignItems }: Props) => {
   );
 };
 
-export default SubTitle;
+export default memo(SubTitle);
diff --git a/src/component/utils/TextWithLabel.tsx b/src/component/utils/TextWithLabel.tsx
index 991d636d..78fb9eb6 100644
--- a/src/component/utils/TextWithLabel.tsx
+++ b/src/component/utils/TextWithLabel.tsx
@@ -1,5 +1,6 @@
 import colorPalette from "../../constant/color";
 import "../../asset/css/TextWithLabel.css";
+import { memo } from "react";
 
 type Props = {
   wrapperClassName?: string;
@@ -53,7 +54,7 @@ const TextWithLabel = ({
   );
 };
 
-export default TextWithLabel;
+export default memo(TextWithLabel);
 
 TextWithLabel.defaultProps = {
   wrapperClassName: null,
diff --git a/src/component/utils/TextareaWithLabel.tsx b/src/component/utils/TextareaWithLabel.tsx
index 70a9eac1..6f209b62 100644
--- a/src/component/utils/TextareaWithLabel.tsx
+++ b/src/component/utils/TextareaWithLabel.tsx
@@ -8,7 +8,7 @@ type Props = {
   topLabelColor?: string;
   textareaPlaceHolder?: string;
   textareaName?: string;
-  textareaValue: string;
+  textareaValue?: string;
   textareaDisabled?: boolean;
   setTextareaValue(...args: unknown[]): unknown;
   isVisibleBottomMessage?: boolean;
@@ -58,7 +58,6 @@ const TextareaWithLabel = ({
         className="textarea__textarea"
         placeholder={textareaPlaceHolder}
         name={textareaName}
-        value={textareaValue}
         onChange={onChangeTextarea}
         ref={textareaRef}
         disabled={textareaDisabled}
diff --git a/src/component/utils/Tooltip.tsx b/src/component/utils/Tooltip.tsx
index 8dca182a..b0412f1e 100644
--- a/src/component/utils/Tooltip.tsx
+++ b/src/component/utils/Tooltip.tsx
@@ -24,8 +24,7 @@ const Tooltip = ({ children, description, className }: TooltipProps) => {
       ref={targetRef}
       onMouseOver={displayTooltip}
       onMouseOut={hiddenTooltip}
-      style={{ cursor: "help" }}
-      className={className}
+      className={`tooltip_cursor-message ${className}`}
     >
       {children}
       {isDisplayed && portal
diff --git a/src/util/axios.ts b/src/util/axios.ts
index d8aa8ff7..dcb287c4 100644
--- a/src/util/axios.ts
+++ b/src/util/axios.ts
@@ -18,5 +18,8 @@ export default axiosPromise;
 
 api.interceptors.response.use(
   response => response,
-  error => Sentry.captureException(error),
+  error => {
+    Sentry.captureException(error);
+    throw error;
+  },
 );