refactor/BibimMandu-IssueTacker#215: Alert 컴포넌트 리팩토링

qkdflrgs · Aug 18, 2023 · f675724 · f675724
1 parent 71cb2d6
commit f675724
Showing 1 changed file with 35 additions and 17 deletions.
diff --git a/FE/src/components/Alert/Alert.tsx b/FE/src/components/Alert/Alert.tsx
@@ -17,25 +17,40 @@ export default function Alert({
   onClickRightButton,
 }: Props) {
   return (
-    <Container>
-      <AlertContent>{content}</AlertContent>
-      <ButtonTap>
-        <Button
-          type={"outline"}
-          label={leftButtonLabel}
-          width={"176px"}
-          onClick={onClickLeftButton}
-        />
-        <Button
-          label={rightButtonLabel}
-          width={"176px"}
-          onClick={onClickRightButton}
-        />
-      </ButtonTap>
-    </Container>
+    <Dim>
+      <Container>
+        <AlertContent>{content}</AlertContent>
+        <ButtonTap>
+          <Button
+            type={"outline"}
+            label={leftButtonLabel}
+            width={"176px"}
+            onClick={onClickLeftButton}
+          />
+          <Button
+            label={rightButtonLabel}
+            width={"176px"}
+            onClick={onClickRightButton}
+          />
+        </ButtonTap>
+      </Container>
+    </Dim>
   );
 }
 
+const Dim = styled.div`
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background-color: rgba(16, 20, 26, 0.4);
+`;
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -50,7 +65,10 @@ const Container = styled.div`
   box-shadow: ${({ theme }) => theme.dropShadow.lightMode};
 `;
 
-const AlertContent = styled.p``;
+const AlertContent = styled.p`
+  font: ${({ theme }) => theme.font.displayMedium16};
+  color: ${({ theme }) => theme.colorSystem.neutral.text.default};
+`;
 
 const ButtonTap = styled.div`
   width: 100%;