액션 시트 API 연동 및 useActionSheet 구현

[Jinho1011]

What is this PR? 🔍

• iOS의 action sheet와 유사한 기능을 선언적으로 사용할 수 있는 useActionSheet를 구현했습니다.
• 토픽과 댓글의 미트볼을 클릭했을 때 신고, 숨기기, 삭제 등의 액션을 취할 수 있도록 API를 연동했습니다.

🛠️ Issue

• Closes B 사이드 토픽 결과 화면 #172

Changes 📝

    <Modal>
          {isDeleteModal ? (
            <Col
              style={{ width: '100%' }}
              padding={'16px 0px 0px 0px'}
              gap={0}
              justifyContent="center"
              alignItems="center"
            >
              <Text style={{ paddingBottom: 8 }} size={15} weight={400} color={colors.black_60}>
                현재 프로필 사진을 삭제합니다.
              </Text>
              <Text
                onClick={handleDeleteCurrentProfileImg}
                style={{ width: '100%', padding: '22px 0px' }}
                size={18}
                weight={500}
                color={colors.purple2}
              >
                삭제하기
              </Text>
              <ModalDivider />
              <Text
                onClick={() => {
                  setIsDeleteModal(false);
                  toggleModal();
                }}
                style={{ width: '100%', padding: '22px 0px' }}
                size={18}
                weight={500}
                color={colors.black_40}
              >
                취소
              </Text>
            </Col>
          ) : (
            <Col padding={'36px 24px'} gap={20}>
              <ActionModalButton
                handleClick={handleSelectFromAlbum}
                Icon={() => <AlbumIcon />}
                label={'앨범에서 가져오기'}
              />
              <ActionModalButton
                handleClick={handleRemoveCurrentImage}
                Icon={() => <TrashIcon />}
                label={'현재 사진 삭제하기'}
              />
            </Col>
          )}
        </Modal>

이렇게 모달의 아이템과 그에 대한 액션, 정말 삭제하냐고 물어보는 confirm등의 흐름을 useActionSheet를 사용하면 아래와 같이 간단하게 구현할 수 있습니다.

 const { Modal: ImageActionSheet, toggleModal } = useActionSheet({
    actions: [
      {
        icon: <AlbumIcon />,
        label: '앨범에서 가져오기',
        onClick: handleSelectFromAlbum,
      },
      {
        icon: <TrashIcon />,
        label: '현재 사진 삭제하기',
        confirm: {
          description: '현재 프로필 사진을 삭제합니다.',
          label: '삭제하기',
          onConfirm: handleDeleteCurrentProfileImg,
        },
      },
    ],
  });

To Reviewers 📢

• 이 부분 좀 같이 봐주세요 / 혹은 하고 싶은 말

[netlify]

✅ Deploy Preview for offonoff-ab ready!

Name	Link
🔨 Latest commit	2df9a2e
🔍 Latest deploy log	https://app.netlify.com/sites/offonoff-ab/deploys/65d8399313eea000085e49cc
😎 Deploy Preview	https://deploy-preview-231--offonoff-ab.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[chaeyoung103]

good이네요 편리하게 사용하겠어요