[#49] Animation 적용

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;

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

@@ -5,6 +5,7 @@ import BUTTON_SIZE from "../../../components/button/button-size";
 import Colors from "../../../components/color/colors";
 import { formatDate } from "../../../utils/formatter";
 import { media } from "../../../utils/media";
+import MessageCardBase from "./message-card-base";
 import MessageSender from "./message-sender";
 
 const Header = styled.header`
@@ -47,13 +48,10 @@ const StyledMessageCard = styled.article`
   display: flex;
   flex-direction: column;
   padding: 24px;
-  border-radius: 16px;
-  background-color: white;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
   cursor: ${({ $isEditing }) => ($isEditing ? "default" : "pointer")};
 `;
 
-function MessageCard({ isEditing, message, onClick, onDelete }) {
+function MessageCard({ isEditing, index, message, onClick, onDelete }) {
   const handleClick = () => {
     if (isEditing) return;
     onClick(message);
@@ -65,24 +63,26 @@ function MessageCard({ isEditing, message, onClick, onDelete }) {
   };
 
   return (
-    <StyledMessageCard $isEditing={isEditing} onClick={handleClick}>
-      <Header>
-        <MessageSender
-          profileImageUrl={message.profileImageURL}
-          relationship={message.relationship}
-          name={message.sender}
-        />
-        {isEditing && (
-          <OutlinedButton
-            size={BUTTON_SIZE.medium}
-            icon={deleteImage}
-            onClick={handleDeleteClick}
+    <MessageCardBase index={index + 1} useScaleTransform={!isEditing}>
+      <StyledMessageCard $isEditing={isEditing} onClick={handleClick}>
+        <Header>
+          <MessageSender
+            profileImageUrl={message.profileImageURL}
+            relationship={message.relationship}
+            name={message.sender}
           />
-        )}
-      </Header>
-      <Content>{message.content}</Content>
-      <CreatedDate>{formatDate(message.createdAt, ".")}</CreatedDate>
-    </StyledMessageCard>
+          {isEditing && (
+            <OutlinedButton
+              size={BUTTON_SIZE.medium}
+              icon={deleteImage}
+              onClick={handleDeleteClick}
+            />
+          )}
+        </Header>
+        <Content>{message.content}</Content>
+        <CreatedDate>{formatDate(message.createdAt, ".")}</CreatedDate>
+      </StyledMessageCard>
+    </MessageCardBase>
   );
 }
 

src/features/message/components/messages-grid.jsx

@@ -29,7 +29,7 @@ function MessagesGrid({ isEditing, messages, onDelete, onInfiniteScroll }) {
   const navigate = useNavigate();
   const { id } = useParams();
   const infiniteScrollTargetRef = useRef();
-  const { showsModal, setShowsModal } = useModal({
+  const { showsModal, isModalOpen, setShowsModal, onDismissModal } = useModal({
     key: "message-modal",
   });
   const [modalMessage, setModalMessage] = useState(null);
@@ -62,9 +62,10 @@ function MessagesGrid({ isEditing, messages, onDelete, onInfiniteScroll }) {
     <>
       <StyledRollingPaperMessagesGrid>
         <MessageCardAdd onClick={handleAddClick} />
-        {messages.map((message) => (
+        {messages.map((message, index) => (
           <MessageCard
             key={message.id}
+            index={index}
             isEditing={isEditing}
             message={message}
             onClick={handleMessageClick}
@@ -73,7 +74,11 @@ function MessagesGrid({ isEditing, messages, onDelete, onInfiniteScroll }) {
         ))}
         <div ref={infiniteScrollTargetRef}></div>
       </StyledRollingPaperMessagesGrid>
-      <Modal shows={showsModal && modalMessage != null}>
+      <Modal
+        shows={showsModal && modalMessage != null}
+        isOpen={isModalOpen}
+        onDismiss={onDismissModal}
+      >
         <MessageCardDetail
           message={modalMessage}
           onConfirm={handleModalConfirm}

src/features/rolling-paper/components/header/rolling-paper-header.jsx

@@ -69,7 +69,9 @@ function RollingPaperHeader({
   recipientName,
   messages,
 }) {
-  const { showsToast, setShowsToast } = useToast();
+  const { showsToast, isOpen, setShowsToast, onDismiss } = useToast({
+    timeout: 5000,
+  });
   const { isDesktop, isMobile } = useMedia();
   const [reactions, setReactions] = useState([]);
 
@@ -104,6 +106,8 @@ function RollingPaperHeader({
     setShowsToast(true);
   };
 
+  const handleToastClose = () => setShowsToast(false);
+
   useEffect(() => {
     updateReactions();
   }, [updateReactions]);
@@ -137,8 +141,10 @@ function RollingPaperHeader({
       </RollingPaperHeaderContent>
       {showsToast && (
         <Toast
+          isOpen={isOpen}
           message="URL이 복사 되었습니다."
-          onDismiss={() => setShowsToast(false)}
+          onClose={handleToastClose}
+          onDismiss={onDismiss}
         />
       )}
     </StyledRollingPaperHeader>