투표 제작 시 투표 상세 페이지에서 게시글 공유 바텀시트 활성화 작업을 구현한다.

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 ? (
+      <div className="flex flex-col items-center text-center px-6">
+        <h1 className="text-heading-1 mb-5">{title}</h1>
+      </div>
+    ) : (
+      <h1 className="pl-5 text-headline-1 pb-5 border-gray-400">{title}</h1>
+    );
+
   return (
     <motion.div
       initial={{ y: '100%', opacity: 1 }}
@@ -23,7 +38,8 @@ export default function BottomSheet({
       transition={{ duration: 0.4, ease: 'easeInOut' }}
       className="pt-[24px] pb-[36px] rounded-t-2xl relative w-full max-w-[480px] bg-gray-100"
     >
-      <h1 className="pl-5 text-headline-1 pb-5 border-gray-400">{title}</h1>
+      {renderHeader()}
+
       {hasCloseButton && (
         <button
           className="absolute top-[24px] right-[24px]"
@@ -32,7 +48,7 @@ export default function BottomSheet({
           <Icon name="Cross" size="large" />
         </button>
       )}
-      <hr className="border-gray-200" />
+
       <div>{children}</div>
     </motion.div>
   );

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 (
+    <BottomSheet title="투표가 만들어졌어요!" align="centered" hasCloseButton>
+      <div className="flex flex-col items-center text-center px-6">
+        <img src={shareImage} alt="Share" className="w-[90px] h-[90px] mb-4" />
+        <p className="text-headline-1 text-gray-500 mb-7">
+          투표를 공유하고 다양한 의견을 받아보세요.
+        </p>
+        <div className="flex flex-col w-full">
+          <Button
+            type="button"
+            variant="solid"
+            size="large"
+            buttonType="primary"
+            onClick={handleClickKakaoShareButton}
+            className="flex items-center justify-center"
+          >
+            카카오로 공유하기
+          </Button>
+          <button
+            onClick={closeBottomSheet}
+            className="text-body-1 text-gray-700 underline underline-offset-4 text-center pt-3"
+          >
+            나중에 하기
+          </button>
+        </div>
+      </div>
+    </BottomSheet>
+  );
+}

src/components/common/PollCreatedShareBottomSheet/index.ts

@@ -0,0 +1 @@
+export { default } from './PollCreatedShareBottomSheet';

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(<PollCreatedShareBottomSheet shareUrl={shareUrl} />);
       },
     });