🎨style: 버튼 및 유저 프로필 전환 효과 추가

🎨style: 버튼 및 유저 프로필 전환 효과 추가

Author: minimo-9

src/components/Card/Card.module.scss

@@ -10,11 +10,11 @@
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
   background: $white;
   gap: 16px;
-  transition: transform 0.2s ease;
+  transition: transform 0.2s ease-in-out;
   cursor: pointer;
 
   &:hover {
-    transform: scale(0.95);
+    transform: scale(0.95) translateZ(0);
   }
 
   &.card--empty {
@@ -117,13 +117,13 @@
 
 @keyframes click-pop {
   0% {
-    transform: scale(1);
+    transform: scale(1) translateZ(0);
   }
   50% {
-    transform: scale(1.03); // 살짝 커졌다가
+    transform: scale(1.03) translateZ(0); // 살짝 커졌다가
   }
   100% {
-    transform: scale(1); // 다시 원래대로
+    transform: scale(1) translateZ(0); // 다시 원래대로
   }
 }
 

src/components/UserProfileSelector/UserProfileSelector.module.scss

@@ -51,6 +51,20 @@
     width: 56px;
     border: 1px solid $gray-200;
     border-radius: 100px;
+    transition: transform 0.1s ease-in-out;
+
+    &:hover {
+      transform: scale(1.15) translateY(-6px) translateZ(0);
+    }
+
+    &:active {
+      transform: scale(1) translateY(0) translateZ(0);
+    }
+  }
+
+  &__image--selected {
+    transform: scale(1.2) translateY(-6px) translateZ(0);
+    box-shadow: 0 0 0 2px $gray-300;
   }
 
   @media (max-width: 767px) {

src/components/common/Button.module.scss

@@ -9,24 +9,31 @@
   background-color: $purple-600;
   @include font-18-bold;
   color: $white;
+  transition:
+    transform 0.2s ease-in-out,
+    background-color 0.2s ease-in-out;
 
   &:disabled {
     background-color: $gray-300;
     cursor: not-allowed;
+    filter: opacity(50%);
 
     &:hover,
     &:active,
     &:focus {
       background-color: $gray-300;
       border: $gray-300;
+      transform: none;
     }
   }
 
   &:hover {
+    transform: scale(1.05) translateZ(0);
     background-color: $purple-700;
   }
 
   &:active {
+    transform: scale(0.97) translateZ(0);
     background-color: $purple-800;
   }
 

src/pages/CreateRecipient/CreateRecipient.jsx

@@ -81,7 +81,7 @@ export default function CreateRecipient() {
       <div className={styles['create-page__input-section']}>
         <FormInput
           label="To."
-          placeholder="받는 사람 이름을 입력해 주세요"
+          placeholder="받는 사람 이름을 입력해 주세요. (최대 10자)"
           value={value}
           onChange={handleInputChange}
           onBlur={handleBlur}

src/pages/CreateRecipient/CreateRecipient.module.scss

@@ -65,8 +65,8 @@
       flex-shrink: 0;
       cursor: pointer;
       transition:
-        transform 0.3s ease,
-        box-shadow 0.3s ease;
+        transform 0.3s ease-in-out,
+        box-shadow 0.3s ease-in-out;
 
       &:hover {
         transform: scale(1.05);
@@ -124,7 +124,7 @@
         box-shadow 0.3s ease;
 
       &:hover {
-        transform: scale(1.05);
+        transform: scale(1.05) translateZ(0);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       }
 

src/pages/MessageForm/MessageForm.jsx

@@ -126,7 +126,7 @@ export default function MessageForm() {
         <div className={styles['message-form__input']}>
           <FormInput
             label="From."
-            placeholder="이름을 입력해 주세요 (10자 이내)"
+            placeholder="이름을 입력해 주세요. (최대 10자)"
             value={sender}
             onChange={handleInputChange}
             onBlur={handleSenderBlur}

src/pages/MessageForm/MessageForm.module.scss

@@ -17,6 +17,7 @@
     & {
       display: flex;
       align-items: center;
+      max-width: 320px;
       gap: 206px;
     }
   }