From d1bc4dbc0fe2ed6eb89e848fac2d5dc07e86c714 Mon Sep 17 00:00:00 2001
From: SuY3450 <suyeon030609@gmail.com>
Date: Mon, 17 Feb 2025 15:26:39 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/users/login.css      | 18 +++++++++++++++++-
 static/users/signup.css     | 16 +++++++++++++++-
 templates/users/login.html  |  4 ++--
 templates/users/signup.html |  2 +-
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/static/users/login.css b/static/users/login.css
index 80c4419..938cc20 100644
--- a/static/users/login.css
+++ b/static/users/login.css
@@ -29,11 +29,27 @@
     text-align: center;
 }
 
-.login_title_psy p {
+.login_typing_text_ksy {
     font-family: var(--main_font);
     color: var(--title_color);
     font-size: 14px;
     font-weight: bold;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    border-right: 2px solid var(--title_color); /* 커서 효과 */
+    animation: typing_psy 3s steps(22) forwards, cursor_remove_psy 0s forwards;
+    animation-delay: 0s, 3s; 
+}
+
+@keyframes typing_psy {
+    from { width: 0; }
+    to { width: 100%; }
+}
+
+@keyframes cursor_remove_psy {
+    from { border-right: 2px solid var(--title_color); }
+    to { border-right: none; }
 }
 
 .login_title_psy h1 {
diff --git a/static/users/signup.css b/static/users/signup.css
index 3ff1de1..334971d 100644
--- a/static/users/signup.css
+++ b/static/users/signup.css
@@ -28,13 +28,27 @@
     text-align: center;
 }
 
-.signup_title_psy p {
+.signup_typing_text_ksy {
     font-family: var(--main_font);
     color: var(--title_color);
     font-size: 14px;
     font-weight: bold;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    border-right: 2px solid var(--title_color); /* 커서 효과 */
+    animation: typing_psy 3s steps(22) forwards, cursor_remove_psy 0s forwards;
+    animation-delay: 0s, 3s; 
+}
+@keyframes typing_psy {
+    from { width: 0; }
+    to { width: 100%; }
 }
 
+@keyframes cursor_remove_psy {
+    from { border-right: 2px solid var(--title_color); }
+    to { border-right: none; }
+}
 .signup_title_psy h1 {
     font-size: 32px;
     font-family: var(--logo_font);
diff --git a/templates/users/login.html b/templates/users/login.html
index 9141782..a3adbb9 100644
--- a/templates/users/login.html
+++ b/templates/users/login.html
@@ -17,8 +17,8 @@
     <div class="login_wrapper_psy">
         
         <div class="login_title_psy">
-            <p>인생네컷으로 만드는 나만의 일기장</p>
-            <h1>Pictory</h1>
+            <p class="login_typing_text_ksy">인생네컷으로 만드는 나만의 일기장</p>
+            <h1 class="login_title_pictory_ksy">Pictory</h1>
         </div>
 
         <div class="login_container_psy">
diff --git a/templates/users/signup.html b/templates/users/signup.html
index 2b6fda6..2406a11 100644
--- a/templates/users/signup.html
+++ b/templates/users/signup.html
@@ -19,7 +19,7 @@
         <div class="signup_wrapper_psy">
 
             <div class="signup_title_psy">
-                <p>인생네컷으로 만드는 나만의 일기장</p>
+                <p class="signup_typing_text_ksy">인생네컷으로 만드는 나만의 일기장</p>
                 <h1>Pictory</h1>
             </div>