Merge pull request #78 from Team-Lecue/feature/CreateNote

Feature/create note

src/LecueNote/components/CreateNote/CreateNote.style.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  margin: 7.8rem 0 3.3rem;
+
+  gap: 3.2rem;
+`;

src/LecueNote/components/CreateNote/index.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import {
+  BG_COLOR_CHART,
+  CATEGORY,
+  TEXT_COLOR_CHART,
+} from '../../constants/colorChart';
+import SelectColor from '../SelectColor';
+import WriteNote from '../WriteNote';
+import * as S from './CreateNote.style';
+
+function CreateNote() {
+  const [clickedCategory, setclickedCategory] = useState(CATEGORY[0]);
+  const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]);
+  const [clickedBgColor, setclickedBgColor] = useState(BG_COLOR_CHART[0]);
+
+  const handleClickCategory = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    setclickedCategory(e.currentTarget.innerHTML);
+  };
+
+  const handleClickedColorBtn = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    if (clickedCategory === '텍스트색') {
+      setClickedTextColor(e.currentTarget.id);
+    } else {
+      setclickedBgColor(e.currentTarget.id);
+    }
+  };
+
+  return (
+    <S.Wrapper>
+      <WriteNote clickedBgColor={clickedBgColor}/>
+      <SelectColor
+        clickedCategory={clickedCategory}
+        clickedTextColor={clickedTextColor}
+        clickedBgColor={clickedBgColor}
+        handleCategoryFn={handleClickCategory}
+        handleColorFn={handleClickedColorBtn}
+      />
+    </S.Wrapper>
+  );
+}
+
+export default CreateNote;

src/LecueNote/components/Footer/Footer.style.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.footer`
+  display: flex;
+  justify-content: center;
+  align-items: end;
+
+  width: 100%;
+  margin-bottom: 2rem;
+`;

src/LecueNote/components/Footer/index.tsx

@@ -0,0 +1,14 @@
+import Button from '../../../components/common/Button';
+import * as S from './Footer.style';
+
+function Footer() {
+  return (
+    <S.Wrapper>
+      <Button variant="complete" disabled={true}>
+        작성 완료
+      </Button>
+    </S.Wrapper>
+  );
+}
+
+export default Footer;

src/LecueNote/components/SelectColor/SelectColor.style.ts

@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.article`
+  display: flex;
+  flex-direction: column;
+
+  gap: 1.8rem;
+`;
+
+export const CategoryWrapper = styled.div`
+  display: flex;
+
+  gap: 1.4rem;
+`;
+
+export const Category = styled.button<{ variant: boolean }>`
+  ${({ theme, variant }) =>
+    variant
+      ? css`
+          ${theme.fonts.Title1_SB_16}
+          color: ${theme.colors.BG}
+        `
+      : css`
+          ${theme.fonts.Title2_M_16}
+          color: ${theme.colors.MG}
+        `}
+  background-color: none;
+`;

src/LecueNote/components/SelectColor/index.tsx

@@ -0,0 +1,51 @@
+import {
+  BG_COLOR_CHART,
+  CATEGORY,
+  TEXT_COLOR_CHART,
+} from '../../constants/colorChart';
+import { SelectColorProps } from '../../type/lecueNoteType';
+import ShowColorChart from '../ShowColorChart';
+import * as S from './SelectColor.style';
+
+function SelectColor({
+  clickedCategory,
+  clickedTextColor,
+  clickedBgColor,
+  handleCategoryFn,
+  handleColorFn,
+}: SelectColorProps) {
+  return (
+    <S.Wrapper>
+      <S.CategoryWrapper>
+        {CATEGORY.map((it) => {
+          return (
+            <S.Category
+              key={it}
+              type="button"
+              variant={clickedCategory === it}
+              onClick={handleCategoryFn}
+            >
+              {it}
+            </S.Category>
+          );
+        })}
+      </S.CategoryWrapper>
+
+      {clickedCategory === '텍스트색' ? (
+        <ShowColorChart
+          colorChart={TEXT_COLOR_CHART}
+          state={clickedTextColor}
+          handleFn={handleColorFn}
+        />
+      ) : (
+        <ShowColorChart
+          colorChart={BG_COLOR_CHART}
+          state={clickedBgColor}
+          handleFn={handleColorFn}
+        />
+      )}
+    </S.Wrapper>
+  );
+}
+
+export default SelectColor;

src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts

@@ -0,0 +1,50 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  padding: 0.5rem 0.1rem 0.7rem 0.3rem;
+
+  overflow-x: scroll;
+
+  gap: 1.4rem;
+`;
+
+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 === '#FFF' &&
+    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/LecueNote/components/ShowColorChart/index.tsx

@@ -0,0 +1,22 @@
+import { ShowColorChartProps } from '../../type/lecueNoteType';
+import * as S from './ShowColorChart.style';
+
+function ShowColorChart({ colorChart, state, handleFn }: ShowColorChartProps) {
+  return (
+    <S.Wrapper>
+      {colorChart.map((colorCode) => (
+        <S.ColorWrapper key={colorCode}>
+          <S.Color
+            type="button"
+            id={colorCode}
+            variant={state === colorCode}
+            $colorCode={colorCode}
+            onClick={handleFn}
+          ></S.Color>
+        </S.ColorWrapper>
+      ))}
+    </S.Wrapper>
+  );
+}
+
+export default ShowColorChart;

src/LecueNote/components/WriteNote/WriteNote.style.ts

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  gap: 0.4rem;
+`;
+
+export const LecueNote = styled.article<{ $bgColor: string }>`
+  width: 100%;
+  height: calc(100dvh - 33rem);
+
+  border-radius: 0.6rem;
+  background-color: ${({ $bgColor }) => $bgColor};
+`;
+
+export const Notice = styled.p`
+  color: ${({ theme }) => theme.colors.key};
+
+  ${({ theme }) => theme.fonts.Caption1_R_12};
+`;

src/LecueNote/components/WriteNote/index.tsx

@@ -0,0 +1,13 @@
+import { WriteNoteProps } from '../../type/lecueNoteType';
+import * as S from './WriteNote.style';
+
+function WriteNote({ clickedBgColor }: WriteNoteProps) {
+  return (
+    <S.Wrapper>
+      <S.LecueNote $bgColor={clickedBgColor}></S.LecueNote>
+      <S.Notice>*욕설/비속어는 자동 필터링됩니다.</S.Notice>
+    </S.Wrapper>
+  );
+}
+
+export default WriteNote;

src/LecueNote/constants/colorChart.ts

@@ -0,0 +1,18 @@
+export const CATEGORY = ['텍스트색', '배경색'];
+
+export const TEXT_COLOR_CHART = ['#191919', '#FFF'];
+
+export const BG_COLOR_CHART = [
+  '#EFB6B6',
+  '#E5E2CE',
+  '#F8E99A',
+  '#85CEAF',
+  '#B3CBE8',
+  '#929DD9',
+  '#FE394C',
+  '#9852F9',
+  '#FFD600',
+  '#98ED4D',
+  '#FF71B3',
+  '#CCC',
+];

src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+
+  width: 100vw;
+  height: 100dvh;
+
+  padding: 0 1.7rem;
+`;

src/LecueNote/page/LeceuNotePage/index.tsx

@@ -0,0 +1,16 @@
+import Header from '../../../components/common/Header';
+import CreateNote from '../../components/CreateNote';
+import Footer from '../../components/Footer';
+import * as S from './LecueNotePage.style';
+
+function LecueNotePage() {
+  return (
+    <S.Wrapper>
+      <Header headerTitle='레큐 노트'/>
+      <CreateNote />
+      <Footer />
+    </S.Wrapper>
+  );
+}
+
+export default LecueNotePage;

src/LecueNote/type/lecueNoteType.ts

@@ -0,0 +1,19 @@
+export interface SelectColorProps {
+  clickedCategory: string;
+  clickedTextColor: string;
+  clickedBgColor: string;
+  handleCategoryFn: (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
+  handleColorFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export interface ShowColorChartProps {
+  colorChart: string[];
+  state: string;
+  handleFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export interface WriteNoteProps {
+  clickedBgColor: string;
+}

src/Router.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import DetailPage from './Detail/page/DetailPage';
 import HealthTest from './HealthTest';
+import LecueNotePage from './LecueNote/page/LeceuNotePage';
 import Login from './Login/page';
 import SplashPage from './Splash/page/SplashPage';
 import StickerPack from './StickerPack/page/StickerPack';
@@ -12,6 +13,7 @@ function Router() {
       <Routes>
         <Route path="/" element={<SplashPage />} />
         <Route path="/login" element={<Login />} />
+        <Route path="create-note" element={<LecueNotePage />} />
         <Route path="/sticker-pack" element={<StickerPack />} />
         <Route path="/detail" element={<DetailPage />} />
         <Route path="/test" element={<HealthTest />} />

src/styles/GlobalStyles.ts

@@ -116,6 +116,8 @@ const resetCss = css`
   }
 
   body {
+    position: relative;
+
     line-height: 1;
     touch-action: manipulation;