From 6ededfdd82bd2fdc5d15472d442fac35f0ab9bcb Mon Sep 17 00:00:00 2001
From: dbswl701 <dbswl701@ajou.ac.kr>
Date: Mon, 10 Feb 2025 19:20:17 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=95=8C=EB=A6=BC=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Alarm.tsx  | 21 +++++++++++++++++++++
 src/pages/Login/Login.tsx |  2 ++
 2 files changed, 23 insertions(+)
 create mode 100644 src/components/Alarm.tsx

diff --git a/src/components/Alarm.tsx b/src/components/Alarm.tsx
new file mode 100644
index 0000000..5fa83fb
--- /dev/null
+++ b/src/components/Alarm.tsx
@@ -0,0 +1,21 @@
+export default function Alarm() {
+  const { img, name, message } = {
+    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAIVBMVEXY2Njz8/Pq6urv7+/h4eHb29vo6Oje3t7j4+Pt7e3p6ekmc3lwAAADMElEQVR4nO2bC3KDMAxEMeab+x+4JZQBEkhBlq2NZt8JvGOtPkZUFSGEEEIIIYQQQgghhBBCCCEEnXbo6hjDLzHW3dBan0dEO9ThjfrrxDQHKv60NNZnu0ETz2Q8w+xbpPQfZTyl9NZnvEB7GlS7AIP3SnNFxgR4fHVXdYTQWZ/1A+14XUcII2x4tf+6fE8EVXJXB6qS+zpAldzyx8Jofep3buSrLXC563L9eAWsnrRSHSFg2eRSX3JMbX32Lb1cRwhIHaQg865E69OviJ0+g+P3pAsBupLEC8G5koSUNQOSuBJqyAJGLRnShQzWGp4kRxZKbKXrCMFaw4SCRTBMomARDJMIB5E9CGOJgtcx3J7Yn8wgdCluhGjogMi/FEIhmXBjdjdC3BRENy2Km6bRTRvvZrDyM+q6eXxw8xzk5oHOz5Opm0dsP58V3Hzo8fPpzc3HUD+fp90sDPhZ4fCzVONnzcnN4pmfVUA/y5mVm3XZys8Cs5+V8srNkv+Ek98uJpz8CDPh5NekGRc/ixFCCCHky2mb4TGO8cLkHuM4PoYGsGfph1r0Ih/rAWc2Oexz74DRE59PHre0GE8pvcoiykxnF2O96Ln3nNFGSqMs4ymlfIT9/1Qio/ADS6vojVe6gilMZUXrnFKbKfeeqiWUed5OXti4QgHTZ3THltxv9fnDaiFveOVKukfkTMRJmxr3yaakiM23ZLJ8cR2ZlBjoyKKksD8W1H1ipENdiWQ/QwflrYJidfAd1b2bQn3JMYrdiknCWlFLXSo/VqSgZRNDg8wo2STzPHgFlZnRPLAmNILLNGMtKGQus5K+J73Am5X0PckL9MYlZCW1mJin3oXEFAzikIk0l8BcSOKVAF1I2pVA1JCFlFpiffY9ch0wuXdGnoFVvnPqIf6JCaJd3CJtHQH69z3Sbh4ssuSxZX3ud2Q6oKrhjKwmwllEahI4i0hNAjJSbZGNV9anPkKiA64cTkhKIlijNSNptwCTlixtPawPfcRDIARoyl2RzLtuhACWEVkhcSPE+szHUAgaFIIGhaBBIWhQCBoUggaFoEEhaFAIGhSCBoWgQSFoUAgap8f9Ac1KQOtCVp1TAAAAAElFTkSuQmCC',
+    name: '홍길동',
+    message: '친구 초대를 하였습니다.',
+  }
+
+  return (
+    <div className='flex gap-[16px] p-[16px] w-[300px] shadow-[0px_0px_41px_0px_rgba(0,0,0,0.34)]'>
+      <div className='w-[50px] h-[50px]'>
+        <img src={img} className='w-full' />
+      </div>
+      <div className='gap-[3px] flex flex-col justify-center'>
+        <p className='text-white text-base font-medium font-[Ginto]'>{name}</p>
+        <p className='text-[#b9bbbe] text-sm font-medium font-[Whitney Semibold]'>
+          {message}
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 0758d92..7573011 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -1,3 +1,4 @@
+import Alarm from '@components/Alarm'
 import LoginForm from './components/LoginForm'
 import { Link } from 'react-router-dom'
 
@@ -19,6 +20,7 @@ function Login() {
           가입하기
         </Link>
       </p>
+      <Alarm />
     </div>
   )
 }

From 9277a2a0c313195623293eb4af491827c6411f4d Mon Sep 17 00:00:00 2001
From: dbswl701 <dbswl701@ajou.ac.kr>
Date: Sun, 16 Feb 2025 19:00:04 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=95=8C=EB=A6=BC=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=98=A4=EB=A5=B8=EC=AA=BD=20?=
 =?UTF-8?q?=ED=95=98=EB=8B=A8=EC=97=90=20=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Alarm.tsx        | 21 ---------------------
 src/components/shared/Alarm.tsx | 29 +++++++++++++++++++++++++++++
 src/pages/Login/Login.tsx       |  2 --
 3 files changed, 29 insertions(+), 23 deletions(-)
 delete mode 100644 src/components/Alarm.tsx
 create mode 100644 src/components/shared/Alarm.tsx

diff --git a/src/components/Alarm.tsx b/src/components/Alarm.tsx
deleted file mode 100644
index 5fa83fb..0000000
--- a/src/components/Alarm.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-export default function Alarm() {
-  const { img, name, message } = {
-    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAIVBMVEXY2Njz8/Pq6urv7+/h4eHb29vo6Oje3t7j4+Pt7e3p6ekmc3lwAAADMElEQVR4nO2bC3KDMAxEMeab+x+4JZQBEkhBlq2NZt8JvGOtPkZUFSGEEEIIIYQQQgghhBBCCCEEnXbo6hjDLzHW3dBan0dEO9ThjfrrxDQHKv60NNZnu0ETz2Q8w+xbpPQfZTyl9NZnvEB7GlS7AIP3SnNFxgR4fHVXdYTQWZ/1A+14XUcII2x4tf+6fE8EVXJXB6qS+zpAldzyx8Jofep3buSrLXC563L9eAWsnrRSHSFg2eRSX3JMbX32Lb1cRwhIHaQg865E69OviJ0+g+P3pAsBupLEC8G5koSUNQOSuBJqyAJGLRnShQzWGp4kRxZKbKXrCMFaw4SCRTBMomARDJMIB5E9CGOJgtcx3J7Yn8wgdCluhGjogMi/FEIhmXBjdjdC3BRENy2Km6bRTRvvZrDyM+q6eXxw8xzk5oHOz5Opm0dsP58V3Hzo8fPpzc3HUD+fp90sDPhZ4fCzVONnzcnN4pmfVUA/y5mVm3XZys8Cs5+V8srNkv+Ek98uJpz8CDPh5NekGRc/ixFCCCHky2mb4TGO8cLkHuM4PoYGsGfph1r0Ih/rAWc2Oexz74DRE59PHre0GE8pvcoiykxnF2O96Ln3nNFGSqMs4ymlfIT9/1Qio/ADS6vojVe6gilMZUXrnFKbKfeeqiWUed5OXti4QgHTZ3THltxv9fnDaiFveOVKukfkTMRJmxr3yaakiM23ZLJ8cR2ZlBjoyKKksD8W1H1ipENdiWQ/QwflrYJidfAd1b2bQn3JMYrdiknCWlFLXSo/VqSgZRNDg8wo2STzPHgFlZnRPLAmNILLNGMtKGQus5K+J73Am5X0PckL9MYlZCW1mJin3oXEFAzikIk0l8BcSOKVAF1I2pVA1JCFlFpiffY9ch0wuXdGnoFVvnPqIf6JCaJd3CJtHQH69z3Sbh4ssuSxZX3ud2Q6oKrhjKwmwllEahI4i0hNAjJSbZGNV9anPkKiA64cTkhKIlijNSNptwCTlixtPawPfcRDIARoyl2RzLtuhACWEVkhcSPE+szHUAgaFIIGhaBBIWhQCBoUggaFoEEhaFAIGhSCBoWgQSFoUAgap8f9Ac1KQOtCVp1TAAAAAElFTkSuQmCC',
-    name: '홍길동',
-    message: '친구 초대를 하였습니다.',
-  }
-
-  return (
-    <div className='flex gap-[16px] p-[16px] w-[300px] shadow-[0px_0px_41px_0px_rgba(0,0,0,0.34)]'>
-      <div className='w-[50px] h-[50px]'>
-        <img src={img} className='w-full' />
-      </div>
-      <div className='gap-[3px] flex flex-col justify-center'>
-        <p className='text-white text-base font-medium font-[Ginto]'>{name}</p>
-        <p className='text-[#b9bbbe] text-sm font-medium font-[Whitney Semibold]'>
-          {message}
-        </p>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/shared/Alarm.tsx b/src/components/shared/Alarm.tsx
new file mode 100644
index 0000000..3c8108a
--- /dev/null
+++ b/src/components/shared/Alarm.tsx
@@ -0,0 +1,29 @@
+export default function Alarm({
+  img,
+  name,
+  channel,
+  category,
+  message,
+}: {
+  img: string
+  name: string
+  channel?: string
+  category?: string
+  message: string
+}) {
+  return (
+    <div className='fixed bottom-2 right-2 flex gap-[8px] p-[12px] w-[220px] bg-[#2f3136] rounded-sm shadow-[0px_0px_41px_0px_rgba(0,0,0,0.34)]'>
+      <div className='w-[30px] h-[30px]'>
+        <img src={img} className='w-full' />
+      </div>
+      <div className='gap-[2px] flex flex-col justify-center'>
+        <p className='text-white text-[10px] font-medium font-[Ginto]'>
+          {name} {channel && `(#${channel}, ${category})`}
+        </p>
+        <p className='text-[#b9bbbe] text-[8px] font-medium font-[Whitney Semibold]'>
+          {message}
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 7573011..0758d92 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -1,4 +1,3 @@
-import Alarm from '@components/Alarm'
 import LoginForm from './components/LoginForm'
 import { Link } from 'react-router-dom'
 
@@ -20,7 +19,6 @@ function Login() {
           가입하기
         </Link>
       </p>
-      <Alarm />
     </div>
   )
 }