#14 나의로그 검색결과 없음 ui 구현

reading-log · Apr 3, 2024 · 8eda1dc · 8eda1dc
1 parent 664707c
commit 8eda1dc
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 166 deletions.
diff --git a/src/components/mylog/EmptySearch.tsx 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 (
+    <div css={searchContainer}>
+      <h1>검색 결과가 없습니다.</h1>
+      <div className="img">이미지</div>
+      <Link to="/mylog/book_register">️✍️ 직접 기록하기 ✍</Link>
+    </div>
+  )
+}
+
+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
@@ -0,0 +1,38 @@
+import { css } from '@emotion/react'
+import { body2, calcRem, colors, flexCenter } from '../../styles/theme'
+
+const MyBook = () => {
+  return (
+    <div css={myBookBox}>
+      <div>
+        <img src="https://www.theyoungtimes.com/news/photo/202206/869_1682_3518.jpg" alt="책이미지" />
+      </div>
+      <p>책제목</p>
+      <span>지은이</span>
+    </div>
+  )
+}
+
+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
diff --git a/src/pages/mylog/MyLog.tsx b/src/pages/mylog/MyLog.tsx
@@ -4,16 +4,17 @@ 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()
   // const { data, isLoading, isError } = getMyBookList()
 
   /**기록하기로 이동 */
   const handleClick = () => {
-    navigate('/mylog/search-books') //  나의로그 책 검색하기
+    navigate('/mylog/search') //  나의로그 책 검색하기
   }
 
   return (
@@ -26,13 +27,7 @@ const MyLog = () => {
             <div className="mylogList">
               <SearchBar placeHolder="나의로그 검색하기" />
               {['1', '2', '4', '1', '2', '4', '1', '2', '4', '1', '2', '4'].map((book, index) => (
-                <div className="bookBox" key={index}>
-                  <div>
-                    <img src="https://www.theyoungtimes.com/news/photo/202206/869_1682_3518.jpg" alt="책이미지" />
-                  </div>
-                  <p>책제목</p>
-                  <span>지은이</span>
-                </div>
+                <MyBook key={index} />
               ))}
             </div>
           </div>
@@ -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
@@ -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 (
+    <AllLayout>
+      <SearchBar placeHolder="책 검색하기" />
+      {true ? <EmptySearch /> : <div></div>}
+    </AllLayout>
+  )
+}
+
+export default MyLogSearch
diff --git a/src/pages/mylog/MyLogSearchResult.tsx b/src/pages/mylog/MyLogSearchResult.tsx
diff --git 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 (
     <BrowserRouter>
       <Routes>
-        {/**404 페이지 */}
-        <Route path="*" element={<NotFound />} />
-        {/**splash 화면 */}
-        <Route path="/" element={<Splash />} />
-        {/**로그인 */}
-        <Route path="/login" element={<Login />} />
-        {/**회원가입 */}
-        <Route path="/join" element={<Join />} />
+        <Route path="*" element={<NotFound />} /> {/**404 페이지 */}
+        <Route path="/" element={<Splash />} /> {/**splash 화면 */}
+        <Route path="/login" element={<Login />} /> {/**로그인 */}
+        <Route path="/join" element={<Join />} /> {/**회원가입 */}
         {/* 리딩 로그 메뉴 페이지 */}
         <Route path="/readinglog" element={<ReadingLog />} />
         <Route path="/readinglog/detail" element={<ReadingLogDetail />} />
         <Route path="/readinglog/search" element={<SearchResult />} />
-        {/* 나의 로그 페이지 */}
-        <Route path="/mylog" element={<MyLog />} />
+        <Route path="/mylog" element={<MyLog />} /> {/* 나의 로그 */}
+        <Route path="/mylog/search" element={<MyLogSearch />} /> {/* 나의 로그 검색 */}
         <Route path="/mylog/detail" element={<MyLogDetail />} />
-        <Route path="/mylog/search" element={<MyLogSearchResult />} />
         <Route path="/mylog/books" element={<BookSearchPage />} />
         <Route path="/mylog/books/search" element={<BookSearchResult />} />
-        <Route path="/mylog/book_register" element={<BookRegister />} />
-        <Route path="/mylog/book_auto_register" element={<BookAutoRegister />} />
+        <Route path="/mylog/book_register" element={<BookRegister />} /> {/* 나의 로그 직접등록 */}
+        <Route path="/mylog/book_auto_register" element={<BookAutoRegister />} /> {/* 나의 로그 자동등록 */}
         <Route path="/account" element={<Account />} />
       </Routes>
     </BrowserRouter>