From 233428e3a8addc3a02400021911adfc8671f12c4 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Sun, 14 Jan 2024 07:35:36 +0900 Subject: [PATCH 01/11] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=EB=B6=81=20?= =?UTF-8?q?=EC=98=B5=EC=85=98=20=EC=84=A0=ED=83=9D=EC=8B=9C=20=EC=8A=AC?= =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=93=9C=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Router.tsx | 2 + .../BookTypeBox/BookTypeBox.style.ts | 28 ++++++++++++ .../components/BookTypeBox/index.tsx | 30 +++++++++++++ .../SelectBookPage/SelectBookPage.style.ts | 35 +++++++++++++++ src/SelectBook/page/SelectBookPage/index.tsx | 44 +++++++++++++++++++ 5 files changed, 139 insertions(+) create mode 100644 src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts create mode 100644 src/SelectBook/components/BookTypeBox/index.tsx create mode 100644 src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts create mode 100644 src/SelectBook/page/SelectBookPage/index.tsx diff --git a/src/Router.tsx b/src/Router.tsx index 9c43e9c5..f9e303dd 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -4,6 +4,7 @@ import DetailPage from './Detail/page/DetailPage'; import HealthTest from './HealthTest'; import HomePage from './Home/page/HomePage'; import Login from './Login/page'; +import SelectBookPage from './SelectBook/page/SelectBookPage'; import StickerPack from './StickerPack/page/StickerPack'; function Router() { @@ -15,6 +16,7 @@ function Router() { } /> } /> } /> + } /> ); diff --git a/src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts b/src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts new file mode 100644 index 00000000..961af20c --- /dev/null +++ b/src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; + +export const BookTypeBoxWrapper = styled.div<{ + bookType: number; + selectedBox: number; + isClickedSelectButton: boolean; +}>` + display: flex; + align-items: center; + flex-direction: column; + position: absolute; + + /* z-index: ${({ bookType, selectedBox }) => + bookType === selectedBox ? '2' : '1'}; */ + + width: ${({ bookType, isClickedSelectButton }) => + bookType === 2 && isClickedSelectButton ? '28.4rem' : '16.5rem'}; + height: 34.9rem; + + border: 1px solid blue; + background-color: ${({ bookType }) => (bookType === 1 ? 'blue' : 'red')}; + + transition: + width 0.5s ease, + transform 0.5s ease; + + ${({ bookType }) => (bookType === 1 ? 'left' : 'right')}: 0; +`; diff --git a/src/SelectBook/components/BookTypeBox/index.tsx b/src/SelectBook/components/BookTypeBox/index.tsx new file mode 100644 index 00000000..134149ee --- /dev/null +++ b/src/SelectBook/components/BookTypeBox/index.tsx @@ -0,0 +1,30 @@ +import * as S from './BookTypeBox.style'; + +interface BookTypeBoxProps { + onClick: () => void; + selectedBox: number; + bookType: number; + isClickedSelectButton: boolean; +} + +function BookTypeBox({ + onClick, + bookType, + selectedBox, + isClickedSelectButton, +}: BookTypeBoxProps) { + return ( + { + onClick(); + }} + bookType={bookType} + selectedBox={selectedBox} + isClickedSelectButton={isClickedSelectButton} + > + {bookType} + + ); +} + +export default BookTypeBox; diff --git a/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts b/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts new file mode 100644 index 00000000..d343efc4 --- /dev/null +++ b/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts @@ -0,0 +1,35 @@ +import styled from '@emotion/styled'; + +export const SelectBookPageWrapper = styled.div` + display: flex; + align-items: center; + flex-direction: column; + + width: 100vw; + height: 100dvh; +`; + +export const SelectBookPageBodyWrapper = styled.div` + width: 100%; + padding: 0 1.6rem; + margin-top: 5.4rem; +`; + +export const SelectBookContainer = styled.div` + width: 100%; + margin-top: 5.4rem; +`; + +export const SectionTitle = styled.p` + color: ${({ theme }) => theme.colors.BG}; + ${({ theme }) => theme.fonts.Head2_SB_18}; +`; + +export const BookTypeContainer = styled.div` + display: flex; + justify-content: space-between; + position: relative; + + width: 34.3rem; + margin-top: 4rem; +`; diff --git a/src/SelectBook/page/SelectBookPage/index.tsx b/src/SelectBook/page/SelectBookPage/index.tsx new file mode 100644 index 00000000..4e0cc099 --- /dev/null +++ b/src/SelectBook/page/SelectBookPage/index.tsx @@ -0,0 +1,44 @@ +import { useState } from 'react'; + +import Header from '../../../components/common/Header'; +import BookTypeBox from '../../components/BookTypeBox'; +import * as S from './SelectBookPage.style'; + +function SelectBookPage() { + const [selectedBox, setSelectedBox] = useState(0); + const [isClickedSelectButton, setIsClickedSelectButton] = useState(false); + + console.log(selectedBox); + return ( + +
+ + + 레큐북 타입 선택 + + setSelectedBox(selectedBox === 1 ? 0 : 1)} + bookType={1} + selectedBox={selectedBox} + isClickedSelectButton={isClickedSelectButton} + /> + setSelectedBox(selectedBox === 2 ? 0 : 2)} + bookType={2} + selectedBox={selectedBox} + isClickedSelectButton={isClickedSelectButton} + /> + + + + + + ); +} + +export default SelectBookPage; From fce1573da28b47fd42f6a001c63b64923fe20646 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Sun, 14 Jan 2024 09:43:36 +0900 Subject: [PATCH 02/11] =?UTF-8?q?docs:=20svg=20=EB=B0=8F=20img=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icon/ic_check.svg | 3 +++ src/assets/img/img_book_backgray.svg | 14 ++++++++++++++ src/assets/img/img_book_orange.svg | 14 ++++++++++++++ src/assets/img/img_book_orange_big.svg | 14 ++++++++++++++ src/assets/index.ts | 8 ++++++++ 5 files changed, 53 insertions(+) create mode 100644 src/assets/icon/ic_check.svg create mode 100644 src/assets/img/img_book_backgray.svg create mode 100644 src/assets/img/img_book_orange.svg create mode 100644 src/assets/img/img_book_orange_big.svg diff --git a/src/assets/icon/ic_check.svg b/src/assets/icon/ic_check.svg new file mode 100644 index 00000000..a3ed8914 --- /dev/null +++ b/src/assets/icon/ic_check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/img_book_backgray.svg b/src/assets/img/img_book_backgray.svg new file mode 100644 index 00000000..d82a5411 --- /dev/null +++ b/src/assets/img/img_book_backgray.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/img/img_book_orange.svg b/src/assets/img/img_book_orange.svg new file mode 100644 index 00000000..47a21ab1 --- /dev/null +++ b/src/assets/img/img_book_orange.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/img/img_book_orange_big.svg b/src/assets/img/img_book_orange_big.svg new file mode 100644 index 00000000..d6846b0d --- /dev/null +++ b/src/assets/img/img_book_orange_big.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/index.ts b/src/assets/index.ts index 5aa0ae1a..9fe476df 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -10,6 +10,7 @@ import BtnKakaologin from './button/btn_kakaologin.svg?react'; import IcArrowLeftBlack from './icon/ic_arrow_left_black.svg?react'; import IcArrowLeftWhite from './icon/ic_arrow_left_white.svg?react'; import IcCamera from './icon/ic_camera.svg?react'; +import IcCheck from './icon/ic_check.svg?react'; import IcCrown from './icon/ic_crown.svg?react'; import IcDate from './icon/ic_date.svg?react'; import IcHome from './icon/ic_home.svg?react'; @@ -17,6 +18,9 @@ import IcNotice from './icon/ic_notice.svg?react'; import IcSharing from './icon/ic_sharing.svg?react'; import IcX from './icon/ic_x.svg?react'; import ImgBook from './img/img_book.svg?react'; +import ImgBookBackgray from './img/img_book_backgray.svg?react'; +import ImgBookOrange from './img/img_book_orange.svg?react'; +import ImgBookOrangeBig from './img/img_book_orange_big.svg'; import ImgKakao01 from './img/img_kakao_01.svg?react'; import ImgKakao02 from './img/img_kakao_02.svg?react'; import ImgKakao03 from './img/img_kakao_03.svg?react'; @@ -42,6 +46,7 @@ export { IcArrowLeftBlack, IcArrowLeftWhite, IcCamera, + IcCheck, IcCrown, IcDate, IcHome, @@ -49,6 +54,9 @@ export { IcSharing, IcX, ImgBook, + ImgBookBackgray, + ImgBookOrange, + ImgBookOrangeBig, ImgKakao01, ImgKakao02, ImgKakao03, From dba83424802dfc29efd03c7b384a6809b1a60b69 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Sun, 14 Jan 2024 09:44:16 +0900 Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=EB=B6=81=20?= =?UTF-8?q?=EC=98=B5=EC=85=98=20=EC=84=A0=ED=83=9D=20UI=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BookTypeBox/BookTypeBox.style.ts | 76 ++++++++++++++++++- .../components/BookTypeBox/index.tsx | 31 +++++++- .../BookTypeBoxOption.style.ts | 12 +++ .../components/BookTypeBoxOption/index.tsx | 17 +++++ src/SelectBook/page/SelectBookPage/index.tsx | 21 ++++- 5 files changed, 152 insertions(+), 5 deletions(-) create mode 100644 src/SelectBook/components/BookTypeBoxOption/BookTypeBoxOption.style.ts create mode 100644 src/SelectBook/components/BookTypeBoxOption/index.tsx diff --git a/src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts b/src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts index 961af20c..83367140 100644 --- a/src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts +++ b/src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts @@ -17,12 +17,84 @@ export const BookTypeBoxWrapper = styled.div<{ bookType === 2 && isClickedSelectButton ? '28.4rem' : '16.5rem'}; height: 34.9rem; - border: 1px solid blue; - background-color: ${({ bookType }) => (bookType === 1 ? 'blue' : 'red')}; + border: ${({ bookType, selectedBox, theme }) => + selectedBox === 0 + ? `0.1rem solid ${theme.colors.LG}` + : selectedBox === bookType + ? `0.1rem solid ${theme.colors.key}` + : `0.1rem solid ${theme.colors.MG}`}; + border-radius: 0.4rem; + background-color: ${({ bookType, selectedBox, theme }) => + bookType === 2 && bookType === selectedBox + ? theme.colors.BG + : theme.colors.white}; transition: width 0.5s ease, transform 0.5s ease; + opacity: ${({ bookType, selectedBox }) => + selectedBox !== 0 && bookType !== selectedBox ? 0.5 : 1}; ${({ bookType }) => (bookType === 1 ? 'left' : 'right')}: 0; `; + +export const BookTypeBoxTitle = styled.p<{ + bookType: number; + selectedBox: number; +}>` + display: flex; + align-items: center; + + height: 3.7rem; + margin: 2.5rem 0 2.7rem; + + color: ${({ bookType, selectedBox, theme }) => + bookType === 2 && bookType === selectedBox + ? theme.colors.white + : theme.colors.BG}; + + ${({ theme }) => theme.fonts.Title1_SB_16}; +`; + +export const BookTypeBoxPrice = styled.p<{ + bookType: number; + selectedBox: number; +}>` + margin-top: 0.9rem; + + color: ${({ bookType, selectedBox, theme }) => + bookType === 2 && bookType === selectedBox + ? theme.colors.white + : theme.colors.BG}; + ${({ theme }) => theme.fonts.Head1_B_20}; +`; + +export const BookTypeBoxPriceWrapper = styled.div` + display: flex; + column-gap: 0.7rem; + + align-items: flex-end; +`; + +export const OneBookText = styled.p` + padding-bottom: 0.2rem; + + color: ${({ theme }) => theme.colors.MG}; + ${({ theme }) => theme.fonts.Body2_M_14}; +`; + +export const BookTypeBoxOptionList = styled.div<{ + bookType: number; + selectedBox: number; +}>` + display: flex; + flex-direction: column; + row-gap: 0.6rem; + + margin-top: 3.85rem; + + color: ${({ bookType, selectedBox, theme }) => + bookType === 2 && bookType === selectedBox + ? theme.colors.white + : theme.colors.DG}; +`; diff --git a/src/SelectBook/components/BookTypeBox/index.tsx b/src/SelectBook/components/BookTypeBox/index.tsx index 134149ee..21c8cb42 100644 --- a/src/SelectBook/components/BookTypeBox/index.tsx +++ b/src/SelectBook/components/BookTypeBox/index.tsx @@ -1,28 +1,55 @@ +import { ReactNode } from 'react'; + +import BookTypeBoxOption from '../BookTypeBoxOption'; import * as S from './BookTypeBox.style'; interface BookTypeBoxProps { onClick: () => void; selectedBox: number; bookType: number; + bookTypeBoxTitle: string; + bookTypeBoxImg: ReactNode; + bookTypeBoxPrice: number; isClickedSelectButton: boolean; + bookTypeBoxOptionList: string[]; } function BookTypeBox({ onClick, bookType, + bookTypeBoxTitle, + bookTypeBoxImg, + bookTypeBoxPrice, selectedBox, isClickedSelectButton, + bookTypeBoxOptionList, }: BookTypeBoxProps) { return ( { - onClick(); + if (isClickedSelectButton === false) { + onClick(); + } }} bookType={bookType} selectedBox={selectedBox} isClickedSelectButton={isClickedSelectButton} > - {bookType} + + {bookTypeBoxTitle} + + {bookTypeBoxImg} + + + {bookTypeBoxPrice}원 + + {bookType == 2 ? /1권 : <>} + + + {bookTypeBoxOptionList.map((option, idx) => ( + + ))} + ); } diff --git a/src/SelectBook/components/BookTypeBoxOption/BookTypeBoxOption.style.ts b/src/SelectBook/components/BookTypeBoxOption/BookTypeBoxOption.style.ts new file mode 100644 index 00000000..a6856627 --- /dev/null +++ b/src/SelectBook/components/BookTypeBoxOption/BookTypeBoxOption.style.ts @@ -0,0 +1,12 @@ +import styled from '@emotion/styled'; + +export const BookTypeBoxOptionWrapper = styled.div` + display: flex; + column-gap: 0.5rem; + + align-items: center; +`; + +export const BookTypeBoxOptionText = styled.p` + ${({ theme }) => theme.fonts.Body2_M_14}; +`; diff --git a/src/SelectBook/components/BookTypeBoxOption/index.tsx b/src/SelectBook/components/BookTypeBoxOption/index.tsx new file mode 100644 index 00000000..a4a2b200 --- /dev/null +++ b/src/SelectBook/components/BookTypeBoxOption/index.tsx @@ -0,0 +1,17 @@ +import { IcCheck } from '../../../assets'; +import * as S from './BookTypeBoxOption.style'; + +interface BookTypeBoxOptionProps { + bookTypeBoxOption: string; +} + +function BookTypeBoxOption({ bookTypeBoxOption }: BookTypeBoxOptionProps) { + return ( + + + {bookTypeBoxOption} + + ); +} + +export default BookTypeBoxOption; diff --git a/src/SelectBook/page/SelectBookPage/index.tsx b/src/SelectBook/page/SelectBookPage/index.tsx index 4e0cc099..8c0b4c27 100644 --- a/src/SelectBook/page/SelectBookPage/index.tsx +++ b/src/SelectBook/page/SelectBookPage/index.tsx @@ -1,9 +1,17 @@ import { useState } from 'react'; +import { ImgBookBackgray, ImgBookOrange } from '../../../assets'; import Header from '../../../components/common/Header'; import BookTypeBox from '../../components/BookTypeBox'; import * as S from './SelectBookPage.style'; +const basicLecueBookOptions = ['레큐노트 최대 100장', '텍스트 & 배경색 2종']; +const premiumLecueBookOptions = [ + '레큐노트 무제한', + '레큐노트 배경색 6종', + '스티커 꾸미기', +]; + function SelectBookPage() { const [selectedBox, setSelectedBox] = useState(0); const [isClickedSelectButton, setIsClickedSelectButton] = useState(false); @@ -19,19 +27,30 @@ function SelectBookPage() { setSelectedBox(selectedBox === 1 ? 0 : 1)} bookType={1} + bookTypeBoxTitle="베이직 레큐북" + bookTypeBoxImg={} + bookTypeBoxPrice={0} selectedBox={selectedBox} isClickedSelectButton={isClickedSelectButton} + bookTypeBoxOptionList={basicLecueBookOptions} /> setSelectedBox(selectedBox === 2 ? 0 : 2)} bookType={2} + bookTypeBoxTitle="프리미엄 레큐북" + bookTypeBoxImg={} + bookTypeBoxPrice={990} selectedBox={selectedBox} isClickedSelectButton={isClickedSelectButton} + bookTypeBoxOptionList={premiumLecueBookOptions} /> + + ); +} + +export default CompleteButton; diff --git a/src/SelectBook/components/MakeLecueBookButton/MakeLecueBookButton.style.ts b/src/SelectBook/components/MakeLecueBookButton/MakeLecueBookButton.style.ts new file mode 100644 index 00000000..cf99d31c --- /dev/null +++ b/src/SelectBook/components/MakeLecueBookButton/MakeLecueBookButton.style.ts @@ -0,0 +1,6 @@ +import styled from '@emotion/styled'; + +export const MakeLecueBookButtonWrapper = styled.div` + width: 100%; + margin-bottom: 2rem; +`; diff --git a/src/SelectBook/components/MakeLecueBookButton/index.tsx b/src/SelectBook/components/MakeLecueBookButton/index.tsx new file mode 100644 index 00000000..bd50a34d --- /dev/null +++ b/src/SelectBook/components/MakeLecueBookButton/index.tsx @@ -0,0 +1,19 @@ +import Button from '../../../components/common/Button'; +import * as S from './MakeLecueBookButton.style'; + +interface MakeLecueBookButtonProps { + isActive: boolean; + onClick: () => void; +} + +function MakeLecueBookButton({ isActive, onClick }: MakeLecueBookButtonProps) { + return ( + + + + ); +} + +export default MakeLecueBookButton; From 3c516bcb442f0f7dcb36537a4ef6729b042fc278 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Mon, 15 Jan 2024 00:43:11 +0900 Subject: [PATCH 06/11] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=EB=B6=81=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=9A=94=EA=B8=88=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=ED=8D=BC=EB=B8=94=EB=A6=AC?= =?UTF-8?q?=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BookTypeBox/BookTypeBox.style.ts | 24 +++--- .../components/BookTypeBox/index.tsx | 31 ++++++-- .../SelectBookPage/SelectBookPage.style.ts | 25 +++++- src/SelectBook/page/SelectBookPage/index.tsx | 79 +++++++++++-------- 4 files changed, 111 insertions(+), 48 deletions(-) diff --git a/src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts b/src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts index 83367140..19012005 100644 --- a/src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts +++ b/src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts @@ -10,9 +10,6 @@ export const BookTypeBoxWrapper = styled.div<{ flex-direction: column; position: absolute; - /* z-index: ${({ bookType, selectedBox }) => - bookType === selectedBox ? '2' : '1'}; */ - width: ${({ bookType, isClickedSelectButton }) => bookType === 2 && isClickedSelectButton ? '28.4rem' : '16.5rem'}; height: 34.9rem; @@ -41,19 +38,24 @@ export const BookTypeBoxWrapper = styled.div<{ export const BookTypeBoxTitle = styled.p<{ bookType: number; selectedBox: number; + isClickedSelectButton: boolean; }>` display: flex; align-items: center; height: 3.7rem; - margin: 2.5rem 0 2.7rem; + margin-top: 2.5rem; + margin-bottom: ${({ bookType, isClickedSelectButton }) => + bookType === 2 && isClickedSelectButton ? '0.7rem' : '2.7rem'}; color: ${({ bookType, selectedBox, theme }) => bookType === 2 && bookType === selectedBox ? theme.colors.white : theme.colors.BG}; - - ${({ theme }) => theme.fonts.Title1_SB_16}; + ${({ theme, bookType, isClickedSelectButton }) => + bookType === 2 && isClickedSelectButton + ? theme.fonts.Head1_B_20 + : theme.fonts.Title1_SB_16}; `; export const BookTypeBoxPrice = styled.p<{ @@ -64,16 +66,16 @@ export const BookTypeBoxPrice = styled.p<{ color: ${({ bookType, selectedBox, theme }) => bookType === 2 && bookType === selectedBox - ? theme.colors.white + ? theme.colors.key : theme.colors.BG}; ${({ theme }) => theme.fonts.Head1_B_20}; `; export const BookTypeBoxPriceWrapper = styled.div` display: flex; - column-gap: 0.7rem; - align-items: flex-end; + + column-gap: 0.7rem; `; export const OneBookText = styled.p` @@ -86,12 +88,14 @@ export const OneBookText = styled.p` export const BookTypeBoxOptionList = styled.div<{ bookType: number; selectedBox: number; + isClickedSelectButton: boolean; }>` display: flex; flex-direction: column; row-gap: 0.6rem; - margin-top: 3.85rem; + margin-top: ${({ bookType, isClickedSelectButton }) => + bookType === 2 && isClickedSelectButton ? '1.5rem' : '3.85rem'}; color: ${({ bookType, selectedBox, theme }) => bookType === 2 && bookType === selectedBox diff --git a/src/SelectBook/components/BookTypeBox/index.tsx b/src/SelectBook/components/BookTypeBox/index.tsx index 21c8cb42..fcb4747c 100644 --- a/src/SelectBook/components/BookTypeBox/index.tsx +++ b/src/SelectBook/components/BookTypeBox/index.tsx @@ -1,5 +1,6 @@ import { ReactNode } from 'react'; +import { ImgBookOrangeBig, ImgSaleprice } from '../../../assets'; import BookTypeBoxOption from '../BookTypeBoxOption'; import * as S from './BookTypeBox.style'; @@ -35,17 +36,37 @@ function BookTypeBox({ selectedBox={selectedBox} isClickedSelectButton={isClickedSelectButton} > - + {bookTypeBoxTitle} - {bookTypeBoxImg} + {bookType === 2 && isClickedSelectButton ? ( + + ) : ( + bookTypeBoxImg + )} + + {bookType === 2 && isClickedSelectButton ? : <>} - {bookTypeBoxPrice}원 + {bookType === 2 && isClickedSelectButton + ? '0원' + : `${bookTypeBoxPrice}원`} - {bookType == 2 ? /1권 : <>} + {bookType === 2 && !isClickedSelectButton ? ( + /1권 + ) : ( + <> + )} - + {bookTypeBoxOptionList.map((option, idx) => ( ))} diff --git a/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts b/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts index d343efc4..0f30eb39 100644 --- a/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts +++ b/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts @@ -1,5 +1,7 @@ import styled from '@emotion/styled'; +import { ImgEvent } from '../../../assets'; + export const SelectBookPageWrapper = styled.div` display: flex; align-items: center; @@ -10,7 +12,12 @@ export const SelectBookPageWrapper = styled.div` `; export const SelectBookPageBodyWrapper = styled.div` + display: flex; + justify-content: space-between; + flex-direction: column; + width: 100%; + height: calc(100vh - 5.4rem); padding: 0 1.6rem; margin-top: 5.4rem; `; @@ -25,11 +32,27 @@ export const SectionTitle = styled.p` ${({ theme }) => theme.fonts.Head2_SB_18}; `; +export const BookTypeContainerWrapper = styled.div` + display: flex; + justify-content: center; + + width: 100%; + margin-top: 4rem; +`; + export const BookTypeContainer = styled.div` display: flex; justify-content: space-between; position: relative; width: 34.3rem; - margin-top: 4rem; +`; + +export const StyledImgEvent = styled(ImgEvent)` + position: absolute; + top: -3.5rem; + right: 1.1rem; + z-index: 5; + + transition: width 0.5s ease; `; diff --git a/src/SelectBook/page/SelectBookPage/index.tsx b/src/SelectBook/page/SelectBookPage/index.tsx index 8c0b4c27..848c4f4c 100644 --- a/src/SelectBook/page/SelectBookPage/index.tsx +++ b/src/SelectBook/page/SelectBookPage/index.tsx @@ -3,6 +3,8 @@ import { useState } from 'react'; import { ImgBookBackgray, ImgBookOrange } from '../../../assets'; import Header from '../../../components/common/Header'; import BookTypeBox from '../../components/BookTypeBox'; +import CompleteButton from '../../components/CompleteButton'; +import MakeLecueBookButton from '../../components/MakeLecueBookButton'; import * as S from './SelectBookPage.style'; const basicLecueBookOptions = ['레큐노트 최대 100장', '텍스트 & 배경색 2종']; @@ -16,45 +18,58 @@ function SelectBookPage() { const [selectedBox, setSelectedBox] = useState(0); const [isClickedSelectButton, setIsClickedSelectButton] = useState(false); - console.log(selectedBox); + const handleClickCompleteButton = () => { + setIsClickedSelectButton(true); + setSelectedBox(2); + }; + + const handleClickMakeLecueBookButton = () => { + // API 쏘기... + }; + return (
레큐북 타입 선택 - - setSelectedBox(selectedBox === 1 ? 0 : 1)} - bookType={1} - bookTypeBoxTitle="베이직 레큐북" - bookTypeBoxImg={} - bookTypeBoxPrice={0} - selectedBox={selectedBox} - isClickedSelectButton={isClickedSelectButton} - bookTypeBoxOptionList={basicLecueBookOptions} - /> - setSelectedBox(selectedBox === 2 ? 0 : 2)} - bookType={2} - bookTypeBoxTitle="프리미엄 레큐북" - bookTypeBoxImg={} - bookTypeBoxPrice={990} - selectedBox={selectedBox} - isClickedSelectButton={isClickedSelectButton} - bookTypeBoxOptionList={premiumLecueBookOptions} - /> - + + + {isClickedSelectButton ? : <>} + setSelectedBox(selectedBox === 1 ? 0 : 1)} + bookType={1} + bookTypeBoxTitle="베이직 레큐북" + bookTypeBoxImg={} + bookTypeBoxPrice={0} + selectedBox={selectedBox} + isClickedSelectButton={isClickedSelectButton} + bookTypeBoxOptionList={basicLecueBookOptions} + /> + setSelectedBox(selectedBox === 2 ? 0 : 2)} + bookType={2} + bookTypeBoxTitle="프리미엄 레큐북" + bookTypeBoxImg={} + bookTypeBoxPrice={990} + selectedBox={selectedBox} + isClickedSelectButton={isClickedSelectButton} + bookTypeBoxOptionList={premiumLecueBookOptions} + /> + + - + {isClickedSelectButton ? ( + + ) : ( + + )} ); From 4ba08d975daa42f979d5e8a4d275ab1e5419a90f Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Mon, 15 Jan 2024 01:19:55 +0900 Subject: [PATCH 07/11] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20tit?= =?UTF-8?q?le=20UX=EB=9D=BC=EC=9D=B4=ED=8C=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SelectBookPage/SelectBookPage.style.ts | 19 +++++++++++++++---- src/SelectBook/page/SelectBookPage/index.tsx | 15 ++++++++++++--- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts b/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts index 0f30eb39..15778218 100644 --- a/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts +++ b/src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts @@ -22,9 +22,12 @@ export const SelectBookPageBodyWrapper = styled.div` margin-top: 5.4rem; `; -export const SelectBookContainer = styled.div` +export const SelectBookContainer = styled.div<{ + isClickedSelectButton: boolean; +}>` width: 100%; - margin-top: 5.4rem; + margin-top: ${({ isClickedSelectButton }) => + isClickedSelectButton ? '3.6rem' : '5.4rem'}; `; export const SectionTitle = styled.p` @@ -32,12 +35,20 @@ export const SectionTitle = styled.p` ${({ theme }) => theme.fonts.Head2_SB_18}; `; -export const BookTypeContainerWrapper = styled.div` +export const SectionOrangeTitle = styled.p` + color: ${({ theme }) => theme.colors.key}; + ${({ theme }) => theme.fonts.Head2_SB_18}; +`; + +export const BookTypeContainerWrapper = styled.div<{ + isClickedSelectButton: boolean; +}>` display: flex; justify-content: center; width: 100%; - margin-top: 4rem; + margin-top: ${({ isClickedSelectButton }) => + isClickedSelectButton ? '3.3rem' : '4rem'}; `; export const BookTypeContainer = styled.div` diff --git a/src/SelectBook/page/SelectBookPage/index.tsx b/src/SelectBook/page/SelectBookPage/index.tsx index 848c4f4c..56227c8b 100644 --- a/src/SelectBook/page/SelectBookPage/index.tsx +++ b/src/SelectBook/page/SelectBookPage/index.tsx @@ -31,9 +31,18 @@ function SelectBookPage() {
- - 레큐북 타입 선택 - + + {isClickedSelectButton ? ( + + 레큐는 이벤트 중! + 무료로 프로그램 레큐북을 만들어요! + + ) : ( + 레큐북 타입 선택 + )} + {isClickedSelectButton ? : <>} Date: Mon, 15 Jan 2024 01:28:43 +0900 Subject: [PATCH 08/11] =?UTF-8?q?fix:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20titl?= =?UTF-8?q?e=20UX=EB=9D=BC=EC=9D=B4=ED=8C=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SelectBook/page/SelectBookPage/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SelectBook/page/SelectBookPage/index.tsx b/src/SelectBook/page/SelectBookPage/index.tsx index 56227c8b..bc683327 100644 --- a/src/SelectBook/page/SelectBookPage/index.tsx +++ b/src/SelectBook/page/SelectBookPage/index.tsx @@ -35,7 +35,7 @@ function SelectBookPage() { {isClickedSelectButton ? ( 레큐는 이벤트 중! - 무료로 프로그램 레큐북을 만들어요! + 무료로 프리미엄 레큐북을 만들어요! ) : ( 레큐북 타입 선택 From d5ee6e8b519aa5dec26a427174958ca7392505f0 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Mon, 15 Jan 2024 01:59:16 +0900 Subject: [PATCH 09/11] =?UTF-8?q?docs:=20.gitkeep=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SelectBook/constants/.gitkeep | 0 src/SelectBook/hooks/.gitkeep | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/SelectBook/constants/.gitkeep create mode 100644 src/SelectBook/hooks/.gitkeep diff --git a/src/SelectBook/constants/.gitkeep b/src/SelectBook/constants/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/src/SelectBook/hooks/.gitkeep b/src/SelectBook/hooks/.gitkeep new file mode 100644 index 00000000..e69de29b From 80c8adc1f5e2b1ab8ccd0f973e1dbcacece9f964 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Mon, 15 Jan 2024 03:59:51 +0900 Subject: [PATCH 10/11] =?UTF-8?q?refactor:=20=EB=B9=88=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EB=A6=AC=ED=84=B4=20->=20&&=20=EB=A1=9C=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/SelectBook/components/BookTypeBox/index.tsx | 2 +- src/SelectBook/page/SelectBookPage/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/SelectBook/components/BookTypeBox/index.tsx b/src/SelectBook/components/BookTypeBox/index.tsx index fcb4747c..89cd5acc 100644 --- a/src/SelectBook/components/BookTypeBox/index.tsx +++ b/src/SelectBook/components/BookTypeBox/index.tsx @@ -49,7 +49,7 @@ function BookTypeBox({ bookTypeBoxImg )} - {bookType === 2 && isClickedSelectButton ? : <>} + {bookType === 2 && isClickedSelectButton && } {bookType === 2 && isClickedSelectButton diff --git a/src/SelectBook/page/SelectBookPage/index.tsx b/src/SelectBook/page/SelectBookPage/index.tsx index bc683327..4aebe67f 100644 --- a/src/SelectBook/page/SelectBookPage/index.tsx +++ b/src/SelectBook/page/SelectBookPage/index.tsx @@ -44,7 +44,7 @@ function SelectBookPage() { isClickedSelectButton={isClickedSelectButton} > - {isClickedSelectButton ? : <>} + {isClickedSelectButton && } setSelectedBox(selectedBox === 1 ? 0 : 1)} bookType={1} From f93bf7cdfe9c0dfcb2fb80c55e9a513e12ae5977 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Mon, 15 Jan 2024 04:03:54 +0900 Subject: [PATCH 11/11] =?UTF-8?q?fix:=20onClick=20prop=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SelectBook/components/BookTypeBox/index.tsx | 6 +++--- src/SelectBook/page/SelectBookPage/index.tsx | 8 ++++++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/SelectBook/components/BookTypeBox/index.tsx b/src/SelectBook/components/BookTypeBox/index.tsx index 89cd5acc..ab96de59 100644 --- a/src/SelectBook/components/BookTypeBox/index.tsx +++ b/src/SelectBook/components/BookTypeBox/index.tsx @@ -5,7 +5,7 @@ import BookTypeBoxOption from '../BookTypeBoxOption'; import * as S from './BookTypeBox.style'; interface BookTypeBoxProps { - onClick: () => void; + handleClickBookTypeBox: () => void; selectedBox: number; bookType: number; bookTypeBoxTitle: string; @@ -16,7 +16,7 @@ interface BookTypeBoxProps { } function BookTypeBox({ - onClick, + handleClickBookTypeBox, bookType, bookTypeBoxTitle, bookTypeBoxImg, @@ -29,7 +29,7 @@ function BookTypeBox({ { if (isClickedSelectButton === false) { - onClick(); + handleClickBookTypeBox(); } }} bookType={bookType} diff --git a/src/SelectBook/page/SelectBookPage/index.tsx b/src/SelectBook/page/SelectBookPage/index.tsx index 4aebe67f..be8e5f4b 100644 --- a/src/SelectBook/page/SelectBookPage/index.tsx +++ b/src/SelectBook/page/SelectBookPage/index.tsx @@ -46,7 +46,9 @@ function SelectBookPage() { {isClickedSelectButton && } setSelectedBox(selectedBox === 1 ? 0 : 1)} + handleClickBookTypeBox={() => + setSelectedBox(selectedBox === 1 ? 0 : 1) + } bookType={1} bookTypeBoxTitle="베이직 레큐북" bookTypeBoxImg={} @@ -56,7 +58,9 @@ function SelectBookPage() { bookTypeBoxOptionList={basicLecueBookOptions} /> setSelectedBox(selectedBox === 2 ? 0 : 2)} + handleClickBookTypeBox={() => + setSelectedBox(selectedBox === 2 ? 0 : 2) + } bookType={2} bookTypeBoxTitle="프리미엄 레큐북" bookTypeBoxImg={}