From 8cd530523dba369dd76e2ad930ec672cffd84b51 Mon Sep 17 00:00:00 2001 From: sangminlee98 Date: Tue, 19 Mar 2024 00:29:53 +0900 Subject: [PATCH 1/8] =?UTF-8?q?fix:=20buttonStyle=20disabled=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=9D=BC?= =?UTF-8?q?=EB=B0=98=ED=9A=8C=EC=9B=90=20=EA=B0=80=EC=9E=85=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B2=84=ED=8A=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../EditInfo/EditEmailInfo/index.tsx | 2 +- .../EditInfo/EditEmailInfo/styles.module.scss | 10 ++--- .../EditNicknameInfo/styles.module.scss | 10 ++--- .../EditInfo/EditPhoneInfo/styles.module.scss | 10 ++--- src/pages/SignUp/index.tsx | 43 ++++++++++++++++--- src/pages/SignUp/styles.module.scss | 6 +++ 6 files changed, 59 insertions(+), 22 deletions(-) diff --git a/src/components/MyPage/MySetting/EditInfo/EditEmailInfo/index.tsx b/src/components/MyPage/MySetting/EditInfo/EditEmailInfo/index.tsx index 4575341..8f8895a 100644 --- a/src/components/MyPage/MySetting/EditInfo/EditEmailInfo/index.tsx +++ b/src/components/MyPage/MySetting/EditInfo/EditEmailInfo/index.tsx @@ -140,7 +140,7 @@ export default function EditEmailInfo({ !/^([\w\.\_\-])*[a-zA-Z0-9]+([\w\.\_\-])*([a-zA-Z0-9])+([\w\.\_\-])+@([a-zA-Z0-9]+\.)+[a-zA-Z0-9]{2,8}$/g.test( watch('email'), ) || isCheckEmail - ? styles.buttonStyleDisabled + ? styles.Disabled : styles.buttonStyleActive } disabled={ diff --git a/src/components/MyPage/MySetting/EditInfo/EditEmailInfo/styles.module.scss b/src/components/MyPage/MySetting/EditInfo/EditEmailInfo/styles.module.scss index bf7a593..9d33806 100644 --- a/src/components/MyPage/MySetting/EditInfo/EditEmailInfo/styles.module.scss +++ b/src/components/MyPage/MySetting/EditInfo/EditEmailInfo/styles.module.scss @@ -63,11 +63,11 @@ &:hover { opacity: 0.8; } -} -.buttonStyle:disabled { - cursor: auto; - &:hover { - opacity: 1; + &:disabled { + cursor: not-allowed; + &:hover { + opacity: 1; + } } } diff --git a/src/components/MyPage/MySetting/EditInfo/EditNicknameInfo/styles.module.scss b/src/components/MyPage/MySetting/EditInfo/EditNicknameInfo/styles.module.scss index 6ed0e4b..e552c4d 100644 --- a/src/components/MyPage/MySetting/EditInfo/EditNicknameInfo/styles.module.scss +++ b/src/components/MyPage/MySetting/EditInfo/EditNicknameInfo/styles.module.scss @@ -61,11 +61,11 @@ &:hover { opacity: 0.8; } -} -.buttonStyle:disabled { - cursor: auto; - &:hover { - opacity: 1; + &:disabled { + cursor: not-allowed; + &:hover { + opacity: 1; + } } } diff --git a/src/components/MyPage/MySetting/EditInfo/EditPhoneInfo/styles.module.scss b/src/components/MyPage/MySetting/EditInfo/EditPhoneInfo/styles.module.scss index bf7a593..9d33806 100644 --- a/src/components/MyPage/MySetting/EditInfo/EditPhoneInfo/styles.module.scss +++ b/src/components/MyPage/MySetting/EditInfo/EditPhoneInfo/styles.module.scss @@ -63,11 +63,11 @@ &:hover { opacity: 0.8; } -} -.buttonStyle:disabled { - cursor: auto; - &:hover { - opacity: 1; + &:disabled { + cursor: not-allowed; + &:hover { + opacity: 1; + } } } diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx index 9e37bee..df93f8d 100644 --- a/src/pages/SignUp/index.tsx +++ b/src/pages/SignUp/index.tsx @@ -380,11 +380,17 @@ export default function SignUpPage() { @@ -479,11 +485,16 @@ export default function SignUpPage() { className={ /^(?=.*[a-zA-Z0-9가-힣])[A-Za-z0-9가-힣]{1,20}$/g.test( watch('nick_name'), - ) + ) && !nicknameCheck ? styles.buttonStyleActive : styles.buttonStyle } onClick={nicknameCheckHandler} + disabled={ + !/^(?=.*[a-zA-Z0-9가-힣])[A-Za-z0-9가-힣]{1,20}$/g.test( + watch('nick_name'), + ) || nicknameCheck + } > 중복확인 @@ -517,11 +528,16 @@ export default function SignUpPage() { @@ -552,11 +568,16 @@ export default function SignUpPage() { @@ -594,11 +615,16 @@ export default function SignUpPage() { className={ /^([\w\.\_\-])*[a-zA-Z0-9]+([\w\.\_\-])*([a-zA-Z0-9])+([\w\.\_\-])+@([a-zA-Z0-9]+\.)+[a-zA-Z0-9]{2,8}$/g.test( watch('email'), - ) + ) && !isCheckEmail ? styles.buttonStyleActive : styles.buttonStyle } onClick={onSendEmail} + disabled={ + !/^([\w\.\_\-])*[a-zA-Z0-9]+([\w\.\_\-])*([a-zA-Z0-9])+([\w\.\_\-])+@([a-zA-Z0-9]+\.)+[a-zA-Z0-9]{2,8}$/g.test( + watch('email'), + ) || isCheckEmail + } > 인증요청 @@ -629,11 +655,16 @@ export default function SignUpPage() { diff --git a/src/pages/SignUp/styles.module.scss b/src/pages/SignUp/styles.module.scss index dbe5414..366c91c 100644 --- a/src/pages/SignUp/styles.module.scss +++ b/src/pages/SignUp/styles.module.scss @@ -208,6 +208,12 @@ &:hover { opacity: 0.8; } + &:disabled { + cursor: not-allowed; + &:hover { + opacity: 1; + } + } } .buttonStyleActive { @extend .buttonStyle; From c847fde5a9f6240b35422984cd0de35853b6d5f7 Mon Sep 17 00:00:00 2001 From: sangminlee98 Date: Tue, 19 Mar 2024 01:16:06 +0900 Subject: [PATCH 2/8] =?UTF-8?q?fix:=20=EA=B3=B5=EC=9D=B8=EC=A4=91=EA=B0=9C?= =?UTF-8?q?=EC=82=AC=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EB=B9=84?= =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=20=EB=B2=84=ED=8A=BC=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SignUp/AgentSignUp/index.tsx | 45 ++++++++++++++++++++++---- 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/src/pages/SignUp/AgentSignUp/index.tsx b/src/pages/SignUp/AgentSignUp/index.tsx index 99031b8..cd770a5 100644 --- a/src/pages/SignUp/AgentSignUp/index.tsx +++ b/src/pages/SignUp/AgentSignUp/index.tsx @@ -572,7 +572,7 @@ export default function AgentSignUpPage() { /> @@ -656,11 +661,16 @@ export default function AgentSignUpPage() { @@ -702,11 +712,17 @@ export default function AgentSignUpPage() { @@ -809,11 +825,16 @@ export default function AgentSignUpPage() { className={ /^(?=.*[a-zA-Z0-9가-힣])[A-Za-z0-9가-힣]{1,20}$/g.test( watch('nick_name'), - ) + ) && !nicknameCheck ? signUpStyles.buttonStyleActive : signUpStyles.buttonStyle } onClick={nicknameCheckHandler} + disabled={ + !/^(?=.*[a-zA-Z0-9가-힣])[A-Za-z0-9가-힣]{1,20}$/g.test( + watch('nick_name'), + ) || nicknameCheck + } > 중복확인 @@ -849,11 +870,16 @@ export default function AgentSignUpPage() { @@ -884,11 +910,16 @@ export default function AgentSignUpPage() { From 283c3054bdd60ad28b4bd4d6240fc061521d156a Mon Sep 17 00:00:00 2001 From: sangminlee98 Date: Tue, 19 Mar 2024 01:34:02 +0900 Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B8=EC=A6=9D=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EC=9A=94=EC=B2=AD=20=EC=8B=9C=20=EB=A9=94=EC=84=B8?= =?UTF-8?q?=EC=A7=80=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SignUp/AgentSignUp/index.tsx | 19 +++++++++++++++++-- src/pages/SignUp/index.tsx | 12 ++++++++++-- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/pages/SignUp/AgentSignUp/index.tsx b/src/pages/SignUp/AgentSignUp/index.tsx index cd770a5..ff098f4 100644 --- a/src/pages/SignUp/AgentSignUp/index.tsx +++ b/src/pages/SignUp/AgentSignUp/index.tsx @@ -636,11 +636,19 @@ export default function AgentSignUpPage() { 인증요청 -

+

+ {isCheckEmail && '인증코드가 발송되었습니다.'} {errors.company_email && errors.company_email.message} {!errors.company_email && emailErrMessage && emailErrMessage}

+ {/* 이메일 인증 */} {isCheckEmail && (
@@ -884,7 +892,14 @@ export default function AgentSignUpPage() { 인증요청
-

+

+ {isCheckNum && '인증문자가 발송되었습니다.'} {errors.phone_num && errors.phone_num.message} {!errors.phone_num && phoneErrMessage && phoneErrMessage}

diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx index df93f8d..ba0562e 100644 --- a/src/pages/SignUp/index.tsx +++ b/src/pages/SignUp/index.tsx @@ -542,7 +542,10 @@ export default function SignUpPage() { 인증요청 -

+

+ {isCheckNum && '인증문자가 발송되었습니다.'} {errors.phone_num && errors.phone_num.message} {!errors.phone_num && phoneErrMessage}

@@ -629,7 +632,12 @@ export default function SignUpPage() { 인증요청 -

+

+ {isCheckEmail && '인증코드가 발송되었습니다.'} {errors.email && errors.email.message} {!errors.email && emailErrMessage && emailErrMessage}

From 30801e75b057fc2235cfd615915d3b2b2a66ae86 Mon Sep 17 00:00:00 2001 From: sangminlee98 Date: Mon, 10 Jun 2024 01:44:26 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20CloudFront=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=BD=94=EB=93=9C=EB=A5=BC=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/uploadS3.ts | 22 +++++++++++++++---- src/components/Community/Board/index.tsx | 4 ++-- .../Introduce/ReviewBoard/index.tsx | 4 ++-- src/components/Introduce/TrendBoard/index.tsx | 12 +++++++--- src/pages/Community/Detail/index.tsx | 1 - src/pages/Main/index.tsx | 10 ++++++--- 6 files changed, 38 insertions(+), 15 deletions(-) diff --git a/src/apis/uploadS3.ts b/src/apis/uploadS3.ts index 597df25..36dbdf0 100644 --- a/src/apis/uploadS3.ts +++ b/src/apis/uploadS3.ts @@ -8,6 +8,7 @@ const { VITE_S3_SECRET_ACCESS_KEY, VITE_S3_BUCKET_NAME, VITE_S3_REGION, + VITE_S3_DOMAIN, } = import.meta.env; AWS.config.update({ @@ -19,12 +20,10 @@ const s3 = new AWS.S3(); const bucketName = VITE_S3_BUCKET_NAME; export const uploadFile = async (file: File) => { - const { type, name } = file; + const { type } = file; const params = { Bucket: bucketName, - Key: `${name}/${v4().toString().replace('-', '')}.${ - file.type.split('/')[1] - }`, + Key: `${v4().toString().replaceAll('-', '')}.${type.split('/')[1]}`, Body: file, ContentType: type, ACL: 'public-read', @@ -36,3 +35,18 @@ export const uploadFile = async (file: File) => { alert((err as AxiosError).response?.data.message); } }; + +export const deleteFile = (urls: string[]) => { + urls.map(async (url) => { + try { + await s3 + .deleteObject({ + Bucket: bucketName, + Key: url.split(VITE_S3_DOMAIN)[1].slice(1), + }) + .promise(); + } catch (err) { + console.error('이미지를 삭제하는데 실패했습니다.'); + } + }); +}; diff --git a/src/components/Community/Board/index.tsx b/src/components/Community/Board/index.tsx index aed0db2..f14726f 100644 --- a/src/components/Community/Board/index.tsx +++ b/src/components/Community/Board/index.tsx @@ -2,7 +2,6 @@ import { useNavigate } from 'react-router-dom'; import dayjs from 'dayjs'; import { CommunityBoardType } from '@/types/Board/communityType'; import { getCategoryName, getPrefixCategoryName } from '@/utils/utils'; -import { THUMBNAIL_SIZE_OPTION } from '@/constants/image'; import styles from './styles.module.scss'; type CommunityBoardProps = Omit; @@ -52,7 +51,8 @@ export default function CommunityBoard({ {imageUrl && ( thumbnail )} diff --git a/src/components/Introduce/ReviewBoard/index.tsx b/src/components/Introduce/ReviewBoard/index.tsx index 63c789c..efdfead 100644 --- a/src/components/Introduce/ReviewBoard/index.tsx +++ b/src/components/Introduce/ReviewBoard/index.tsx @@ -1,6 +1,5 @@ import { useNavigate } from 'react-router-dom'; import { IntroBoardType } from '@/types/Board/introType'; -import { THUMBNAIL_SIZE_OPTION } from '@/constants/image'; import styles from './styles.module.scss'; type ReviewBoardProps = IntroBoardType; @@ -13,7 +12,8 @@ export default function ReviewBoard(props: ReviewBoardProps) { className={styles.wrapper} onClick={() => navigate(`/intro_board/${props.boardId}`)} > - backgroundImg + {/* backgroundImg */} + backgroundImg

{props.title}

{props.oneLineContent}...

diff --git a/src/components/Introduce/TrendBoard/index.tsx b/src/components/Introduce/TrendBoard/index.tsx index cd90613..6735dfb 100644 --- a/src/components/Introduce/TrendBoard/index.tsx +++ b/src/components/Introduce/TrendBoard/index.tsx @@ -2,7 +2,6 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { AnimatePresence, motion } from 'framer-motion'; import { IntroBoardType } from '@/types/Board/introType'; -import { THUMBNAIL_SIZE_OPTION } from '@/constants/image'; import { updownVariants } from '@/constants/variants'; import styles from './styles.module.scss'; @@ -17,12 +16,19 @@ export default function TrendBoard(props: TrendBoardProps) { onClick={() => navigate(`/intro_board/${props.boardId}`)} onMouseOver={() => setIsMouseOver(true)} onMouseLeave={() => setIsMouseOver(false)} + // style={{ + // backgroundImage: isMouseOver + // ? `linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), + // url('${props.imageUrl + THUMBNAIL_SIZE_OPTION}')` + // : `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), + // url('${props.imageUrl + THUMBNAIL_SIZE_OPTION}')`, + // }} style={{ backgroundImage: isMouseOver ? `linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), - url('${props.imageUrl + THUMBNAIL_SIZE_OPTION}')` + url('${props.imageUrl}')` : `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), - url('${props.imageUrl + THUMBNAIL_SIZE_OPTION}')`, + url('${props.imageUrl}')`, }} >

{props.title}

diff --git a/src/pages/Community/Detail/index.tsx b/src/pages/Community/Detail/index.tsx index a1c541d..2c29fb1 100644 --- a/src/pages/Community/Detail/index.tsx +++ b/src/pages/Community/Detail/index.tsx @@ -19,7 +19,6 @@ export default function CommunityBoardDetailPage() { const { user } = userStore(); const { category, id } = useParams(); const navigate = useNavigate(); - const queryClient = useQueryClient(); const { data: boardData, isError } = useQuery< ApiResponseWithDataType diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx index 1d68074..8acd749 100644 --- a/src/pages/Main/index.tsx +++ b/src/pages/Main/index.tsx @@ -14,7 +14,6 @@ import { CommunityBoardType } from '@/types/Board/communityType'; import { IntroBoardType } from '@/types/Board/introType'; import { getPrefixCategoryName } from '@/utils/utils'; import { ApiResponseWithDataType } from '@/types/apiResponseType'; -import { THUMBNAIL_SIZE_OPTION } from '@/constants/image'; import { jumbotronData } from '@/constants/main_dummy'; import { opacityVariants } from '@/constants/variants'; import styles from './styles.module.scss'; @@ -181,7 +180,8 @@ export default function MainPage() { ThumbnailImage @@ -223,9 +223,13 @@ export default function MainPage() {
{ navigate( From f8fe71ad64ec3fa2e2e8e4456d3d1f17af7ebeca Mon Sep 17 00:00:00 2001 From: sangminlee98 Date: Mon, 10 Jun 2024 03:49:55 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=A0=84=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EC=9D=80=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20S3=20=EB=B2=84=ED=82=B7=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Community/Quill/index.tsx | 16 +++++++++++-- src/components/Introduce/Quill/index.tsx | 30 ++++++++++++++++++++---- src/components/Trade/Quill/index.tsx | 11 ++++++++- src/hooks/useQuillModules.ts | 3 ++- src/pages/Trade/Write/index.tsx | 9 ++++++- src/store/imageStore.ts | 13 ++++++++++ src/utils/Quill/imageHandler.ts | 4 ++++ src/utils/utils.ts | 4 ++-- 8 files changed, 78 insertions(+), 12 deletions(-) create mode 100644 src/store/imageStore.ts diff --git a/src/components/Community/Quill/index.tsx b/src/components/Community/Quill/index.tsx index 9fd1db2..b60782d 100644 --- a/src/components/Community/Quill/index.tsx +++ b/src/components/Community/Quill/index.tsx @@ -10,6 +10,8 @@ import { BoardFormType } from '@/types/Board/boardType'; import { CommunityBoardDetailType } from '@/types/Board/communityType'; import getImageUrls from '@/utils/Quill/getImageUrls'; import { PostBoardAPI } from '@/apis/boards'; +import { deleteFile } from '@/apis/uploadS3'; +import { imageStore } from '@/store/imageStore'; import useModalState from '@/hooks/useModalState'; import useQuillModules from '@/hooks/useQuillModules'; import useToastMessageType from '@/hooks/useToastMessageType'; @@ -25,6 +27,7 @@ type CommunityQuillProps = { // TODO: 이미지 10개 이상 등록 불가 export default function CommunityQuill({ queryParam }: CommunityQuillProps) { + const { images, setImages, resetImages } = imageStore(); const navigate = useNavigate(); const location = useLocation(); const boardData: CommunityBoardDetailType | null = location.state; @@ -75,15 +78,20 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) { ); // 이미지를 업로드 하기 위한 함수 - const modules = useQuillModules(QuillRef); + const modules = useQuillModules(QuillRef, setImages); const onChange = (content: string) => { setContents(content); }; const onPost = async () => { setIsProcessing(true); + if (!checkBeforePost(title, contents)) { + setIsProcessing(false); + return; + } + const imageUrls = [...getImageUrls(contents)]; - if (!checkBeforePost(title, contents)) return; + const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); const BoardForm: BoardFormType = { title, @@ -95,9 +103,12 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) { prefixCategory, fixed: false, }; + try { const response = await PostBoardAPI(BoardForm); if (response?.code === 'SUCCESS') { + deleteFile(notUsedImageUrls); + resetImages(); handleToastMessageProps('POST_CREATE_SUCCESS', () => { handleModalClose(); navigate(`/community/${queryParam}`); @@ -133,6 +144,7 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) { ?.getEditor() .clipboard.dangerouslyPasteHTML(0, boardData.code); } + return () => resetImages(); }, []); return ( diff --git a/src/components/Introduce/Quill/index.tsx b/src/components/Introduce/Quill/index.tsx index 3a04e17..2d0feb3 100644 --- a/src/components/Introduce/Quill/index.tsx +++ b/src/components/Introduce/Quill/index.tsx @@ -11,7 +11,8 @@ import { BoardFormType } from '@/types/Board/boardType'; import { IntroBoardDetailType } from '@/types/Board/introType'; import getImageUrls from '@/utils/Quill/getImageUrls'; import { PostBoardAPI } from '@/apis/boards'; -import { uploadFile } from '@/apis/uploadS3'; +import { deleteFile, uploadFile } from '@/apis/uploadS3'; +import { imageStore } from '@/store/imageStore'; import useModalState from '@/hooks/useModalState'; import useQuillModules from '@/hooks/useQuillModules'; import useToastMessageType from '@/hooks/useToastMessageType'; @@ -25,6 +26,7 @@ import styles from './styles.module.scss'; const { VITE_S3_DOMAIN } = import.meta.env; export default function IntroduceQuill() { + const { images, setImages, resetImages } = imageStore(); const navigate = useNavigate(); const location = useLocation(); const boardData: IntroBoardDetailType | null = location.state; @@ -86,6 +88,7 @@ export default function IntroduceQuill() { // const imageUrl = VITE_CLOUD_FRONT_DOMAIN + imageName + DEFAULT_OPTIONS; const imageUrl = VITE_S3_DOMAIN + imageName; setThumbnail(imageUrl); + setImages(thumbnail); } catch (error) { const err = error as AxiosError; return { ...err.response, success: false }; @@ -94,7 +97,7 @@ export default function IntroduceQuill() { }; // 이미지를 업로드 하기 위한 함수 - const modules = useQuillModules(QuillRef); + const modules = useQuillModules(QuillRef, setImages); const onChange = (content: string) => { setContents(content); }; @@ -102,7 +105,12 @@ export default function IntroduceQuill() { const onPost = async () => { setIsProcessing(true); const imageUrls = [thumbnail, ...getImageUrls(contents)]; - if (!checkBeforePost(title, contents, imageUrls)) return; + if (!checkBeforePost(title, contents, thumbnail)) { + setIsProcessing(false); + return; + } + + const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); const BoardForm: BoardFormType = { title, @@ -115,6 +123,8 @@ export default function IntroduceQuill() { try { const response = await PostBoardAPI(BoardForm); if (response?.code === 'SUCCESS') { + deleteFile(notUsedImageUrls); + resetImages(); handleToastMessageProps('POST_CREATE_SUCCESS', () => { handleModalClose(); navigate(`/introduce`); @@ -132,15 +142,24 @@ export default function IntroduceQuill() { }; const onUpdate = () => { + const imageUrls = [thumbnail, ...getImageUrls(contents)]; + const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); + const BoardForm: BoardFormType = { title, code: contents, category, - imageUrls: [thumbnail, ...getImageUrls(contents)], + imageUrls, prefixCategory: 'INTRO', fixed: false, }; - mutate(BoardForm); + try { + mutate(BoardForm); + deleteFile(notUsedImageUrls); + resetImages(); + } catch (error) { + console.error(error); + } }; useEffect(() => { @@ -150,6 +169,7 @@ export default function IntroduceQuill() { ?.getEditor() .clipboard.dangerouslyPasteHTML(0, boardData.code); } + return () => resetImages(); }, []); return ( diff --git a/src/components/Trade/Quill/index.tsx b/src/components/Trade/Quill/index.tsx index 1710763..556b1b4 100644 --- a/src/components/Trade/Quill/index.tsx +++ b/src/components/Trade/Quill/index.tsx @@ -8,6 +8,8 @@ import { QueryKeys, restFetcher } from '@/queryClient'; import { TradeBoardDetailType, TradeBoardForm } from '@/types/Board/tradeType'; import getImageUrls from '@/utils/Quill/getImageUrls'; import { PostHouseAPI } from '@/apis/houses'; +import { deleteFile } from '@/apis/uploadS3'; +import { imageStore } from '@/store/imageStore'; import userStore from '@/store/userStore'; import useModalState from '@/hooks/useModalState'; import useQuillModules from '@/hooks/useQuillModules'; @@ -29,6 +31,7 @@ export default function TradeQuill({ setForm, thumbnail, }: TradeQuillProps) { + const { images, setImages, resetImages } = imageStore(); const { user } = userStore(); const navigate = useNavigate(); const { modalState, handleModalOpen, handleModalClose } = useModalState(); @@ -36,7 +39,7 @@ export default function TradeQuill({ const { state }: { state: { data: TradeBoardDetailType } } = useLocation(); const QuillRef = useRef(); // 이미지를 업로드 하기 위한 함수 - const modules = useQuillModules(QuillRef); + const modules = useQuillModules(QuillRef, setImages); const [isProcessing, setIsProcessing] = useState(false); @@ -69,6 +72,7 @@ export default function TradeQuill({ const onPost = async ({ isTempSave }: { isTempSave: boolean }) => { setIsProcessing(true); const imageUrls = [thumbnail, ...getImageUrls(form.code)]; + const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); const extractedYear = form.createdDate.match(/\d{4}/); const createdDate = extractedYear ? extractedYear[0] : ''; @@ -91,6 +95,8 @@ export default function TradeQuill({ try { await PostHouseAPI(newForm); + deleteFile(notUsedImageUrls); + resetImages(); if (isTempSave) { alert('게시글이 임시저장 되었습니다.'); queryClient.refetchQueries([QueryKeys.MY_SAVES]); @@ -111,6 +117,7 @@ export default function TradeQuill({ const onUpdate = async ({ isTempSave }: { isTempSave: boolean }) => { const imageUrls = [thumbnail, ...getImageUrls(form.code)]; + const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); const extractedYear = form.createdDate.match(/\d{4}/); const createdDate = extractedYear ? extractedYear[0] : '2002'; @@ -128,6 +135,8 @@ export default function TradeQuill({ } try { mutate(newForm); + deleteFile(notUsedImageUrls); + resetImages(); if (isTempSave) { alert('게시글이 임시저장 되었습니다.'); } else { diff --git a/src/hooks/useQuillModules.ts b/src/hooks/useQuillModules.ts index 3e4073f..0b19ad6 100644 --- a/src/hooks/useQuillModules.ts +++ b/src/hooks/useQuillModules.ts @@ -12,6 +12,7 @@ Quill.register('modules/imageResize', ImageResize); const useQuillModules = ( QuillRef: React.MutableRefObject, + setImages: (imageUrl: string) => void, ) => { const modules = useMemo( () => ({ @@ -80,7 +81,7 @@ const useQuillModules = ( ['image'], ['clean'], ], - handlers: { image: () => imageHandler(QuillRef) }, + handlers: { image: () => imageHandler(QuillRef, setImages) }, }, }), [], diff --git a/src/pages/Trade/Write/index.tsx b/src/pages/Trade/Write/index.tsx index d9c4140..a6f83bb 100644 --- a/src/pages/Trade/Write/index.tsx +++ b/src/pages/Trade/Write/index.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { Navigate, useLocation } from 'react-router-dom'; import { FiSearch } from 'react-icons/fi'; import { MdUploadFile } from 'react-icons/md'; @@ -12,6 +12,7 @@ import { TradeBoardForm, } from '@/types/Board/tradeType'; import { uploadFile } from '@/apis/uploadS3'; +import { imageStore } from '@/store/imageStore'; import userStore from '@/store/userStore'; import { getRentalPriceType } from '@/utils/utils'; // import { DEFAULT_OPTIONS } from '@/constants/image'; @@ -24,6 +25,7 @@ const { VITE_S3_DOMAIN } = import.meta.env; export default function TradeWritePage() { const { user } = userStore(); + const { setImages, resetImages } = imageStore(); const { state }: { state: { data: TradeBoardDetailType } } = useLocation(); @@ -81,6 +83,7 @@ export default function TradeWritePage() { // const imageUrl = VITE_CLOUD_FRONT_DOMAIN + imageName + DEFAULT_OPTIONS; const imageUrl = VITE_S3_DOMAIN + imageName; setThumbnail(imageUrl); + setImages(imageUrl); } catch (error) { const err = error as AxiosError; return { ...err.response, success: false }; @@ -88,6 +91,10 @@ export default function TradeWritePage() { } }; + useEffect(() => { + return () => resetImages(); + }, []); + if (!user) return ; return ( diff --git a/src/store/imageStore.ts b/src/store/imageStore.ts new file mode 100644 index 0000000..6e8d6ae --- /dev/null +++ b/src/store/imageStore.ts @@ -0,0 +1,13 @@ +import { create } from 'zustand'; + +export type ImageStore = { + images: string[]; + setImages: (imageUrl: string) => void; + resetImages: () => void; +}; + +export const imageStore = create((set, get) => ({ + images: [], + setImages: (imageUrl: string) => set({ images: [...get().images, imageUrl] }), + resetImages: () => set({ images: [] }), +})); diff --git a/src/utils/Quill/imageHandler.ts b/src/utils/Quill/imageHandler.ts index ce6479a..c5d6596 100644 --- a/src/utils/Quill/imageHandler.ts +++ b/src/utils/Quill/imageHandler.ts @@ -9,7 +9,9 @@ const { VITE_S3_DOMAIN } = import.meta.env; const imageHandler = ( QuillRef: React.MutableRefObject, + setImages: (imageUrl: string) => void, ) => { + // const { setImages } = imageStore(); const input = document.createElement('input'); input.setAttribute('type', 'file'); @@ -26,6 +28,8 @@ const imageHandler = ( // const imageUrl = VITE_CLOUD_FRONT_DOMAIN + imageName + DEFAULT_OPTIONS; const imageUrl = VITE_S3_DOMAIN + imageName; + setImages(imageUrl); + const range = QuillRef.current?.getEditor().getSelection()?.index; if (range !== null && range !== undefined) { const quill = QuillRef.current?.getEditor(); diff --git a/src/utils/utils.ts b/src/utils/utils.ts index e94435b..763c734 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -108,7 +108,7 @@ export const getMoveInType = (isCompleted: boolean) => { export const checkBeforePost = ( title: string, contents: string, - imageUrl?: string[], + thumbnail?: string, ) => { if (title === '') { alert('제목을 입력해주세요.'); @@ -118,7 +118,7 @@ export const checkBeforePost = ( alert('내용을 입력해주세요.'); return false; } - if (imageUrl && imageUrl[0] === '') { + if (thumbnail === '') { alert('썸네일을 등록해주세요.'); return false; } From aa8aef8c3314b71f3f411c85ab294ffc13aec205 Mon Sep 17 00:00:00 2001 From: sangminlee98 Date: Mon, 10 Jun 2024 04:46:25 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EC=A4=91=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=9D=B4=ED=83=88=20=EC=8B=9C=20=EC=97=85=EB=A1=9C=EB=93=9C?= =?UTF-8?q?=EB=90=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20S3=20=EB=B2=84?= =?UTF-8?q?=ED=82=B7=EC=97=90=EC=84=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Community/Quill/index.tsx | 10 +++++++++- src/components/Introduce/Quill/index.tsx | 10 +++++++++- src/pages/Trade/Write/index.tsx | 15 ++++++++++++--- 3 files changed, 30 insertions(+), 5 deletions(-) diff --git a/src/components/Community/Quill/index.tsx b/src/components/Community/Quill/index.tsx index b60782d..94b0395 100644 --- a/src/components/Community/Quill/index.tsx +++ b/src/components/Community/Quill/index.tsx @@ -35,6 +35,7 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) { const { toastMessageProps, handleToastMessageProps } = useToastMessageType(); const QuillRef = useRef(); + const latestImages = useRef(images); const [title, setTitle] = useState(boardData ? boardData.title : ''); const [contents, setContents] = useState(''); @@ -137,6 +138,10 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) { mutate(BoardForm); }; + useEffect(() => { + latestImages.current = images; + }, [images]); + useEffect(() => { // 개발모드에선 StricMode 때문에 같은글이 두번 넣어짐. StrictMode를 해제하고 테스트하자 if (boardData) { @@ -144,7 +149,10 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) { ?.getEditor() .clipboard.dangerouslyPasteHTML(0, boardData.code); } - return () => resetImages(); + return () => { + deleteFile(latestImages.current); + resetImages(); + }; }, []); return ( diff --git a/src/components/Introduce/Quill/index.tsx b/src/components/Introduce/Quill/index.tsx index 2d0feb3..04d9c04 100644 --- a/src/components/Introduce/Quill/index.tsx +++ b/src/components/Introduce/Quill/index.tsx @@ -35,6 +35,7 @@ export default function IntroduceQuill() { const QuillRef = useRef(); const thumbnailRef = useRef(null); + const imagesRef = useRef(images); const [title, setTitle] = useState(boardData ? boardData.title : ''); const [contents, setContents] = useState(''); @@ -162,6 +163,10 @@ export default function IntroduceQuill() { } }; + useEffect(() => { + imagesRef.current = images; + }, [images]); + useEffect(() => { // 개발모드에선 StricMode 때문에 같은글이 두번 넣어짐. StrictMode를 해제하고 테스트하자 if (boardData) { @@ -169,7 +174,10 @@ export default function IntroduceQuill() { ?.getEditor() .clipboard.dangerouslyPasteHTML(0, boardData.code); } - return () => resetImages(); + return () => { + deleteFile(imagesRef.current); + resetImages(); + }; }, []); return ( diff --git a/src/pages/Trade/Write/index.tsx b/src/pages/Trade/Write/index.tsx index a6f83bb..86f2bf2 100644 --- a/src/pages/Trade/Write/index.tsx +++ b/src/pages/Trade/Write/index.tsx @@ -11,7 +11,7 @@ import { TradeBoardDetailType, TradeBoardForm, } from '@/types/Board/tradeType'; -import { uploadFile } from '@/apis/uploadS3'; +import { deleteFile, uploadFile } from '@/apis/uploadS3'; import { imageStore } from '@/store/imageStore'; import userStore from '@/store/userStore'; import { getRentalPriceType } from '@/utils/utils'; @@ -25,7 +25,7 @@ const { VITE_S3_DOMAIN } = import.meta.env; export default function TradeWritePage() { const { user } = userStore(); - const { setImages, resetImages } = imageStore(); + const { images, setImages, resetImages } = imageStore(); const { state }: { state: { data: TradeBoardDetailType } } = useLocation(); @@ -55,6 +55,8 @@ export default function TradeWritePage() { const [thumbnailTitle, setThumbnailTitle] = useState( state ? state.data.imageUrls[0].split('/')[3] : '', ); + + const imagesRef = useRef(images); const thumbnailRef = useRef(null); // 매물특징 const [isPostcodeOpen, setIsPostcodeOpen] = useState(false); @@ -92,7 +94,14 @@ export default function TradeWritePage() { }; useEffect(() => { - return () => resetImages(); + imagesRef.current = images; + }, [images]); + + useEffect(() => { + return () => { + deleteFile(imagesRef.current); + resetImages(); + }; }, []); if (!user) return ; From 12169ed6a2a2bc88545cb60a20b11eee784e45ea Mon Sep 17 00:00:00 2001 From: sangminlee98 Date: Mon, 10 Jun 2024 05:27:13 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=8B=9C=20=EC=9E=91=EC=84=B1?= =?UTF-8?q?=EB=90=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=93=A4=EC=9D=B4=20S3?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=82=AD=EC=A0=9C=EB=90=98=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EB=8F=84=EB=A1=9D=20cleanup=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EC=97=90=20=EC=A1=B0=EA=B1=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Community/Quill/index.tsx | 39 ++++++++++++++++++------ src/components/Introduce/Quill/index.tsx | 28 +++++++++++------ src/components/Trade/Quill/index.tsx | 26 +++++++++++++--- src/pages/Trade/Write/index.tsx | 18 ++--------- 4 files changed, 72 insertions(+), 39 deletions(-) diff --git a/src/components/Community/Quill/index.tsx b/src/components/Community/Quill/index.tsx index 94b0395..da69681 100644 --- a/src/components/Community/Quill/index.tsx +++ b/src/components/Community/Quill/index.tsx @@ -34,14 +34,15 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) { const { modalState, handleModalOpen, handleModalClose } = useModalState(); const { toastMessageProps, handleToastMessageProps } = useToastMessageType(); - const QuillRef = useRef(); - const latestImages = useRef(images); - const [title, setTitle] = useState(boardData ? boardData.title : ''); const [contents, setContents] = useState(''); const [category, setCategory] = useState(boardData ? boardData.category : ''); const [isProcessing, setIsProcessing] = useState(false); + const QuillRef = useRef(); + const imagesRef = useRef(images); + const isProcessingRef = useRef(isProcessing); + const prefixCategory = queryParam === 'free_board' ? 'DEFAULT' : 'ADVERTISEMENT'; const categoryList = @@ -121,26 +122,42 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) { } } catch (error) { console.error(error); - } finally { setIsProcessing(false); } }; const onUpdate = () => { + setIsProcessing(true); + if (!checkBeforePost(title, contents)) { + setIsProcessing(false); + return; + } + + const imageUrls = [...getImageUrls(contents)]; + const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); + const BoardForm: BoardFormType = { title, code: contents, category, - imageUrls: [...getImageUrls(contents)], + imageUrls, prefixCategory, fixed: false, }; - mutate(BoardForm); + try { + mutate(BoardForm); + deleteFile(notUsedImageUrls); + resetImages(); + } catch (error) { + console.error(error); + setIsProcessing(false); + } }; useEffect(() => { - latestImages.current = images; - }, [images]); + imagesRef.current = images; + isProcessingRef.current = isProcessing; + }, [images, isProcessing]); useEffect(() => { // 개발모드에선 StricMode 때문에 같은글이 두번 넣어짐. StrictMode를 해제하고 테스트하자 @@ -150,8 +167,10 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) { .clipboard.dangerouslyPasteHTML(0, boardData.code); } return () => { - deleteFile(latestImages.current); - resetImages(); + if (!isProcessingRef.current) { + deleteFile(imagesRef.current); + resetImages(); + } }; }, []); diff --git a/src/components/Introduce/Quill/index.tsx b/src/components/Introduce/Quill/index.tsx index 04d9c04..d0fd5cb 100644 --- a/src/components/Introduce/Quill/index.tsx +++ b/src/components/Introduce/Quill/index.tsx @@ -33,10 +33,6 @@ export default function IntroduceQuill() { const { modalState, handleModalOpen, handleModalClose } = useModalState(); const { toastMessageProps, handleToastMessageProps } = useToastMessageType(); - const QuillRef = useRef(); - const thumbnailRef = useRef(null); - const imagesRef = useRef(images); - const [title, setTitle] = useState(boardData ? boardData.title : ''); const [contents, setContents] = useState(''); const [category, setCategory] = useState(boardData ? boardData.category : ''); @@ -48,6 +44,11 @@ export default function IntroduceQuill() { ); const [isProcessing, setIsProcessing] = useState(false); + const QuillRef = useRef(); + const thumbnailRef = useRef(null); + const imagesRef = useRef(images); + const isProcessingRef = useRef(isProcessing); + const queryClient = useQueryClient(); const { mutate, isLoading: isUpdateLoading } = useMutation( @@ -137,13 +138,18 @@ export default function IntroduceQuill() { } } catch (error) { console.error(error); - } finally { - setIsProcessing(false); } }; const onUpdate = () => { + setIsProcessing(true); const imageUrls = [thumbnail, ...getImageUrls(contents)]; + + if (!checkBeforePost(title, contents, thumbnail)) { + setIsProcessing(false); + return; + } + const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); const BoardForm: BoardFormType = { @@ -160,12 +166,14 @@ export default function IntroduceQuill() { resetImages(); } catch (error) { console.error(error); + setIsProcessing(false); } }; useEffect(() => { imagesRef.current = images; - }, [images]); + isProcessingRef.current = isProcessing; + }, [images, isProcessing]); useEffect(() => { // 개발모드에선 StricMode 때문에 같은글이 두번 넣어짐. StrictMode를 해제하고 테스트하자 @@ -175,8 +183,10 @@ export default function IntroduceQuill() { .clipboard.dangerouslyPasteHTML(0, boardData.code); } return () => { - deleteFile(imagesRef.current); - resetImages(); + if (!isProcessingRef.current) { + deleteFile(imagesRef.current); + resetImages(); + } }; }, []); diff --git a/src/components/Trade/Quill/index.tsx b/src/components/Trade/Quill/index.tsx index 556b1b4..d5e9548 100644 --- a/src/components/Trade/Quill/index.tsx +++ b/src/components/Trade/Quill/index.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import ReactQuill from 'react-quill'; import { useLocation, useNavigate } from 'react-router-dom'; import { useMutation, useQueryClient } from '@tanstack/react-query'; @@ -37,12 +37,15 @@ export default function TradeQuill({ const { modalState, handleModalOpen, handleModalClose } = useModalState(); const { toastMessageProps, handleToastMessageProps } = useToastMessageType(); const { state }: { state: { data: TradeBoardDetailType } } = useLocation(); - const QuillRef = useRef(); - // 이미지를 업로드 하기 위한 함수 - const modules = useQuillModules(QuillRef, setImages); const [isProcessing, setIsProcessing] = useState(false); + const QuillRef = useRef(); + const imagesRef = useRef(images); + const isProcessingRef = useRef(isProcessing); + + const modules = useQuillModules(QuillRef, setImages); + const queryClient = useQueryClient(); const { mutate, isLoading: isUpdateLoading } = useMutation( (tradeBoardForm: TradeBoardForm) => @@ -155,6 +158,20 @@ export default function TradeQuill({ const isUpdating = Boolean(state && !state.data.tmpYn); // 등록된 글을 수정하는 상태 const isSaving = Boolean(state && state.data.tmpYn); // 임시저장된 글을 작성하는 상태 + useEffect(() => { + imagesRef.current = images; + isProcessingRef.current = isProcessing; + }, [images, isProcessing]); + + useEffect(() => { + return () => { + if (!isProcessingRef.current) { + deleteFile(imagesRef.current); + resetImages(); + } + }; + }, []); + return (
@@ -178,7 +195,6 @@ export default function TradeQuill({ QuillRef.current = element; } }} - value={form.code} onChange={(value) => setForm((prev) => ({ ...prev, code: value }))} modules={modules} placeholder="사진 5장 이상은 필수입니다. 5장 이상(건물 외관, 내부 포함) 업로드 되지 않을 시, 반려됩니다." diff --git a/src/pages/Trade/Write/index.tsx b/src/pages/Trade/Write/index.tsx index 86f2bf2..a20f7c2 100644 --- a/src/pages/Trade/Write/index.tsx +++ b/src/pages/Trade/Write/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { Navigate, useLocation } from 'react-router-dom'; import { FiSearch } from 'react-icons/fi'; import { MdUploadFile } from 'react-icons/md'; @@ -11,7 +11,7 @@ import { TradeBoardDetailType, TradeBoardForm, } from '@/types/Board/tradeType'; -import { deleteFile, uploadFile } from '@/apis/uploadS3'; +import { uploadFile } from '@/apis/uploadS3'; import { imageStore } from '@/store/imageStore'; import userStore from '@/store/userStore'; import { getRentalPriceType } from '@/utils/utils'; @@ -25,7 +25,7 @@ const { VITE_S3_DOMAIN } = import.meta.env; export default function TradeWritePage() { const { user } = userStore(); - const { images, setImages, resetImages } = imageStore(); + const { setImages } = imageStore(); const { state }: { state: { data: TradeBoardDetailType } } = useLocation(); @@ -56,7 +56,6 @@ export default function TradeWritePage() { state ? state.data.imageUrls[0].split('/')[3] : '', ); - const imagesRef = useRef(images); const thumbnailRef = useRef(null); // 매물특징 const [isPostcodeOpen, setIsPostcodeOpen] = useState(false); @@ -93,17 +92,6 @@ export default function TradeWritePage() { } }; - useEffect(() => { - imagesRef.current = images; - }, [images]); - - useEffect(() => { - return () => { - deleteFile(imagesRef.current); - resetImages(); - }; - }, []); - if (!user) return ; return ( From 0169aa2bf35fb365c56f0b2b64f1f7644e500c00 Mon Sep 17 00:00:00 2001 From: sangminlee98 Date: Fri, 14 Jun 2024 13:14:43 +0900 Subject: [PATCH 8/8] =?UTF-8?q?refact:=20=EC=82=AC=EC=9A=A9=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?URL=20=EC=B6=94=EC=B6=9C=ED=95=98=EB=8A=94=20=EB=A1=9C=EC=A7=81?= =?UTF-8?q?=20=EA=B3=B5=ED=86=B5=20=ED=95=A8=EC=88=98=EB=A1=9C=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Community/Quill/index.tsx | 5 +++-- src/components/Introduce/Quill/index.tsx | 5 +++-- src/components/Trade/Quill/index.tsx | 5 +++-- src/utils/Quill/getNotUsedImageUrl.ts | 5 +++++ 4 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 src/utils/Quill/getNotUsedImageUrl.ts diff --git a/src/components/Community/Quill/index.tsx b/src/components/Community/Quill/index.tsx index da69681..007c086 100644 --- a/src/components/Community/Quill/index.tsx +++ b/src/components/Community/Quill/index.tsx @@ -9,6 +9,7 @@ import { QueryKeys, restFetcher } from '@/queryClient'; import { BoardFormType } from '@/types/Board/boardType'; import { CommunityBoardDetailType } from '@/types/Board/communityType'; import getImageUrls from '@/utils/Quill/getImageUrls'; +import getNotUsedImageUrl from '@/utils/Quill/getNotUsedImageUrl'; import { PostBoardAPI } from '@/apis/boards'; import { deleteFile } from '@/apis/uploadS3'; import { imageStore } from '@/store/imageStore'; @@ -93,7 +94,7 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) { } const imageUrls = [...getImageUrls(contents)]; - const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); + const notUsedImageUrls = getNotUsedImageUrl(images, imageUrls); const BoardForm: BoardFormType = { title, @@ -134,7 +135,7 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) { } const imageUrls = [...getImageUrls(contents)]; - const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); + const notUsedImageUrls = getNotUsedImageUrl(images, imageUrls); const BoardForm: BoardFormType = { title, diff --git a/src/components/Introduce/Quill/index.tsx b/src/components/Introduce/Quill/index.tsx index d0fd5cb..1124da9 100644 --- a/src/components/Introduce/Quill/index.tsx +++ b/src/components/Introduce/Quill/index.tsx @@ -10,6 +10,7 @@ import { QueryKeys, restFetcher } from '@/queryClient'; import { BoardFormType } from '@/types/Board/boardType'; import { IntroBoardDetailType } from '@/types/Board/introType'; import getImageUrls from '@/utils/Quill/getImageUrls'; +import getNotUsedImageUrl from '@/utils/Quill/getNotUsedImageUrl'; import { PostBoardAPI } from '@/apis/boards'; import { deleteFile, uploadFile } from '@/apis/uploadS3'; import { imageStore } from '@/store/imageStore'; @@ -112,7 +113,7 @@ export default function IntroduceQuill() { return; } - const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); + const notUsedImageUrls = getNotUsedImageUrl(images, imageUrls); const BoardForm: BoardFormType = { title, @@ -150,7 +151,7 @@ export default function IntroduceQuill() { return; } - const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); + const notUsedImageUrls = getNotUsedImageUrl(images, imageUrls); const BoardForm: BoardFormType = { title, diff --git a/src/components/Trade/Quill/index.tsx b/src/components/Trade/Quill/index.tsx index d5e9548..7a78834 100644 --- a/src/components/Trade/Quill/index.tsx +++ b/src/components/Trade/Quill/index.tsx @@ -7,6 +7,7 @@ import ToastMessageModal from '@/components/Common/ToastMessageModal'; import { QueryKeys, restFetcher } from '@/queryClient'; import { TradeBoardDetailType, TradeBoardForm } from '@/types/Board/tradeType'; import getImageUrls from '@/utils/Quill/getImageUrls'; +import getNotUsedImageUrl from '@/utils/Quill/getNotUsedImageUrl'; import { PostHouseAPI } from '@/apis/houses'; import { deleteFile } from '@/apis/uploadS3'; import { imageStore } from '@/store/imageStore'; @@ -75,7 +76,7 @@ export default function TradeQuill({ const onPost = async ({ isTempSave }: { isTempSave: boolean }) => { setIsProcessing(true); const imageUrls = [thumbnail, ...getImageUrls(form.code)]; - const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); + const notUsedImageUrls = getNotUsedImageUrl(images, imageUrls); const extractedYear = form.createdDate.match(/\d{4}/); const createdDate = extractedYear ? extractedYear[0] : ''; @@ -120,7 +121,7 @@ export default function TradeQuill({ const onUpdate = async ({ isTempSave }: { isTempSave: boolean }) => { const imageUrls = [thumbnail, ...getImageUrls(form.code)]; - const notUsedImageUrls = images.filter((url) => !imageUrls.includes(url)); + const notUsedImageUrls = getNotUsedImageUrl(images, imageUrls); const extractedYear = form.createdDate.match(/\d{4}/); const createdDate = extractedYear ? extractedYear[0] : '2002'; diff --git a/src/utils/Quill/getNotUsedImageUrl.ts b/src/utils/Quill/getNotUsedImageUrl.ts new file mode 100644 index 0000000..40b0c92 --- /dev/null +++ b/src/utils/Quill/getNotUsedImageUrl.ts @@ -0,0 +1,5 @@ +const getNotUsedImageUrl = (origin: string[], final: string[]) => { + return origin.filter((url) => !final.includes(url)); +}; + +export default getNotUsedImageUrl;