From 7557d76785a1a0ff6ae783feeb7e485c8ca84af4 Mon Sep 17 00:00:00 2001
From: osohyun0224 <53892427+osohyun0224@users.noreply.github.com>
Date: Mon, 19 Aug 2024 22:54:55 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat=20::=20=EB=A9=94=EC=9D=B8=20?=
=?UTF-8?q?=ED=99=88=EC=97=90=20=EC=95=88=EB=82=B4=20=ED=8C=9D=EC=97=85?=
=?UTF-8?q?=EC=B0=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/_component/atom/Popup/index.tsx | 62 +++++++++++++++++++++++++
src/pages/home/index.tsx | 15 ++++--
2 files changed, 73 insertions(+), 4 deletions(-)
create mode 100644 src/app/_component/atom/Popup/index.tsx
diff --git a/src/app/_component/atom/Popup/index.tsx b/src/app/_component/atom/Popup/index.tsx
new file mode 100644
index 0000000..963995f
--- /dev/null
+++ b/src/app/_component/atom/Popup/index.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const ModalBackdrop = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 999;
+`;
+
+const ModalContainer = styled.div`
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ width: 90%;
+ max-width: 500px;
+ text-align: center;
+`;
+
+const ModalHeader = styled.div`
+ margin-bottom: 20px;
+ font-size: 18px;
+ font-weight: bold;
+`;
+
+const ModalContent = styled.div`
+ margin-bottom: 20px;
+`;
+
+const CloseButton = styled.button`
+ padding: 10px 20px;
+ background-color: #f00;
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ font-weight: bold;
+ cursor: pointer;
+`;
+
+function Popup({ onClose }) {
+ return (
+