diff --git a/src/assets/images/Share.png b/src/assets/images/Share.png new file mode 100644 index 00000000..d5d5d9e5 Binary files /dev/null and b/src/assets/images/Share.png differ diff --git a/src/components/common/BottomSheet/BottomSheet.tsx b/src/components/common/BottomSheet/BottomSheet.tsx index fe1502ed..fcb798cf 100644 --- a/src/components/common/BottomSheet/BottomSheet.tsx +++ b/src/components/common/BottomSheet/BottomSheet.tsx @@ -2,19 +2,34 @@ import { motion } from 'motion/react'; import Icon from '../Icon'; import { useBottomSheet } from './hooks'; +type BottomSheetAlign = 'left' | 'centered'; + interface BottomSheetProps { title: string; + align?: BottomSheetAlign; hasCloseButton?: boolean; children: React.ReactNode; } export default function BottomSheet({ title, + align = 'left', hasCloseButton = false, children, }: BottomSheetProps) { const { closeBottomSheet } = useBottomSheet(); + const isCentered = align === 'centered'; + + const renderHeader = () => + isCentered ? ( +
+

{title}

+
+ ) : ( +

{title}

+ ); + return ( -

{title}

+ {renderHeader()} + {hasCloseButton && ( )} -
+
{children}
); diff --git a/src/components/common/PollCreatedShareBottomSheet/PollCreatedShareBottomSheet.tsx b/src/components/common/PollCreatedShareBottomSheet/PollCreatedShareBottomSheet.tsx new file mode 100644 index 00000000..147fc4ed --- /dev/null +++ b/src/components/common/PollCreatedShareBottomSheet/PollCreatedShareBottomSheet.tsx @@ -0,0 +1,45 @@ +import BottomSheet from '../BottomSheet'; +import { useBottomSheet } from '../BottomSheet/hooks'; +import { Button } from '../Button/Button'; +import useLinkShareBottomSheet from '../LinkShareBottomSheet/hooks'; +import shareImage from '@/assets/images/Share.png'; + +interface PollCreatedShareBottomSheetProps { + shareUrl: string; +} + +export default function PollCreatedShareBottomSheet({ + shareUrl, +}: PollCreatedShareBottomSheetProps) { + const { handleClickKakaoShareButton } = useLinkShareBottomSheet({ shareUrl }); + const { closeBottomSheet } = useBottomSheet(); + + return ( + +
+ Share +

+ 투표를 공유하고 다양한 의견을 받아보세요. +

+
+ + +
+
+
+ ); +} diff --git a/src/components/common/PollCreatedShareBottomSheet/index.ts b/src/components/common/PollCreatedShareBottomSheet/index.ts new file mode 100644 index 00000000..e86e72c8 --- /dev/null +++ b/src/components/common/PollCreatedShareBottomSheet/index.ts @@ -0,0 +1 @@ +export { default } from './PollCreatedShareBottomSheet'; diff --git a/src/components/poll/regist/PollRegistButton/PollRegistButton.tsx b/src/components/poll/regist/PollRegistButton/PollRegistButton.tsx index 8e732d3f..9232b3b4 100644 --- a/src/components/poll/regist/PollRegistButton/PollRegistButton.tsx +++ b/src/components/poll/regist/PollRegistButton/PollRegistButton.tsx @@ -3,13 +3,16 @@ import usePollForm from '../../Provider/hooks'; import useGetMyInfo from '@/api/useGetMyInfo'; import usePostRegistVote from '@/api/usePostRegistVote'; import useUpdateOnboarding from '@/api/useUpdateOnboarding'; +import { useBottomSheet } from '@/components/common/BottomSheet/hooks'; import { Button } from '@/components/common/Button/Button'; import Loading from '@/components/common/Loading'; +import PollCreatedShareBottomSheet from '@/components/common/PollCreatedShareBottomSheet'; export default function PollRegistButton() { const navigate = useNavigate(); const { isValid, data: pollData } = usePollForm(); const { data: myInfo } = useGetMyInfo(); + const { openBottomSheet } = useBottomSheet(); const { mutate: updateOnboarding } = useUpdateOnboarding(); const { mutate: registVote, isPending: isRegistVotePending } = usePostRegistVote({ @@ -19,7 +22,9 @@ export default function PollRegistButton() { onboardingStep: { ...myInfo.onboardingStep, FIRST_VOTE: false }, }); } + const shareUrl = `${window.location.origin}/posts/${data.postId}?shareUrl=${data.shareUrl}`; navigate(`/posts/${data.postId}`); + openBottomSheet(); }, });