From 43bcde195c3356ace3b39965194dca1391f25a7b Mon Sep 17 00:00:00 2001 From: nemo-nemo-bim Date: Thu, 4 Apr 2024 01:19:31 +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=B8=B0=EB=A1=9D=EC=9E=88=EC=9D=8C/=EC=97=86=EC=9D=8C=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20ui=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 48 ++++++++ package.json | 3 + src/apis/myLogApi.ts | 9 ++ src/apis/userApi.ts | 23 ++++ src/components/mylog/EmptyMylog.tsx | 30 +++++ src/components/mylog/MyLogSearch.tsx | 79 ------------- src/elements/SearchBar.tsx | 63 ++++++++++ src/elements/Topbar.tsx | 5 +- src/pages/mylog/MyLog.tsx | 161 +++++++++++++++----------- src/pages/mylog/MyLogSearchResult.tsx | 4 +- src/shared/Router.tsx | 4 +- src/styles/globalStyles.ts | 13 +-- 12 files changed, 280 insertions(+), 162 deletions(-) create mode 100644 src/components/mylog/EmptyMylog.tsx delete mode 100644 src/components/mylog/MyLogSearch.tsx create mode 100644 src/elements/SearchBar.tsx diff --git a/package-lock.json b/package-lock.json index 67a1575..5e51e42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,9 @@ "version": "0.0.0", "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", @@ -988,6 +991,51 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", + "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz", + "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz", + "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/package.json b/package.json index 19de3f2..00bf91d 100644 --- a/package.json +++ b/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", diff --git a/src/apis/myLogApi.ts b/src/apis/myLogApi.ts index bef5a7e..d2ae528 100644 --- a/src/apis/myLogApi.ts +++ b/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 () => { diff --git a/src/apis/userApi.ts b/src/apis/userApi.ts index c370d4e..c1e9f4f 100644 --- a/src/apis/userApi.ts +++ b/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('회원정보 수정에 실패했습니다. 잠시후 다시 시도해주세요.') + }, + }, + ) +} + +/**비밀번호 변경 */ diff --git a/src/components/mylog/EmptyMylog.tsx b/src/components/mylog/EmptyMylog.tsx new file mode 100644 index 0000000..402e318 --- /dev/null +++ b/src/components/mylog/EmptyMylog.tsx @@ -0,0 +1,30 @@ +import { css } from '@emotion/react' +import { colors, flexCenter } from '../../styles/theme' + +const EmptyMylog = () => { + return ( +
+
이미지
+
+ ) +} + +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}; + } +` diff --git a/src/components/mylog/MyLogSearch.tsx b/src/components/mylog/MyLogSearch.tsx deleted file mode 100644 index f5da6c5..0000000 --- a/src/components/mylog/MyLogSearch.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { css } from '@emotion/react' -import { useCallback, useState } from 'react' -import { useNavigate } from 'react-router-dom' -import magnifier from '../../assets/images/돋보기.png' - -type SearchProp = { - placeholder: string -} - -const MyLogSearch: React.FC = ({ placeholder }) => { - const navigate = useNavigate() - const [searchKeyWord, setSearchKeyWord] = useState('') - - const handleSubmit = useCallback( - async (e: React.FormEvent) => { - e.preventDefault() - navigate(`/mylog/search?q=${searchKeyWord}`) // 나의로그 로그 목록 결과 페이지로 이동 - }, - [navigate, searchKeyWord], - ) - - const handleChange = (e: React.ChangeEvent) => { - setSearchKeyWord(e.target.value) - } - - return ( - <> -
-
- - -
-
- - ) -} - -export default MyLogSearch - -const search = css` - display: flex; - justify-content: center; - width: 100%; - height: 30px; - margin-bottom: 25px; - z-index: 10; -` - -const searchContainer = css` - display: flex; - align-items: center; - width: 19rem; - position: fixed; - input { - background: transparent; - width: 100%; - height: 30px; - text-align: center; - border: 2px solid #836565; - position: absolute; - &:focus { - outline: none; - &::placeholder { - color: transparent; - } - } - } - - button { - display: flex; - align-items: center; - background: none; - border: none; - margin-left: auto; - z-index: 10; - } -` diff --git a/src/elements/SearchBar.tsx b/src/elements/SearchBar.tsx new file mode 100644 index 0000000..738b07f --- /dev/null +++ b/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) => { + setSearchKeyWord(e.target.value) + } + + return ( +
+
+ + +
+
+ ) +} + +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; + } +` diff --git a/src/elements/Topbar.tsx b/src/elements/Topbar.tsx index a2b62ae..d165c14 100644 --- a/src/elements/Topbar.tsx +++ b/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 (

ReadingLog

diff --git a/src/pages/mylog/MyLog.tsx b/src/pages/mylog/MyLog.tsx index 6924a42..32b50d5 100644 --- a/src/pages/mylog/MyLog.tsx +++ b/src/pages/mylog/MyLog.tsx @@ -1,86 +1,115 @@ import { css } from '@emotion/react' -import { Link } from 'react-router-dom' +import { faPencil } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { useNavigate } from 'react-router-dom' import { AllLayout } from '../../components/Layouts' -import MyLogList from '../../components/mylog/MyLogList' -import MyLogSearch from '../../components/mylog/MyLogSearch' - -import BookImg from '../../assets/images/book.png' -import myLogSamples from '../../components/Sample/MyLogSample' -import RecordButton from '../../components/mylog/RecordButton' -import { flexCenter } from '../../styles/theme' -import { Book } from '../../types/book' -import { onBookList } from '../../apis/myLogApi' -import { useEffect, useState } from 'react' +import EmptyMylog from '../../components/mylog/EmptyMylog' +import SearchBar from '../../elements/SearchBar' +import { body1, body2, calcRem, colors, flexCenter } from '../../styles/theme' const MyLog = () => { - const myLogs: Book[] = myLogSamples // 나의 로그 기록 있음(서버 연결되면 삭제) - // const myLogs = '' // 나의 로그 기록 없음(서버 연결되면 삭제) - - // const [myLogs, setMyLogs] = useState([]) // 서버 연결되면 주석 해제 + const navigate = useNavigate() + // const { data, isLoading, isError } = getMyBookList() - useEffect(() => { - // 서버 연결되면 주석 해제 - // onBookList() - // .then(data => { - // setMyLogs(data) - // }) - // .catch(error => { - // // 에러 처리 - // }) - }, [myLogs]) + /**기록하기로 이동 */ + const handleClick = () => { + navigate('/mylog/search-books') // 나의로그 책 검색하기 + } return ( -
+ <> -
- {myLogs?.length > 0 ? ( -
- - -
- -
+ {false ? ( + + ) : ( +
+
+ + {['1', '2', '4', '1', '2', '4', '1', '2', '4', '1', '2', '4'].map((book, index) => ( +
+
+ 책이미지 +
+

책제목

+ 지은이 +
+ ))}
- ) : ( - <> - - - ️✍️ 기록하기 ✍ - - - )} -
+
+ )} -
+
+ 기록하기 + +
+ ) } export default MyLog -const feedContainer = css` - ${flexCenter} - flex-direction: column; - height: 100%; - text-align: center; - a { - color: #836565; - font-weight: bold; +const myLogContainer = css` + ${flexCenter}; + + .mylogList { + margin-top: ${calcRem(50)}; + display: grid; + justify-items: center; + gap: ${calcRem(15)}; + grid-template-columns: 1fr 1fr; } -` -const image = css` - width: 200px; - margin-top: 2rem; - margin-bottom: 2rem; + .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 recordBtn = css` - margin-top: -22.5rem; - margin-left: 17rem; +const writeButton = css` position: fixed; - z-index: 10; + bottom: 5rem; + right: 1rem; + + @media (min-width: 450px) { + position: absolute; + bottom: 5rem; + right: 1rem; + } + + display: flex; + align-items: center; + + span { + ${body1}; + color: ${colors.main1}; + margin-top: ${calcRem(10)}; + margin-right: ${calcRem(10)}; + } + + .btn { + ${flexCenter}; + width: ${calcRem(47)}; + height: ${calcRem(47)}; + background-color: ${colors.button2}; + border: 1px solid ${colors.button1}; + border-radius: 50%; + } ` diff --git a/src/pages/mylog/MyLogSearchResult.tsx b/src/pages/mylog/MyLogSearchResult.tsx index 440cf81..9acbec3 100644 --- a/src/pages/mylog/MyLogSearchResult.tsx +++ b/src/pages/mylog/MyLogSearchResult.tsx @@ -3,7 +3,6 @@ import { useEffect, useState } from 'react' import { Link, useSearchParams } from 'react-router-dom' import { AllLayout } from '../../components/Layouts' import MyLogList from '../../components/mylog/MyLogList' -import MyLogSearch from '../../components/mylog/MyLogSearch' import RecordButton from '../../components/mylog/RecordButton' import { useMyLogSearchQuery } from '../../hooks/useMyLogSearchQuery' import { flexCenter } from '../../styles/theme' @@ -23,8 +22,7 @@ const MyLogSearchResult = () => { <>
- - + {/* */} {myLogList === undefined || myLogList === null || myLogList.length === 0 ? ( <> {/* 키워드 검색 시 해당 로그 목록이 없을 경우 */} diff --git a/src/shared/Router.tsx b/src/shared/Router.tsx index 2836a16..a0954c0 100644 --- a/src/shared/Router.tsx +++ b/src/shared/Router.tsx @@ -11,9 +11,9 @@ 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 ReadingLog from '../pages/readinglog/ReadingLog' import ReadingLogDetail from '../pages/readinglog/ReadingLogDetail' import SearchResult from '../pages/readinglog/SearchResult' -import ReadingLog from '../pages/readinglog/ReadingLog' const Router = () => { return ( @@ -31,7 +31,7 @@ const Router = () => { } /> } /> } /> - {/* 나의 로그 메뉴 페이지 */} + {/* 나의 로그 페이지 */} } /> } /> } /> diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts index fa0a652..f83162a 100644 --- a/src/styles/globalStyles.ts +++ b/src/styles/globalStyles.ts @@ -7,7 +7,8 @@ export const globalStyles = css` height: 100vh; margin: auto; position: relative; - background-color: #fcfcfb; + background-color: #ffffff; + font-size: 1rem; font-family: 'Noto Sans KR', sans-serif; } @@ -38,17 +39,9 @@ export const globalStyles = css` } } - /*배경이미지보고 다시 조정하기*/ - @media all and (min-width: 900px) and (min-height: 500px) { - body { - background: url('/backgroud.jpg') no-repeat center; - background-color: #f4f5f4; - background-size: contain; - } - } - /*엘리먼트 전체 적용*/ * { + font-size: 1rem; font-family: 'Noto Sans KR', sans-serif; box-sizing: border-box; resize: none;