From 51f8ab8c25ddaae6e93ba9598c648896c10cd9ea Mon Sep 17 00:00:00 2001
From: 1ilsang <1ilsang@naver.com>
Date: Mon, 23 Dec 2024 19:21:46 +0900
Subject: [PATCH] feat(scss): Remove common.scss

---
 src/features/about/activity/Card.tsx          |  2 +-
 src/features/about/education/Container.tsx    |  2 +-
 src/features/about/work/card/Container.tsx    |  2 +-
 .../about/work/card/content/Container.tsx     |  4 +--
 .../about/work/card/content/Headline.tsx      |  2 +-
 .../about/work/card/content/ProjectDetail.tsx | 10 ++++---
 .../about/work/card/content/RightSide.tsx     |  2 +-
 src/features/about/work/card/content/Tags.tsx |  2 +-
 src/features/home/Container.tsx               |  2 +-
 src/features/post/Container.tsx               |  2 +-
 src/features/post/floatingIndex/Container.tsx |  2 +-
 .../post/information/InformationContainer.tsx |  2 +-
 .../post/information/ProfileSection.tsx       |  2 +-
 .../post/information/PublishedDate.tsx        |  2 +-
 src/features/posts/category/Container.tsx     |  2 +-
 src/features/posts/components/Item.tsx        |  2 +-
 .../shared/components/ExternalLink.tsx        |  5 +++-
 src/features/shared/components/Footer.tsx     |  4 +--
 .../shared/components/modal/ImageModal.tsx    |  4 +--
 src/features/tags/detail/Container.tsx        |  2 +-
 src/styles/common.scss                        | 27 -------------------
 src/styles/index.scss                         |  1 -
 22 files changed, 32 insertions(+), 53 deletions(-)
 delete mode 100644 src/styles/common.scss

diff --git a/src/features/about/activity/Card.tsx b/src/features/about/activity/Card.tsx
index 4527ee60..24f057d0 100644
--- a/src/features/about/activity/Card.tsx
+++ b/src/features/about/activity/Card.tsx
@@ -15,7 +15,7 @@ const ActivityCardContainer: FunctionComponent<ActivityCardContainerProps> = ({
   list,
 }) => {
   return (
-    <article className="flex flex-col print:flex-row md:flex-row mt-4 leading-7">
+    <article className="flex flex-col mt-4 print:flex-row md:flex-row leading-7">
       <div className="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">
         {year}
       </div>
diff --git a/src/features/about/education/Container.tsx b/src/features/about/education/Container.tsx
index 7297620e..dc16adee 100644
--- a/src/features/about/education/Container.tsx
+++ b/src/features/about/education/Container.tsx
@@ -17,7 +17,7 @@ const EducationContainer: FunctionComponent<EducationContainerProps> = ({
   return (
     <section className="flex flex-col pb-8">
       <Label label="EDUCATION" />
-      <div className="flex flex-col print:flex-row md:flex-row mt-2 py-3">
+      <div className="flex flex-col py-3 mt-2 print:flex-row md:flex-row">
         <LeftSide
           href={Catholic.url}
           logoUrl={Catholic.logoUrl}
diff --git a/src/features/about/work/card/Container.tsx b/src/features/about/work/card/Container.tsx
index 982713a9..7293b8da 100644
--- a/src/features/about/work/card/Container.tsx
+++ b/src/features/about/work/card/Container.tsx
@@ -41,7 +41,7 @@ const WorkCardContainer: FunctionComponent<WorkCardContainerProps> = (
         : 'animate-hide';
 
   return (
-    <article className="flex flex-col print:flex-row md:flex-row mt-4 py-3">
+    <article className="flex flex-col py-3 mt-4 print:flex-row md:flex-row">
       <LeftSide
         {...props}
         href={companyHref}
diff --git a/src/features/about/work/card/content/Container.tsx b/src/features/about/work/card/content/Container.tsx
index 057e16c5..00646b19 100644
--- a/src/features/about/work/card/content/Container.tsx
+++ b/src/features/about/work/card/content/Container.tsx
@@ -47,10 +47,10 @@ const CompanyContentProject: FunctionComponent<CompanyContentProjectProps> = (
   return (
     <div className="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black">
       <div
-        className="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"
+        className="flex flex-col cursor-pointer select-none group duration-300 hover:text-highlight"
         onClick={handleDetailClick}
       >
-        <div className="flex justify-between items-center w-full">
+        <div className="flex items-center justify-between w-full">
           <div
             className={classNames(
               'text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300',
diff --git a/src/features/about/work/card/content/Headline.tsx b/src/features/about/work/card/content/Headline.tsx
index d458cb49..1bb0d77c 100644
--- a/src/features/about/work/card/content/Headline.tsx
+++ b/src/features/about/work/card/content/Headline.tsx
@@ -24,7 +24,7 @@ const ContentHeadline: FunctionComponent<ContentHeadlineProps> = ({
         ])}
         onClick={onClick}
       >
-        <div id={name} className="select-none text-2xl leading-9 font-bold">
+        <div id={name} className="text-2xl font-bold select-none leading-9">
           {name}
         </div>
       </div>
diff --git a/src/features/about/work/card/content/ProjectDetail.tsx b/src/features/about/work/card/content/ProjectDetail.tsx
index 4bb9919d..eb4ae4a3 100644
--- a/src/features/about/work/card/content/ProjectDetail.tsx
+++ b/src/features/about/work/card/content/ProjectDetail.tsx
@@ -22,7 +22,11 @@ const ProjectDetail: FunctionComponent<ProjectDetailProps> = memo(
     };
 
     return (
-      <div className={classNames('break-words', [openClassName])}>
+      <div
+        className={classNames('break-words print:animate-none', [
+          openClassName,
+        ])}
+      >
         {!print && img && (
           <DynamicImage
             className="w-full shadow-[1px_1px_8px] shadow-peach"
@@ -32,9 +36,9 @@ const ProjectDetail: FunctionComponent<ProjectDetailProps> = memo(
             onClick={handleImageClick}
           />
         )}
-        <div className="mt-4 pl-2 py-4">
+        <div className="py-4 pl-2 mt-4">
           <ul className="grid leading-7">
-            <span className="ml-1 pb-5">{summary}</span>
+            <span className="pb-5 ml-1">{summary}</span>
             {body}
           </ul>
         </div>
diff --git a/src/features/about/work/card/content/RightSide.tsx b/src/features/about/work/card/content/RightSide.tsx
index 9039205d..5f4c5e7e 100644
--- a/src/features/about/work/card/content/RightSide.tsx
+++ b/src/features/about/work/card/content/RightSide.tsx
@@ -3,5 +3,5 @@ import type { FunctionComponent, PropsWithChildren } from 'react';
 type Props = PropsWithChildren;
 
 export const RightSide: FunctionComponent<Props> = ({ children }) => {
-  return <div className="w-full flex flex-col ml-0 md:ml-6">{children}</div>;
+  return <div className="flex flex-col w-full ml-0 md:ml-6">{children}</div>;
 };
diff --git a/src/features/about/work/card/content/Tags.tsx b/src/features/about/work/card/content/Tags.tsx
index 5b086c9e..87d0ac76 100644
--- a/src/features/about/work/card/content/Tags.tsx
+++ b/src/features/about/work/card/content/Tags.tsx
@@ -7,7 +7,7 @@ type TagsProps = Pick<Project, 'tags'>;
 
 export const Tags: FunctionComponent<TagsProps> = memo(({ tags }) => {
   return (
-    <div className="pl-6 flex w-full select-none flex-wrap">
+    <div className="flex flex-wrap w-full pl-6 select-none">
       {tags.map((tag) => (
         <div
           className="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black"
diff --git a/src/features/home/Container.tsx b/src/features/home/Container.tsx
index 22e3709c..e70d7dd2 100644
--- a/src/features/home/Container.tsx
+++ b/src/features/home/Container.tsx
@@ -24,7 +24,7 @@ const HomeContainer: FunctionComponent = () => {
         muted
         playsInline
       />
-      <div className="bg-home fixed top-0 w-full h-full contrast-200 mix-blend-overlay" />
+      <div className="fixed top-0 w-full h-full bg-home contrast-200 mix-blend-overlay" />
     </div>
   );
 };
diff --git a/src/features/post/Container.tsx b/src/features/post/Container.tsx
index 89d95cad..22785688 100644
--- a/src/features/post/Container.tsx
+++ b/src/features/post/Container.tsx
@@ -10,7 +10,7 @@ import { MainContainer } from '~/shared/components/MainContainer';
 const PostContainer: FunctionComponent<{ post: PostType }> = ({ post }) => {
   return (
     <MainContainer>
-      <h1 className="text-4xl md:text-6xl break-words">{post.title}</h1>
+      <h1 className="text-4xl break-words md:text-6xl">{post.title}</h1>
       <InformationContainer post={post} />
       <section id="post-body-container" className="relative">
         <PostBody post={post} />
diff --git a/src/features/post/floatingIndex/Container.tsx b/src/features/post/floatingIndex/Container.tsx
index 7a327ad6..2b5f039f 100644
--- a/src/features/post/floatingIndex/Container.tsx
+++ b/src/features/post/floatingIndex/Container.tsx
@@ -20,7 +20,7 @@ export const FloatingIndexContainer: FunctionComponent<FloatingIndexProps> = ({
   }
   return (
     <aside
-      className="absolute inline-block h-full top-0 left-full break-words max-xl:hidden"
+      className="absolute top-0 inline-block h-full break-words left-full max-xl:hidden"
       aria-label="index"
     >
       <ul className="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48">
diff --git a/src/features/post/information/InformationContainer.tsx b/src/features/post/information/InformationContainer.tsx
index f1dc7c42..41b56600 100644
--- a/src/features/post/information/InformationContainer.tsx
+++ b/src/features/post/information/InformationContainer.tsx
@@ -13,7 +13,7 @@ export const InformationContainer: FunctionComponent<Props> = ({ post }) => {
   return (
     <>
       <ProfileSection />
-      <section className="flex flex-wrap mt-2 items-end">
+      <section className="flex flex-wrap items-end mt-2">
         {post.tags.map((tag) => (
           <HashTag
             className="mr-2"
diff --git a/src/features/post/information/ProfileSection.tsx b/src/features/post/information/ProfileSection.tsx
index 3424bf9d..47bc7d53 100644
--- a/src/features/post/information/ProfileSection.tsx
+++ b/src/features/post/information/ProfileSection.tsx
@@ -11,7 +11,7 @@ export const ProfileSection: FunctionComponent = () => {
         <Link className="text-lg" href="/about">
           {MyProfile.personal.label}
         </Link>
-        <div className="text-sub-blue text-sm">
+        <div className="text-sm text-sub-blue">
           {MyProfile.personal.description}
         </div>
       </div>
diff --git a/src/features/post/information/PublishedDate.tsx b/src/features/post/information/PublishedDate.tsx
index e8dce12d..f616726e 100644
--- a/src/features/post/information/PublishedDate.tsx
+++ b/src/features/post/information/PublishedDate.tsx
@@ -10,7 +10,7 @@ export const PublishedDate: FunctionComponent<PublishedDateProps> = ({
   date,
 }) => {
   return (
-    <div className="text-date-gray inline">
+    <div className="inline text-date-gray">
       Published <DateFormatter type="iso" date={date} />
     </div>
   );
diff --git a/src/features/posts/category/Container.tsx b/src/features/posts/category/Container.tsx
index 94fc9dfb..22bad0da 100644
--- a/src/features/posts/category/Container.tsx
+++ b/src/features/posts/category/Container.tsx
@@ -18,7 +18,7 @@ const CategoryContainer: FunctionComponent<CategoryContainerProps> = ({
     'inline-block cursor-pointer select-none py-0.5 px-1.5 my-1 mx-4 hover:category-shadow';
 
   return (
-    <div className="category-bar flex flex-wrap mb-4 justify-center border-b border-sub-blue">
+    <div className="flex flex-wrap justify-center mb-4 border-b category-bar border-sub-blue">
       <span
         className={`${itemClass} after:content-['𒅄'] hover:animate-slow-spin`}
         onClick={onClearClick}
diff --git a/src/features/posts/components/Item.tsx b/src/features/posts/components/Item.tsx
index dbeb5296..a0ae72d8 100644
--- a/src/features/posts/components/Item.tsx
+++ b/src/features/posts/components/Item.tsx
@@ -18,7 +18,7 @@ export const MemoedPostItem: FunctionComponent<{ post: PostType }> = memo<{
         className="flex flex-col items-center md:flex-row md:items-start"
         href={`/posts/${post.url}`}
       >
-        <div className="relative overflow-hidden w-64 md:w-52 min-w-52 h-32 md:h-28 mr-6 rounded border border-white-blue">
+        <div className="relative w-64 h-32 mr-6 overflow-hidden border rounded md:w-52 min-w-52 md:h-28 border-white-blue">
           <img
             className="object-cover w-full h-full group-hover:scale-105 transform-gpu transition duration-500"
             src={post.coverImage}
diff --git a/src/features/shared/components/ExternalLink.tsx b/src/features/shared/components/ExternalLink.tsx
index 4509e85c..8e648619 100644
--- a/src/features/shared/components/ExternalLink.tsx
+++ b/src/features/shared/components/ExternalLink.tsx
@@ -15,10 +15,13 @@ const ExternalLink: FunctionComponent<ExternalLinkProps> = ({
   children,
   disableDefaultCSSTransition = false,
 }) => {
+  const highlighter =
+    'inline-block text-[#30ffcb] leading-[1.1] after:transition-[width] after:duration-500 ease-in-out hover:after:w-[100%] after:w-[0] after:block after:h-[1px] print:text-black print:underline after:bg-[#30ffcb] after:content-[""]';
+
   return (
     <a
       className={classNames([
-        { highlighter: !disableDefaultCSSTransition },
+        { [highlighter]: !disableDefaultCSSTransition },
         className,
       ])}
       href={href}
diff --git a/src/features/shared/components/Footer.tsx b/src/features/shared/components/Footer.tsx
index b1fab671..965c7de7 100644
--- a/src/features/shared/components/Footer.tsx
+++ b/src/features/shared/components/Footer.tsx
@@ -47,13 +47,13 @@ export const Footer: FunctionComponent<Props> = memo(
 
     if (print || process.env.NEXT_PUBLIC_E2E) return null;
     return (
-      <footer className="w-full h-screen flex">
+      <footer className="flex w-full h-screen">
         <div className="flex w-2/3 overflow-hidden">
           {Array.from({ length: 12 }, (_, idx) => (
             <Frame key={idx} idx={idx} />
           ))}
         </div>
-        <ul className="w-1/3 text-center content-center">
+        <ul className="content-center w-1/3 text-center">
           <Item>
             <Link className={hoverHighlight} href="/about">
               1ilsang
diff --git a/src/features/shared/components/modal/ImageModal.tsx b/src/features/shared/components/modal/ImageModal.tsx
index f487e6ef..5edbcd2a 100644
--- a/src/features/shared/components/modal/ImageModal.tsx
+++ b/src/features/shared/components/modal/ImageModal.tsx
@@ -15,13 +15,13 @@ const ImageModal: FunctionComponent<ImageModalProps> = () => {
   if (!imageSrc) return null;
   return (
     <div
-      className="fixed top-0 left-0 z-50 w-screen h-screen flex items-center flex-col justify-center cursor-zoom-out"
+      className="fixed top-0 left-0 z-50 flex flex-col items-center justify-center w-screen h-screen cursor-zoom-out"
       onClick={handleDialogClick}
     >
       <div className="w-full h-full bg-snazzy-bg opacity-90" />
       <div className="absolute w-[95vw] h-[90vh] max-w-[95vw] max-h-[90vh] md:w-[85vw] md:h-[85vh]">
         {loading && (
-          <div className="flex justify-center items-center w-full h-full">
+          <div className="flex items-center justify-center w-full h-full">
             <div className="w-2/6 h-2/6 animate-loading" />
           </div>
         )}
diff --git a/src/features/tags/detail/Container.tsx b/src/features/tags/detail/Container.tsx
index 5344890c..a2f43be4 100644
--- a/src/features/tags/detail/Container.tsx
+++ b/src/features/tags/detail/Container.tsx
@@ -16,7 +16,7 @@ const TagDetailContainer: FunctionComponent<TagDetailContainerProps> = ({
     <MainContainer>
       {posts.map((item) => (
         <div
-          className="inline-block m-2 p-4 border-solid border border-base rounded-3xl"
+          className="inline-block p-4 m-2 border border-solid border-base rounded-3xl"
           key={item.title}
         >
           <Link href={`/posts/${item.url}`}>
diff --git a/src/styles/common.scss b/src/styles/common.scss
deleted file mode 100644
index fedfb63d..00000000
--- a/src/styles/common.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.highlighter {
-  display: inline-block;
-  color: #30ffcb;
-  line-height: 1.1;
-
-  @media print {
-    color: #101010;
-    text-decoration: underline;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    height: 1px;
-    background-color: #30ffcb;
-    transition: width 0.5s ease;
-    width: 0;
-  }
-
-  &:hover {
-    cursor: pointer;
-
-    &::after {
-      width: 100%;
-    }
-  }
-}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index fbaa7a46..ccfe5a9c 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,5 +2,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@include meta.load-css('common');
 @include meta.load-css('markdown/index');