feat(event): Add event layout

src/features/event/Container.tsx

@@ -1,11 +1,31 @@
 import { FunctionComponent } from 'react';
 
 import useEventContainer from './hooks/useEventContainer';
+
+import giftLogo from '/svg/gift1.svg';
+import giftOpenLogo from '/svg/gift2.svg';
 import './event.scss';
 
 const EventContainer: FunctionComponent = () => {
-  useEventContainer();
-  return <div className="event-container"></div>;
+  const { open, handleImageClick } = useEventContainer();
+  return (
+    <div className="event-container">
+      <div className="wrap">
+        <div className="content">
+          <span className="label">JUNCTION Event</span>
+          <div className="title">
+            Who is the lucky one who got the winning gift?
+          </div>
+        </div>
+        <div className="gift" onClick={handleImageClick}>
+          <img src={open ? giftOpenLogo : giftLogo} alt="gift" />
+        </div>
+        <div className="description">
+          Press the gift box and check the winning results
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default EventContainer;

src/features/event/event.scss

@@ -1,3 +1,53 @@
 .event-container {
 	height: calc(100vh - 77px);
+
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		.content {
+			padding-top: 183px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+
+			.label {
+				color: #ffffff;
+				background-color: #000000;
+				padding: 3px 8px;
+				font-size: 14px;
+				font-weight: 500;
+				line-height: 24px;
+				letter-spacing: 0em;
+				text-align: center;
+			}
+			.title {
+				padding: 8px 0px 24px 0px;
+				font-size: 24px;
+				font-weight: 700;
+				line-height: 36px;
+				letter-spacing: 0em;
+				text-align: center;
+			}
+		}
+		.gift {
+			cursor: pointer;
+
+			:hover {
+				// TODO: 좌우 애니메이션
+			}
+		}
+		.description {
+			padding-top: 14px;
+			color: #9797AE;
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 24px;
+			letter-spacing: 0em;
+			text-align: center;
+		}
+	}
 }

src/features/event/hooks/useEventContainer.tsx

@@ -1,14 +1,24 @@
 import { useAtom } from 'jotai';
-import { useLayoutEffect } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 import { titleAtom } from '../../shared/layout/atom';
 
 const useEventContainer = () => {
+  const [open, setOpen] = useState(false);
   const [, setTitle] = useAtom(titleAtom);
 
   useLayoutEffect(() => {
     setTitle({ back: true, title: 'Event' });
   }, []);
+
+  const handleImageClick = () => {
+    setOpen(true);
+  };
+
+  return {
+    open,
+    handleImageClick,
+  };
 };
 
 export default useEventContainer;