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}