diff --git a/src/assets/fonts/SUIT-Bold.woff2 b/src/assets/fonts/SUIT-Bold.woff2 new file mode 100644 index 0000000..7b4f136 Binary files /dev/null and b/src/assets/fonts/SUIT-Bold.woff2 differ diff --git a/src/assets/fonts/SUIT-ExtraBold.woff2 b/src/assets/fonts/SUIT-ExtraBold.woff2 new file mode 100644 index 0000000..823bfbb Binary files /dev/null and b/src/assets/fonts/SUIT-ExtraBold.woff2 differ diff --git a/src/assets/fonts/SUIT-ExtraLight.woff2 b/src/assets/fonts/SUIT-ExtraLight.woff2 new file mode 100644 index 0000000..048fd7b Binary files /dev/null and b/src/assets/fonts/SUIT-ExtraLight.woff2 differ diff --git a/src/assets/fonts/SUIT-Heavy.woff2 b/src/assets/fonts/SUIT-Heavy.woff2 new file mode 100644 index 0000000..2c3ec6d Binary files /dev/null and b/src/assets/fonts/SUIT-Heavy.woff2 differ diff --git a/src/assets/fonts/SUIT-Light.woff2 b/src/assets/fonts/SUIT-Light.woff2 new file mode 100644 index 0000000..1b42dc2 Binary files /dev/null and b/src/assets/fonts/SUIT-Light.woff2 differ diff --git a/src/assets/fonts/SUIT-Medium.woff2 b/src/assets/fonts/SUIT-Medium.woff2 new file mode 100644 index 0000000..35b294e Binary files /dev/null and b/src/assets/fonts/SUIT-Medium.woff2 differ diff --git a/src/assets/fonts/SUIT-Regular.woff2 b/src/assets/fonts/SUIT-Regular.woff2 new file mode 100644 index 0000000..1a2aaf3 Binary files /dev/null and b/src/assets/fonts/SUIT-Regular.woff2 differ diff --git a/src/assets/fonts/SUIT-SemiBold.woff2 b/src/assets/fonts/SUIT-SemiBold.woff2 new file mode 100644 index 0000000..7e2778a Binary files /dev/null and b/src/assets/fonts/SUIT-SemiBold.woff2 differ diff --git a/src/assets/fonts/SUIT-Thin.woff2 b/src/assets/fonts/SUIT-Thin.woff2 new file mode 100644 index 0000000..eb3c4a8 Binary files /dev/null and b/src/assets/fonts/SUIT-Thin.woff2 differ diff --git a/src/assets/icons/arrow_right.svg b/src/assets/icons/arrow_right.svg new file mode 100644 index 0000000..f96ad7c --- /dev/null +++ b/src/assets/icons/arrow_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/book.svg b/src/assets/icons/book.svg new file mode 100644 index 0000000..29f2c59 --- /dev/null +++ b/src/assets/icons/book.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/bookshelf.svg b/src/assets/icons/bookshelf.svg new file mode 100644 index 0000000..af7df15 --- /dev/null +++ b/src/assets/icons/bookshelf.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/camera.svg b/src/assets/icons/camera.svg new file mode 100644 index 0000000..f26f913 --- /dev/null +++ b/src/assets/icons/camera.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/caret_down.svg b/src/assets/icons/caret_down.svg new file mode 100644 index 0000000..474f9b8 --- /dev/null +++ b/src/assets/icons/caret_down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/caret_up.svg b/src/assets/icons/caret_up.svg new file mode 100644 index 0000000..8eb924f --- /dev/null +++ b/src/assets/icons/caret_up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/chevron_left.svg b/src/assets/icons/chevron_left.svg new file mode 100644 index 0000000..2b4e547 --- /dev/null +++ b/src/assets/icons/chevron_left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/chevron_right.svg b/src/assets/icons/chevron_right.svg new file mode 100644 index 0000000..ee08d26 --- /dev/null +++ b/src/assets/icons/chevron_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg new file mode 100644 index 0000000..b502643 --- /dev/null +++ b/src/assets/icons/close.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/focus.svg b/src/assets/icons/focus.svg new file mode 100644 index 0000000..a7d837e --- /dev/null +++ b/src/assets/icons/focus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/hamburger.svg b/src/assets/icons/hamburger.svg new file mode 100644 index 0000000..951cbf5 --- /dev/null +++ b/src/assets/icons/hamburger.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg new file mode 100644 index 0000000..8cb78df --- /dev/null +++ b/src/assets/icons/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/report.svg b/src/assets/icons/report.svg new file mode 100644 index 0000000..0e24c2d --- /dev/null +++ b/src/assets/icons/report.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg new file mode 100644 index 0000000..89b7663 --- /dev/null +++ b/src/assets/icons/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/bottom_banner.svg b/src/assets/images/bottom_banner.svg new file mode 100644 index 0000000..c6eec56 --- /dev/null +++ b/src/assets/images/bottom_banner.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/reading_goal.svg b/src/assets/images/reading_goal.svg new file mode 100644 index 0000000..31a337b --- /dev/null +++ b/src/assets/images/reading_goal.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/search/AllBookListSection.tsx b/src/components/search/AllBookListSection.tsx index d8a4b67..e87f4f2 100644 --- a/src/components/search/AllBookListSection.tsx +++ b/src/components/search/AllBookListSection.tsx @@ -41,7 +41,9 @@ function HorizontalBookScroller({ books }: { books: Book[] }) { el.style.scrollSnapType = "x mandatory"; el.style.scrollBehavior = "smooth"; el.style.cursor = "grab"; - try { el.releasePointerCapture(e.pointerId); } catch {} + try { + el.releasePointerCapture(e.pointerId); + } catch {} }; return ( @@ -67,12 +69,12 @@ function HorizontalBookScroller({ books }: { books: Book[] }) { draggable={false} className="w-[100px] h-[144px] rounded-[2px] object-cover" /> - +
- + {book.title} - + {book.author}
@@ -87,26 +89,29 @@ export default function AllBookListSection() { return (
- + 이 책을 추천해요
- + 주간 베스트
{bestBooks.map((book, idx) => ( -
+
- + {idx + 1}
- + {book.title}
@@ -116,4 +121,4 @@ export default function AllBookListSection() {
); -} \ No newline at end of file +} diff --git a/src/components/search/MyLibraryListSection.tsx b/src/components/search/MyLibraryListSection.tsx index c41d188..27f7aa4 100644 --- a/src/components/search/MyLibraryListSection.tsx +++ b/src/components/search/MyLibraryListSection.tsx @@ -1,7 +1,11 @@ import { useRef } from "react"; import bookCover from "../../assets/search/mock_bookcover.svg"; import type { BookItem } from "./mock/myLibrary"; -import { focusedBooks, unreadBooks, fallbackRecommendedBooks } from "./mock/myLibrary"; +import { + focusedBooks, + unreadBooks, + fallbackRecommendedBooks, +} from "./mock/myLibrary"; const LIMIT = 5; @@ -27,7 +31,8 @@ function HorizontalBookScroller({ books }: { books: BookItem[] }) { const onPointerMove = (e: React.PointerEvent) => { if (!isDragging.current || !ref.current) return; e.preventDefault(); - ref.current.scrollLeft = startScrollLeft.current - (e.clientX - startX.current); + ref.current.scrollLeft = + startScrollLeft.current - (e.clientX - startX.current); }; const endDrag = (e: React.PointerEvent) => { if (!isDragging.current) return; @@ -36,9 +41,10 @@ function HorizontalBookScroller({ books }: { books: BookItem[] }) { ref.current.style.scrollSnapType = "x mandatory"; ref.current.style.cursor = "grab"; } - try { ref.current?.releasePointerCapture(e.pointerId); } catch {} + try { + ref.current?.releasePointerCapture(e.pointerId); + } catch {} }; - return (
- +
- + {book.title} - + {book.author}
@@ -80,7 +86,6 @@ function HorizontalBookScroller({ books }: { books: BookItem[] }) { } export default function MyLibraryListSection() { - const hasFocused = focusedBooks.length > 0; const hasUnread = unreadBooks.length > 0; const showFallbackOnly = !hasFocused && !hasUnread; @@ -89,7 +94,7 @@ export default function MyLibraryListSection() {
{showFallbackOnly ? (
- + 이 책을 추천해요 @@ -98,7 +103,7 @@ export default function MyLibraryListSection() { <> {hasFocused && (
- + 최근 포커스한 책 @@ -106,7 +111,7 @@ export default function MyLibraryListSection() { )} {hasUnread && (
- + 아직 읽지 않은 책 @@ -116,4 +121,4 @@ export default function MyLibraryListSection() { )}
); -} \ No newline at end of file +} diff --git a/src/components/search/RecentKeywordSection.tsx b/src/components/search/RecentKeywordSection.tsx index ba3d184..8895ed5 100644 --- a/src/components/search/RecentKeywordSection.tsx +++ b/src/components/search/RecentKeywordSection.tsx @@ -9,11 +9,15 @@ type Props = { onClickKeyword?: (text: string) => void; }; -export default function RecentKeywordSection({ keywords, onDelete, onClickKeyword }: Props) { +export default function RecentKeywordSection({ + keywords, + onDelete, + onClickKeyword, +}: Props) { return (
- + 최근 검색어 @@ -27,7 +31,7 @@ export default function RecentKeywordSection({ keywords, onDelete, onClickKeywor key={k.id} role="button" tabIndex={0} - onMouseDown={(e) => e.preventDefault()} + onMouseDown={(e) => e.preventDefault()} onClick={() => onClickKeyword?.(k.text)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { @@ -35,7 +39,7 @@ export default function RecentKeywordSection({ keywords, onDelete, onClickKeywor onClickKeyword?.(k.text); } }} - className="flex items-center rounded-[8px] bg-[#1B203B]" + className="flex items-center rounded-[8px] bg-gray-900" style={{ padding: "6px 12px", alignItems: "center", @@ -67,7 +71,7 @@ export default function RecentKeywordSection({ keywords, onDelete, onClickKeywor className="relative w-[14px] h-[14px]" style={{ display: "flex", - padding: 2, + padding: 2, justifyContent: "center", alignItems: "center", }} diff --git a/src/components/search/SearchTopSection.tsx b/src/components/search/SearchTopSection.tsx index 176406f..40b46b8 100644 --- a/src/components/search/SearchTopSection.tsx +++ b/src/components/search/SearchTopSection.tsx @@ -63,7 +63,7 @@ export default function SearchTopSection({ {/* 헤더 */}
{/* 탭 + 검색바 */}
{/* 탭 */} -
+
{ enterInputMode(); }} - className="w-full flex items-center gap-2 rounded-lg bg-[#1B203B] px-4 py-[13.5px]" + className="w-full flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-[13.5px]" > -