From cf06067eb6e83fd0cba0f1314333c5cf7ba9cbe6 Mon Sep 17 00:00:00 2001
From: qkdflrgs <qkdflrgs@gmail.com>
Date: Thu, 10 Aug 2023 20:15:24 +0900
Subject: [PATCH] =?UTF-8?q?refactor/#146:=20Alert=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/Alert/Alert.tsx | 32 +++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/FE/src/components/Alert/Alert.tsx b/FE/src/components/Alert/Alert.tsx
index febddcdd0..13277aa95 100644
--- a/FE/src/components/Alert/Alert.tsx
+++ b/FE/src/components/Alert/Alert.tsx
@@ -1,10 +1,24 @@
 import { styled } from "styled-components";
+import Button from "../common/Button/Button";
 
-export default function Alert() {
+type Props = {
+  onClickCancel(): void;
+  onClickActive(): void;
+};
+
+export default function Alert({ onClickCancel, onClickActive }: Props) {
   return (
     <Container>
-      <AlertContent></AlertContent>
-      <ButtonTap></ButtonTap>
+      <AlertContent>정말 삭제하시겠습니까?</AlertContent>
+      <ButtonTap>
+        <Button
+          type={"outline"}
+          label={"취소"}
+          width={"176px"}
+          onClick={onClickCancel}
+        />
+        <Button label={"삭제"} width={"176px"} onClick={onClickActive} />
+      </ButtonTap>
     </Container>
   );
 }
@@ -12,11 +26,21 @@ export default function Alert() {
 const Container = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   padding: 32px;
   width: 424px;
   height: 180px;
+  background-color: ${({ theme }) => theme.colorSystem.neutral.surface.strong};
+  border: ${({ theme }) =>
+    `${theme.border.default} ${theme.colorSystem.neutral.border.default}`};
+  border-radius: ${({ theme }) => theme.radius.large};
+  box-shadow: ${({ theme }) => theme.dropShadow.lightMode};
 `;
 
 const AlertContent = styled.p``;
 
-const ButtonTap = styled.div``;
+const ButtonTap = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+`;