({
+ isVisible: false,
+ url: '',
+ });
+
const { postId } = useParams() as { postId: string };
const { voteOptions, voteTitle, totalNumber, voteId } =
useGetVoteDetailAPI(postId);
@@ -39,13 +49,14 @@ const VoteForm = () => {
terminateVote();
};
- const handelCloseModal = () => {
- setIsShowModal(false);
+ const handleTerminateModal = (isVisible: boolean) => () => {
+ setIsShowTerminateModal(isVisible);
};
- const handleOpenModal = () => {
- setIsShowModal(true);
- };
+ const handleImageModal =
+ (state: { isVisible: boolean; url: string }) => () => {
+ setImageModalState(state);
+ };
return (
@@ -85,6 +96,10 @@ const VoteForm = () => {
width={24}
height={24}
className='absolute right-[10px] max-h-[24px] max-w-[24px] rounded-[4px]'
+ onClick={handleImageModal({
+ isVisible: true,
+ url: voteOptionImageUrl,
+ })}
/>
)}
@@ -94,7 +109,7 @@ const VoteForm = () => {
{isAuthor ? (
@@ -112,11 +127,17 @@ const VoteForm = () => {
)}
+
);
};
diff --git a/src/app/(post)/result/[postId]/_components/Posting/VoteResult.tsx b/src/app/(post)/result/[postId]/_components/Posting/VoteResult.tsx
index 3f4d88d3..f683b08b 100644
--- a/src/app/(post)/result/[postId]/_components/Posting/VoteResult.tsx
+++ b/src/app/(post)/result/[postId]/_components/Posting/VoteResult.tsx
@@ -7,10 +7,12 @@ import { useParams } from 'next/navigation';
import { useGetPostDetailAPI } from '@/src/apis/postDetail';
import { useGetVoteDetailAPI } from '@/src/apis/vote';
-import FullScreenModal from '@/src/components/FullScreenModal';
+import FullImageModal from '@/src/components/FullImageModal';
import Icon from '@/src/components/Icon';
import { cn } from '@/src/utils/cn';
+type ImageModal = { isVisible: boolean; url: string };
+
const VoteResult = () => {
const { postId } = useParams() as { postId: string };
const {
@@ -22,18 +24,17 @@ const VoteResult = () => {
} = useGetVoteDetailAPI(postId);
const maxCount = Math.max(...voteOptions.map(({ count }) => count));
- const [isShowModal, setIsShowModal] = useState(false);
- const [selectedImage, setSelectedImage] = useState('');
const { isAuthor } = useGetPostDetailAPI(postId);
- const showImageModal = (url: string) => {
- setIsShowModal(true);
- setSelectedImage(url);
- };
+ const [imageModalState, setImageModalState] = useState({
+ isVisible: false,
+ url: '',
+ });
- const handelCloseModal = () => {
- setIsShowModal(false);
- };
+ const handleImageModal =
+ (state: { isVisible: boolean; url: string }) => () => {
+ setImageModalState(state);
+ };
return (
@@ -102,9 +103,10 @@ const VoteResult = () => {
width={24}
height={24}
className='absolute right-[10px] z-0 max-h-[24px] max-w-[24px] rounded-[4px]'
- onClick={() => {
- showImageModal(voteOptionImageUrl);
- }}
+ onClick={handleImageModal({
+ isVisible: true,
+ url: voteOptionImageUrl,
+ })}
/>
)}
@@ -116,13 +118,12 @@ const VoteResult = () => {
{isTerminated ? '종료된 투표입니다.' : '투표 완료'}
-
-
-
+
);
};
diff --git a/src/components/FullImageModal/index.tsx b/src/components/FullImageModal/index.tsx
new file mode 100644
index 00000000..5d3c30b7
--- /dev/null
+++ b/src/components/FullImageModal/index.tsx
@@ -0,0 +1,34 @@
+import Image from 'next/image';
+
+import FullModal from '../FullModal';
+
+interface FullImageModalProps {
+ isShow: boolean;
+ onClose: () => void;
+ imageUrl: string;
+ altText: string;
+}
+
+const FullImageModal = ({
+ isShow,
+ onClose,
+ imageUrl,
+ altText,
+}: FullImageModalProps) => {
+ return (
+
+
+
+ );
+};
+
+export default FullImageModal;
diff --git a/src/components/FullScreenModal/index.tsx b/src/components/FullModal/index.tsx
similarity index 84%
rename from src/components/FullScreenModal/index.tsx
rename to src/components/FullModal/index.tsx
index 0ee289ad..145d9bff 100644
--- a/src/components/FullScreenModal/index.tsx
+++ b/src/components/FullModal/index.tsx
@@ -7,19 +7,19 @@ import { cn } from '@/src/utils/cn';
import Icon from '../Icon';
import TopBar from '../Topbar';
-interface FullScreenModalProps {
+interface FullModalProps {
show: boolean;
onClose: () => void;
backgroundClassName?: string;
contentClassName?: string;
}
-const FullScreenModal = ({
+const FullModal = ({
show,
onClose,
backgroundClassName,
children,
-}: PropsWithChildren) => {
+}: PropsWithChildren) => {
const modalRoot = document.getElementById('layout-Root');
if (!show || !modalRoot) {
@@ -42,4 +42,4 @@ const FullScreenModal = ({
);
};
-export default FullScreenModal;
+export default FullModal;