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

Merge Feature/create note into dev
Team-Lecue · Jan 15, 2024 · 719190e · 719190e
2 parents 32f02b9 + f6522f8
commit 719190e
Show file tree

Hide file tree

Showing 21 changed files with 730 additions and 267 deletions.
diff --git a/src/LecueNote/api/getPresignedUrl.ts b/src/LecueNote/api/getPresignedUrl.ts
@@ -0,0 +1,8 @@
+import { api } from '../../libs/api';
+
+const getPresignedUrl = async () => {
+  const { data } = await api.get('/api/images/note');
+  return data;
+};
+
+export default getPresignedUrl;
diff --git a/src/LecueNote/api/postLecueNote.ts b/src/LecueNote/api/postLecueNote.ts
@@ -0,0 +1,38 @@
+// import { useNavigate } from 'react-router-dom';
+
+import { api } from '../../libs/api';
+import { postLecueNoteProps } from '../type/lecueNoteType';
+
+const postLecueNote = ({
+  contents,
+  color,
+  fileName,
+  bgColor,
+}: postLecueNoteProps) => {
+  //   const navigate = useNavigate();
+
+  const response = api
+    .post(
+      '/api/notes',
+      {
+        bookId: 1,
+        content: contents,
+        textColor: color,
+        background: fileName ? fileName : bgColor,
+      },
+      {
+        headers: {
+          Authorization: `Bearer ${import.meta.env.VITE_APP_TOKEN}`,
+        },
+      },
+    )
+    .then((res) => {
+      console.log(res);
+      // 나중에 주석코드를 활성화시킬 예정!
+      // navigate(`lecue-book/${res.data.data.bookUuid}`);
+    });
+
+  return response;
+};
+
+export default postLecueNote;
diff --git a/src/LecueNote/api/putPresignedUrl.ts b/src/LecueNote/api/putPresignedUrl.ts
@@ -0,0 +1,18 @@
+import { api } from '../../libs/api';
+import { putPresignedUrlProps } from '../type/lecueNoteType';
+
+const putPresignedUrl = ({
+  presignedUrl,
+  binaryFile,
+  fileType,
+}: putPresignedUrlProps) => {
+  const response = api.put(presignedUrl, binaryFile, {
+    headers: {
+      'Content-Type': fileType,
+    },
+  });
+
+  return response;
+};
+
+export default putPresignedUrl;
diff --git a/src/LecueNote/components/CreateNote/CreateNote.style.ts b/src/LecueNote/components/CreateNote/CreateNote.style.ts
@@ -2,10 +2,9 @@ import styled from '@emotion/styled';
 
 export const Wrapper = styled.section`
   display: flex;
+  gap: 3.2rem;
   flex-direction: column;
 
   width: 100%;
   margin: 7.8rem 0 3.3rem;
-
-  gap: 3.2rem;
 `;
diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
@@ -1,43 +1,42 @@
-import { useState } from 'react';
-import {
-  BG_COLOR_CHART,
-  CATEGORY,
-  TEXT_COLOR_CHART,
-} from '../../constants/colorChart';
+import { CreateNoteProps } from '../../type/lecueNoteType';
 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);
-    }
-  };
-
+function CreateNote({
+  clickedCategory,
+  clickedBgColor,
+  clickedTextColor,
+  isIconClicked,
+  contents,
+  setFileName,
+  handleChangeFn,
+  handleClickCategory,
+  handleClickedColorBtn,
+  handleClickedIcon,
+  imgFile,
+  uploadImage,
+}: CreateNoteProps) {
   return (
     <S.Wrapper>
-      <WriteNote clickedBgColor={clickedBgColor}/>
+      <WriteNote
+        imgFile={imgFile}
+        isIconClicked={isIconClicked}
+        clickedBgColor={clickedBgColor}
+        clickedTextColor={clickedTextColor}
+        contents={contents}
+        handleChangeFn={handleChangeFn}
+      />
       <SelectColor
+        isIconClicked={isIconClicked}
         clickedCategory={clickedCategory}
         clickedTextColor={clickedTextColor}
         clickedBgColor={clickedBgColor}
+        setFileName={setFileName}
         handleCategoryFn={handleClickCategory}
         handleColorFn={handleClickedColorBtn}
+        handleIconFn={handleClickedIcon}
+        uploadImage={uploadImage}
       />
     </S.Wrapper>
   );

diff --git a/src/LecueNote/components/Footer/index.tsx b/src/LecueNote/components/Footer/index.tsx
@@ -1,10 +1,27 @@
 import Button from '../../../components/common/Button';
+import usePostLecueNote from '../../hooks/usePostLecueNote';
+import { FooterProps } from '../../type/lecueNoteType';
 import * as S from './Footer.style';
 
-function Footer() {
+function Footer({ contents, fileName, textColor, bgColor }: FooterProps) {
+  const postMutation = usePostLecueNote();
+
+  const handleClickBtn = () => {
+    postMutation.mutate({
+      contents: contents,
+      color: textColor,
+      fileName: fileName,
+      bgColor: bgColor,
+    });
+  };
+
   return (
     <S.Wrapper>
-      <Button variant="complete" disabled={true}>
+      <Button
+        variant="complete"
+        disabled={contents.length === 0}
+        onClick={handleClickBtn}
+      >
         작성 완료
       </Button>
     </S.Wrapper>

diff --git a/src/LecueNote/components/SelectColor/SelectColor.style.ts b/src/LecueNote/components/SelectColor/SelectColor.style.ts
@@ -3,14 +3,12 @@ import styled from '@emotion/styled';
 
 export const Wrapper = styled.article`
   display: flex;
-  flex-direction: column;
-
   gap: 1.8rem;
+  flex-direction: column;
 `;
 
 export const CategoryWrapper = styled.div`
   display: flex;
-
   gap: 1.4rem;
 `;
 

diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
@@ -8,11 +8,15 @@ import ShowColorChart from '../ShowColorChart';
 import * as S from './SelectColor.style';
 
 function SelectColor({
+  isIconClicked,
   clickedCategory,
   clickedTextColor,
   clickedBgColor,
+  setFileName,
   handleCategoryFn,
   handleColorFn,
+  handleIconFn,
+  uploadImage,
 }: SelectColorProps) {
   return (
     <S.Wrapper>
@@ -33,15 +37,23 @@ function SelectColor({
 
       {clickedCategory === '텍스트색' ? (
         <ShowColorChart
+          isIconClicked={isIconClicked}
           colorChart={TEXT_COLOR_CHART}
           state={clickedTextColor}
+          setFileName={setFileName}
+          uploadImage={uploadImage}
           handleFn={handleColorFn}
+          handleIconFn={handleIconFn}
         />
       ) : (
         <ShowColorChart
+          isIconClicked={isIconClicked}
           colorChart={BG_COLOR_CHART}
           state={clickedBgColor}
+          setFileName={setFileName}
+          uploadImage={uploadImage}
           handleFn={handleColorFn}
+          handleIconFn={handleIconFn}
         />
       )}
     </S.Wrapper>

diff --git a/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts b/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
@@ -3,14 +3,31 @@ 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;
+`;
 
-  gap: 1.4rem;
+export const Input = styled.input`
+  display: none;
+`;
+
+export const IconWrapper = styled.button<{ $isIconClicked: boolean }>`
+  ${({ theme, $isIconClicked }) =>
+    $isIconClicked &&
+    css`
+      outline: 0.1rem solid ${theme.colors.WG};
+    `};
+  flex-shrink: 0;
+
+  width: 3.8rem;
+  height: 3.8rem;
+
+  border-radius: 3rem;
 `;
 
 export const ColorWrapper = styled.div`
@@ -23,7 +40,11 @@ export const ColorWrapper = styled.div`
   height: 3.8rem;
 `;
 
-export const Color = styled.button<{ $colorCode: string; variant: boolean }>`
+export const Color = styled.button<{
+  $isIconClicked: boolean;
+  $colorCode: string;
+  variant: boolean;
+}>`
   border-radius: 3rem;
   ${({ $colorCode, theme }) =>
     $colorCode === '#FFF' &&
@@ -32,19 +53,26 @@ export const Color = styled.button<{ $colorCode: string; variant: boolean }>`
     `};
   background-color: ${({ $colorCode }) => $colorCode};
 
-  ${({ variant, theme }) =>
-    variant
+  ${({ variant, theme, $isIconClicked }) =>
+    $isIconClicked
       ? 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;
-        `};
+        `
+      : 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;
+          `};
 `;