💄 design(#170): 편지 전달 완료 페이지 float 애니메이션 추가

Author: yyypearl

src/app/send/complete/page.tsx

@@ -6,6 +6,7 @@ import OauthButton from '@/components/signup/OauthButton';
 import { OAUTH } from '@/constants/oauth';
 import { SEND_COMPLETE_SUBTEXT } from '@/constants/send/message';
 import { sendLetterState } from '@/recoil/letterStore';
+import { float, letterFloat } from '@/styles/animation';
 import { theme } from '@/styles/theme';
 import { OAuthType } from '@/types/login';
 import Image from 'next/image';
@@ -171,6 +172,7 @@ const ImageWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  animation: ${letterFloat} 2s ease-in-out infinite;
 
   @media (max-height: 680px) {
     width: 400px;

src/styles/animation.ts

@@ -22,4 +22,16 @@ export const float = keyframes`
   100% {
     transform: translate(-50%, 0);
   }
+`;
+
+export const letterFloat = keyframes`
+   0% {
+      transform: translate(-50%, -48%);
+    }
+    50% {
+      transform: translate(-50%, -52%);
+    }
+    100% {
+      transform: translate(-50%, -48%);
+    }
 `;