From 623a74506562224284efbcb53a711d8c5d06e741 Mon Sep 17 00:00:00 2001 From: Gilpop8663 Date: Mon, 2 Oct 2023 20:47:28 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20(#675)=20=EC=84=A0=ED=83=9D?= =?UTF-8?q?=EC=A7=80=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B6=99=ED=98=80?= =?UTF-8?q?=EB=84=A3=EA=B8=B0=EB=A1=9C=20=EC=97=85=EB=A1=9C=EB=93=9C=20?= =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WritingVoteOption.stories.tsx | 3 ++ .../WritingVoteOption/index.tsx | 14 ++++---- .../WritingVoteOptionList/index.tsx | 7 +++- frontend/src/hooks/useWritingOption.tsx | 33 ++++++++++++++++++- 4 files changed, 49 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/WritingVoteOption.stories.tsx b/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/WritingVoteOption.stories.tsx index 5cfda953e..56df6f123 100644 --- a/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/WritingVoteOption.stories.tsx +++ b/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/WritingVoteOption.stories.tsx @@ -21,6 +21,7 @@ export const IsDeletable = () => { handleDeleteOptionClick={() => {}} handleRemoveImageClick={() => {}} handleUploadImage={() => {}} + handlePasteImage={() => {}} optionId={Math.floor(Math.random() * 100000)} text="방학 때 강릉으로 강아지와 기차여행을 하려했지 만 장마가 와서 취소했어요. 여행을 별로 좋" @@ -42,6 +43,7 @@ export const IsNotDeletable = () => { handleDeleteOptionClick={() => {}} handleRemoveImageClick={() => {}} handleUploadImage={() => {}} + handlePasteImage={() => {}} optionId={Math.floor(Math.random() * 100000)} text="방학 때 강릉으로 강아지와 기차여행을 하려했지 만 장마가 와서 취소했어요. 여행을 별로 좋" @@ -62,6 +64,7 @@ export const ShowImage = () => { handleDeleteOptionClick={() => {}} handleRemoveImageClick={() => {}} handleUploadImage={() => {}} + handlePasteImage={() => {}} optionId={Math.floor(Math.random() * 100000)} text="방학 때 강릉으로 강아지와 기차여행을 하려했지 만 장마가 와서 취소했어요. 여행을 별로 좋" diff --git a/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/index.tsx b/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/index.tsx index ddd51bfb7..248a7de61 100644 --- a/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/index.tsx +++ b/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/index.tsx @@ -1,5 +1,6 @@ -import { ChangeEvent, MutableRefObject } from 'react'; +import { ChangeEvent, ClipboardEvent, MutableRefObject } from 'react'; +import { POST_WRITING_OPTION } from '@constants/policy'; import { POST_OPTION_POLICY } from '@constants/policyMessage'; import OptionCancelButton from './OptionCancelButton'; @@ -11,17 +12,16 @@ interface WritingVoteOptionProps { text: string; isDeletable: boolean; ariaLabel: string; - handleUpdateOptionChange: (event: ChangeEvent) => void; + handleUpdateOptionChange: (event: ChangeEvent) => void; handleDeleteOptionClick: () => void; handleRemoveImageClick: () => void; handleUploadImage: (event: ChangeEvent) => void; + handlePasteImage: (event: ClipboardEvent) => void; imageUrl: string; contentInputRefList: MutableRefObject; index: number; } -const MAX_WRITING_LENGTH = 50; - export default function WritingVoteOption({ optionId, text, @@ -31,6 +31,7 @@ export default function WritingVoteOption({ handleDeleteOptionClick, handleRemoveImageClick, handleUploadImage, + handlePasteImage, imageUrl, contentInputRefList, index, @@ -47,9 +48,10 @@ export default function WritingVoteOption({ ) => handleUpdateOptionChange(e)} + onChange={handleUpdateOptionChange} + onPaste={handlePasteImage} placeholder={POST_OPTION_POLICY.DEFAULT} - maxLength={MAX_WRITING_LENGTH} + maxLength={POST_WRITING_OPTION.MAX_LENGTH} /> void; handleUploadImage: (event: ChangeEvent, optionId: number) => void; contentInputRefList: MutableRefObject; + handlePasteImage: (event: ClipboardEvent, optionId: number) => void; }; } @@ -33,6 +34,7 @@ export default function WritingVoteOptionList({ writingOptionHook }: WritingVote removeImage, handleUploadImage, contentInputRefList, + handlePasteImage, } = writingOptionHook; const isDeletable = optionList.length > MINIMUM_COUNT; @@ -53,6 +55,9 @@ export default function WritingVoteOptionList({ writingOptionHook }: WritingVote } imageUrl={optionItem.imageUrl} contentInputRefList={contentInputRefList} + handlePasteImage={(event: ClipboardEvent) => + handlePasteImage(event, optionItem.id) + } index={index} /> ))} diff --git a/frontend/src/hooks/useWritingOption.tsx b/frontend/src/hooks/useWritingOption.tsx index 1ada14770..60b6c20f1 100644 --- a/frontend/src/hooks/useWritingOption.tsx +++ b/frontend/src/hooks/useWritingOption.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, useRef, useState } from 'react'; +import React, { ChangeEvent, ClipboardEvent, useRef, useState } from 'react'; import { POST_WRITING_OPTION } from '@constants/policy'; @@ -68,6 +68,36 @@ export const useWritingOption = (initialOptionList?: WritingVoteOptionType[]) => setOptionList(removedOptionList); }; + const handlePasteImage = (event: ClipboardEvent, optionId: number) => { + const file = event.clipboardData.files[0]; + + if (!file) return; + + if (file.type.slice(0, 5) === 'image') { + event.preventDefault(); + + const updatePreviewImage = (imageUrl: string) => { + const updatedOptionList = optionList.map(optionItem => { + if (optionItem.id === optionId) { + return { ...optionItem, imageUrl }; + } + + return optionItem; + }); + + setOptionList(updatedOptionList); + }; + + const optionIndex = optionList.findIndex(option => option.id === optionId); + + uploadImage({ + imageFile: file, + inputElement: contentInputRefList.current[optionIndex], + setPreviewImageUrl: updatePreviewImage, + }); + } + }; + const removeImage = (optionId: number) => { const updatedOptionList = optionList.map(optionItem => { if (optionItem.id === optionId) { @@ -121,5 +151,6 @@ export const useWritingOption = (initialOptionList?: WritingVoteOptionType[]) => removeImage, handleUploadImage, contentInputRefList, + handlePasteImage, }; }; From b678f937573cead0370c310586c242defa6a8c27 Mon Sep 17 00:00:00 2001 From: Gilpop8663 Date: Tue, 3 Oct 2023 01:35:56 +0900 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20(#675)=20=EC=9D=B4=EB=AF=B8=20?= =?UTF-8?q?=EB=A7=8C=EB=93=A4=EC=96=B4=20=EB=86=93=EC=9D=80=20=EB=A9=94?= =?UTF-8?q?=EC=84=9C=EB=93=9C=EB=A5=BC=20=ED=99=9C=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EB=B0=A9=EC=8B=9D=EC=9C=BC=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useWritingOption.tsx | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/frontend/src/hooks/useWritingOption.tsx b/frontend/src/hooks/useWritingOption.tsx index 60b6c20f1..a73246436 100644 --- a/frontend/src/hooks/useWritingOption.tsx +++ b/frontend/src/hooks/useWritingOption.tsx @@ -76,24 +76,12 @@ export const useWritingOption = (initialOptionList?: WritingVoteOptionType[]) => if (file.type.slice(0, 5) === 'image') { event.preventDefault(); - const updatePreviewImage = (imageUrl: string) => { - const updatedOptionList = optionList.map(optionItem => { - if (optionItem.id === optionId) { - return { ...optionItem, imageUrl }; - } - - return optionItem; - }); - - setOptionList(updatedOptionList); - }; - const optionIndex = optionList.findIndex(option => option.id === optionId); uploadImage({ imageFile: file, inputElement: contentInputRefList.current[optionIndex], - setPreviewImageUrl: updatePreviewImage, + setPreviewImageUrl: setPreviewImageUrl(optionId), }); } };