From 334059818998b3ba539b81c57eb8780c74eec402 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 22 Feb 2024 05:28:22 +0900
Subject: [PATCH 01/12] =?UTF-8?q?chore:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
=?UTF-8?q?=ED=98=95=EB=B3=80=ED=99=98=EC=9D=84=20=EC=9C=84=ED=95=9C=20?=
=?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=84=A4?=
=?UTF-8?q?=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 1 +
yarn.lock | 5 +++++
2 files changed, 6 insertions(+)
diff --git a/package.json b/package.json
index 5b1bad47..44840dcc 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"axios": "^1.6.5",
"eslint-plugin-react": "^7.33.2",
"grapheme-splitter": "^1.0.4",
+ "heic2any": "^0.0.4",
"lottie-react": "^2.4.0",
"postcss": "^8.4.33",
"postcss-styled-syntax": "^0.6.3",
diff --git a/yarn.lock b/yarn.lock
index 7ca484db..327d7b5d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2228,6 +2228,11 @@ hasown@^2.0.0:
dependencies:
function-bind "^1.1.2"
+heic2any@^0.0.4:
+ version "0.0.4"
+ resolved "https://registry.yarnpkg.com/heic2any/-/heic2any-0.0.4.tgz#eddb8e6fec53c8583a6e18b65069bb5e8d19028a"
+ integrity sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA==
+
hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
From a669e0e846f61f9785ec50928d86b870d9bd4613 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 22 Feb 2024 05:28:46 +0900
Subject: [PATCH 02/12] =?UTF-8?q?feat:=20heic/=20HEIC=20->=20jpeg=EB=A1=9C?=
=?UTF-8?q?=20=ED=98=95=EB=B3=80=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/ShowColorChart/index.tsx | 71 ++++++++++++++-----
1 file changed, 54 insertions(+), 17 deletions(-)
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index 452bb58e..f31cc093 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -1,3 +1,4 @@
+import heic2any from 'heic2any';
import { useRef } from 'react';
import { IcCameraSmall } from '../../../assets';
@@ -25,23 +26,59 @@ function ShowColorChart({
if (fileInput && fileInput.files && fileInput.files.length > 0) {
const file = fileInput.files[0];
- // reader1: 파일을 base64로 읽어서 업로드
- const reader1 = new FileReader();
- reader1.readAsDataURL(file);
- reader1.onloadend = () => {
- if (reader1.result !== null) {
- handleTransformImgFile(reader1.result as string);
- }
- };
+ if (
+ file.name.split('.')[1] === 'heic' ||
+ file.name.split('.')[1] === 'HEIC'
+ ) {
+ // 'heic' 확장자인 경우에만 처리
+ heic2any({ blob: file, toType: 'image/jpeg' }).then(
+ function (resultBlob) {
+ // 변환된 Blob을 사용하여 새로운 File 생성
+ const jpg = new File(
+ Array.isArray(resultBlob) ? resultBlob : [resultBlob],
+ file.name.split('.')[0] + '.jpg',
+ { type: 'image/jpeg', lastModified: new Date().getTime() },
+ );
+
+ // reader1: 파일을 base64로 읽어서 업로드
+ const reader1 = new FileReader();
- // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
- const reader2 = new FileReader();
- reader2.readAsArrayBuffer(file);
- // reader1의 비동기 작업이 완료된 후 수행(onloadend() 활용)
- reader2.onloadend = () => {
- handleTransformImgFile(reader2);
- selectedFile(file);
- };
+ reader1.readAsDataURL(jpg);
+ reader1.onloadend = () => {
+ if (reader1.result !== null) {
+ handleTransformImgFile(reader1.result as string);
+ }
+ };
+
+ // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
+ const reader2 = new FileReader();
+ reader2.readAsArrayBuffer(jpg);
+ // reader1의 비동기 작업이 완료된 후 수행(onloadend() 활용)
+ reader2.onloadend = () => {
+ handleTransformImgFile(reader2);
+ selectedFile(jpg);
+ };
+ },
+ );
+ } else {
+ // reader1: 파일을 base64로 읽어서 업로드
+ const reader1 = new FileReader();
+ reader1.readAsDataURL(file);
+ reader1.onloadend = () => {
+ if (reader1.result !== null) {
+ handleTransformImgFile(reader1.result as string);
+ }
+ };
+
+ // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
+ const reader2 = new FileReader();
+ reader2.readAsArrayBuffer(file);
+ // reader1의 비동기 작업이 완료된 후 수행(onloadend() 활용)
+ reader2.onloadend = () => {
+ handleTransformImgFile(reader2);
+ selectedFile(file);
+ };
+ }
}
};
@@ -51,7 +88,7 @@ function ShowColorChart({
<>
From da76a65af277913b39b3230a10f4894c5d86c726 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 22 Feb 2024 06:04:28 +0900
Subject: [PATCH 03/12] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=ED=95=A8?=
=?UTF-8?q?=EC=88=98=20=ED=8C=8C=EC=9D=BC=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/LecueNote/util/handleClickFiletoBinary.ts | 19 ++++++++++++++++++
src/LecueNote/util/handleClickFiletoString.ts | 20 +++++++++++++++++++
2 files changed, 39 insertions(+)
create mode 100644 src/LecueNote/util/handleClickFiletoBinary.ts
create mode 100644 src/LecueNote/util/handleClickFiletoString.ts
diff --git a/src/LecueNote/util/handleClickFiletoBinary.ts b/src/LecueNote/util/handleClickFiletoBinary.ts
new file mode 100644
index 00000000..0db442be
--- /dev/null
+++ b/src/LecueNote/util/handleClickFiletoBinary.ts
@@ -0,0 +1,19 @@
+interface handleClickFiletoBinaryProps {
+ file: File;
+ reader: FileReader;
+ handleReaderOnloadend: (reader: FileReader, file: File) => void;
+}
+
+const handleClickFiletoBinary = ({
+ file,
+ reader,
+ handleReaderOnloadend,
+}: handleClickFiletoBinaryProps) => {
+ reader.readAsArrayBuffer(file);
+ // reader1의 비동기 작업이 완료된 후 수행(onloadend() 활용)
+ reader.onloadend = () => {
+ handleReaderOnloadend(reader, file);
+ };
+};
+
+export default handleClickFiletoBinary;
diff --git a/src/LecueNote/util/handleClickFiletoString.ts b/src/LecueNote/util/handleClickFiletoString.ts
new file mode 100644
index 00000000..68d02ca5
--- /dev/null
+++ b/src/LecueNote/util/handleClickFiletoString.ts
@@ -0,0 +1,20 @@
+interface handleClickFiletoStringProps {
+ file: File;
+ reader: FileReader;
+ handleTransformImgFile: (file: string | FileReader) => void;
+}
+
+const handleClickFiletoString = ({
+ file,
+ reader,
+ handleTransformImgFile,
+}: handleClickFiletoStringProps) => {
+ reader.readAsDataURL(file);
+ reader.onloadend = () => {
+ if (reader.result !== null) {
+ handleTransformImgFile(reader.result as string);
+ }
+ };
+};
+
+export default handleClickFiletoString;
From d922ad8326ad473a02a2fbef800fd8f06bdae06e Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 22 Feb 2024 06:04:46 +0900
Subject: [PATCH 04/12] =?UTF-8?q?feat:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
=?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/ShowColorChart/index.tsx | 56 +++++++++----------
1 file changed, 28 insertions(+), 28 deletions(-)
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index f31cc093..567b14e2 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -5,6 +5,8 @@ import { IcCameraSmall } from '../../../assets';
import { BG_COLOR_CHART } from '../../constants/colorChart';
import useGetPresignedUrl from '../../hooks/useGetPresignedUrl';
import { ShowColorChartProps } from '../../type/lecueNoteType';
+import handleClickFiletoBinary from '../../util/handleClickFiletoBinary';
+import handleClickFiletoString from '../../util/handleClickFiletoString';
import * as S from './ShowColorChart.style';
function ShowColorChart({
@@ -20,6 +22,11 @@ function ShowColorChart({
const imgRef = useRef(null);
useGetPresignedUrl({ presignedUrlDispatch });
+ const handleReaderOnloadend = (reader: FileReader, file: File) => {
+ handleTransformImgFile(reader);
+ selectedFile(file);
+ };
+
const handleImageUpload = () => {
const fileInput = imgRef.current;
@@ -39,45 +46,38 @@ function ShowColorChart({
file.name.split('.')[0] + '.jpg',
{ type: 'image/jpeg', lastModified: new Date().getTime() },
);
-
+
// reader1: 파일을 base64로 읽어서 업로드
const reader1 = new FileReader();
-
- reader1.readAsDataURL(jpg);
- reader1.onloadend = () => {
- if (reader1.result !== null) {
- handleTransformImgFile(reader1.result as string);
- }
- };
+ handleClickFiletoString({
+ file: jpg,
+ reader: reader1,
+ handleTransformImgFile,
+ });
// reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
const reader2 = new FileReader();
- reader2.readAsArrayBuffer(jpg);
- // reader1의 비동기 작업이 완료된 후 수행(onloadend() 활용)
- reader2.onloadend = () => {
- handleTransformImgFile(reader2);
- selectedFile(jpg);
- };
+ handleClickFiletoBinary({
+ file: jpg,
+ reader: reader2,
+ handleReaderOnloadend,
+ });
},
);
} else {
- // reader1: 파일을 base64로 읽어서 업로드
const reader1 = new FileReader();
- reader1.readAsDataURL(file);
- reader1.onloadend = () => {
- if (reader1.result !== null) {
- handleTransformImgFile(reader1.result as string);
- }
- };
+ handleClickFiletoString({
+ file: file,
+ reader: reader1,
+ handleTransformImgFile,
+ });
- // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
const reader2 = new FileReader();
- reader2.readAsArrayBuffer(file);
- // reader1의 비동기 작업이 완료된 후 수행(onloadend() 활용)
- reader2.onloadend = () => {
- handleTransformImgFile(reader2);
- selectedFile(file);
- };
+ handleClickFiletoBinary({
+ file: file,
+ reader: reader2,
+ handleReaderOnloadend,
+ });
}
}
};
From e36dbaf01683097d381e92a8a8003fee5fd26ede Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 22 Feb 2024 17:33:59 +0900
Subject: [PATCH 05/12] =?UTF-8?q?feat:=20=ED=8C=8C=EC=9D=BC=20=ED=99=95?=
=?UTF-8?q?=EC=9E=A5=EC=9E=90=20=EB=B3=80=ED=99=98=20=EB=A1=9C=EC=A7=81=20?=
=?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/ShowColorChart/index.tsx | 36 +++-----------
src/LecueNote/util/handleClickHeicToJpg.ts | 49 +++++++++++++++++++
2 files changed, 57 insertions(+), 28 deletions(-)
create mode 100644 src/LecueNote/util/handleClickHeicToJpg.ts
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index 567b14e2..2751af7a 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -1,4 +1,3 @@
-import heic2any from 'heic2any';
import { useRef } from 'react';
import { IcCameraSmall } from '../../../assets';
@@ -7,6 +6,7 @@ import useGetPresignedUrl from '../../hooks/useGetPresignedUrl';
import { ShowColorChartProps } from '../../type/lecueNoteType';
import handleClickFiletoBinary from '../../util/handleClickFiletoBinary';
import handleClickFiletoString from '../../util/handleClickFiletoString';
+import handleClickHeicToJpg from '../../util/handleClickHeicToJpg';
import * as S from './ShowColorChart.style';
function ShowColorChart({
@@ -18,6 +18,7 @@ function ShowColorChart({
selectedFile,
handleFn,
handleIconFn,
+ handleIsLoading,
}: ShowColorChartProps) {
const imgRef = useRef(null);
useGetPresignedUrl({ presignedUrlDispatch });
@@ -37,33 +38,12 @@ function ShowColorChart({
file.name.split('.')[1] === 'heic' ||
file.name.split('.')[1] === 'HEIC'
) {
- // 'heic' 확장자인 경우에만 처리
- heic2any({ blob: file, toType: 'image/jpeg' }).then(
- function (resultBlob) {
- // 변환된 Blob을 사용하여 새로운 File 생성
- const jpg = new File(
- Array.isArray(resultBlob) ? resultBlob : [resultBlob],
- file.name.split('.')[0] + '.jpg',
- { type: 'image/jpeg', lastModified: new Date().getTime() },
- );
-
- // reader1: 파일을 base64로 읽어서 업로드
- const reader1 = new FileReader();
- handleClickFiletoString({
- file: jpg,
- reader: reader1,
- handleTransformImgFile,
- });
-
- // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
- const reader2 = new FileReader();
- handleClickFiletoBinary({
- file: jpg,
- reader: reader2,
- handleReaderOnloadend,
- });
- },
- );
+ handleClickHeicToJpg({
+ file: file,
+ handleTransformImgFile,
+ handleReaderOnloadend,
+ handleIsLoading,
+ });
} else {
const reader1 = new FileReader();
handleClickFiletoString({
diff --git a/src/LecueNote/util/handleClickHeicToJpg.ts b/src/LecueNote/util/handleClickHeicToJpg.ts
new file mode 100644
index 00000000..27799294
--- /dev/null
+++ b/src/LecueNote/util/handleClickHeicToJpg.ts
@@ -0,0 +1,49 @@
+import heic2any from 'heic2any';
+
+import handleClickFiletoBinary from './handleClickFiletoBinary';
+import handleClickFiletoString from './handleClickFiletoString';
+
+interface handleClickHeicToJpgProps {
+ file: File;
+ handleTransformImgFile: (file: string | FileReader) => void;
+ handleReaderOnloadend: (reader: FileReader, file: File) => void;
+ handleIsLoading: (status: boolean) => void;
+}
+
+const handleClickHeicToJpg = ({
+ file,
+ handleTransformImgFile,
+ handleReaderOnloadend,
+ handleIsLoading,
+}: handleClickHeicToJpgProps) => {
+ handleIsLoading(true);
+
+ heic2any({ blob: file, toType: 'image/jpeg' })
+ .then(function (resultBlob) {
+ // 변환된 Blob을 사용하여 새로운 File 생성
+ const jpg = new File(
+ Array.isArray(resultBlob) ? resultBlob : [resultBlob],
+ file.name.split('.')[0] + '.jpg',
+ { type: 'image/jpeg', lastModified: new Date().getTime() },
+ );
+
+ // reader1: 파일을 base64로 읽어서 업로드
+ const reader1 = new FileReader();
+ handleClickFiletoString({
+ file: jpg,
+ reader: reader1,
+ handleTransformImgFile,
+ });
+
+ // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
+ const reader2 = new FileReader();
+ handleClickFiletoBinary({
+ file: jpg,
+ reader: reader2,
+ handleReaderOnloadend,
+ });
+ })
+ .finally(() => handleIsLoading(false));
+};
+
+export default handleClickHeicToJpg;
From aed7e333c9cb11f91b82e72c094531339d12dd53 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 22 Feb 2024 17:34:53 +0900
Subject: [PATCH 06/12] =?UTF-8?q?feat:=20=ED=98=95=EB=B3=80=ED=99=98=20?=
=?UTF-8?q?=EC=8B=9C,=20=EB=A1=9C=EB=94=A9=20=EC=97=AC=EB=B6=80=20?=
=?UTF-8?q?=EC=B2=98=EB=A6=AC=ED=95=98=EA=B8=B0=20=EC=9C=84=ED=95=9C=20sta?=
=?UTF-8?q?te=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/LecueNote/components/SelectColor/index.tsx | 2 ++
src/LecueNote/page/LeceuNotePage/index.tsx | 8 ++++++++
src/LecueNote/type/lecueNoteType.ts | 3 +++
3 files changed, 13 insertions(+)
diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
index eb2ccbc9..6e7197c8 100644
--- a/src/LecueNote/components/SelectColor/index.tsx
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -18,6 +18,7 @@ function SelectColor({
handleColorFn,
handleIconFn,
selectedFile,
+ handleIsLoading,
}: SelectColorProps) {
const { textColor, background, category } = lecueNoteState;
@@ -48,6 +49,7 @@ function SelectColor({
selectedFile={selectedFile}
handleFn={handleColorFn}
handleIconFn={handleIconFn}
+ handleIsLoading={handleIsLoading}
/>
);
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index 7e21a0d1..45185434 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -28,6 +28,12 @@ function LecueNotePage() {
const [modalOn, setModalOn] = useState(false);
const [escapeModal, setEscapeModal] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const handleIsLoading = (booleanStatus: boolean) => {
+ setIsLoading(booleanStatus);
+ };
+
const [lecueNoteState, dispatch] = useReducer(reducer, {
presignedUrl: '',
filename: BG_COLOR_CHART[0],
@@ -117,6 +123,7 @@ function LecueNotePage() {
dispatch({ type: 'CLICKED_IMG_ICON' })}
+ handleIsLoading={handleIsLoading}
/>
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index 787f67d1..d47220e1 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -17,6 +17,7 @@ export interface SelectColorProps {
handleColorFn: (e: React.MouseEvent) => void;
handleIconFn: () => void;
handleTransformImgFile: (file: string | FileReader) => void;
+ handleIsLoading: (status: boolean) => void;
}
export interface ShowColorChartProps {
@@ -32,9 +33,11 @@ export interface ShowColorChartProps {
presignedUrl: string;
filename: string;
}>;
+ handleIsLoading: (status: boolean) => void;
}
export interface WriteNoteProps {
+ isLoading: boolean;
imgFile: string;
isIconClicked: boolean;
lecueNoteState: {
From 293a838bb2f3532f80b40ec7cfe08ccc4b5f46fa Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 22 Feb 2024 17:35:25 +0900
Subject: [PATCH 07/12] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=EB=85=B8?=
=?UTF-8?q?=ED=8A=B8=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=98=95=EB=B3=80?=
=?UTF-8?q?=ED=99=98=20=EC=8B=9C,=20=EB=A1=9C=EB=94=A9=20=EB=B6=84?=
=?UTF-8?q?=EA=B8=B0=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/WriteNote/WriteNote.style.ts | 16 ++++++++
src/LecueNote/components/WriteNote/index.tsx | 39 +++++++++++++------
2 files changed, 43 insertions(+), 12 deletions(-)
diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index 8c6e0882..67967229 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -85,3 +85,19 @@ export const Notice = styled.p`
${({ theme }) => theme.fonts.Caption1_R_12};
`;
+
+export const LoadingWrapper = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 100%;
+ height: 100%;
+
+ background-color: transparent;
+`;
+
+export const LottieWrapper = styled.div`
+ width: 10rem;
+ height: 10rem;
+`;
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index 774285cf..c37a848a 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -1,10 +1,13 @@
import GraphemeSplitter from 'grapheme-splitter';
+import Lottie from 'lottie-react';
import { useEffect, useState } from 'react';
+import animationData from '../../../../src/assets/lottie/spiner 120.json';
import { WriteNoteProps } from '../../type/lecueNoteType';
import * as S from './WriteNote.style';
function WriteNote({
+ isLoading,
lecueNoteState,
imgFile,
isIconClicked,
@@ -30,18 +33,30 @@ function WriteNote({
$isIconClicked={isIconClicked}
$imgFile={imgFile}
>
- {nickname}
-
-
-
- {dateArr[0]}.{dateArr[1]}.{dateArr[2]}
-
- ({split.splitGraphemes(contents).length}/1000)
-
+ {isLoading ? (
+
+
+
+
+
+ ) : (
+ <>
+ {nickname}
+
+
+
+ {dateArr[0]}.{dateArr[1]}.{dateArr[2]}
+
+
+ ({split.splitGraphemes(contents).length}/1000)
+
+
+ >
+ )}
*욕설/비속어는 자동 필터링됩니다.
From 0f7c4bb7b5924645162defe51d0fd2e2a045c441 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 22 Feb 2024 17:51:03 +0900
Subject: [PATCH 08/12] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=EB=85=B8?=
=?UTF-8?q?=ED=8A=B8=20=EB=B0=B0=EA=B2=BD=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
=?UTF-8?q?=EB=A1=9C=EB=94=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
=?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../WriteNote/NoteLoading/NoteLoading.style.ts | 18 ++++++++++++++++++
.../components/WriteNote/NoteLoading/index.tsx | 16 ++++++++++++++++
.../components/WriteNote/WriteNote.style.ts | 16 ----------------
src/LecueNote/components/WriteNote/index.tsx | 9 ++-------
4 files changed, 36 insertions(+), 23 deletions(-)
create mode 100644 src/LecueNote/components/WriteNote/NoteLoading/NoteLoading.style.ts
create mode 100644 src/LecueNote/components/WriteNote/NoteLoading/index.tsx
diff --git a/src/LecueNote/components/WriteNote/NoteLoading/NoteLoading.style.ts b/src/LecueNote/components/WriteNote/NoteLoading/NoteLoading.style.ts
new file mode 100644
index 00000000..ec8554bd
--- /dev/null
+++ b/src/LecueNote/components/WriteNote/NoteLoading/NoteLoading.style.ts
@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+export const LoadingWrapper = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 100%;
+ height: 100%;
+
+ border: 0.6rem;
+ background-color: ${({ theme }) => theme.colors.background};
+`;
+
+export const LottieWrapper = styled.div`
+ width: 10rem;
+ height: 10rem;
+`;
diff --git a/src/LecueNote/components/WriteNote/NoteLoading/index.tsx b/src/LecueNote/components/WriteNote/NoteLoading/index.tsx
new file mode 100644
index 00000000..156e0cf4
--- /dev/null
+++ b/src/LecueNote/components/WriteNote/NoteLoading/index.tsx
@@ -0,0 +1,16 @@
+import Lottie from 'lottie-react';
+
+import animationData from '../../../../../src/assets/lottie/spiner 120.json';
+import * as S from './NoteLoading.style';
+
+const NoteLoading = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default NoteLoading;
diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index 67967229..8c6e0882 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -85,19 +85,3 @@ export const Notice = styled.p`
${({ theme }) => theme.fonts.Caption1_R_12};
`;
-
-export const LoadingWrapper = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
-
- width: 100%;
- height: 100%;
-
- background-color: transparent;
-`;
-
-export const LottieWrapper = styled.div`
- width: 10rem;
- height: 10rem;
-`;
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index c37a848a..eccf9c0c 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -1,9 +1,8 @@
import GraphemeSplitter from 'grapheme-splitter';
-import Lottie from 'lottie-react';
import { useEffect, useState } from 'react';
-import animationData from '../../../../src/assets/lottie/spiner 120.json';
import { WriteNoteProps } from '../../type/lecueNoteType';
+import NoteLoading from './NoteLoading';
import * as S from './WriteNote.style';
function WriteNote({
@@ -34,11 +33,7 @@ function WriteNote({
$imgFile={imgFile}
>
{isLoading ? (
-
-
-
-
-
+
) : (
<>
{nickname}
From be2f4fa745c649a9284b85001b06dadeb88cfcaa Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 22 Feb 2024 18:33:41 +0900
Subject: [PATCH 09/12] =?UTF-8?q?fix:=20=EC=83=88=EB=A1=9C=EC=9A=B4=20heic?=
=?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20?=
=?UTF-8?q?=EC=8B=9C,=20=EC=9D=B4=EC=A0=84=EC=97=90=20=EC=84=A0=ED=83=9D?=
=?UTF-8?q?=ED=96=88=EB=8D=98=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EA=B0=80=20?=
=?UTF-8?q?=EB=9C=A8=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/WriteNote/NoteLoading/index.tsx | 10 +++++++++-
src/LecueNote/components/WriteNote/index.tsx | 3 ++-
src/LecueNote/page/LeceuNotePage/index.tsx | 15 ++++++++++-----
src/LecueNote/reducer/lecueNoteReducer.ts | 3 +++
src/LecueNote/type/lecueNoteType.ts | 1 +
src/LecueNote/type/reducerType.ts | 3 ++-
6 files changed, 27 insertions(+), 8 deletions(-)
diff --git a/src/LecueNote/components/WriteNote/NoteLoading/index.tsx b/src/LecueNote/components/WriteNote/NoteLoading/index.tsx
index 156e0cf4..e56ccde4 100644
--- a/src/LecueNote/components/WriteNote/NoteLoading/index.tsx
+++ b/src/LecueNote/components/WriteNote/NoteLoading/index.tsx
@@ -1,9 +1,17 @@
import Lottie from 'lottie-react';
+import { useEffect } from 'react';
import animationData from '../../../../../src/assets/lottie/spiner 120.json';
import * as S from './NoteLoading.style';
-const NoteLoading = () => {
+interface NoteLoadingProps {
+ handleResetPrevImg: () => void;
+}
+const NoteLoading = ({ handleResetPrevImg }: NoteLoadingProps) => {
+ useEffect(() => {
+ handleResetPrevImg();
+ }, []);
+
return (
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index eccf9c0c..c77cd1e1 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -12,6 +12,7 @@ function WriteNote({
isIconClicked,
contents,
handleChangeFn,
+ handleResetPrevImg,
}: WriteNoteProps) {
const nickname = localStorage.getItem('nickname');
const { textColor, background } = lecueNoteState;
@@ -33,7 +34,7 @@ function WriteNote({
$imgFile={imgFile}
>
{isLoading ? (
-
+
) : (
<>
{nickname}
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index 45185434..2871b14c 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -30,10 +30,6 @@ function LecueNotePage() {
const [isLoading, setIsLoading] = useState(false);
- const handleIsLoading = (booleanStatus: boolean) => {
- setIsLoading(booleanStatus);
- };
-
const [lecueNoteState, dispatch] = useReducer(reducer, {
presignedUrl: '',
filename: BG_COLOR_CHART[0],
@@ -47,6 +43,14 @@ function LecueNotePage() {
imgToBinary: new FileReader(),
});
+ const handleIsLoading = (booleanStatus: boolean) => {
+ setIsLoading(booleanStatus);
+ };
+
+ const handleResetPrevImg = () => {
+ dispatch({ type: 'RESET_PREV_IMG' });
+ };
+
const handleChangeContents = (e: React.ChangeEvent) => {
dispatch({ type: 'SET_CONTENTS', contents: e.target.value });
if (e.target.value.length > MAX_LENGTH) {
@@ -123,12 +127,13 @@ function LecueNotePage() {
{
case 'IMG_TO_BINARY':
return { ...state, imgToBinary: action.imgFile };
+ case 'RESET_PREV_IMG':
+ return { ...state, imgToStr: '' };
+
default:
throw new Error('Unhandled action');
}
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index d47220e1..5bd4533a 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -47,6 +47,7 @@ export interface WriteNoteProps {
};
contents: string;
handleChangeFn: (e: React.ChangeEvent) => void;
+ handleResetPrevImg: () => void;
}
export interface FooterProps {
diff --git a/src/LecueNote/type/reducerType.ts b/src/LecueNote/type/reducerType.ts
index bd8a244d..e8e257f9 100644
--- a/src/LecueNote/type/reducerType.ts
+++ b/src/LecueNote/type/reducerType.ts
@@ -21,4 +21,5 @@ export type Action =
| { type: 'CLICKED_IMG_ICON' }
| { type: 'NOT_CLICKED_IMG_ICON' }
| { type: 'IMG_TO_STR'; imgFile: string }
- | { type: 'IMG_TO_BINARY'; imgFile: FileReader };
+ | { type: 'IMG_TO_BINARY'; imgFile: FileReader }
+ | { type: 'RESET_PREV_IMG'; };
From 18e998e3dd8195b161cce4f4df8aeaba4ea6f55c Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 22 Feb 2024 19:40:24 +0900
Subject: [PATCH 10/12] =?UTF-8?q?fix:=20heic=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
=?UTF-8?q?=20=EB=B3=80=ED=99=98=20=ED=9B=84=20=EC=97=85=EB=A1=9C=EB=93=9C?=
=?UTF-8?q?=20=EC=8B=9C,=20=EC=9D=B4=EC=A0=84=EC=97=90=20=EC=A0=81?=
=?UTF-8?q?=EC=97=88=EB=8D=98=20=EB=82=B4=EC=9A=A9=20=EC=82=AC=EB=9D=BC?=
=?UTF-8?q?=EC=A7=80=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/SelectColor/index.tsx | 3 +-
.../components/ShowColorChart/index.tsx | 6 ++++
src/LecueNote/components/WriteNote/index.tsx | 34 ++++++++-----------
src/LecueNote/page/LeceuNotePage/index.tsx | 11 ++++--
src/LecueNote/type/lecueNoteType.ts | 2 ++
5 files changed, 32 insertions(+), 24 deletions(-)
diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
index 6e7197c8..ee6cf943 100644
--- a/src/LecueNote/components/SelectColor/index.tsx
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -20,7 +20,7 @@ function SelectColor({
selectedFile,
handleIsLoading,
}: SelectColorProps) {
- const { textColor, background, category } = lecueNoteState;
+ const { textColor, background, category, contents } = lecueNoteState;
return (
@@ -44,6 +44,7 @@ function SelectColor({
isIconClicked={isIconClicked}
colorChart={category === '텍스트색' ? TEXT_COLOR_CHART : BG_COLOR_CHART}
state={category === '텍스트색' ? textColor : background}
+ contents={contents}
handleTransformImgFile={handleTransformImgFile}
presignedUrlDispatch={presignedUrlDispatch}
selectedFile={selectedFile}
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index 2751af7a..dea224f1 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -13,6 +13,7 @@ function ShowColorChart({
isIconClicked,
colorChart,
state,
+ contents,
handleTransformImgFile,
presignedUrlDispatch,
selectedFile,
@@ -23,6 +24,10 @@ function ShowColorChart({
const imgRef = useRef(null);
useGetPresignedUrl({ presignedUrlDispatch });
+ const handleChangeContents = () => {
+ localStorage.setItem('noteContents', contents ? contents : '');
+ };
+
const handleReaderOnloadend = (reader: FileReader, file: File) => {
handleTransformImgFile(reader);
selectedFile(file);
@@ -76,6 +81,7 @@ function ShowColorChart({
{
handleIconFn();
+ handleChangeContents();
imgRef.current?.click();
}}
$isIconClicked={isIconClicked}
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index c77cd1e1..d2c95141 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -33,26 +33,20 @@ function WriteNote({
$isIconClicked={isIconClicked}
$imgFile={imgFile}
>
- {isLoading ? (
-
- ) : (
- <>
- {nickname}
-
-
-
- {dateArr[0]}.{dateArr[1]}.{dateArr[2]}
-
-
- ({split.splitGraphemes(contents).length}/1000)
-
-
- >
- )}
+ {isLoading && }
+
+ {nickname}
+
+
+
+ {dateArr[0]}.{dateArr[1]}.{dateArr[2]}
+
+ ({split.splitGraphemes(contents).length}/1000)
+
*욕설/비속어는 자동 필터링됩니다.
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index 2871b14c..64becae1 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -23,17 +23,17 @@ function LecueNotePage() {
const location = useLocation();
const putMutation = usePutPresignedUrl();
const postMutation = usePostLecueNote();
+ const noteContents = localStorage.getItem('noteContents');
const { bookId } = location.state || {};
const [modalOn, setModalOn] = useState(false);
const [escapeModal, setEscapeModal] = useState(false);
-
const [isLoading, setIsLoading] = useState(false);
const [lecueNoteState, dispatch] = useReducer(reducer, {
presignedUrl: '',
filename: BG_COLOR_CHART[0],
- contents: '',
+ contents: noteContents !== null ? noteContents : '',
category: CATEGORY[0],
textColor: TEXT_COLOR_CHART[0],
background: BG_COLOR_CHART[0],
@@ -99,6 +99,8 @@ function LecueNotePage() {
isIconClicked: lecueNoteState.isIconClicked,
bookId: bookId,
});
+
+ localStorage.setItem('noteContents', '');
};
return putMutation.isLoading || postMutation.isLoading ? (
@@ -115,7 +117,10 @@ function LecueNotePage() {
{escapeModal && (
navigate(-1)}
+ handleFn={() => {
+ navigate(-1);
+ localStorage.setItem('noteContents', '');
+ }}
category="note_escape"
setModalOn={setEscapeModal}
/>
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index 5bd4533a..0e9bb78d 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -4,6 +4,7 @@ export interface SelectColorProps {
textColor: string;
background: string;
category?: string;
+ contents?: string;
};
selectedFile: (file: File) => void;
presignedUrlDispatch: React.Dispatch<{
@@ -24,6 +25,7 @@ export interface ShowColorChartProps {
isIconClicked: boolean;
colorChart: string[];
state: string;
+ contents?: string;
handleTransformImgFile: (file: string | FileReader) => void;
selectedFile: (file: File) => void;
handleFn: (e: React.MouseEvent) => void;
From 44d0c72251d0f635967dd15f625fda8f9ba0cf51 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 22 Feb 2024 19:41:39 +0900
Subject: [PATCH 11/12] =?UTF-8?q?style:=20heic=20=ED=98=95=EB=B3=80?=
=?UTF-8?q?=ED=99=98=20=EC=8B=9C,=20=EB=A1=9C=EB=94=A9=20=EC=BB=B4?=
=?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20->=20=EB=A0=88=ED=81=90=EB=85=B8?=
=?UTF-8?q?=ED=8A=B8=20=EC=9C=84=EC=97=90=20=EC=9C=84=EC=B9=98=EC=8B=9C?=
=?UTF-8?q?=ED=82=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/WriteNote/NoteLoading/NoteLoading.style.ts | 3 +++
src/LecueNote/components/WriteNote/WriteNote.style.ts | 1 +
2 files changed, 4 insertions(+)
diff --git a/src/LecueNote/components/WriteNote/NoteLoading/NoteLoading.style.ts b/src/LecueNote/components/WriteNote/NoteLoading/NoteLoading.style.ts
index ec8554bd..30277927 100644
--- a/src/LecueNote/components/WriteNote/NoteLoading/NoteLoading.style.ts
+++ b/src/LecueNote/components/WriteNote/NoteLoading/NoteLoading.style.ts
@@ -4,6 +4,9 @@ export const LoadingWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
+ position: absolute;
+ top: 0;
+ left: 0;
width: 100%;
height: 100%;
diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index 8c6e0882..844138f2 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -14,6 +14,7 @@ export const LecueNote = styled.article<{
}>`
display: flex;
flex-direction: column;
+ position: relative;
width: 100%;
height: calc(100dvh - 33.2rem);
From 2f58412fbd592afdb77ed307ff3435cc87c5e091 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 23 Feb 2024 21:21:24 +0900
Subject: [PATCH 12/12] =?UTF-8?q?refactor:=20=EB=A6=AC=EB=B7=B0=20?=
=?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EB=B0=98=EC=98=81=20(=EC=84=B8=EC=85=98?=
=?UTF-8?q?=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EC=A7=80=EB=A1=9C=20=EB=B3=80?=
=?UTF-8?q?=EA=B2=BD,=20=EC=A4=91=EB=B3=B5=EC=BD=94=EB=93=9C=20=EC=A0=9C?=
=?UTF-8?q?=EA=B1=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/LecueNote/components/ShowColorChart/index.tsx | 7 ++-----
src/LecueNote/page/LeceuNotePage/index.tsx | 6 +++---
2 files changed, 5 insertions(+), 8 deletions(-)
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index dea224f1..d0785aff 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -25,7 +25,7 @@ function ShowColorChart({
useGetPresignedUrl({ presignedUrlDispatch });
const handleChangeContents = () => {
- localStorage.setItem('noteContents', contents ? contents : '');
+ sessionStorage.setItem('noteContents', contents ? contents : '');
};
const handleReaderOnloadend = (reader: FileReader, file: File) => {
@@ -39,10 +39,7 @@ function ShowColorChart({
if (fileInput && fileInput.files && fileInput.files.length > 0) {
const file = fileInput.files[0];
- if (
- file.name.split('.')[1] === 'heic' ||
- file.name.split('.')[1] === 'HEIC'
- ) {
+ if (file.name.split('.')[1].toUpperCase() === 'HEIC') {
handleClickHeicToJpg({
file: file,
handleTransformImgFile,
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index 64becae1..77553920 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -23,7 +23,7 @@ function LecueNotePage() {
const location = useLocation();
const putMutation = usePutPresignedUrl();
const postMutation = usePostLecueNote();
- const noteContents = localStorage.getItem('noteContents');
+ const noteContents = sessionStorage.getItem('noteContents');
const { bookId } = location.state || {};
const [modalOn, setModalOn] = useState(false);
@@ -100,7 +100,7 @@ function LecueNotePage() {
bookId: bookId,
});
- localStorage.setItem('noteContents', '');
+ sessionStorage.setItem('noteContents', '');
};
return putMutation.isLoading || postMutation.isLoading ? (
@@ -119,7 +119,7 @@ function LecueNotePage() {
{
navigate(-1);
- localStorage.setItem('noteContents', '');
+ sessionStorage.setItem('noteContents', '');
}}
category="note_escape"
setModalOn={setEscapeModal}