Merge pull request #395 from depromeet/main

main -> develop

apps/web/src/assets/svgs/common/index.ts

@@ -43,3 +43,4 @@ export { default as ic_info_transparent } from "./ic_info_transparent.svg?react"
 export { default as ic_apple_logo } from "./ic_apple_logo.svg?react";
 export { default as ic_twoMan_blue } from "./ic_twoMan_blue.svg?react";
 export { default as ic_minus } from "./ic_minus.svg?react";
+export { default as ic_letter } from "./ic_letter.svg?react";

apps/web/src/component/common/announcement/Announcement.tsx

@@ -0,0 +1,48 @@
+import { css } from "@emotion/react";
+
+import { ButtonProvider } from "@/component/common/button";
+import { Icon } from "@/component/common/Icon";
+import { Typography } from "@/component/common/typography";
+
+type AnnouncementProps = { title: string; content: React.ReactNode; onConfirm: () => void };
+
+export function Announcement({ title, content, onConfirm }: AnnouncementProps) {
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2rem;
+        overflow: hidden;
+        height: 100%;
+      `}
+    >
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 1.6rem;
+        `}
+      >
+        <Icon icon={"ic_letter"} size={4.8} />
+        <Typography variant={"title18Bold"} color={"gray900"}>
+          {title}
+        </Typography>
+      </div>
+      <div
+        css={css`
+          overflow-y: auto;
+          ::-webkit-scrollbar {
+            display: block;
+          }
+        `}
+      >
+        {content}
+      </div>
+
+      <ButtonProvider.Primary onClick={onConfirm}>확인</ButtonProvider.Primary>
+    </div>
+  );
+}