From 9e2364ad7be84fe7be1998c370d5fb1656030de8 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:31:38 +0900 Subject: [PATCH 01/21] =?UTF-8?q?feat:=20CreateBook=20=EA=B2=BD=EB=A1=9C?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "src/\bCreateBook/components/.gitkeep" | 0 "src/\bCreateBook/constants/.gitkeep" | 0 "src/\bCreateBook/hooks/.gitkeep" | 0 "src/\bCreateBook/page/index.tsx" | 5 +++++ src/Router.tsx | 2 ++ 5 files changed, 7 insertions(+) create mode 100644 "src/\bCreateBook/components/.gitkeep" create mode 100644 "src/\bCreateBook/constants/.gitkeep" create mode 100644 "src/\bCreateBook/hooks/.gitkeep" create mode 100644 "src/\bCreateBook/page/index.tsx" diff --git "a/src/\bCreateBook/components/.gitkeep" "b/src/\bCreateBook/components/.gitkeep" new file mode 100644 index 00000000..e69de29b diff --git "a/src/\bCreateBook/constants/.gitkeep" "b/src/\bCreateBook/constants/.gitkeep" new file mode 100644 index 00000000..e69de29b diff --git "a/src/\bCreateBook/hooks/.gitkeep" "b/src/\bCreateBook/hooks/.gitkeep" new file mode 100644 index 00000000..e69de29b diff --git "a/src/\bCreateBook/page/index.tsx" "b/src/\bCreateBook/page/index.tsx" new file mode 100644 index 00000000..f1ea7dbe --- /dev/null +++ "b/src/\bCreateBook/page/index.tsx" @@ -0,0 +1,5 @@ +function CreateBook() { + return
CreateBook
; +} + +export default CreateBook; diff --git a/src/Router.tsx b/src/Router.tsx index fb966ef3..e5320bd1 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -1,5 +1,6 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; +import CreateBook from './CreateBook/page'; import DetailPage from './Detail/page/DetailPage'; import HealthTest from './HealthTest'; import LecueNotePage from './LecueNote/page/LeceuNotePage'; @@ -19,6 +20,7 @@ function Router() { } /> } /> } /> + } /> ); From 683185fc583e3f64a0690ca1658e5c574389dae8 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:31:56 +0900 Subject: [PATCH 02/21] =?UTF-8?q?style:=20lint=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Register/components/NicknameInput/NicknameInput.style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Register/components/NicknameInput/NicknameInput.style.ts b/src/Register/components/NicknameInput/NicknameInput.style.ts index 1acceffc..3539b89d 100644 --- a/src/Register/components/NicknameInput/NicknameInput.style.ts +++ b/src/Register/components/NicknameInput/NicknameInput.style.ts @@ -2,11 +2,11 @@ import styled from '@emotion/styled'; export const NicknameWrapper = styled.section` display: flex; + gap: 1.7rem; align-items: center; flex-direction: column; width: 100%; - gap: 1.7rem; `; export const Question = styled.p` @@ -24,6 +24,7 @@ export const InputContainer = styled.div<{ isEmpty: boolean }>` width: 100%; padding: 1.9rem 2rem; + gap: 1.6rem; ${({ theme }) => theme.fonts.Body3_R_14}; From 399d2fddf3ef49416653078f07600589cb34ff1d Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:34:58 +0900 Subject: [PATCH 03/21] =?UTF-8?q?style:=20=ED=97=A4=EB=8D=94=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CreateBook/page/index.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/CreateBook/page/index.tsx diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx new file mode 100644 index 00000000..175014fe --- /dev/null +++ b/src/CreateBook/page/index.tsx @@ -0,0 +1,10 @@ +function CreateBook() { + + return ( + +
+ + ); +} + +export default CreateBook; From bba55b797e614422f88b32e1207aec709d564a97 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:35:41 +0900 Subject: [PATCH 04/21] =?UTF-8?q?feat:=20Input=EC=B0=BD=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "src/\bCreateBook/components/.gitkeep" | 0 .../components/BookInput/BookInput.style.ts | 57 ++++++++++++++ src/CreateBook/components/BookInput/index.tsx | 78 +++++++++++++++++++ src/CreateBook/page/index.tsx | 5 ++ 4 files changed, 140 insertions(+) delete mode 100644 "src/\bCreateBook/components/.gitkeep" create mode 100644 src/CreateBook/components/BookInput/BookInput.style.ts create mode 100644 src/CreateBook/components/BookInput/index.tsx diff --git "a/src/\bCreateBook/components/.gitkeep" "b/src/\bCreateBook/components/.gitkeep" deleted file mode 100644 index e69de29b..00000000 diff --git a/src/CreateBook/components/BookInput/BookInput.style.ts b/src/CreateBook/components/BookInput/BookInput.style.ts new file mode 100644 index 00000000..8fcda8ff --- /dev/null +++ b/src/CreateBook/components/BookInput/BookInput.style.ts @@ -0,0 +1,57 @@ +import styled from '@emotion/styled'; + +export const BookNameWrapper = styled.section` + display: flex; + gap: 1.7rem; + align-items: center; + flex-direction: column; + + width: 100%; +`; + +export const Question = styled.p` + width: 100%; + + color: ${({ theme }) => theme.colors.BG}; + + ${({ theme }) => theme.fonts.Head2_SB_18}; +`; + +export const InputContainer = styled.div<{ isEmpty: boolean }>` + display: flex; + gap: 1.6rem; + + width: 100%; + padding: 1.9rem 2rem; + + ${({ theme }) => theme.fonts.Body3_R_14}; + + border: 0.1rem solid + ${({ theme, isEmpty }) => (isEmpty ? theme.colors.LG : theme.colors.BG)}; + border-radius: 0.8rem; + background-color: ${({ theme }) => theme.colors.white}; +`; + +export const InputWrapper = styled.div<{ isTitle?: boolean }>` + width: 100%; + height: ${({ isTitle }) => !isTitle && '15rem'}; +`; + +export const Input = styled.input` + width: 100%; + + color: ${({ theme }) => theme.colors.BG}; + + ${({ theme }) => theme.fonts.Body2_M_14}; + text-align: start; +`; + +export const WordCount = styled.p` + display: inline-block; + + color: ${({ theme }) => theme.colors.WG}; + + ${({ theme }) => theme.fonts.E_Body2_R_14}; + + align-self: flex-end; +`; diff --git a/src/CreateBook/components/BookInput/index.tsx b/src/CreateBook/components/BookInput/index.tsx new file mode 100644 index 00000000..27caed54 --- /dev/null +++ b/src/CreateBook/components/BookInput/index.tsx @@ -0,0 +1,78 @@ +import React, { useEffect, useState } from 'react'; + +import * as S from './BookInput.style'; + +type setIsActiveProps = { + handleSetActive: (num: number, t: boolean) => void; + isTitle?: boolean; +}; + +function BookInput({ handleSetActive, isTitle }: setIsActiveProps) { + const [wordCnt, setWordCnt] = useState(0); + const [bookTitle, setBookTitle] = useState(''); + const [limitNum, setLimitNum] = useState(0); + const ArrayNum = isTitle ? 0 : 1; + + /** 영어, 숫자, 문자, 공백인지 체크하는 정규식 함수 */ + const checkInputRange = (str: string) => { + const regExp = /[ㄱ-ㅎㅏ-ㅣ가-힣0-9a-zA-Z\s]/g; + return regExp.test(str) || str.length === 0; + }; + + /** 8자 이하 & 한글, 영어, 숫자만 입력 가능하도록 & 첫번째 글자는 공백 불가능 체크 함수*/ + const handleChangeInput = (e: React.ChangeEvent) => { + const input = e.target.value; + + if ( + e.target.value.length <= limitNum && + checkInputRange(input[input.length - 1]) + ) { + if (e.target.value === ' ') { + setBookTitle(''); + setWordCnt(0); + } else { + setBookTitle(e.target.value); + setWordCnt(e.target.value.length); + } + } + }; + + useEffect(() => { + wordCnt >= 2 + ? handleSetActive(ArrayNum, true) + : handleSetActive(ArrayNum, false); + }, [wordCnt]); + + useEffect(() => { + if (isTitle) { + setLimitNum(12); + } else { + setLimitNum(85); + } + }, []); + + return ( + + {isTitle ? '레큐북 제목' : '레큐북 소개'} + + + + + + ({wordCnt}/{limitNum}) + + + + ); +} + +export default BookInput; diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx index 175014fe..95deb770 100644 --- a/src/CreateBook/page/index.tsx +++ b/src/CreateBook/page/index.tsx @@ -3,6 +3,11 @@ function CreateBook() { return (
+ handleSetActive(num, t)} + isTitle + /> + handleSetActive(num, t)} /> ); } From b3c22b507595b1d3af5d6d6828959acb076c8de2 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:36:21 +0900 Subject: [PATCH 05/21] =?UTF-8?q?feat:=20boolkInput=EC=97=90=20=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=83=81=ED=83=9C,=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CreateBook/page/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx index 95deb770..3a0215d2 100644 --- a/src/CreateBook/page/index.tsx +++ b/src/CreateBook/page/index.tsx @@ -1,4 +1,10 @@ function CreateBook() { + const [isActive, setIsActive] = useState([false, false]); + const handleSetActive = (num: number, t: boolean) => { + const updatedArray = [...isActive]; + updatedArray[num] = t; + setIsActive(updatedArray); + }; return ( From 8052445c82a7bdee80f14fba8cf6ba7f4b1a840b Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:36:43 +0900 Subject: [PATCH 06/21] =?UTF-8?q?style:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CreateBook/page/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx index 3a0215d2..25f4571a 100644 --- a/src/CreateBook/page/index.tsx +++ b/src/CreateBook/page/index.tsx @@ -1,3 +1,5 @@ +import * as S from './CreateBook.style'; + function CreateBook() { const [isActive, setIsActive] = useState([false, false]); const handleSetActive = (num: number, t: boolean) => { From d5534a3a14ef5d78901c0df3eac0a77b5f5b2b24 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:39:50 +0900 Subject: [PATCH 07/21] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CreateBook/page/index.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx index 25f4571a..a2c262b2 100644 --- a/src/CreateBook/page/index.tsx +++ b/src/CreateBook/page/index.tsx @@ -1,7 +1,14 @@ +import Button from '../../components/common/Button'; +import Header from '../../components/common/Header'; import * as S from './CreateBook.style'; function CreateBook() { const [isActive, setIsActive] = useState([false, false]); + + const handleClickConfirm = () => { + alert('버튼 클릭'); + }; + const handleSetActive = (num: number, t: boolean) => { const updatedArray = [...isActive]; updatedArray[num] = t; @@ -16,6 +23,13 @@ function CreateBook() { isTitle /> handleSetActive(num, t)} /> + ); } From f212d97cca188a1bcc92d6a62c707edcae5d3c94 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:40:15 +0900 Subject: [PATCH 08/21] =?UTF-8?q?chore:=20=ED=95=84=EC=9A=94=ED=95=9C=20im?= =?UTF-8?q?port?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CreateBook/page/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx index a2c262b2..46732b3a 100644 --- a/src/CreateBook/page/index.tsx +++ b/src/CreateBook/page/index.tsx @@ -1,5 +1,13 @@ +import { useState } from 'react'; + import Button from '../../components/common/Button'; import Header from '../../components/common/Header'; +import { + CATEGORY, + TEXT_COLOR_CHART, +} from '../../LecueNote/constants/colorChart'; +import BookInput from '../components/BookInput'; +import SelectColor from '../components/SelectColor'; import * as S from './CreateBook.style'; function CreateBook() { From 952e59d7a00317fa010a9d2f68b09c069f8c3792 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:48:26 +0900 Subject: [PATCH 09/21] =?UTF-8?q?feat:=20=EC=83=89=20=EC=84=A0=ED=83=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SelectColor/SelectColor.style.ts | 13 ++++++++++ .../components/SelectColor/index.tsx | 25 +++++++++++++++++++ src/CreateBook/constants/colorChart.ts | 1 + src/CreateBook/page/index.tsx | 5 ++++ 4 files changed, 44 insertions(+) create mode 100644 src/CreateBook/components/SelectColor/SelectColor.style.ts create mode 100644 src/CreateBook/components/SelectColor/index.tsx create mode 100644 src/CreateBook/constants/colorChart.ts diff --git a/src/CreateBook/components/SelectColor/SelectColor.style.ts b/src/CreateBook/components/SelectColor/SelectColor.style.ts new file mode 100644 index 00000000..5266ae9f --- /dev/null +++ b/src/CreateBook/components/SelectColor/SelectColor.style.ts @@ -0,0 +1,13 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.article` + display: flex; + gap: 1.6rem; + flex-direction: column; +`; +export const Category = styled.button` + display: flex; + + ${({ theme }) => theme.colors.BG}; + ${({ theme }) => theme.fonts.Title1_SB_16}; +`; diff --git a/src/CreateBook/components/SelectColor/index.tsx b/src/CreateBook/components/SelectColor/index.tsx new file mode 100644 index 00000000..273d7c62 --- /dev/null +++ b/src/CreateBook/components/SelectColor/index.tsx @@ -0,0 +1,25 @@ +import { BOOK_TEXT_COLOR } from '../../constants/colorChart'; +import { createBookType } from '../../type/createBookType'; +import ShowColorChart from '../ShowColorChart'; +import * as S from './SelectColor.style'; + +function SelectColor({ + clickedTextColor, + handleCategoryFn, + handleColorFn, +}: createBookType) { + return ( + + + 레큐북 배경색 + + + + ); +} + +export default SelectColor; diff --git a/src/CreateBook/constants/colorChart.ts b/src/CreateBook/constants/colorChart.ts new file mode 100644 index 00000000..f8072cd6 --- /dev/null +++ b/src/CreateBook/constants/colorChart.ts @@ -0,0 +1 @@ +export const BOOK_TEXT_COLOR = ['#191919', '#F5F5F5']; diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx index 46732b3a..70508277 100644 --- a/src/CreateBook/page/index.tsx +++ b/src/CreateBook/page/index.tsx @@ -31,6 +31,11 @@ function CreateBook() { isTitle /> handleSetActive(num, t)} /> + + ); } From 829afb08670ae06501b0282a6f7b111fed05fb09 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:50:05 +0900 Subject: [PATCH 12/21] =?UTF-8?q?feat:=20=EC=BB=AC=EB=9F=AC=EC=B0=A8?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ShowColorChart/ShowColorChart.style.ts | 49 +++++++++++++++++++ .../components/ShowColorChart/index.tsx | 22 +++++++++ 2 files changed, 71 insertions(+) create mode 100644 src/CreateBook/components/ShowColorChart/ShowColorChart.style.ts create mode 100644 src/CreateBook/components/ShowColorChart/index.tsx diff --git a/src/CreateBook/components/ShowColorChart/ShowColorChart.style.ts b/src/CreateBook/components/ShowColorChart/ShowColorChart.style.ts new file mode 100644 index 00000000..c12a0c61 --- /dev/null +++ b/src/CreateBook/components/ShowColorChart/ShowColorChart.style.ts @@ -0,0 +1,49 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + display: flex; + gap: 1.4rem; + justify-content: flex-start; + align-items: center; + + padding: 0.5rem 0.1rem 0.7rem 0.3rem; + + overflow-x: scroll; +`; + +export const ColorWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + + width: 3.8rem; + height: 3.8rem; +`; + +export const Color = styled.button<{ $colorCode: string; variant: boolean }>` + border-radius: 3rem; + ${({ $colorCode, theme }) => + $colorCode === '#F5F5F5' && + css` + outline: 0.1rem solid ${theme.colors.WG}; + `}; + background-color: ${({ $colorCode }) => $colorCode}; + + ${({ variant, theme }) => + variant + ? css` + width: 3.8rem; + height: 3.8rem; + + border: 0.4rem solid ${theme.colors.white}; + outline: 0.1rem solid ${theme.colors.WG}; + ` + : css` + width: 3rem; + height: 3rem; + + border: none; + `}; +`; diff --git a/src/CreateBook/components/ShowColorChart/index.tsx b/src/CreateBook/components/ShowColorChart/index.tsx new file mode 100644 index 00000000..ea41cd44 --- /dev/null +++ b/src/CreateBook/components/ShowColorChart/index.tsx @@ -0,0 +1,22 @@ +import { ShowColorChartProps } from '../../../LecueNote/type/lecueNoteType'; +import * as S from './ShowColorChart.style'; + +function ShowColorChart({ colorChart, state, handleFn }: ShowColorChartProps) { + return ( + + {colorChart.map((colorCode) => ( + + + + ))} + + ); +} + +export default ShowColorChart; From 6b14bbaa0b4037955bba39b99741ef772a4379a5 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:50:28 +0900 Subject: [PATCH 13/21] =?UTF-8?q?chore:=20=ED=83=80=EC=9E=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CreateBook/type/createBookType.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/CreateBook/type/createBookType.ts diff --git a/src/CreateBook/type/createBookType.ts b/src/CreateBook/type/createBookType.ts new file mode 100644 index 00000000..c9247dcb --- /dev/null +++ b/src/CreateBook/type/createBookType.ts @@ -0,0 +1,6 @@ +import { SelectColorProps } from '../../LecueNote/type/lecueNoteType'; + +export type createBookType = Omit< + SelectColorProps, + 'clickedBgColor' | 'clickedCategory' +>; From 90d34573a88fc7c7a7aac56ad4b2092bf04428f6 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:50:52 +0900 Subject: [PATCH 14/21] =?UTF-8?q?chore:=20keep=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CreateBook/hooks/.gitkeep | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/CreateBook/hooks/.gitkeep diff --git a/src/CreateBook/hooks/.gitkeep b/src/CreateBook/hooks/.gitkeep new file mode 100644 index 00000000..e69de29b From 8c1d7228c692eda0e3b7eed981f6ffb04e169fb3 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 03:51:56 +0900 Subject: [PATCH 15/21] Empty-Commit From f4143f39a262ba1cdc5747a5564a39d7edf0a8db Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Mon, 15 Jan 2024 21:02:31 +0900 Subject: [PATCH 16/21] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=EB=B6=81=20?= =?UTF-8?q?=EC=9A=94=EA=B8=88=20=EC=84=A0=ED=83=9D=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20->=20=EB=A0=88=ED=81=90=EB=B6=81=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EC=A0=95=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20navigate=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SelectBook/page/SelectBookPage/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/SelectBook/page/SelectBookPage/index.tsx b/src/SelectBook/page/SelectBookPage/index.tsx index be8e5f4b..b1706078 100644 --- a/src/SelectBook/page/SelectBookPage/index.tsx +++ b/src/SelectBook/page/SelectBookPage/index.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { useLocation, useNavigate } from 'react-router-dom'; import { ImgBookBackgray, ImgBookOrange } from '../../../assets'; import Header from '../../../components/common/Header'; @@ -17,6 +18,9 @@ const premiumLecueBookOptions = [ function SelectBookPage() { const [selectedBox, setSelectedBox] = useState(0); const [isClickedSelectButton, setIsClickedSelectButton] = useState(false); + const navigate = useNavigate(); + const location = useLocation(); + const { presignedFileName, name } = location.state || {}; const handleClickCompleteButton = () => { setIsClickedSelectButton(true); @@ -24,7 +28,9 @@ function SelectBookPage() { }; const handleClickMakeLecueBookButton = () => { - // API 쏘기... + navigate('/create-book', { + state: { presignedFileName: presignedFileName, name: name }, + }); }; return ( From 3832d014dda00636dc62b7e583aa90e44d10eb78 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Tue, 16 Jan 2024 01:48:39 +0900 Subject: [PATCH 17/21] =?UTF-8?q?fix:=20=EB=A0=88=ED=81=90=EB=B6=81=20?= =?UTF-8?q?=EB=A7=8C=EB=93=A4=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20state=20?= =?UTF-8?q?=EC=B5=9C=EC=83=81=EC=9C=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BookInfoTextarea.style.ts | 46 ++++++++++ .../components/BookInfoTextarea/index.tsx | 31 +++++++ .../components/BookInput/BookInput.style.ts | 29 ++----- src/CreateBook/components/BookInput/index.tsx | 83 ++++--------------- .../CompleteButton/CompleteButton.style.ts | 6 ++ .../components/CompleteButton/index.tsx | 19 +++++ src/CreateBook/page/CreateBook.style.ts | 33 ++++++-- src/CreateBook/page/index.tsx | 65 ++++++++------- 8 files changed, 184 insertions(+), 128 deletions(-) create mode 100644 src/CreateBook/components/BookInfoTextarea/BookInfoTextarea.style.ts create mode 100644 src/CreateBook/components/BookInfoTextarea/index.tsx create mode 100644 src/CreateBook/components/CompleteButton/CompleteButton.style.ts create mode 100644 src/CreateBook/components/CompleteButton/index.tsx diff --git a/src/CreateBook/components/BookInfoTextarea/BookInfoTextarea.style.ts b/src/CreateBook/components/BookInfoTextarea/BookInfoTextarea.style.ts new file mode 100644 index 00000000..3b006022 --- /dev/null +++ b/src/CreateBook/components/BookInfoTextarea/BookInfoTextarea.style.ts @@ -0,0 +1,46 @@ +import styled from '@emotion/styled'; + +export const BookInfoWrapper = styled.section` + display: flex; + align-items: center; + flex-direction: column; + + width: 100%; + margin-top: 1.2rem; +`; + +export const TextareaContainer = styled.div<{ isEmpty: boolean }>` + width: 100%; + height: 15rem; + padding: 1.7rem 2rem 4rem; + + ${({ theme }) => theme.fonts.Body3_R_14}; + + border: 0.1rem solid + ${({ theme, isEmpty }) => (isEmpty ? theme.colors.LG : theme.colors.BG)}; + border-radius: 0.8rem; + background-color: ${({ theme }) => theme.colors.white}; +`; + +export const Textarea = styled.textarea` + width: 100%; + height: 100%; + + border: none; + color: ${({ theme }) => theme.colors.BG}; + + ${({ theme }) => theme.fonts.Body2_M_14}; + &:focus { + outline: none; + } +`; + +export const WordCount = styled.p` + display: flex; + justify-content: flex-end; + + width: 100%; + + color: ${({ theme }) => theme.colors.WG}; + ${({ theme }) => theme.fonts.E_Body2_R_14}; +`; diff --git a/src/CreateBook/components/BookInfoTextarea/index.tsx b/src/CreateBook/components/BookInfoTextarea/index.tsx new file mode 100644 index 00000000..58b7f52a --- /dev/null +++ b/src/CreateBook/components/BookInfoTextarea/index.tsx @@ -0,0 +1,31 @@ +import * as S from './BookInfoTextarea.style'; + +interface BookInfoTextareaProps { + description: string; + changeDescription: (description: string) => void; +} + +function BookInfoTextarea({ + description, + changeDescription, +}: BookInfoTextareaProps) { + const handleChangeInput = (e: React.ChangeEvent) => { + if (e.target.value.length <= 85) { + changeDescription(e.target.value); + } + }; + return ( + + + + ({description.length}/85) + + + ); +} + +export default BookInfoTextarea; diff --git a/src/CreateBook/components/BookInput/BookInput.style.ts b/src/CreateBook/components/BookInput/BookInput.style.ts index 8fcda8ff..4effa998 100644 --- a/src/CreateBook/components/BookInput/BookInput.style.ts +++ b/src/CreateBook/components/BookInput/BookInput.style.ts @@ -1,28 +1,21 @@ import styled from '@emotion/styled'; -export const BookNameWrapper = styled.section` +export const TitleWrapper = styled.section` display: flex; - gap: 1.7rem; align-items: center; flex-direction: column; width: 100%; -`; - -export const Question = styled.p` - width: 100%; - - color: ${({ theme }) => theme.colors.BG}; - - ${({ theme }) => theme.fonts.Head2_SB_18}; + margin-top: 1.2rem; `; export const InputContainer = styled.div<{ isEmpty: boolean }>` display: flex; - gap: 1.6rem; + justify-content: space-between; + align-items: center; width: 100%; - padding: 1.9rem 2rem; + padding: 1.55rem 2rem; ${({ theme }) => theme.fonts.Body3_R_14}; @@ -32,26 +25,14 @@ export const InputContainer = styled.div<{ isEmpty: boolean }>` background-color: ${({ theme }) => theme.colors.white}; `; -export const InputWrapper = styled.div<{ isTitle?: boolean }>` - width: 100%; - height: ${({ isTitle }) => !isTitle && '15rem'}; -`; - export const Input = styled.input` width: 100%; color: ${({ theme }) => theme.colors.BG}; - ${({ theme }) => theme.fonts.Body2_M_14}; - text-align: start; `; export const WordCount = styled.p` - display: inline-block; - color: ${({ theme }) => theme.colors.WG}; - ${({ theme }) => theme.fonts.E_Body2_R_14}; - - align-self: flex-end; `; diff --git a/src/CreateBook/components/BookInput/index.tsx b/src/CreateBook/components/BookInput/index.tsx index 27caed54..90f36667 100644 --- a/src/CreateBook/components/BookInput/index.tsx +++ b/src/CreateBook/components/BookInput/index.tsx @@ -1,77 +1,28 @@ -import React, { useEffect, useState } from 'react'; - import * as S from './BookInput.style'; -type setIsActiveProps = { - handleSetActive: (num: number, t: boolean) => void; - isTitle?: boolean; -}; - -function BookInput({ handleSetActive, isTitle }: setIsActiveProps) { - const [wordCnt, setWordCnt] = useState(0); - const [bookTitle, setBookTitle] = useState(''); - const [limitNum, setLimitNum] = useState(0); - const ArrayNum = isTitle ? 0 : 1; - - /** 영어, 숫자, 문자, 공백인지 체크하는 정규식 함수 */ - const checkInputRange = (str: string) => { - const regExp = /[ㄱ-ㅎㅏ-ㅣ가-힣0-9a-zA-Z\s]/g; - return regExp.test(str) || str.length === 0; - }; +interface BookInputProps { + title: string; + changeTitle: (title: string) => void; +} - /** 8자 이하 & 한글, 영어, 숫자만 입력 가능하도록 & 첫번째 글자는 공백 불가능 체크 함수*/ +function BookInput({ title, changeTitle }: BookInputProps) { const handleChangeInput = (e: React.ChangeEvent) => { - const input = e.target.value; - - if ( - e.target.value.length <= limitNum && - checkInputRange(input[input.length - 1]) - ) { - if (e.target.value === ' ') { - setBookTitle(''); - setWordCnt(0); - } else { - setBookTitle(e.target.value); - setWordCnt(e.target.value.length); - } + if (e.target.value.length <= 15) { + changeTitle(e.target.value); } }; - - useEffect(() => { - wordCnt >= 2 - ? handleSetActive(ArrayNum, true) - : handleSetActive(ArrayNum, false); - }, [wordCnt]); - - useEffect(() => { - if (isTitle) { - setLimitNum(12); - } else { - setLimitNum(85); - } - }, []); - return ( - - {isTitle ? '레큐북 제목' : '레큐북 소개'} - - - - - - ({wordCnt}/{limitNum}) - + + + + ({title.length}/15) - + ); } diff --git a/src/CreateBook/components/CompleteButton/CompleteButton.style.ts b/src/CreateBook/components/CompleteButton/CompleteButton.style.ts new file mode 100644 index 00000000..7f21332d --- /dev/null +++ b/src/CreateBook/components/CompleteButton/CompleteButton.style.ts @@ -0,0 +1,6 @@ +import styled from '@emotion/styled'; + +export const CompleteButtonWrapper = styled.div` + width: 100%; + margin-bottom: 2rem; +`; diff --git a/src/CreateBook/components/CompleteButton/index.tsx b/src/CreateBook/components/CompleteButton/index.tsx new file mode 100644 index 00000000..d5dc9204 --- /dev/null +++ b/src/CreateBook/components/CompleteButton/index.tsx @@ -0,0 +1,19 @@ +import Button from '../../../components/common/Button'; +import * as S from './CompleteButton.style'; + +interface CompleteButtonProps { + isActive: boolean; + onClick: () => void; +} + +function CompleteButton({ isActive, onClick }: CompleteButtonProps) { + return ( + + + + ); +} + +export default CompleteButton; diff --git a/src/CreateBook/page/CreateBook.style.ts b/src/CreateBook/page/CreateBook.style.ts index d4b566d1..efaaa0f2 100644 --- a/src/CreateBook/page/CreateBook.style.ts +++ b/src/CreateBook/page/CreateBook.style.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -export const Wrapper = styled.section` +export const CreateBookWrapper = styled.section` display: flex; flex-direction: column; @@ -8,16 +8,33 @@ export const Wrapper = styled.section` height: 100dvh; `; -export const ContentWrapper = styled.div` +export const CreateBookBodyWrapper = styled.div` display: flex; - gap: 3.6rem; + justify-content: space-between; flex-direction: column; - margin: 0 1.5rem; - margin-top: 8.2rem; + width: 100%; + height: calc(100vh - 5.4rem); + padding: 0 1.6rem; + margin-top: 5.4rem; `; -export const ButtonWrapper = styled.section` - display: flex; - align-self: end; +export const InputWrapper = styled.div` + width: 100%; +`; + +export const SectionTitle = styled.p` + color: ${({ theme }) => theme.colors.BG}; + + ${({ theme }) => theme.fonts.Head2_SB_18}; +`; + +export const BookInputWrapper = styled.div` + width: 100%; + margin-top: 3rem; +`; + +export const BookInfoTextareaWrapper = styled.div` + width: 100%; + margin: 4.4rem 0 2.63rem; `; diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx index 5cbb00d5..a212e30b 100644 --- a/src/CreateBook/page/index.tsx +++ b/src/CreateBook/page/index.tsx @@ -1,17 +1,19 @@ import { useState } from 'react'; -import Button from '../../components/common/Button'; import Header from '../../components/common/Header'; import { CATEGORY, TEXT_COLOR_CHART, } from '../../LecueNote/constants/colorChart'; +import BookInfoTextarea from '../components/BookInfoTextarea'; import BookInput from '../components/BookInput'; +import CompleteButton from '../components/CompleteButton'; import SelectColor from '../components/SelectColor'; import * as S from './CreateBook.style'; function CreateBook() { - const [isActive, setIsActive] = useState([false, false]); + const [title, setTitle] = useState(''); + const [description, setDescription] = useState(''); const [clickedCategory, setClickedCategory] = useState(CATEGORY[0]); const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]); @@ -32,39 +34,42 @@ function CreateBook() { } }; - const handleClickConfirm = () => { - alert('버튼 클릭'); - }; + // const handleSetActive = (num: number, t: boolean) => { + // const updatedArray = [...isActive]; + // updatedArray[num] = t; + // setIsActive(updatedArray); + // }; - const handleSetActive = (num: number, t: boolean) => { - const updatedArray = [...isActive]; - updatedArray[num] = t; - setIsActive(updatedArray); - }; + const handleClickCompleteButton = () => {}; return ( - +
- - handleSetActive(num, t)} - isTitle - /> - handleSetActive(num, t)} /> - + + + 레큐북 제목 + setTitle(title)} /> + + + 레큐북 소개 + setDescription(description)} + /> + + + + - - - + + ); } From 8a67fdb327665bf8fbaa9b6a8b8d64d1677238f4 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Tue, 16 Jan 2024 01:53:03 +0900 Subject: [PATCH 18/21] =?UTF-8?q?fix:=20resize=20=EB=B9=84=ED=99=9C?= =?UTF-8?q?=EC=84=B1=ED=99=94=20&=20UX=EB=9D=BC=EC=9D=B4=ED=8C=85=20?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/BookInfoTextarea/BookInfoTextarea.style.ts | 3 +++ src/CreateBook/components/BookInfoTextarea/index.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/CreateBook/components/BookInfoTextarea/BookInfoTextarea.style.ts b/src/CreateBook/components/BookInfoTextarea/BookInfoTextarea.style.ts index 3b006022..159b846b 100644 --- a/src/CreateBook/components/BookInfoTextarea/BookInfoTextarea.style.ts +++ b/src/CreateBook/components/BookInfoTextarea/BookInfoTextarea.style.ts @@ -30,6 +30,9 @@ export const Textarea = styled.textarea` color: ${({ theme }) => theme.colors.BG}; ${({ theme }) => theme.fonts.Body2_M_14}; + + resize: none; + &:focus { outline: none; } diff --git a/src/CreateBook/components/BookInfoTextarea/index.tsx b/src/CreateBook/components/BookInfoTextarea/index.tsx index 58b7f52a..67e703a9 100644 --- a/src/CreateBook/components/BookInfoTextarea/index.tsx +++ b/src/CreateBook/components/BookInfoTextarea/index.tsx @@ -18,7 +18,7 @@ function BookInfoTextarea({ From 5292d45d299bedde03ddd47938e7dec6ab4d45b6 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Tue, 16 Jan 2024 05:31:01 +0900 Subject: [PATCH 19/21] =?UTF-8?q?fix:=20CreateBook=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SelectColor/SelectColor.style.ts | 2 +- .../components/SelectColor/index.tsx | 25 +++++++------ .../components/ShowColorChart/index.tsx | 35 +++++++++++------- src/CreateBook/constants/.gitkeep | 0 src/CreateBook/constants/colorChart.ts | 1 - src/CreateBook/page/index.tsx | 37 +++---------------- src/CreateBook/utils/api.ts | 0 7 files changed, 41 insertions(+), 59 deletions(-) create mode 100644 src/CreateBook/constants/.gitkeep delete mode 100644 src/CreateBook/constants/colorChart.ts create mode 100644 src/CreateBook/utils/api.ts diff --git a/src/CreateBook/components/SelectColor/SelectColor.style.ts b/src/CreateBook/components/SelectColor/SelectColor.style.ts index 5266ae9f..f1a48128 100644 --- a/src/CreateBook/components/SelectColor/SelectColor.style.ts +++ b/src/CreateBook/components/SelectColor/SelectColor.style.ts @@ -5,7 +5,7 @@ export const Wrapper = styled.article` gap: 1.6rem; flex-direction: column; `; -export const Category = styled.button` +export const Category = styled.p` display: flex; ${({ theme }) => theme.colors.BG}; diff --git a/src/CreateBook/components/SelectColor/index.tsx b/src/CreateBook/components/SelectColor/index.tsx index 273d7c62..94ed57d2 100644 --- a/src/CreateBook/components/SelectColor/index.tsx +++ b/src/CreateBook/components/SelectColor/index.tsx @@ -1,22 +1,23 @@ -import { BOOK_TEXT_COLOR } from '../../constants/colorChart'; -import { createBookType } from '../../type/createBookType'; import ShowColorChart from '../ShowColorChart'; import * as S from './SelectColor.style'; +interface SelectColorProps { + backgroundColor: string; + clickBackgroundColor: (backgroundColor: string) => void; +} + function SelectColor({ - clickedTextColor, - handleCategoryFn, - handleColorFn, -}: createBookType) { + backgroundColor, + clickBackgroundColor, +}: SelectColorProps) { return ( - - 레큐북 배경색 - + 레큐북 배경색 + clickBackgroundColor(backgroundColor) + } /> ); diff --git a/src/CreateBook/components/ShowColorChart/index.tsx b/src/CreateBook/components/ShowColorChart/index.tsx index ea41cd44..6fe4ce7f 100644 --- a/src/CreateBook/components/ShowColorChart/index.tsx +++ b/src/CreateBook/components/ShowColorChart/index.tsx @@ -1,20 +1,29 @@ -import { ShowColorChartProps } from '../../../LecueNote/type/lecueNoteType'; import * as S from './ShowColorChart.style'; -function ShowColorChart({ colorChart, state, handleFn }: ShowColorChartProps) { +interface ShowColorChartProps { + backgroundColor: string; + handleFn: (backgroundColor: string) => void; +} + +function ShowColorChart({ backgroundColor, handleFn }: ShowColorChartProps) { return ( - {colorChart.map((colorCode) => ( - - - - ))} + + handleFn('#191919')} + variant={backgroundColor === '#191919'} + > + + + handleFn('#F5F5F5')} + variant={backgroundColor === '#F5F5F5'} + > + ); } diff --git a/src/CreateBook/constants/.gitkeep b/src/CreateBook/constants/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/src/CreateBook/constants/colorChart.ts b/src/CreateBook/constants/colorChart.ts deleted file mode 100644 index f8072cd6..00000000 --- a/src/CreateBook/constants/colorChart.ts +++ /dev/null @@ -1 +0,0 @@ -export const BOOK_TEXT_COLOR = ['#191919', '#F5F5F5']; diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx index a212e30b..e9fabb28 100644 --- a/src/CreateBook/page/index.tsx +++ b/src/CreateBook/page/index.tsx @@ -1,10 +1,6 @@ import { useState } from 'react'; import Header from '../../components/common/Header'; -import { - CATEGORY, - TEXT_COLOR_CHART, -} from '../../LecueNote/constants/colorChart'; import BookInfoTextarea from '../components/BookInfoTextarea'; import BookInput from '../components/BookInput'; import CompleteButton from '../components/CompleteButton'; @@ -14,31 +10,7 @@ import * as S from './CreateBook.style'; function CreateBook() { const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); - - const [clickedCategory, setClickedCategory] = useState(CATEGORY[0]); - const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]); - - const handleClickCategory = ( - e: React.MouseEvent, - ) => { - setClickedCategory(e.currentTarget.innerHTML); - }; - - const handleClickedColorBtn = ( - e: React.MouseEvent, - ) => { - if (clickedCategory === '텍스트색') { - setClickedTextColor(e.currentTarget.id); - } else { - setClickedCategory(e.currentTarget.id); - } - }; - - // const handleSetActive = (num: number, t: boolean) => { - // const updatedArray = [...isActive]; - // updatedArray[num] = t; - // setIsActive(updatedArray); - // }; + const [backgroundColor, setBackgroundColor] = useState('#191919'); const handleClickCompleteButton = () => {}; @@ -59,9 +31,10 @@ function CreateBook() { /> + setBackgroundColor(backgroundColor) + } + backgroundColor={backgroundColor} /> Date: Tue, 16 Jan 2024 06:55:11 +0900 Subject: [PATCH 20/21] =?UTF-8?q?fix:=20DOM=20Nesting=20Error=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts | 2 +- src/SelectBook/page/SelectBookPage/index.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts b/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts index 15778218..7d95241b 100644 --- a/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts +++ b/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts @@ -35,7 +35,7 @@ export const SectionTitle = styled.p` ${({ theme }) => theme.fonts.Head2_SB_18}; `; -export const SectionOrangeTitle = styled.p` +export const SectionOrangeTitle = styled.span` color: ${({ theme }) => theme.colors.key}; ${({ theme }) => theme.fonts.Head2_SB_18}; `; diff --git a/src/SelectBook/page/SelectBookPage/index.tsx b/src/SelectBook/page/SelectBookPage/index.tsx index b1706078..82412dc3 100644 --- a/src/SelectBook/page/SelectBookPage/index.tsx +++ b/src/SelectBook/page/SelectBookPage/index.tsx @@ -41,6 +41,7 @@ function SelectBookPage() { {isClickedSelectButton ? ( 레큐는 이벤트 중! +
무료로 프리미엄 레큐북을 만들어요! ) : ( From 26248eaa3513c70b72d2b47f9774d7f950395478 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Tue, 16 Jan 2024 07:03:16 +0900 Subject: [PATCH 21/21] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=EB=B6=81=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20POST=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CreateBook/page/index.tsx | 18 ++++++++++++++- src/CreateBook/utils/api.ts | 43 +++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 1 deletion(-) diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx index e9fabb28..746d9d69 100644 --- a/src/CreateBook/page/index.tsx +++ b/src/CreateBook/page/index.tsx @@ -1,18 +1,34 @@ import { useState } from 'react'; +import { useLocation, useNavigate } from 'react-router-dom'; import Header from '../../components/common/Header'; import BookInfoTextarea from '../components/BookInfoTextarea'; import BookInput from '../components/BookInput'; import CompleteButton from '../components/CompleteButton'; import SelectColor from '../components/SelectColor'; +import { postBook } from '../utils/api'; import * as S from './CreateBook.style'; function CreateBook() { const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); const [backgroundColor, setBackgroundColor] = useState('#191919'); + const location = useLocation(); + const navigate = useNavigate(); + const { presignedFileName, name } = location.state || {}; - const handleClickCompleteButton = () => {}; + const handleClickCompleteButton = async () => { + const postData = { + favoriteName: name, + favoriteImage: presignedFileName, + title: title, + description: description, + backgroundColor: backgroundColor, + }; + + const { bookUuid } = await postBook(postData); + navigate(`/lecue-book/${bookUuid}`); + }; return ( diff --git a/src/CreateBook/utils/api.ts b/src/CreateBook/utils/api.ts index e69de29b..038c51f5 100644 --- a/src/CreateBook/utils/api.ts +++ b/src/CreateBook/utils/api.ts @@ -0,0 +1,43 @@ +import { AxiosResponse } from 'axios'; + +import { api } from '../../libs/api'; + +interface ApiResponse { + code: number; + message: string; + data: { + bookUuid: string; + }; +} + +interface PostBookData { + favoriteName: string; + favoriteImage: string; + title: string; + description: string; + backgroundColor: string; +} + +const getAuthorizationToken = (): string | null => { + return localStorage.getItem('token'); +}; + +const postBook = async (data: PostBookData): Promise<{ bookUuid: string }> => { + const token = getAuthorizationToken(); + + const response: AxiosResponse = await api.post( + '/api/books', + data, + { + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json', + }, + }, + ); + + const bookUuid = response.data.data.bookUuid; + return { bookUuid }; +}; + +export { postBook };