feat(event): Add event animation

src/features/event/Container.tsx

@@ -11,16 +11,24 @@ const EventContainer: FunctionComponent = () => {
   return (
     <div className="event-container">
       <div className="wrap">
-        <div className="content">
+        <div className={`content ${open ? 'open' : ''}`}>
           <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
+          className={`gift ${open ? 'open' : ''}`}
+          onClick={handleImageClick}
+        >
+          <img
+            width={open ? '250' : '170'}
+            height={open ? '250' : '170'}
+            src={open ? giftOpenLogo : giftLogo}
+            alt="gift"
+          />
         </div>
-        <div className="description">
+        <div className={`description`}>
           Press the gift box and check the winning results
         </div>
       </div>

src/features/event/event.scss

@@ -12,6 +12,24 @@
 		transform: rotate(0deg);
 	}
 }
+@keyframes open-top {
+	0% {
+		padding-top: 7rem;
+		padding-bottom: 0rem;
+	}
+	100% {
+		padding-top: 4rem;
+		padding-bottom: 2rem;
+	}
+}
+@keyframes open-bottom {
+	0% {
+		padding-bottom: 0rem;
+	}
+	100% {
+		padding-bottom: 4rem;
+	}
+}
 
 .event-container {
 	height: calc(100vh - 77px);
@@ -23,11 +41,15 @@
 		align-items: center;
 
 		.content {
-			padding-top: 183px;
+			padding-top: 7rem;
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
 			align-items: center;
+
+			&.open {
+				animation: open-top 0.5s both;
+			}
 
 			.label {
 				color: #ffffff;
@@ -50,6 +72,11 @@
 		}
 		.gift {
 			cursor: pointer;
+			height: 250px;
+
+			&.open {
+				animation: open-bottom 0.5s both;
+			}
 
 			:hover {
 				animation: shake 1s infinite ease-in;

src/features/home/components/Profile.tsx

@@ -3,9 +3,10 @@ import { FunctionComponent } from 'react';
 
 import { userAtom } from '../../login/atom';
 
+import profileImage from '/png/yulim.png';
+
 const Profile: FunctionComponent = () => {
-  const [{ email, profileImage, department, name, position }] =
-    useAtom(userAtom);
+  const [{ email, department, name, position }] = useAtom(userAtom);
 
   return (
     <section className="profile-box">

src/features/login/constants.ts

@@ -1,8 +1,7 @@
 import { DummyUser } from './type';
 
 export const DUMMY_USER: DummyUser = {
-  name: 'Sangchul',
-  profileImage: 'https://avatars.githubusercontent.com/u/23524849?v=4',
+  name: 'Yulim',
   email: '[email protected]',
   companyNo: 'JS1234',
   password: 'just',

src/features/login/type.ts

@@ -1,6 +1,5 @@
 export type User = {
   name?: string;
-  profileImage?: string;
   email?: string;
   companyNo?: string;
   department?: string;