From 4f4b46148c5f62885c9a354a57d60a54de191b13 Mon Sep 17 00:00:00 2001
From: hanna <hanna.urssu@gmail.com>
Date: Sun, 5 May 2024 16:55:44 +0900
Subject: [PATCH] feat: add extension recommendations (#81)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add extensions recommendations

* fix: apply vscode-styled-components extensions

* fix: `setToastAnimation` 호출 수정

- `animation:` 이 함수 반환값으로 들어가니까 여기선 없어야 함

---------

Co-authored-by: nijuy <youjin6325@naver.com>
---
 .vscode/extensions.json             |  7 +++++++
 src/components/Toast/Toast.style.ts | 12 +++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 .vscode/extensions.json

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..593b87f
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "jpoissonnier.vscode-styled-components"
+  ]
+}
diff --git a/src/components/Toast/Toast.style.ts b/src/components/Toast/Toast.style.ts
index 15a0433..37f7a27 100644
--- a/src/components/Toast/Toast.style.ts
+++ b/src/components/Toast/Toast.style.ts
@@ -26,13 +26,15 @@ const setToastAnimation = ($duration: ToastDuration) => {
   switch ($duration) {
     case 'short':
       return css`
-        ${ToastFadeIn} ${FADE_DURATION}s ease-in forwards,
-        ${ToastFadeOut} ${FADE_DURATION}s ${SHORT_DURATION + FADE_DURATION}s ease-out forwards
+        animation:
+          ${ToastFadeIn} ${FADE_DURATION}s ease-in forwards,
+          ${ToastFadeOut} ${FADE_DURATION}s ${SHORT_DURATION + FADE_DURATION}s ease-out forwards;
       `;
     case 'long':
       return css`
-        ${ToastFadeIn} ${FADE_DURATION}s ease-in forwards,
-        ${ToastFadeOut} ${FADE_DURATION}s ${LONG_DURATION + FADE_DURATION}s ease-out forwards
+        animation:
+          ${ToastFadeIn} ${FADE_DURATION}s ease-in forwards,
+          ${ToastFadeOut} ${FADE_DURATION}s ${LONG_DURATION + FADE_DURATION}s ease-out forwards;
       `;
   }
 };
@@ -55,5 +57,5 @@ export const StyledToast = styled.div<StyledToastProps>`
   color: ${({ theme }) => theme.color.textBright};
   ${({ theme }) => theme.typo.body2};
 
-  animation: ${({ $duration }) => setToastAnimation($duration)};
+  ${({ $duration }) => setToastAnimation($duration)};
 `;