Merge branch 'feature/SelectBook' of https://github.com/Team-Lequu/Le…

…quu-Client into feature/SelectBook

src/Router.tsx

@@ -5,6 +5,7 @@ import HealthTest from './HealthTest';
 import LecueNotePage from './LecueNote/page/LeceuNotePage';
 import Login from './Login/page';
 import Register from './Register/page';
+import SelectBookPage from './SelectBook/page/SelectBookPage';
 import SplashPage from './Splash/page/SplashPage';
 import StickerPack from './StickerPack/page/StickerPack';
 import TargetPage from './Target/page/TargetPage';
@@ -21,6 +22,7 @@ function Router() {
         <Route path="/lecue-book" element={<DetailPage />} />
         <Route path="/target" element={<TargetPage />} />
         <Route path="/test" element={<HealthTest />} />
+        <Route path="/select-book" element={<SelectBookPage />} />
       </Routes>
     </BrowserRouter>
   );

src/SelectBook/components/BookTypeBox/BookTypeBox.style.ts

@@ -0,0 +1,104 @@
+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;
+
+  width: ${({ bookType, isClickedSelectButton }) =>
+    bookType === 2 && isClickedSelectButton ? '28.4rem' : '16.5rem'};
+  height: 34.9rem;
+
+  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;
+  isClickedSelectButton: boolean;
+}>`
+  display: flex;
+  align-items: center;
+
+  height: 3.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, bookType, isClickedSelectButton }) =>
+    bookType === 2 && isClickedSelectButton
+      ? theme.fonts.Head1_B_20
+      : 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.key
+      : theme.colors.BG};
+  ${({ theme }) => theme.fonts.Head1_B_20};
+`;
+
+export const BookTypeBoxPriceWrapper = styled.div`
+  display: flex;
+  align-items: flex-end;
+
+  column-gap: 0.7rem;
+`;
+
+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;
+  isClickedSelectButton: boolean;
+}>`
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.6rem;
+
+  margin-top: ${({ bookType, isClickedSelectButton }) =>
+    bookType === 2 && isClickedSelectButton ? '1.5rem' : '3.85rem'};
+
+  color: ${({ bookType, selectedBox, theme }) =>
+    bookType === 2 && bookType === selectedBox
+      ? theme.colors.white
+      : theme.colors.DG};
+`;

src/SelectBook/components/BookTypeBox/index.tsx

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+
+import { ImgBookOrangeBig, ImgSaleprice } from '../../../assets';
+import BookTypeBoxOption from '../BookTypeBoxOption';
+import * as S from './BookTypeBox.style';
+
+interface BookTypeBoxProps {
+  handleClickBookTypeBox: () => void;
+  selectedBox: number;
+  bookType: number;
+  bookTypeBoxTitle: string;
+  bookTypeBoxImg: ReactNode;
+  bookTypeBoxPrice: number;
+  isClickedSelectButton: boolean;
+  bookTypeBoxOptionList: string[];
+}
+
+function BookTypeBox({
+  handleClickBookTypeBox,
+  bookType,
+  bookTypeBoxTitle,
+  bookTypeBoxImg,
+  bookTypeBoxPrice,
+  selectedBox,
+  isClickedSelectButton,
+  bookTypeBoxOptionList,
+}: BookTypeBoxProps) {
+  return (
+    <S.BookTypeBoxWrapper
+      onClick={() => {
+        if (isClickedSelectButton === false) {
+          handleClickBookTypeBox();
+        }
+      }}
+      bookType={bookType}
+      selectedBox={selectedBox}
+      isClickedSelectButton={isClickedSelectButton}
+    >
+      <S.BookTypeBoxTitle
+        bookType={bookType}
+        selectedBox={selectedBox}
+        isClickedSelectButton={isClickedSelectButton}
+      >
+        {bookTypeBoxTitle}
+      </S.BookTypeBoxTitle>
+      {bookType === 2 && isClickedSelectButton ? (
+        <ImgBookOrangeBig />
+      ) : (
+        bookTypeBoxImg
+      )}
+
+      {bookType === 2 && isClickedSelectButton && <ImgSaleprice />}
+      <S.BookTypeBoxPriceWrapper>
+        <S.BookTypeBoxPrice bookType={bookType} selectedBox={selectedBox}>
+          {bookType === 2 && isClickedSelectButton
+            ? '0원'
+            : `${bookTypeBoxPrice}원`}
+        </S.BookTypeBoxPrice>
+        {bookType === 2 && !isClickedSelectButton ? (
+          <S.OneBookText>/1권</S.OneBookText>
+        ) : (
+          <></>
+        )}
+      </S.BookTypeBoxPriceWrapper>
+      <S.BookTypeBoxOptionList
+        bookType={bookType}
+        selectedBox={selectedBox}
+        isClickedSelectButton={isClickedSelectButton}
+      >
+        {bookTypeBoxOptionList.map((option, idx) => (
+          <BookTypeBoxOption key={idx + option} bookTypeBoxOption={option} />
+        ))}
+      </S.BookTypeBoxOptionList>
+    </S.BookTypeBoxWrapper>
+  );
+}
+
+export default BookTypeBox;

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};
+`;

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 (
+    <S.BookTypeBoxOptionWrapper>
+      <IcCheck />
+      <S.BookTypeBoxOptionText>{bookTypeBoxOption}</S.BookTypeBoxOptionText>
+    </S.BookTypeBoxOptionWrapper>
+  );
+}
+
+export default BookTypeBoxOption;

src/SelectBook/components/CompleteButton/CompleteButton.style.ts

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+
+export const CompleteButtonWrapper = styled.div`
+  width: 100%;
+  margin-bottom: 2rem;
+`;

src/SelectBook/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 (
+    <S.CompleteButtonWrapper>
+      <Button variant="complete" disabled={!isActive} onClick={onClick}>
+        선택 완료
+      </Button>
+    </S.CompleteButtonWrapper>
+  );
+}
+
+export default CompleteButton;

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;
+`;

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 (
+    <S.MakeLecueBookButtonWrapper>
+      <Button variant="choose" disabled={!isActive} onClick={onClick}>
+        레큐북 만들기
+      </Button>
+    </S.MakeLecueBookButtonWrapper>
+  );
+}
+
+export default MakeLecueBookButton;

src/SelectBook/page/SelectBookPage/SelectBookPage.style.ts

@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+
+import { ImgEvent } from '../../../assets';
+
+export const SelectBookPageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100vw;
+  height: 100dvh;
+`;
+
+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;
+`;
+
+export const SelectBookContainer = styled.div<{
+  isClickedSelectButton: boolean;
+}>`
+  width: 100%;
+  margin-top: ${({ isClickedSelectButton }) =>
+    isClickedSelectButton ? '3.6rem' : '5.4rem'};
+`;
+
+export const SectionTitle = styled.p`
+  color: ${({ theme }) => theme.colors.BG};
+  ${({ theme }) => theme.fonts.Head2_SB_18};
+`;
+
+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: ${({ isClickedSelectButton }) =>
+    isClickedSelectButton ? '3.3rem' : '4rem'};
+`;
+
+export const BookTypeContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+
+  width: 34.3rem;
+`;
+
+export const StyledImgEvent = styled(ImgEvent)`
+  position: absolute;
+  top: -3.5rem;
+  right: 1.1rem;
+  z-index: 5;
+
+  transition: width 0.5s ease;
+`;