From 8eda1dc25e2c05220937d064b175af9ce4d590d8 Mon Sep 17 00:00:00 2001 From: nemo-nemo-bim Date: Thu, 4 Apr 2024 02:12:18 +0900 Subject: [PATCH] =?UTF-8?q?#14=20=EB=82=98=EC=9D=98=EB=A1=9C=EA=B7=B8=20?= =?UTF-8?q?=EA=B2=80=EC=83=89=EA=B2=B0=EA=B3=BC=20=EC=97=86=EC=9D=8C=20ui?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mylog/EmptySearch.tsx | 40 ++++++++++++++++ src/components/mylog/MyBook.tsx | 38 +++++++++++++++ src/components/mylog/MyLogList.tsx | 53 --------------------- src/pages/mylog/MyLog.tsx | 35 ++------------ src/pages/mylog/MyLogSearch.tsx | 20 ++++++++ src/pages/mylog/MyLogSearchResult.tsx | 68 --------------------------- src/shared/Router.tsx | 23 ++++----- 7 files changed, 111 insertions(+), 166 deletions(-) create mode 100644 src/components/mylog/EmptySearch.tsx create mode 100644 src/components/mylog/MyBook.tsx delete mode 100644 src/components/mylog/MyLogList.tsx create mode 100644 src/pages/mylog/MyLogSearch.tsx delete mode 100644 src/pages/mylog/MyLogSearchResult.tsx diff --git a/src/components/mylog/EmptySearch.tsx b/src/components/mylog/EmptySearch.tsx new file mode 100644 index 0000000..4af50ed --- /dev/null +++ b/src/components/mylog/EmptySearch.tsx @@ -0,0 +1,40 @@ +import { css } from '@emotion/react' +import { Link } from 'react-router-dom' +import { calcRem, colors, flexCenter } from '../../styles/theme' + +const EmptySearch = () => { + return ( +
+

검색 결과가 없습니다.

+
이미지
+ ️✍️ 직접 기록하기 ✍ +
+ ) +} + +export default EmptySearch + +const searchContainer = css` + ${flexCenter} + flex-direction: column; + margin-top: ${calcRem(50)}; + + position: absolute; + inset: 0; + + .img { + width: ${calcRem(200)}; + height: ${calcRem(200)}; + background-color: #c9c9c9; + } + + h1 { + margin-bottom: 1rem; + } + + a { + margin-top: 3rem; + color: ${colors.main1}; + font-weight: 700; + } +` diff --git a/src/components/mylog/MyBook.tsx b/src/components/mylog/MyBook.tsx new file mode 100644 index 0000000..fd9ddb4 --- /dev/null +++ b/src/components/mylog/MyBook.tsx @@ -0,0 +1,38 @@ +import { css } from '@emotion/react' +import { body2, calcRem, colors, flexCenter } from '../../styles/theme' + +const MyBook = () => { + return ( +
+
+ 책이미지 +
+

책제목

+ 지은이 +
+ ) +} + +export default MyBook + +const myBookBox = css` + border: 1px solid ${colors.boxStroke}; + border-radius: 0.5rem; + ${flexCenter}; + + flex-direction: column; + background-color: ${colors.boxFill}; + width: ${calcRem(154)}; + height: ${calcRem(172)}; + img { + max-width: ${calcRem(70)}; + max-height: ${calcRem(88)}; + } + p { + margin-top: ${calcRem(12)}; + margin-bottom: ${calcRem(8)}; + } + span { + ${body2}; + } +` diff --git a/src/components/mylog/MyLogList.tsx b/src/components/mylog/MyLogList.tsx deleted file mode 100644 index 239339f..0000000 --- a/src/components/mylog/MyLogList.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { css } from '@emotion/react' -import { useNavigate } from 'react-router-dom' -import { Book } from '../../types/book' -import BookImg from '../../assets/images/book.png' - -interface MyLogList { - myLogList: Book[] -} - -const MyLogList: React.FC = ({ myLogList }) => { - const navigate = useNavigate() - return ( - <> - {myLogList.map((myLog, id) => ( -
navigate('/mylog/detail', { state: { myLog } })}> - {/* 나의로그 기록 등록(상세)로 이동*/} - -

{myLog.title}

-

{myLog.author}

-
- ))} - - ) -} - -export default MyLogList - -const logBox = css` - background: #eae5e5; - display: inline-block; - width: 9.7rem; - height: auto; - text-align: center; - border: 2px solid #c1b2b2; - border-radius: 6px; - padding: 1rem; - margin: 0.5rem; - img { - width: 70px; - height: auto; - margin: 0.5rem; - } - p { - color: black; - font-size: 16px; - font-weight: bold; - &:last-of-type { - font-size: 14px; - font-weight: normal; - margin-top: 1rem; - } - } -` diff --git a/src/pages/mylog/MyLog.tsx b/src/pages/mylog/MyLog.tsx index 32b50d5..8906b4b 100644 --- a/src/pages/mylog/MyLog.tsx +++ b/src/pages/mylog/MyLog.tsx @@ -4,8 +4,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { useNavigate } from 'react-router-dom' import { AllLayout } from '../../components/Layouts' import EmptyMylog from '../../components/mylog/EmptyMylog' +import MyBook from '../../components/mylog/MyBook' import SearchBar from '../../elements/SearchBar' -import { body1, body2, calcRem, colors, flexCenter } from '../../styles/theme' +import { body1, calcRem, colors, flexCenter } from '../../styles/theme' const MyLog = () => { const navigate = useNavigate() @@ -13,7 +14,7 @@ const MyLog = () => { /**기록하기로 이동 */ const handleClick = () => { - navigate('/mylog/search-books') // 나의로그 책 검색하기 + navigate('/mylog/search') // 나의로그 책 검색하기 } return ( @@ -26,13 +27,7 @@ const MyLog = () => {
{['1', '2', '4', '1', '2', '4', '1', '2', '4', '1', '2', '4'].map((book, index) => ( -
-
- 책이미지 -
-

책제목

- 지은이 -
+ ))}
@@ -59,28 +54,6 @@ const myLogContainer = css` gap: ${calcRem(15)}; grid-template-columns: 1fr 1fr; } - - .bookBox { - border: 1px solid ${colors.boxStroke}; - border-radius: 0.5rem; - ${flexCenter}; - - flex-direction: column; - background-color: ${colors.boxFill}; - width: ${calcRem(154)}; - height: ${calcRem(172)}; - img { - max-width: ${calcRem(70)}; - max-height: ${calcRem(88)}; - } - p { - margin-top: ${calcRem(12)}; - margin-bottom: ${calcRem(8)}; - } - span { - ${body2}; - } - } ` const writeButton = css` diff --git a/src/pages/mylog/MyLogSearch.tsx b/src/pages/mylog/MyLogSearch.tsx new file mode 100644 index 0000000..82aa474 --- /dev/null +++ b/src/pages/mylog/MyLogSearch.tsx @@ -0,0 +1,20 @@ +import { useSearchParams } from 'react-router-dom' +import { AllLayout } from '../../components/Layouts' +import EmptySearch from '../../components/mylog/EmptySearch' +import SearchBar from '../../elements/SearchBar' +import { useMyLogSearchQuery } from '../../hooks/useMyLogSearchQuery' + +const MyLogSearch = () => { + const [searchParams] = useSearchParams() + const keyword = searchParams.get('q') || '' + const searchResult = useMyLogSearchQuery(keyword).data + + return ( + + + {true ? :
} + + ) +} + +export default MyLogSearch diff --git a/src/pages/mylog/MyLogSearchResult.tsx b/src/pages/mylog/MyLogSearchResult.tsx deleted file mode 100644 index 9acbec3..0000000 --- a/src/pages/mylog/MyLogSearchResult.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { css } from '@emotion/react' -import { useEffect, useState } from 'react' -import { Link, useSearchParams } from 'react-router-dom' -import { AllLayout } from '../../components/Layouts' -import MyLogList from '../../components/mylog/MyLogList' -import RecordButton from '../../components/mylog/RecordButton' -import { useMyLogSearchQuery } from '../../hooks/useMyLogSearchQuery' -import { flexCenter } from '../../styles/theme' -import { Book } from '../../types/book' - -const MyLogSearchResult = () => { - const [myLogList, setMyLogList] = useState([]) - const [searchParams] = useSearchParams() - const keyword = searchParams.get('q') || '' - const searchResult = useMyLogSearchQuery(keyword).data - - useEffect(() => { - setMyLogList(searchResult) - }, [searchResult]) - - return ( - <> - -
- {/* */} - {myLogList === undefined || myLogList === null || myLogList.length === 0 ? ( - <> - {/* 키워드 검색 시 해당 로그 목록이 없을 경우 */} -

- 로그 검색 결과가 없습니다. -

- - ️✍️ 책 등록하기 ✍ - - - ) : ( - <> - {/* 키워드 검색 시 해당 로그 목록이 있을 경우 */} - - - - )} -
- - - ) -} - -export default MyLogSearchResult - -const feedContainer = css` - ${flexCenter} - flex-direction: column; - height: 100%; - a { - color: #836565; - font-weight: bold; - } -` diff --git a/src/shared/Router.tsx b/src/shared/Router.tsx index a0954c0..5ef5743 100644 --- a/src/shared/Router.tsx +++ b/src/shared/Router.tsx @@ -10,7 +10,7 @@ import BookSearchPage from '../pages/mylog/BookSearchPage' import BookSearchResult from '../pages/mylog/BookSearchResult' import MyLog from '../pages/mylog/MyLog' import MyLogDetail from '../pages/mylog/MyLogDetail' -import MyLogSearchResult from '../pages/mylog/MyLogSearchResult' +import MyLogSearch from '../pages/mylog/MyLogSearch' import ReadingLog from '../pages/readinglog/ReadingLog' import ReadingLogDetail from '../pages/readinglog/ReadingLogDetail' import SearchResult from '../pages/readinglog/SearchResult' @@ -19,26 +19,21 @@ const Router = () => { return ( - {/**404 페이지 */} - } /> - {/**splash 화면 */} - } /> - {/**로그인 */} - } /> - {/**회원가입 */} - } /> + } /> {/**404 페이지 */} + } /> {/**splash 화면 */} + } /> {/**로그인 */} + } /> {/**회원가입 */} {/* 리딩 로그 메뉴 페이지 */} } /> } /> } /> - {/* 나의 로그 페이지 */} - } /> + } /> {/* 나의 로그 */} + } /> {/* 나의 로그 검색 */} } /> - } /> } /> } /> - } /> - } /> + } /> {/* 나의 로그 직접등록 */} + } /> {/* 나의 로그 자동등록 */} } />