feat: gallery 명함 게시 컴포넌트 추가, API 연결만 하면 됨.

Author: sumi-0011

src/features/gallery/PublishMyCard.tsx

@@ -0,0 +1,93 @@
+import { css, type Theme } from '@emotion/react';
+
+import BottomSheet from '~/components/bottomSheet/BottomSheet';
+import Button from '~/components/button/Button';
+import { XCircleButton } from '~/components/button/CircleButton';
+import BottomSheetHandleIcon from '~/components/icons/BottomSheetHandleIcon';
+import Card from '~/features/gallery/Card';
+import { type JobType } from '~/features/gallery/PublishMyCard/JobSelectModal';
+import { fixedBottomCss } from '~/features/survey/styles';
+import { DUMMY_GALLERY } from '~/hooks/api/gallery/useGetGalleryList';
+import useScrollLock from '~/hooks/common/useScrollLock';
+import { BODY_1, DETAIL, HEAD_1 } from '~/styles/typo';
+
+interface Props {
+  isShowing: boolean;
+  onClose: () => void;
+
+  job: JobType;
+  onSubmit: () => void;
+}
+
+function CardPublishBottomSheet(props: Props) {
+  useScrollLock({ lock: props.isShowing });
+
+  return (
+    <BottomSheet isShowing={props.isShowing} onClickOutside={props.onClose}>
+      <BottomSheetHandleIcon />
+      <div css={innerCss}>
+        <hgroup css={headingCss}>
+          <h1>내 커리어 명함 게시하기</h1>
+          <p>명함 갤러리에 게시 후 서로의 명함을 저장해보세요</p>
+        </hgroup>
+        <section>
+          <div css={tagCss}>미리보기</div>
+          <Card gallery={DUMMY_GALLERY} />
+        </section>
+        <article css={[fixedBottomCss, bottomCss]}>
+          <XCircleButton onClick={props.onClose} />
+          <Button css={submitButtonCss} onClick={props.onSubmit}>
+            게시하기
+          </Button>
+        </article>
+      </div>
+    </BottomSheet>
+  );
+}
+
+export default CardPublishBottomSheet;
+
+const innerCss = css`
+  overflow-y: auto;
+  min-height: fit-content;
+  max-height: calc(100vh - 12px);
+  padding: 47px 20px 94px;
+`;
+
+const headingCss = (theme: Theme) => css`
+  margin-bottom: 35px;
+  text-align: center;
+
+  h1 {
+    ${HEAD_1};
+    color: ${theme.colors.black};
+  }
+
+  p {
+    ${BODY_1};
+    margin-top: 4px;
+    color: ${theme.colors.gray_500};
+  }
+`;
+
+const tagCss = (theme: Theme) => css`
+  ${DETAIL};
+  width: fit-content;
+  margin-bottom: 18px;
+  margin-inline: auto;
+  padding: 4px 10px;
+
+  color: ${theme.colors.gray_500};
+
+  background-color: ${theme.colors.gray_50};
+  border-radius: 8px;
+`;
+
+const bottomCss = css`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const submitButtonCss = css`
+  width: 50%;
+`;