diff --git a/src/app/(post)/createPost/page.tsx b/src/app/(post)/createPost/page.tsx index 61beede8..4fec93a3 100644 --- a/src/app/(post)/createPost/page.tsx +++ b/src/app/(post)/createPost/page.tsx @@ -1,5 +1,3 @@ -import Link from 'next/link'; - import TopBar from '../../../components/Topbar'; import PostForm from './_components/PostForm'; @@ -9,9 +7,6 @@ const CreatePostPage = () => { 투표 만들기 - - 등록 - diff --git a/src/app/(post)/result/[postId]/_components/Posting/VoteForm.tsx b/src/app/(post)/result/[postId]/_components/Posting/VoteForm.tsx index 8116479d..7b976627 100644 --- a/src/app/(post)/result/[postId]/_components/Posting/VoteForm.tsx +++ b/src/app/(post)/result/[postId]/_components/Posting/VoteForm.tsx @@ -7,6 +7,7 @@ import { useParams } from 'next/navigation'; import { useGetPostDetailAPI } from '@/src/apis/postDetail'; import { useGetVoteDetailAPI } from '@/src/apis/vote'; +import FullImageModal from '@/src/components/FullImageModal'; import Icon from '@/src/components/Icon'; import ConfirmationModal from '@/src/components/Modal/ConfirmationModal'; import { cn } from '@/src/utils/cn'; @@ -14,9 +15,18 @@ import { cn } from '@/src/utils/cn'; import { useCreateVote } from '../../hooks/useCreateVote'; import useTerminateVote from '../../hooks/useTerminateVote'; +type ImageModal = { isVisible: boolean; url: string }; + const VoteForm = () => { const [selectedOption, setSelectedOption] = useState(null); - const [isShowModal, setIsShowModal] = useState(false); + + const [isShowTerminateModal, setIsShowTerminateModal] = useState(false); + + const [imageModalState, setImageModalState] = useState({ + 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 ( + +
+
+ {altText} +
+
+
+ ); +}; + +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;