feat(scss): Remove common.scss

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>

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}

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}

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',

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>

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>

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>;
 };

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"

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>
   );
 };

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} />

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">

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"

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>

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>
   );

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}

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}

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}

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

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>
         )}

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}`}>

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');