From 1ed886c55779450150573663e9c69d8666159dfa Mon Sep 17 00:00:00 2001
From: 1ilsang <1ilsang@naver.com>
Date: Sun, 26 May 2024 14:55:14 +0900
Subject: [PATCH] refactor(about): Separate scss files

---
 src/features/styles/ui/about/_activity.scss   |  67 ++++
 src/features/styles/ui/about/_common.scss     |  18 ++
 src/features/styles/ui/about/_education.scss  |  11 +
 .../styles/ui/about/_introduction.scss        |  24 ++
 src/features/styles/ui/about/_profile.scss    |  64 ++++
 .../ui/about/{project.scss => _project.scss}  |   0
 src/features/styles/ui/about/_work.scss       | 107 +++++++
 src/features/styles/ui/about/index.scss       | 297 +-----------------
 src/features/styles/ui/posts/posts.scss       |  94 +++---
 9 files changed, 349 insertions(+), 333 deletions(-)
 create mode 100644 src/features/styles/ui/about/_activity.scss
 create mode 100644 src/features/styles/ui/about/_common.scss
 create mode 100644 src/features/styles/ui/about/_education.scss
 create mode 100644 src/features/styles/ui/about/_introduction.scss
 create mode 100644 src/features/styles/ui/about/_profile.scss
 rename src/features/styles/ui/about/{project.scss => _project.scss} (100%)
 create mode 100644 src/features/styles/ui/about/_work.scss

diff --git a/src/features/styles/ui/about/_activity.scss b/src/features/styles/ui/about/_activity.scss
new file mode 100644
index 00000000..4f8d25f0
--- /dev/null
+++ b/src/features/styles/ui/about/_activity.scss
@@ -0,0 +1,67 @@
+@mixin activity {
+  @include container;
+
+  padding-bottom: 50px;
+
+  .label {
+    @include label;
+  }
+
+  &-card {
+    display: flex;
+    margin-top: 1rem;
+    line-height: 1.72rem;
+
+    @include mobile {
+      flex-direction: column;
+    }
+
+    .year {
+      min-width: 5rem;
+      font-size: 1.3rem;
+      width: 11rem;
+
+      &:hover {
+        filter: drop-shadow(2px 2px 4px lightgray) invert(2%);
+      }
+
+      @include mobile {
+        margin: 1rem 0 0.2rem;
+      }
+    }
+
+    .left-line {
+      border-left: 0.24rem solid $dark-color;
+      padding-left: 1rem;
+
+      li {
+        display: flex;
+
+        .category {
+          min-width: 120px;
+          color: $min-color;
+
+          @media print {
+            color: #101010;
+          }
+        }
+
+        .link-wrap {
+          width: 100%;
+        }
+
+        .link {
+          color: #2dd0a8;
+
+          @media print {
+            color: #101010;
+          }
+
+          &:hover {
+            color: $highlight-color;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/features/styles/ui/about/_common.scss b/src/features/styles/ui/about/_common.scss
new file mode 100644
index 00000000..27dd8254
--- /dev/null
+++ b/src/features/styles/ui/about/_common.scss
@@ -0,0 +1,18 @@
+@mixin container {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 30px;
+}
+
+@mixin label {
+  user-select: none;
+  border-bottom: 1px solid $base-color;
+  color: $min-color;
+  font-weight: bold;
+  font-size: 1.5rem;
+  margin-bottom: 4px;
+
+  @media print {
+    color: #101010;
+  }
+}
diff --git a/src/features/styles/ui/about/_education.scss b/src/features/styles/ui/about/_education.scss
new file mode 100644
index 00000000..e0cbdf51
--- /dev/null
+++ b/src/features/styles/ui/about/_education.scss
@@ -0,0 +1,11 @@
+@mixin education {
+  @include container;
+
+  .label {
+    @include label;
+  }
+
+  &-position {
+    border-bottom: none;
+  }
+}
diff --git a/src/features/styles/ui/about/_introduction.scss b/src/features/styles/ui/about/_introduction.scss
new file mode 100644
index 00000000..ceca344c
--- /dev/null
+++ b/src/features/styles/ui/about/_introduction.scss
@@ -0,0 +1,24 @@
+@mixin introduction {
+  @include container;
+
+  .description {
+    margin: 2rem 0 1rem;
+    line-height: 2rem;
+
+    .p {
+      margin: 2rem 0;
+
+      .underline-highlight-fade {
+        @media print {
+          color: $black;
+          text-decoration: underline 0.15em $black;
+        }
+      }
+    }
+
+    li::before {
+      content: '❑';
+      margin-right: 0.5rem;
+    }
+  }
+}
diff --git a/src/features/styles/ui/about/_profile.scss b/src/features/styles/ui/about/_profile.scss
new file mode 100644
index 00000000..4b01ef79
--- /dev/null
+++ b/src/features/styles/ui/about/_profile.scss
@@ -0,0 +1,64 @@
+@mixin profile {
+  &-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    @include mobile {
+      flex-direction: column;
+      align-items: normal;
+    }
+
+    .jumbotron {
+      display: flex;
+      justify-content: flex-start;
+      background: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #e73c7e);
+      background-clip: text;
+      color: transparent;
+      font-size: 8rem;
+      line-height: 8.5rem;
+      letter-spacing: 0.2rem;
+      font-weight: bold;
+      filter: drop-shadow(2px 4px 1px black);
+
+      @include mobile {
+        font-size: 6rem;
+        letter-spacing: 1px;
+      }
+
+      @media print {
+        color: #101010;
+        font-weight: normal;
+        background: none;
+        filter: none;
+      }
+    }
+
+    .logo-container {
+      display: flex;
+      flex-direction: column;
+
+      .about-profile-logo {
+        display: flex;
+        justify-content: flex-end;
+        padding-bottom: 1px;
+        height: 1.7rem;
+
+        a {
+          display: flex;
+          align-items: center;
+        }
+
+        img {
+          padding: 2px 0 2px 5px;
+          height: 1.7rem;
+          width: 1.7rem;
+        }
+
+        .gmail {
+          height: 1.4rem;
+        }
+      }
+    }
+  }
+}
diff --git a/src/features/styles/ui/about/project.scss b/src/features/styles/ui/about/_project.scss
similarity index 100%
rename from src/features/styles/ui/about/project.scss
rename to src/features/styles/ui/about/_project.scss
diff --git a/src/features/styles/ui/about/_work.scss b/src/features/styles/ui/about/_work.scss
new file mode 100644
index 00000000..3616e9bd
--- /dev/null
+++ b/src/features/styles/ui/about/_work.scss
@@ -0,0 +1,107 @@
+@mixin work {
+  @include container;
+
+  .skeleton {
+    height: $max-height;
+  }
+
+  .label {
+    @include label;
+
+    cursor: pointer;
+
+    &:hover {
+      color: $sub-color;
+    }
+  }
+
+  &-card {
+    display: flex;
+    margin-top: 1rem;
+    padding: 10px 0;
+
+    @include mobile {
+      flex-direction: column;
+    }
+
+    .left-side {
+      width: 12rem;
+
+      .logo {
+        width: 4rem;
+        height: 4rem;
+        transition: filter 350ms ease-in-out;
+
+        &:hover {
+          filter: drop-shadow(2px 2px 4px lightgray) invert(2%);
+        }
+      }
+
+      .date {
+        margin-top: 0.3rem;
+      }
+    }
+
+    .border {
+      border: 1px solid $background-color;
+    }
+
+    .content {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      margin-left: 22px;
+
+      @include mobile {
+        margin-left: 0;
+      }
+
+      .headline {
+        display: flex;
+        align-items: baseline;
+
+        .title {
+          font-size: 1.5rem;
+          font-weight: bold;
+          user-select: none;
+        }
+
+        .date {
+          padding-left: 4px;
+          font-style: italic;
+        }
+
+        @include mobile {
+          flex-direction: column;
+
+          .date {
+            padding-left: 0;
+          }
+        }
+      }
+
+      .hover {
+        cursor: pointer;
+        transition: color 350ms;
+
+        &:hover {
+          color: $highlight-color;
+        }
+      }
+
+      .position {
+        border-bottom: 1px dotted $min-color;
+        margin-bottom: 15px;
+        user-select: none;
+
+        @media print {
+          border-bottom: 1px dotted $black;
+        }
+      }
+
+      .project {
+        @include project;
+      }
+    }
+  }
+}
diff --git a/src/features/styles/ui/about/index.scss b/src/features/styles/ui/about/index.scss
index e550883f..a9a16d22 100644
--- a/src/features/styles/ui/about/index.scss
+++ b/src/features/styles/ui/about/index.scss
@@ -1,23 +1,10 @@
+@import './common';
 @import './project';
-
-@mixin container {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 30px;
-}
-
-@mixin label {
-  user-select: none;
-  border-bottom: 1px solid $base-color;
-  color: $min-color;
-  font-weight: bold;
-  font-size: 1.5rem;
-  margin-bottom: 4px;
-
-  @media print {
-    color: #101010;
-  }
-}
+@import './profile';
+@import './introduction';
+@import './work';
+@import './activity';
+@import './education';
 
 .about {
   &-layout {
@@ -33,284 +20,22 @@
   }
 
   &-profile {
-    &-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-end;
-
-      @include mobile {
-        flex-direction: column;
-        align-items: normal;
-      }
-
-      .jumbotron {
-        display: flex;
-        justify-content: flex-start;
-        background: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #e73c7e);
-        background-clip: text;
-        color: transparent;
-        font-size: 8rem;
-        line-height: 8.5rem;
-        letter-spacing: 0.2rem;
-        font-weight: bold;
-        filter: drop-shadow(2px 4px 1px black);
-
-        @include mobile {
-          font-size: 6rem;
-          letter-spacing: 1px;
-        }
-
-        @media print {
-          color: #101010;
-          font-weight: normal;
-          background: none;
-          filter: none;
-        }
-      }
-
-      .logo-container {
-        display: flex;
-        flex-direction: column;
-
-        .about-profile-logo {
-          display: flex;
-          justify-content: flex-end;
-          padding-bottom: 1px;
-          height: 1.7rem;
-
-          a {
-            display: flex;
-            align-items: center;
-          }
-
-          img {
-            padding: 2px 0 2px 5px;
-            height: 1.7rem;
-            width: 1.7rem;
-          }
-
-          .gmail {
-            height: 1.4rem;
-          }
-        }
-      }
-    }
+    @include profile;
   }
 
   &-introduction {
-    @include container;
-
-    .description {
-      margin: 2rem 0 1rem;
-      line-height: 2rem;
-
-      .p {
-        margin: 2rem 0;
-
-        .underline-highlight-fade {
-          @media print {
-            color: $black;
-            text-decoration: underline 0.15em $black;
-          }
-        }
-      }
-
-      li::before {
-        content: '❑';
-        margin-right: 0.5rem;
-      }
-    }
+    @include introduction;
   }
 
   &-work {
-    @include container;
-
-    .skeleton {
-      height: $max-height;
-    }
-
-    .label {
-      @include label;
-
-      cursor: pointer;
-
-      &:hover {
-        color: $sub-color;
-      }
-    }
-
-    &-card {
-      display: flex;
-      margin-top: 1rem;
-      padding: 10px 0;
-
-      @include mobile {
-        flex-direction: column;
-      }
-
-      .left-side {
-        width: 12rem;
-
-        .logo {
-          width: 4rem;
-          height: 4rem;
-          transition: filter 350ms ease-in-out;
-
-          &:hover {
-            filter: drop-shadow(2px 2px 4px lightgray) invert(2%);
-          }
-        }
-
-        .date {
-          margin-top: 0.3rem;
-        }
-      }
-
-      .border {
-        border: 1px solid $background-color;
-      }
-
-      .content {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        margin-left: 22px;
-
-        @include mobile {
-          margin-left: 0;
-        }
-
-        .headline {
-          display: flex;
-          align-items: baseline;
-
-          .title {
-            font-size: 1.5rem;
-            font-weight: bold;
-            user-select: none;
-          }
-
-          .date {
-            padding-left: 4px;
-            font-style: italic;
-          }
-
-          @include mobile {
-            flex-direction: column;
-
-            .date {
-              padding-left: 0;
-            }
-          }
-        }
-
-        .hover {
-          cursor: pointer;
-          transition: color 350ms;
-
-          &:hover {
-            color: $highlight-color;
-          }
-        }
-
-        .position {
-          border-bottom: 1px dotted $min-color;
-          margin-bottom: 15px;
-          user-select: none;
-
-          @media print {
-            border-bottom: 1px dotted $black;
-          }
-        }
-
-        .project {
-          @include project;
-        }
-      }
-    }
+    @include work;
   }
 
   &-activity {
-    @include container;
-
-    padding-bottom: 50px;
-
-    /* stylelint-disable no-descending-specificity */
-    .label {
-      @include label;
-    }
-    /* stylelint-enable no-descending-specificity */
-
-    &-card {
-      display: flex;
-      margin-top: 1rem;
-      line-height: 1.72rem;
-
-      @include mobile {
-        flex-direction: column;
-      }
-
-      .year {
-        min-width: 5rem;
-        font-size: 1.3rem;
-        width: 11rem;
-
-        &:hover {
-          filter: drop-shadow(2px 2px 4px lightgray) invert(2%);
-        }
-
-        @include mobile {
-          margin: 1rem 0 0.2rem;
-        }
-      }
-
-      .left-line {
-        border-left: 0.24rem solid $dark-color;
-        padding-left: 1rem;
-
-        li {
-          display: flex;
-
-          .category {
-            min-width: 120px;
-            color: $min-color;
-
-            @media print {
-              color: #101010;
-            }
-          }
-
-          .link-wrap {
-            width: 100%;
-          }
-
-          .link {
-            color: #2dd0a8;
-
-            @media print {
-              color: #101010;
-            }
-
-            &:hover {
-              color: $highlight-color;
-            }
-          }
-        }
-      }
-    }
+    @include activity;
   }
 
   &-education {
-    @include container;
-
-    /* stylelint-disable no-descending-specificity */
-    .label {
-      @include label;
-    }
-    /* stylelint-enable no-descending-specificity */
-
-    &-position {
-      border-bottom: none;
-    }
+    @include education;
   }
 }
diff --git a/src/features/styles/ui/posts/posts.scss b/src/features/styles/ui/posts/posts.scss
index 24989cd9..4fa5acf6 100644
--- a/src/features/styles/ui/posts/posts.scss
+++ b/src/features/styles/ui/posts/posts.scss
@@ -1,51 +1,4 @@
 /* PC */
-.category-bar {
-  margin-bottom: 2rem;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  border-bottom: 1px solid $sub-color;
-
-  .x {
-    position: relative;
-
-    &::after {
-      content: '𒅄';
-    }
-
-    &:hover {
-      @keyframes spin {
-        100% {
-          transform: rotate(360deg);
-        }
-      }
-
-      animation: spin 2s linear infinite;
-      transform-origin: 50% 50%;
-    }
-  }
-
-  .selected {
-    color: $highlight-color;
-  }
-
-  .item {
-    display: inline-block;
-    padding: 0.1rem 0.4rem;
-    margin: 0.3rem 1rem;
-    user-select: none;
-    cursor: pointer;
-
-    &:hover {
-      text-shadow:
-        -0.5px 0 $highlight-color,
-        0 0.5px $base-color,
-        0.5px 0 $base-color,
-        0 -0.5px $base-color;
-    }
-  }
-}
-
 .post-list {
   padding-bottom: 14rem;
 
@@ -133,3 +86,50 @@
     padding-bottom: 100px;
   }
 }
+
+.category-bar {
+  margin-bottom: 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  border-bottom: 1px solid $sub-color;
+
+  .x {
+    position: relative;
+
+    &::after {
+      content: '𒅄';
+    }
+
+    &:hover {
+      @keyframes spin {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      animation: spin 2s linear infinite;
+      transform-origin: 50% 50%;
+    }
+  }
+
+  .selected {
+    color: $highlight-color;
+  }
+
+  .item {
+    display: inline-block;
+    padding: 0.1rem 0.4rem;
+    margin: 0.3rem 1rem;
+    user-select: none;
+    cursor: pointer;
+
+    &:hover {
+      text-shadow:
+        -0.5px 0 $highlight-color,
+        0 0.5px $base-color,
+        0.5px 0 $base-color,
+        0 -0.5px $base-color;
+    }
+  }
+}