Merge pull request #242 from Team-Lecue/refactor/CreateNote

dev로 들어가거라 ~~!
Team-Lecue · Feb 19, 2024 · fb41662 · fb41662
2 parents 701a8eb + 882bdda
commit fb41662
Show file tree

Hide file tree

Showing 11 changed files with 256 additions and 227 deletions.
diff --git a/src/LecueNote/components/CreateNote/CreateNote.style.ts b/src/LecueNote/components/CreateNote/CreateNote.style.ts
diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   BG_COLOR_CHART,
   CATEGORY,
@@ -8,19 +10,17 @@ import ShowColorChart from '../ShowColorChart';
 import * as S from './SelectColor.style';
 
 function SelectColor({
+  lecueNoteState,
   isIconClicked,
-  clickedCategory,
-  clickedTextColor,
-  clickedBgColor,
-  setPresignedUrl,
-  binaryImage,
-  setFileName,
+  presignedUrlDispatch,
+  handleTransformImgFile,
   handleCategoryFn,
   handleColorFn,
   handleIconFn,
-  uploadImage,
-  selectedFile
+  selectedFile,
 }: SelectColorProps) {
+  const { textColor, background, category } = lecueNoteState;
+
   return (
     <S.Wrapper>
       <S.CategoryWrapper>
@@ -29,7 +29,8 @@ function SelectColor({
             <S.Category
               key={it}
               type="button"
-              variant={clickedCategory === it}
+              name="category"
+              variant={category === it}
               onClick={handleCategoryFn}
             >
               {it}
@@ -38,35 +39,18 @@ function SelectColor({
         })}
       </S.CategoryWrapper>
 
-      {clickedCategory === '텍스트색' ? (
-        <ShowColorChart
-          isIconClicked={isIconClicked}
-          colorChart={TEXT_COLOR_CHART}
-          state={clickedTextColor}
-          selectedFile={selectedFile}
-          setPresignedUrl={setPresignedUrl}
-          binaryImage={binaryImage}
-          setFileName={setFileName}
-          uploadImage={uploadImage}
-          handleFn={handleColorFn}
-          handleIconFn={handleIconFn}
-        />
-      ) : (
-        <ShowColorChart
-          isIconClicked={isIconClicked}
-          colorChart={BG_COLOR_CHART}
-          state={clickedBgColor}
-          selectedFile={selectedFile}
-          setPresignedUrl={setPresignedUrl}
-          binaryImage={binaryImage}
-          setFileName={setFileName}
-          uploadImage={uploadImage}
-          handleFn={handleColorFn}
-          handleIconFn={handleIconFn}
-        />
-      )}
+      <ShowColorChart
+        isIconClicked={isIconClicked}
+        colorChart={category === '텍스트색' ? TEXT_COLOR_CHART : BG_COLOR_CHART}
+        state={category === '텍스트색' ? textColor : background}
+        handleTransformImgFile={handleTransformImgFile}
+        presignedUrlDispatch={presignedUrlDispatch}
+        selectedFile={selectedFile}
+        handleFn={handleColorFn}
+        handleIconFn={handleIconFn}
+      />
     </S.Wrapper>
   );
 }
 
-export default SelectColor;
+export default React.memo(SelectColor);
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -10,17 +10,14 @@ function ShowColorChart({
   isIconClicked,
   colorChart,
   state,
+  handleTransformImgFile,
+  presignedUrlDispatch,
   selectedFile,
-  setPresignedUrl,
-  binaryImage,
-  setFileName,
-  uploadImage,
   handleFn,
   handleIconFn,
 }: ShowColorChartProps) {
   const imgRef = useRef<HTMLInputElement | null>(null);
-  // 여기
-  useGetPresignedUrl(setPresignedUrl, setFileName);
+  useGetPresignedUrl({ presignedUrlDispatch });
 
   const handleImageUpload = () => {
     const fileInput = imgRef.current;
@@ -33,15 +30,18 @@ function ShowColorChart({
       reader1.readAsDataURL(file);
       reader1.onloadend = () => {
         if (reader1.result !== null) {
-          uploadImage(reader1.result as string);
+          handleTransformImgFile(reader1.result as string);
         }
       };
 
       // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
       const reader2 = new FileReader();
       reader2.readAsArrayBuffer(file);
-      binaryImage(reader2);
-      selectedFile(file);
+      // reader1의 비동기 작업이 완료된 후 수행(onloadend() 활용)
+      reader2.onloadend = () => {
+        handleTransformImgFile(reader2);
+        selectedFile(file);
+      };
     }
   };
 
@@ -72,6 +72,7 @@ function ShowColorChart({
           <S.Color
             type="button"
             id={colorCode}
+            name={colorChart === BG_COLOR_CHART ? 'background' : 'textColor'}
             variant={state === colorCode}
             $isIconClicked={
               colorChart === BG_COLOR_CHART ? isIconClicked : false

diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
@@ -5,14 +5,14 @@ import { WriteNoteProps } from '../../type/lecueNoteType';
 import * as S from './WriteNote.style';
 
 function WriteNote({
+  lecueNoteState,
   imgFile,
   isIconClicked,
-  clickedBgColor,
-  clickedTextColor,
   contents,
   handleChangeFn,
 }: WriteNoteProps) {
   const nickname = localStorage.getItem('nickname');
+  const { textColor, background } = lecueNoteState;
 
   // 이모지 글자 수 세기 관련 라이브러리
   const split = new GraphemeSplitter();
@@ -26,12 +26,16 @@ function WriteNote({
   return (
     <S.Wrapper>
       <S.LecueNote
-        $bgColor={clickedBgColor}
+        $bgColor={background}
         $isIconClicked={isIconClicked}
         $imgFile={imgFile}
       >
-        <S.Nickname $textColor={clickedTextColor}>{nickname}</S.Nickname>
-        <S.Contents $textColor={clickedTextColor} onChange={handleChangeFn} placeholder='최애에게 마음을 표현해보세요'/>
+        <S.Nickname $textColor={textColor}>{nickname}</S.Nickname>
+        <S.Contents
+          $textColor={textColor}
+          onChange={handleChangeFn}
+          placeholder="최애에게 마음을 표현해보세요"
+        />
         <S.BottomContentsWrapper>
           <S.Date>
             {dateArr[0]}.{dateArr[1]}.{dateArr[2]}

diff --git a/src/LecueNote/hooks/useGetPresignedUrl.ts b/src/LecueNote/hooks/useGetPresignedUrl.ts
@@ -1,26 +1,37 @@
-import { useQuery } from 'react-query';
+import { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import getPresignedUrl from '../api/getPresignedUrl';
+import { getPresignedUrlProps } from '../type/lecueNoteType';
 
-const useGetPresignedUrl = (
-  setPresignedUrl: React.Dispatch<React.SetStateAction<string>>,
-  setFileName: React.Dispatch<React.SetStateAction<string>>,
-) => {
+const useGetPresignedUrl = ({ presignedUrlDispatch }: getPresignedUrlProps) => {
   const navigate = useNavigate();
+  const isUnmounted = useRef(false);
 
-  const { isLoading, data } = useQuery({
-    queryKey: ['get-presigned-url'],
-    queryFn: () => getPresignedUrl(),
-    onError: () => navigate('/error'),
-    onSuccess: (data) => {
-      setPresignedUrl(data.data.url);
-      setFileName(data.data.fileName);
-    },
-    refetchOnWindowFocus: false,
-  });
+  useEffect(() => {
+    isUnmounted.current = false;
+    const fetchData = async () => {
+      try {
+        const { data } = await getPresignedUrl();
 
-  return { isLoading, data };
+        presignedUrlDispatch({
+          type: 'SET_PRESIGNED_URL',
+          presignedUrl: data.url,
+          filename: data.fileName,
+        });
+      } catch (error) {
+        navigate('/error');
+      }
+    };
+
+    if (!isUnmounted.current) {
+      fetchData();
+    }
+
+    return () => {
+      isUnmounted.current = true;
+    };
+  }, []);
 };
 
 export default useGetPresignedUrl;
diff --git a/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts b/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
@@ -11,3 +11,12 @@ export const Wrapper = styled.div`
   height: 100dvh;
   padding: 0 1.7rem;
 `;
+
+export const CreateNote = styled.section`
+  display: flex;
+  gap: 3.2rem;
+  flex-direction: column;
+
+  width: 100%;
+  margin: 7.8rem 0 3.3rem;
+`;