도서 목록 보기 모드 추가 및 컴포넌트 연동

- 도서 목록 보기 모드 (리스트/그리드) 기능을 구현했습니다.
- BooksList 컴포넌트에서 ViewMode 타입을 사용하여 현재 선택된 보기 모드를 받아 적용합니다.
- BookItem 컴포넌트에서도 ViewMode 타입을 사용하여 보기 모드에 따라 스타일을 조정합니다.
- BooksViewSwitcher 컴포넌트에서 선택된 보기 모드를 URL 쿼리스트링에 저장합니다.

관련 변경 사항:
- BookItem.tsx 파일 수정
- BooksList.tsx 파일 수정
- BooksViewSwitcher.tsx 파일 수정

client/src/components/books/BookItem.tsx

@@ -3,14 +3,16 @@ import { styled } from "styled-components";
 import { Book } from "../../models/book.model";
 import { formatNumber } from "../../utils/format";
 import { getImgSrc } from "../../utils/image";
+import { ViewMode } from "./BooksViewSwitcher";
 
 interface Props {
   book: Book;
+  view?: ViewMode;
 }
 
-const BookItem = ({ book }: Props) => {
+const BookItem = ({ book, view }: Props) => {
   return (
-    <BookItemStyled>
+    <BookItemStyled view={view}>
       <div className="img">
         <img src={getImgSrc(book.imgId)} alt={book.title} />
       </div>
@@ -28,14 +30,15 @@ const BookItem = ({ book }: Props) => {
   );
 };
 
-const BookItemStyled = styled.div`
+const BookItemStyled = styled.div<Pick<Props, 'view'>>`
   display: flex;
   flex-direction: column;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
 
   .img {
     border-radius: ${({ theme }) => theme.borderRadius.default};
     overflow: hidden;
+    width: ${({ view }) => (view === "grid" ? "auto" : "160px")};
     img {
       max-width: 100%;
     }
@@ -44,6 +47,7 @@ const BookItemStyled = styled.div`
   .content {
     padding: 16px;
     position: relative;
+    flex: ${({ view }) => (view === "grid" ? 0 : 1)};
 
     .title {
       font-size: 1.25rem;

client/src/components/books/BooksList.tsx

@@ -1,26 +1,44 @@
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
 import { styled } from "styled-components";
 import { Book } from "../../models/book.model";
+import { QUERYSTRING } from "../constants/querystring";
 import BookItem from "./BookItem";
+import { ViewMode } from "./BooksViewSwitcher";
 
 interface Props {
   books: Book[]
 }
 
 const BooksList = ({ books}: Props) => {
+  const [view, setView] = useState<ViewMode>('grid');
+  const location = useLocation();
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search)
+    if (params.get(QUERYSTRING.VIEW)) {
+      setView(params.get(QUERYSTRING.VIEW) as ViewMode)
+    }
+  }, [location.search])
+
   return (
-    <BooksListStyle>
+    <BooksListStyle view={view}>
       {
         books?.map((item) => (
-          <BookItem key={item.id} book={item} />
+          <BookItem key={item.id} book={item} view={view}/>
         ))
       }
     </BooksListStyle>
   );
 };
 
-const BooksListStyle = styled.div`
+interface BooksListStyleProps {
+  view: ViewMode;
+}
+
+const BooksListStyle = styled.div<BooksListStyleProps>`
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: ${({ view }) => (view === 'grid' ? "repeat(4, 1fr)" : "repeat(1, 1fr)")};
   gap: 24px;
 `;
 

client/src/components/books/BooksViewSwitcher.tsx

@@ -16,10 +16,12 @@ const viewOptions = [
   }
 ]
 
+export type ViewMode = 'grid' | 'list'
+
 const BooksViewSwitcher = () => {
   const [searchParams, setSearchParams] = useSearchParams()
 
-  const handleSwitch = (value: string) => {
+  const handleSwitch = (value: ViewMode) => {
     const newSearchParams = new URLSearchParams(searchParams);
 
     newSearchParams.set(QUERYSTRING.VIEW, value)
@@ -40,7 +42,7 @@ const BooksViewSwitcher = () => {
             key={option.value}
             size="medium"
             scheme={searchParams.get(QUERYSTRING.VIEW) === option.value ? "primary" : "normal"}
-            onClick={() => handleSwitch(option.value)}
+            onClick={() => handleSwitch(option.value as ViewMode)}
           >
             {option.icon}
           </Button>

server/package.json

@@ -12,7 +12,7 @@
     "test": "jest --runInBand --detectOpenHandles --forceExit",
     "test:only-changed": "jest --runInBand --onlyChanged",
     "test:watch": "jest --watch --runInBand --detectOpenHandles --forceExit",
-    "start": "tsx --watch src/index.ts"
+    "start": "tsx watch src/index.ts"
   },
   "keywords": [],
   "author": "",