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 (
+    <ModalBackdrop>
+      <ModalContainer>
+        <ModalHeader>공지 사항</ModalHeader>
+        <ModalContent>
+          현재 서비스는 자체 개발한 스크래핑 모듈을 통해 수집된 실제 사용자 데이터를 바탕으로 생성된 프로토타입입니다.
+          현재 백곰은 MVP(최소 기능 제품) 형태로 제공되고 있으며, 향후 앱 서비스로의 제공을 목표로 지속적으로 개선하고 있습니다.
+        </ModalContent>
+        <CloseButton onClick={onClose}>닫기</CloseButton>
+      </ModalContainer>
+    </ModalBackdrop>
+  );
+}
+
+export default Popup;
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 1e7a4b4..f1517a9 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -18,7 +18,7 @@ import { LocalStorage } from '@/hooks/useUtil';
 import { getCertificate } from '../_lib/getCertificate';
 import { Colors, fontGenerator } from '@/styles';
 import { VaccineData } from '@/types/globalType';
-
+import Popup from "@/app/_component/atom/Popup";
 export const Container = styled.main`
   min-height: 100vh;
   width: 100%;
@@ -235,17 +235,24 @@ export default function Home() {
   if (isLoading) return;
   if (error) return <div>Error: {error}</div>;
 
+  const [showModal, setShowModal] = useState(true);
+
+  const handleModalClose = () => {
+    setShowModal(false);
+  };
+
   return (
     <>
+    {showModal && <Popup onClose={handleModalClose} />}
       <Container>
         <MainHeader title="홈" />
         <GreetingContainer>
           <UserName>{userName}님, </UserName>
           <GreetingMessage>반가워요!</GreetingMessage>
         </GreetingContainer>
-        <AlertContainer>
-        현재 서비스는 자체 개발한 스크래핑 모듈을 통해 수집된 실제 사용자 데이터를 바탕으로 생성된 프로토타입입니다. 현재 백곰은 MVP(최소 기능 제품) 형태로 제공되고 있으며, 향후 앱 서비스로의 제공을 목표로 지속적으로 개선하고 있습니다.
-        </AlertContainer>
+        <ImageContainer key={imageKey}>
+          <Image src={currentImage} alt="추천하는 이미지" />
+        </ImageContainer>
         <div className="body_wrap">
           <div className="content_head">
             <MenuTitle