From f13db0e91e412a5b2f686f6c6bd407ffbd83c107 Mon Sep 17 00:00:00 2001
From: 1ilsang <1ilsang@naver.com>
Date: Mon, 23 Dec 2024 18:35:42 +0900
Subject: [PATCH] feat(scss): Remove dynamic image class

---
 src/features/about/work/card/Container.tsx    |  6 +-
 .../about/work/card/content/Container.tsx     |  6 +-
 .../about/work/card/content/ProjectDetail.tsx |  4 +-
 .../shared/components/DynamicImage.tsx        | 17 +++-
 src/styles/common.scss                        | 86 -------------------
 tailwind.config.cjs                           | 23 +++++
 6 files changed, 45 insertions(+), 97 deletions(-)

diff --git a/src/features/about/work/card/Container.tsx b/src/features/about/work/card/Container.tsx
index 7a80c879..982713a9 100644
--- a/src/features/about/work/card/Container.tsx
+++ b/src/features/about/work/card/Container.tsx
@@ -34,7 +34,11 @@ const WorkCardContainer: FunctionComponent<WorkCardContainerProps> = (
   }, [toggleOpenAll]);
 
   const openClassName =
-    open === undefined ? 'max-h-[8000px]' : open ? 'show' : 'hide';
+    open === undefined
+      ? 'max-h-[8000px]'
+      : open
+        ? 'animate-show'
+        : 'animate-hide';
 
   return (
     <article className="flex flex-col print:flex-row md:flex-row mt-4 py-3">
diff --git a/src/features/about/work/card/content/Container.tsx b/src/features/about/work/card/content/Container.tsx
index 8152d6d3..057e16c5 100644
--- a/src/features/about/work/card/content/Container.tsx
+++ b/src/features/about/work/card/content/Container.tsx
@@ -31,9 +31,9 @@ const CompanyContentProject: FunctionComponent<CompanyContentProjectProps> = (
     'before:content-["▼"] text-highlight print:text-black print:before:text-black';
 
   const openClassName = (() => {
-    if (print) return 'show';
+    if (print) return 'animate-show';
     if (open === undefined) return 'invisible opacity-0	max-h-0';
-    return open ? 'show' : 'hide';
+    return open ? 'animate-show' : 'animate-hide';
   })();
   const foldState = (() => {
     if (print) return unfold;
@@ -41,7 +41,7 @@ const CompanyContentProject: FunctionComponent<CompanyContentProjectProps> = (
   })();
   const externalLink = (() => {
     if (print) return undefined;
-    return open !== undefined && url && openClassName !== 'hide';
+    return open !== undefined && url && openClassName !== 'animate-hide';
   })();
 
   return (
diff --git a/src/features/about/work/card/content/ProjectDetail.tsx b/src/features/about/work/card/content/ProjectDetail.tsx
index 8b6ef5f7..4bb9919d 100644
--- a/src/features/about/work/card/content/ProjectDetail.tsx
+++ b/src/features/about/work/card/content/ProjectDetail.tsx
@@ -22,9 +22,7 @@ const ProjectDetail: FunctionComponent<ProjectDetailProps> = memo(
     };
 
     return (
-      <div
-        className={classNames('flex flex-wrap break-words', [openClassName])}
-      >
+      <div className={classNames('break-words', [openClassName])}>
         {!print && img && (
           <DynamicImage
             className="w-full shadow-[1px_1px_8px] shadow-peach"
diff --git a/src/features/shared/components/DynamicImage.tsx b/src/features/shared/components/DynamicImage.tsx
index 5929f0ba..621c94ab 100644
--- a/src/features/shared/components/DynamicImage.tsx
+++ b/src/features/shared/components/DynamicImage.tsx
@@ -29,15 +29,24 @@ const DynamicImage: FunctionComponent<DynamicImageProps> = ({
 
   return (
     <div
-      className={classNames('dynamic-image', [className], {
+      className={classNames('relative mt-4 text-amber-600', [className], {
         'animate-skeleton': loading,
-        min: !min,
+        'max-w-[1.5rem] max-h-[1.5rem]': !min,
       })}
       style={{ width, height }}
     >
-      <button className={min ? 'min' : 'max'} onClick={handleMinClick} />
+      <button
+        className={classNames(
+          'absolute top-[-3rem] left-[-0.5rem] hover:text-amber-400 hover:duration-150 opacity-70 before:text-[5rem]',
+          min
+            ? 'before:content-["⎗"] before:text-[6rem]'
+            : 'before:content-["⎘"]',
+        )}
+        title="Toggle image size"
+        onClick={handleMinClick}
+      />
       <img
-        className={onClick ? 'zoom' : undefined}
+        className={onClick ? 'cursor-zoom-in' : undefined}
         src={src}
         alt={alt}
         width={width}
diff --git a/src/styles/common.scss b/src/styles/common.scss
index cf0d0ce3..fedfb63d 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,48 +1,3 @@
-$target: #e73c7e;
-
-.dynamic-image {
-  position: relative;
-  margin: 1rem 0 0;
-  color: $target;
-
-  :hover {
-    color: #e66295;
-  }
-
-  .min {
-    position: absolute;
-    top: -3rem;
-    left: -0.5rem;
-
-    &::before {
-      content: '⎗';
-      opacity: 0.5;
-      font-size: 6rem;
-      font-weight: bold;
-    }
-  }
-
-  .max {
-    position: absolute;
-    top: -2rem;
-    left: -0.5rem;
-
-    &::before {
-      content: '⎘';
-      font-size: 3rem;
-    }
-  }
-
-  .zoom {
-    cursor: zoom-in;
-  }
-}
-
-.dynamic-image.min {
-  max-height: 1.5rem;
-  max-width: 1.5rem;
-}
-
 .highlighter {
   display: inline-block;
   color: #30ffcb;
@@ -70,44 +25,3 @@ $target: #e73c7e;
     }
   }
 }
-
-.show {
-  animation: fade 0.5s forwards;
-
-  @keyframes fade {
-    0% {
-      max-height: 0;
-      opacity: 0;
-    }
-
-    100% {
-      max-height: 8000px;
-      opacity: 1;
-    }
-  }
-
-  @media print {
-    animation: none;
-  }
-}
-
-.hide {
-  animation: fade-out 0.25s forwards;
-
-  @keyframes fade-out {
-    0% {
-      max-height: 8000px;
-      opacity: 1;
-    }
-
-    100% {
-      max-height: 0;
-      opacity: 0;
-      visibility: hidden;
-    }
-  }
-
-  @media print {
-    animation: none;
-  }
-}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 2f62fcc1..81a69514 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -57,6 +57,27 @@ const keyframes = {
       'background-color': 'rgba(165, 165, 165, 10%)',
     },
   },
+  show: {
+    '0%': {
+      'max-height': 0,
+      opacity: 0,
+    },
+    '100%': {
+      'max-height': '8000px',
+      opacity: 1,
+    },
+  },
+  hide: {
+    '0%': {
+      'max-height': '8000px',
+      opacity: 1,
+    },
+    '100%': {
+      'max-height': 0,
+      opacity: 0,
+      visibility: 'hidden',
+    },
+  },
 };
 
 /** @type {import('tailwindcss').Config} */
@@ -82,6 +103,8 @@ module.exports = {
         skeleton: 'skeleton 1.8s infinite ease-in-out',
         loading:
           'skeleton 1.8s infinite ease-in-out, spin 1s infinite ease-in-out',
+        show: 'show 0.5s forwards',
+        hide: 'hide 0.25s forwards',
       },
       backgroundImage: {
         home: 'linear-gradient(to left,rgb(148, 148, 255),rgb(182, 182, 255))',