Merge pull request #112 from cskime/feature/#49

[#49] Animation 적용

Author: cskime

src/components/animated-mount/mount-animation.js

@@ -0,0 +1,9 @@
+import { css } from "styled-components";
+
+function mountAnimation({ isOpen, open, close }) {
+  return css`
+    animation: ${isOpen ? open : close} 300ms both;
+  `;
+}
+
+export { mountAnimation };

src/components/button/button.jsx

@@ -50,6 +50,7 @@ const BaseButton = styled.button`
   line-height: ${({ $size }) => styles.lineHeight[$size]};
   border-radius: ${({ $size }) => styles.borderRadius[$size]};
   height: ${({ $size, $icon }) => styles.height($icon)[$size]};
+  transition: background-color 0.3s;
 
   span {
     display: block;

src/components/button/toggle-button.jsx

@@ -18,6 +18,12 @@ const ToggleItem = styled.button`
   padding: 0 16px;
   height: 40px;
   cursor: pointer;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: ${({ $selected }) =>
+      $selected ? Colors.purple(100) : Colors.gray(200)};
+  }
 
   span {
     display: block;

src/components/modal/modal.jsx

@@ -1,6 +1,17 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+import { mountAnimation } from "../animated-mount/mount-animation";
 import Portal from "../portal/portal";
 
+const openAnimation = keyframes`
+  from { opacity: 0 }
+  to { opacity: 1 } 
+`;
+
+const closeAnimation = keyframes`
+  from { opacity: 1 }
+  to { opacity: 0 } 
+`;
+
 const Content = styled.div`
   width: 100%;
   display: flex;
@@ -29,14 +40,20 @@ const ModalContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  ${({ $isOpen }) =>
+    mountAnimation({
+      isOpen: $isOpen,
+      open: openAnimation,
+      close: closeAnimation,
+    })};
 `;
 
-function Modal({ shows, children }) {
+function Modal({ shows, isOpen, onDismiss, children }) {
   return (
     <>
       {shows && (
         <Portal id="modal">
-          <ModalContainer>
+          <ModalContainer $isOpen={isOpen} onAnimationEnd={onDismiss}>
             <StyledModal>
               <Content>{children}</Content>
             </StyledModal>

src/components/text-field/dropdown-input/dropdown-input.jsx

@@ -51,6 +51,7 @@ const StyledDropdownInput = styled.button`
   gap: 8px;
   cursor: pointer;
   position: relative;
+  transition: box-shadow 0.3s;
 
   &:hover {
     box-shadow: 0 0 0 1px

src/components/text-field/input-styles.js

@@ -8,10 +8,10 @@ const INPUT_STYLES = Object.freeze({
     line-height: 26px;
   `,
   borderColor: {
-    normal: (error) => (error ? Colors.error : Colors.gray(300)),
-    hover: (error) => (error ? Colors.error : Colors.gray(500)),
-    active: (error) => (error ? Colors.error : Colors.gray(700)),
-    focus: (error) => (error ? Colors.error : Colors.gray(500)),
+    normal: (error) => (error ? Colors.red(400) : Colors.gray(300)),
+    hover: (error) => (error ? Colors.red(500) : Colors.gray(500)),
+    active: (error) => (error ? Colors.red(700) : Colors.gray(700)),
+    focus: (error) => (error ? Colors.red(500) : Colors.gray(500)),
     disabled: Colors.gray(300),
   },
   textColor: {

src/components/text-field/text-input/text-input.jsx

@@ -12,6 +12,7 @@ const StyledTextInput = styled.input`
   ${INPUT_STYLES.font}
   color: ${INPUT_STYLES.textColor.normal};
   min-width: 320px;
+  transition: box-shadow 0.3s;
 
   &::placeholder {
     ${INPUT_STYLES.font}

src/components/toast/toast.jsx

@@ -1,6 +1,17 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import checkImage from "../../assets/ic-check-circle-green.svg";
 import closeImage from "../../assets/ic-xmark.svg";
+import { mountAnimation } from "../animated-mount/mount-animation";
+
+const openAnimation = keyframes`
+  from { opacity: 0 }
+  to { opacity: 1 } 
+`;
+
+const closeAnimation = keyframes`
+  from { opacity: 1 }
+  to { opacity: 0 } 
+`;
 
 const StyledToast = styled.div`
   background-color: rgba(0, 0, 0, 0.8);
@@ -20,6 +31,12 @@ const StyledToast = styled.div`
   left: 50%;
   bottom: 70px;
   transform: translateX(-50%);
+  ${({ $isOpen }) =>
+    mountAnimation({
+      isOpen: $isOpen,
+      open: openAnimation,
+      close: closeAnimation,
+    })};
 
   p {
     margin: 0;
@@ -56,14 +73,14 @@ const IconButton = styled(Icon)`
   cursor: pointer;
 `;
 
-function Toast({ message, onDismiss }) {
+function Toast({ isOpen, message, onClose, onDismiss }) {
   return (
-    <StyledToast>
+    <StyledToast $isOpen={isOpen} onAnimationEnd={onDismiss}>
       <Icon>
         <img src={checkImage} alt="확인" />
       </Icon>
       <p>{message}</p>
-      <IconButton as="button" onClick={onDismiss}>
+      <IconButton as="button" onClick={onClose}>
         <img src={closeImage} alt="닫기" />
       </IconButton>
     </StyledToast>

src/features/message/components/message-card-add.jsx

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import plusImage from "../../../assets/ic-plus.svg";
 import Colors from "../../../components/color/colors";
 import { media } from "../../../utils/media";
+import MessageCardBase from "./message-card-base";
 
 const AddCircle = styled.div`
   width: 56px;
@@ -14,13 +15,12 @@ const AddCircle = styled.div`
 `;
 
 const StyledMessageCardAdd = styled.button`
+  width: 100%;
+  background: none;
   border: none;
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 16px;
-  background-color: white;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
   min-height: 280px;
   cursor: pointer;
 
@@ -35,11 +35,13 @@ const StyledMessageCardAdd = styled.button`
 
 function MessageCardAdd({ onClick }) {
   return (
-    <StyledMessageCardAdd onClick={onClick}>
-      <AddCircle>
-        <img src={plusImage} alt="Message 추가" />
-      </AddCircle>
-    </StyledMessageCardAdd>
+    <MessageCardBase>
+      <StyledMessageCardAdd onClick={onClick}>
+        <AddCircle>
+          <img src={plusImage} alt="Message 추가" />
+        </AddCircle>
+      </StyledMessageCardAdd>
+    </MessageCardBase>
   );
 }
 

src/features/message/components/message-card-base.jsx

@@ -0,0 +1,48 @@
+import styled, { keyframes } from "styled-components";
+
+const mountAnimation = keyframes`
+  from {
+    transform: translateY(36px);
+  }
+
+  to {
+    transform: initial;
+  }
+`;
+
+function animationDelay({ $index = 0 }) {
+  const delay = 150;
+  return `${delay * $index}ms`;
+}
+
+const StyledMessageCardBase = styled.div`
+  background-color: white;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  animation: ${mountAnimation} 900ms ${animationDelay} backwards;
+
+  ${({ $useScaleTransform }) =>
+    $useScaleTransform
+      ? `
+          transition: transform 300ms;
+
+          &:hover {
+            transform: scale(1.02);
+          }
+        `
+      : ""};
+`;
+
+function MessageCardBase({ useScaleTransform, index, children }) {
+  return (
+    <StyledMessageCardBase
+      $index={index}
+      $useScaleTransform={useScaleTransform}
+    >
+      {children}
+    </StyledMessageCardBase>
+  );
+}
+
+export default MessageCardBase;