#14 나의로그 기록있음/없음 화면 ui 구현

package.json

@@ -11,6 +11,9 @@
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@types/js-cookie": "^3.0.6",
     "axios": "^1.6.8",
     "js-cookie": "^3.0.5",

src/apis/myLogApi.ts

@@ -1,4 +1,13 @@
 import axios from 'axios'
+import { useQuery } from 'react-query'
+
+/**내가 등록한 책 목록 조회 */
+export const getMyBookList = async () => {
+  return useQuery(['MyBookList'], async () => {
+    const { data } = await axios.get(`/api/books`)
+    return data
+  })
+}
 
 /* 나의로그 페이지 - 등록한 책 목록 */
 export const onBookList = async () => {

src/apis/userApi.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { useMutation } from 'react-query'
 
 /**회원 로그인 */
 export const onLogin = async (data: { email: string; password: string }) => {
@@ -15,3 +16,25 @@ export const onJoin = async (data: FormData) => {
   })
   return response
 }
+
+/**회원 정보 (닉네임, 프로필이미지) 수정 */
+export const useModifyUser = async () => {
+  return useMutation(
+    async (data: FormData) => {
+      const response = await axios.patch(`/api/doctor`, data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      })
+      return response
+    },
+    {
+      onSuccess: () => {},
+      onError: () => {
+        alert('회원정보 수정에 실패했습니다. 잠시후 다시 시도해주세요.')
+      },
+    },
+  )
+}
+
+/**비밀번호 변경 */

src/components/mylog/EmptyMylog.tsx

@@ -0,0 +1,30 @@
+import { css } from '@emotion/react'
+import { colors, flexCenter } from '../../styles/theme'
+
+const EmptyMylog = () => {
+  return (
+    <div css={container}>
+      <div className="image">이미지</div>
+    </div>
+  )
+}
+
+export default EmptyMylog
+
+const container = css`
+  height: calc(100vh - 10rem);
+  ${flexCenter}
+  flex-direction: column;
+
+  .image {
+    width: 120px;
+    height: 120px;
+    background-color: #c5c5c5;
+    margin-bottom: 8rem;
+  }
+
+  button {
+    font-weight: 700;
+    color: ${colors.main1};
+  }
+`

src/elements/SearchBar.tsx

@@ -0,0 +1,63 @@
+import { css } from '@emotion/react'
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useState } from 'react'
+import { calcRem, flexCenter } from '../styles/theme'
+
+interface ISearchBarProps {
+  /**검색어 placeholder */
+  placeHolder: string
+}
+
+/**검색바 */
+const SearchBar = ({ placeHolder }: ISearchBarProps) => {
+  const [searchKeyWord, setSearchKeyWord] = useState('')
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchKeyWord(e.target.value)
+  }
+
+  return (
+    <div css={search}>
+      <div css={searchContainer}>
+        <input type="text" placeholder={placeHolder} onChange={handleChange} />
+        <button>
+          <FontAwesomeIcon icon={faMagnifyingGlass} size="lg" color="#836565" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default SearchBar
+
+const search = css`
+  margin-top: 4rem;
+  width: 100%;
+  max-width: 26rem;
+  left: 50%;
+  transform: translateX(-50%);
+  position: fixed;
+  top: 0;
+  background-color: #ffffff;
+  ${flexCenter}
+  flex-direction: row;
+  height: ${calcRem(50)};
+  z-index: 10;
+`
+
+const searchContainer = css`
+  display: flex;
+  align-items: center;
+  width: ${calcRem(253)};
+  height: ${calcRem(32)};
+  border: 1px solid #836565;
+
+  input {
+    font-weight: 500;
+    width: 100%;
+    background: transparent;
+    padding: ${calcRem(5)} ${calcRem(10)};
+    border: none;
+  }
+`

src/elements/Topbar.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react'
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useNavigate } from 'react-router-dom'
-import back from '../assets/images/뒤로가기버튼.png'
 
 const Topbar = () => {
   const navigate = useNavigate()
@@ -13,7 +14,7 @@ const Topbar = () => {
   return (
     <div css={topbar}>
       <button onClick={handleClick} css={backBtn}>
-        <img src={back} alt="Back" />
+        <FontAwesomeIcon icon={faChevronLeft} size="xl" color="#836565" />
       </button>
       <h1 css={title}>ReadingLog</h1>
     </div>