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 (
+