design: 로그인 페이지 에셋 변경 및 반영

Author: AAminha

src/assets/images/field-1.png

@@ -0,0 +1,46 @@
+import { Link } from 'react-router';
+
+import FieldImg from '@/assets/images/field-1.png';
+import BlurImg from '@/assets/images/landing-blur.png';
+import EnvelopeImg from '@/assets/images/postoffice-letter.png';
+import PostofficeImg from '@/assets/images/postoffice.png';
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+
+const Background = () => {
+  return (
+    <>
+      <div className="fixed -bottom-8 z-0 flex justify-center overflow-hidden">
+        <div className="relative flex h-[440px] min-w-[759.5px] items-end justify-center">
+          <Link to="/landing">
+            <div className="animate-login-move-up-down absolute bottom-[313px] left-1/2 z-1 -translate-x-1/2">
+              <p className="text-gray-60 body-r -rotate-[5.28deg] pr-1 text-center">
+                36.5 설명 보기
+              </p>
+              <img
+                src={EnvelopeImg}
+                alt="편지 이미지"
+                className="h-[90px] w-full object-contain object-center"
+              />
+            </div>
+          </Link>
+          <img
+            src={PostofficeImg}
+            alt="우체국 이미지"
+            className="absolute bottom-[93px] left-1/2 z-1 h-[184.5px] w-full -translate-x-1/2 object-contain object-[calc(50%-78px)]"
+          />
+          <img
+            src={FieldImg}
+            alt="언덕 이미지"
+            className="z-0 h-[205px] w-full object-cover object-[calc(50%-26px)]"
+          />
+        </div>
+      </div>
+      <BackgroundImageWrapper
+        className="fixed bottom-[-1px] left-1/2 z-0 h-50 w-screen -translate-x-1/2 object-fill"
+        imageUrl={BlurImg}
+      />
+    </>
+  );
+};
+
+export default Background;

src/assets/images/postoffice-letter.png

@@ -1,10 +1,11 @@
 import { GoogleIcon, KakaoIcon, NaverIcon, StampIcon } from '@/assets/icons';
-import MainImg from '@/assets/images/main-item-1.png';
+
+import Background from './components/Background';
 
 const LoginPage = () => {
   return (
     <>
-      <main className="flex grow flex-col items-center justify-between pt-[12%]">
+      <main className="mt-10 flex grow flex-col items-center justify-between">
         <section className="relative mt-10 text-center">
           <StampIcon className="absolute -top-2 -right-0.5 -translate-y-1/2 translate-x-1/2" />
           <h2 className="text-xl leading-[24px] font-medium tracking-[-1px]">마음이 맞닿는 온도</h2>
@@ -15,13 +16,7 @@ const LoginPage = () => {
             마음의 위안을 얻어보세요.
           </p>
         </section>
-        <div className="absolute bottom-0 z-[-20] flex w-screen justify-center overflow-hidden">
-          <img
-            src={MainImg}
-            alt="홈 이미지 1"
-            className="ml-[-65px] h-[397px] max-w-[759.5px] object-center not-visited:object-cover"
-          />
-        </div>
+        <Background />
         <section className="relative flex gap-4 pb-[5%]">
           <button type="button" className="rounded-full bg-[#03C75A] p-3.5">
             <NaverIcon />
@@ -34,7 +29,6 @@ const LoginPage = () => {
           </button>
         </section>
       </main>
-      <div className="absolute bottom-[-1px] left-1/2 z-[-10] h-50 w-screen -translate-x-1/2 bg-[url('/src/assets/images/landing-blur.png')] object-fill" />
     </>
   );
 };

src/assets/images/postoffice.png

@@ -5,6 +5,7 @@
   --animate-show-text: showing 0.5s ease-in-out 6s forwards;
   --animate-rotate-show: rotate-show 1s ease-in-out forwards;
   --animate-blink: showing 0.3s forwards;
+  --animate-login-move-up-down: move-up-down 3s ease-in-out infinite;
 
   @keyframes down {
     0% {
@@ -53,4 +54,14 @@
       transform: perspective(800px) rotateY(0deg);
     }
   }
+
+  @keyframes move-up-down {
+    0%,
+    100% {
+      transform: translateY(10px);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
 }

src/pages/Login/components/Background.tsx

@@ -1,3 +1,32 @@
+@font-face {
+  font-family: 'KyoboHandwriting2020A';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/KyoboHandwriting2020A.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'iceHimchan-Rg';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/iceHimchan-Rg.woff2')
+    format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Gyeonggi_Batang_Regular';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/Batang_Regular.woff')
+    format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'HancomMalangMalang';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/HancomMalangMalang-Bold.woff2')
+    format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+
 @layer base {
   /* 폰트들 */
   .pretendard {
@@ -12,25 +41,4 @@
   .batang {
     font-family: 'Gyeonggi_Batang_Regular';
   }
-  @font-face {
-    font-family: 'KyoboHandwriting2020A';
-    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/KyoboHandwriting2020A.woff')
-      format('woff');
-    font-weight: normal;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'iceHimchan-Rg';
-    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/iceHimchan-Rg.woff2')
-      format('woff2');
-    font-weight: normal;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Gyeonggi_Batang_Regular';
-    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/Batang_Regular.woff')
-      format('woff');
-    font-weight: 400;
-    font-style: normal;
-  }
 }

src/pages/Login/index.tsx

@@ -1,14 +1,6 @@
 /* https://tailwindcss.com/docs/theme */
 /* 테마 변수 정의 */
 
-@font-face {
-  font-family: 'HancomMalangMalang';
-  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/HancomMalangMalang-Bold.woff2')
-    format('woff2');
-  font-weight: 700;
-  font-style: normal;
-}
-
 @theme {
   --color-black: #1c1b1a;
   --color-white: #fff;