Merge pull request #118 from Team-Lecue/feature/createBook

[CreateBook] dev 머지 PR입니다!

src/CreateBook/components/BookInfoTextarea/BookInfoTextarea.style.ts

@@ -0,0 +1,49 @@
+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};
+
+  resize: none;
+
+  &: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};
+`;

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<HTMLTextAreaElement>) => {
+    if (e.target.value.length <= 85) {
+      changeDescription(e.target.value);
+    }
+  };
+  return (
+    <S.BookInfoWrapper>
+      <S.TextareaContainer isEmpty={description.length === 0}>
+        <S.Textarea
+          placeholder="무엇에 대한 레큐북인가요?"
+          value={description}
+          onChange={handleChangeInput}
+        />
+        <S.WordCount>({description.length}/85)</S.WordCount>
+      </S.TextareaContainer>
+    </S.BookInfoWrapper>
+  );
+}
+
+export default BookInfoTextarea;

src/CreateBook/components/BookInput/BookInput.style.ts

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+
+export const TitleWrapper = styled.section`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100%;
+  margin-top: 1.2rem;
+`;
+
+export const InputContainer = styled.div<{ isEmpty: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+  padding: 1.55rem 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 Input = styled.input`
+  width: 100%;
+
+  color: ${({ theme }) => theme.colors.BG};
+  ${({ theme }) => theme.fonts.Body2_M_14};
+`;
+
+export const WordCount = styled.p`
+  color: ${({ theme }) => theme.colors.WG};
+  ${({ theme }) => theme.fonts.E_Body2_R_14};
+`;

src/CreateBook/components/BookInput/index.tsx

@@ -0,0 +1,29 @@
+import * as S from './BookInput.style';
+
+interface BookInputProps {
+  title: string;
+  changeTitle: (title: string) => void;
+}
+
+function BookInput({ title, changeTitle }: BookInputProps) {
+  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value.length <= 15) {
+      changeTitle(e.target.value);
+    }
+  };
+  return (
+    <S.TitleWrapper>
+      <S.InputContainer isEmpty={title.length === 0}>
+        <S.Input
+          type="text"
+          placeholder="레큐북의 제목을 입력해주세요"
+          value={title}
+          onChange={handleChangeInput}
+        />
+        <S.WordCount>({title.length}/15)</S.WordCount>
+      </S.InputContainer>
+    </S.TitleWrapper>
+  );
+}
+
+export default BookInput;

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

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

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.p`
+  display: flex;
+
+  ${({ theme }) => theme.colors.BG};
+  ${({ theme }) => theme.fonts.Title1_SB_16};
+`;

src/CreateBook/components/SelectColor/index.tsx

@@ -0,0 +1,26 @@
+import ShowColorChart from '../ShowColorChart';
+import * as S from './SelectColor.style';
+
+interface SelectColorProps {
+  backgroundColor: string;
+  clickBackgroundColor: (backgroundColor: string) => void;
+}
+
+function SelectColor({
+  backgroundColor,
+  clickBackgroundColor,
+}: SelectColorProps) {
+  return (
+    <S.Wrapper>
+      <S.Category>레큐북 배경색</S.Category>
+      <ShowColorChart
+        backgroundColor={backgroundColor}
+        handleFn={(backgroundColor: string) =>
+          clickBackgroundColor(backgroundColor)
+        }
+      />
+    </S.Wrapper>
+  );
+}
+
+export default SelectColor;

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

src/CreateBook/components/ShowColorChart/index.tsx

@@ -0,0 +1,31 @@
+import * as S from './ShowColorChart.style';
+
+interface ShowColorChartProps {
+  backgroundColor: string;
+  handleFn: (backgroundColor: string) => void;
+}
+
+function ShowColorChart({ backgroundColor, handleFn }: ShowColorChartProps) {
+  return (
+    <S.Wrapper>
+      <S.ColorWrapper>
+        <S.Color
+          type="button"
+          $colorCode={'#191919'}
+          onClick={() => handleFn('#191919')}
+          variant={backgroundColor === '#191919'}
+        ></S.Color>
+      </S.ColorWrapper>
+      <S.ColorWrapper>
+        <S.Color
+          type="button"
+          $colorCode={'#F5F5F5'}
+          onClick={() => handleFn('#F5F5F5')}
+          variant={backgroundColor === '#F5F5F5'}
+        ></S.Color>
+      </S.ColorWrapper>
+    </S.Wrapper>
+  );
+}
+
+export default ShowColorChart;

src/CreateBook/page/CreateBook.style.ts

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+
+export const CreateBookWrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+
+  width: 100vw;
+  height: 100dvh;
+`;
+
+export const CreateBookBodyWrapper = 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 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;
+`;