도서 목록 보기 기능 추가 및 쿼리스트링 설정

설명:
- 도서 목록 보기 모드를 선택할 수 있는 기능을 추가했습니다. (리스트/그리드)
- 사용자가 선택한 보기 모드를 URL 쿼리스트링에 저장합니다.
- 다음과 같은 새로운 쿼리스트링 변수를 추가했습니다.
  - QUERYSTRING.VIEW: 'list' 또는 'grid' 값을 가질 수 있으며, 현재 선택된 보기 모드를 나타냅니다.

client/src/components/books/BooksViewSwitcher.tsx

@@ -1,13 +1,61 @@
+import { useEffect } from "react";
+import { FaList, FaTh } from "react-icons/fa";
+import { useSearchParams } from "react-router-dom";
 import { styled } from "styled-components";
+import Button from "../common/Button";
+import { QUERYSTRING } from "../constants/querystring";
+
+const viewOptions = [
+  {
+    value: 'list',
+    icon: <FaList/>
+  },
+  {
+    value: 'grid',
+    icon: <FaTh/>
+  }
+]
 
 const BooksViewSwitcher = () => {
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const handleSwitch = (value: string) => {
+    const newSearchParams = new URLSearchParams(searchParams);
+
+    newSearchParams.set(QUERYSTRING.VIEW, value)
+    setSearchParams(newSearchParams);
+  }
+
+  useEffect(() => {
+    if (!searchParams.get(QUERYSTRING.VIEW)) {
+      handleSwitch('grid');
+    }
+  }, [])
+
   return (
-    <div>
-      <h1>BooksViewSwitcher</h1>
-    </div>
+    <BooksViewSwitcherStyle>
+      {
+        viewOptions.map((option) => (
+          <Button
+            key={option.value}
+            size="medium"
+            scheme={searchParams.get(QUERYSTRING.VIEW) === option.value ? "primary" : "normal"}
+            onClick={() => handleSwitch(option.value)}
+          >
+            {option.icon}
+          </Button>
+        ))
+      }
+    </BooksViewSwitcherStyle>
   );
 };
 
-const BooksViewSwitcherStyled = styled.div``;
+const BooksViewSwitcherStyle = styled.div`
+  display: flex;
+  gap: 8px;
+  svg {
+    fill: #fff;
+  }
+`;
 
 export default BooksViewSwitcher;

client/src/components/constants/querystring.ts

@@ -1,5 +1,6 @@
 export const QUERYSTRING = {
   CATEGORY_ID: 'category_id',
   NEWS: 'news',
-  PAGE: 'page'
+  PAGE: 'page',
+  VIEW: 'view'
 }