Hotfix: 랜딩 페이지 컴포넌트를 통일된 스타일로 변경하여 취합

src/components/landing/ClanRecruitment/ClanRecruitment.module.scss

@@ -7,8 +7,12 @@ $slider-banner-mobile: 387.9rem;
     height: 80rem;
   }
 
+  @include responsive(M) {
+    height: 70rem;
+  }
+
   width: 100%;
-  height: 100vh;
+  height: 108rem;
   background: url('/pngs/clan-background.png') no-repeat center/cover;
 
   .container {
@@ -18,8 +22,7 @@ $slider-banner-mobile: 387.9rem;
     }
 
     @include responsive(M) {
-      max-width: 100%;
-      padding-top: 8.8rem;
+      padding-top: 6.4rem;
     }
 
     max-width: 120rem;

src/components/landing/ClanRecruitment/index.tsx → src/components/landing/ClanRecruitment/ClanRecruitment.tsx

@@ -8,7 +8,7 @@ import { GAME_NAME_KR_TO_PATH_NAME } from '@/constants';
 import { splitTitleByDelimiter } from '@/utils';
 
 import SliderButton from '@/components/commons/buttons/SliderButton';
-import ClanCard from '@/components/landing/ClanCard.tsx';
+import ClanCard from '@/components/landing/ClanRecruitment/ClanCard';
 
 import styles from './ClanRecruitment.module.scss';
 

src/components/Recruitment/Recruitment.module.scss → src/components/landing/CreatorRecuritment/CreatorRecuritment.module.scss

@@ -3,17 +3,28 @@
     padding: 6rem 3rem;
   }
 
+  @include responsive(M) {
+    padding: 4rem 0;
+  }
+
   width: 100%;
-  margin-top: 20rem;
   padding: 6rem 0;
   background-color: $purple40;
 
   &-container {
     @include column-flexbox($gap: 3.2rem);
 
+    @include responsive(M) {
+      gap: 2.4rem;
+    }
+
     &-inner {
       @include column-flexbox($gap: 2.4rem);
 
+      @include responsive(T) {
+        gap: 1.6rem;
+      }
+
       @include responsive(M) {
         word-break: keep-all;
       }
@@ -23,18 +34,35 @@
   &-heading {
     @include text-style(60, $white10);
 
-    @include responsive(M) {
+    @include responsive(T) {
       font-size: 4rem;
     }
 
+    @include responsive(M) {
+      font-size: 3.2rem;
+      line-height: 4rem;
+    }
+
     text-align: center;
+
+    .br {
+      @include responsive(M) {
+        display: block;
+      }
+    }
   }
 
   &-paragraph {
     @include text-style(32, $gray20);
 
-    @include responsive(M) {
+    @include responsive(T) {
       font-size: 2.4rem;
+      line-height: 3.4rem;
+    }
+
+    @include responsive(M) {
+      font-size: 1.6rem;
+      line-height: 2.4rem;
     }
 
     font-weight: 500;
@@ -45,8 +73,14 @@
   &-creator {
     @include text-style(32, $white10);
 
-    @include responsive(M) {
+    @include responsive(T) {
       font-size: 2.4rem;
+      line-height: 3.4rem;
+    }
+
+    @include responsive(M) {
+      font-size: 1.6rem;
+      line-height: 2.4rem;
     }
 
     font-weight: 600;
@@ -56,6 +90,17 @@
   &-button {
     @include text-style(24, $white10, bold);
 
+    @include responsive(PC) {
+      &:hover {
+        color: $primary;
+        background-image: url('/svgs/ic-button-border-active.svg');
+
+        .line {
+          background-color: $primary;
+        }
+      }
+    }
+
     position: relative;
 
     width: 18rem;
@@ -66,26 +111,15 @@
 
     background-image: url('/svgs/ic-button-border.svg');
 
-    &:hover {
-      color: $purple30;
-      background: linear-gradient(-45deg, transparent 15px, $white10 0),
-        linear-gradient(45deg, transparent 15px, $white10 0);
-      border: 0.5rem solid $purple30;
-      transition: $base-transition;
-
-      .line {
-        border-color: $white10;
-      }
-    }
-
     .line {
       position: absolute;
       right: 0;
       bottom: 0;
 
       width: 5.6rem;
+      height: 0.4rem;
 
-      border: 0.2rem solid $white10;
+      background-color: $white;
     }
   }
 }

src/components/Recruitment/index.tsx → src/components/landing/CreatorRecuritment/index.tsx

@@ -2,16 +2,19 @@ import Link from 'next/link';
 
 import classNames from 'classnames/bind';
 
-import styles from './Recruitment.module.scss';
+import styles from './CreatorRecuritment.module.scss';
 
 const cx = classNames.bind(styles);
 
-const Recruitment = () => {
+const CreatorRecuritment = () => {
   return (
     <div className={cx('recruitment')}>
       <div className={cx('recruitment-container')}>
         <div className={cx('recruitment-container-inner')}>
-          <h2 className={cx('recruitment-heading')}>온라인 콘텐츠 크리에이터 모집</h2>
+          <h2 className={cx('recruitment-heading')}>
+            <span className={cx('br')}>온라인 콘텐츠</span>
+            크리에이터 모집
+          </h2>
           <div className={cx('recruitment-paragraph')}>
             <p>나만의 팁, 스킬을 영상으로 제작하고 업로드하세요</p>
             <p>
@@ -30,4 +33,4 @@ const Recruitment = () => {
   );
 };
 
-export default Recruitment;
+export default CreatorRecuritment;

src/components/landing/MatchCards.module.scss → src/components/landing/MatchTeam/MatchCards.module.scss

@@ -1,4 +1,3 @@
-// 카드 hover시 확장
 @keyframes expand-card {
   from {
     width: 21.5rem;
@@ -19,19 +18,6 @@
   }
 }
 
-// 카드 내 게임 제목
-@keyframes slidein-from-right {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
 .match-cards {
   @include flexbox($gap: 2.4rem);
 
@@ -51,7 +37,7 @@
 
   .card {
     @include responsive(PC) {
-      animation: shrink-card 0.3s ease-out;
+      animation: shrink-card 0.3s linear forwards;
     }
 
     position: relative;
@@ -64,10 +50,9 @@
     background-color: $opacity-white-1;
     backdrop-filter: $popup-blur;
 
-    // hover 상태일때
     &.active {
       @include responsive(PC) {
-        animation: expand-card 0.3s ease-in-out forwards;
+        animation: expand-card 0.3s linear forwards;
       }
 
       @include responsive(T) {
@@ -110,7 +95,6 @@
       }
     }
 
-    // 왼쪽 위 반쪽 border
     &-inner.active {
       &::before {
         content: '';
@@ -123,17 +107,13 @@
         display: block;
 
         width: 50%;
-        height: 0.4rem;
+        height: 0.6rem;
 
         background: $primary;
-
-        transition: $base-transition;
       }
     }
 
-    // hover가 아닌 default일 때
     &-default-inner:not(.active) {
-      // border
       &::before {
         content: '';
 
@@ -149,7 +129,6 @@
         background: url('/pngs/card-default-border.png') no-repeat center/cover;
       }
 
-      // 검정 그라디언트
       &::after {
         content: '';
 
@@ -171,9 +150,7 @@
       @include image-fit(cover);
     }
 
-    // 게임 제목
     .title {
-      // default 일때
       &:not(.active) {
         @include text-style-quantico(20, rgb(255 255 255 / 70%), bold);
 
@@ -184,7 +161,6 @@
         width: 100%;
       }
 
-      // hover했을 때
       &.active {
         @include text-style-quantico(28, $white10, bold);
 
@@ -196,36 +172,13 @@
         right: 0;
         bottom: 0;
 
-        display: inline-block;
-
         width: 100%;
         padding: 1.1rem 2.4rem 1.1rem 0;
 
         text-align: right;
 
         background: linear-gradient(90deg, rgb(173 255 0 / 0%) 15%, #90d400 80%);
-
-        animation: slidein-from-right 0.3s ease-out forwards;
       }
     }
   }
 }
-
-// 삼각형
-// .top-triangle {
-//   &::after {
-//     content: '';
-
-//     position: absolute;
-//     z-index: 1000;
-//     top: -0.2rem;
-//     right: -1rem;
-
-//     // transform-origin: 0 0; /* 회전의 기준점을 왼쪽 상단 모서리로 설정 */
-//     transform: rotate(45deg); /* 오른쪽으로 90도 회전 */
-
-//     border-right: 1.3rem solid transparent;
-//     border-bottom: 1.3rem solid $black; /* 삼각형의 높이 */
-//     border-left: 1.3rem solid transparent;
-//   }
-// }

src/components/landing/MatchCards.tsx → src/components/landing/MatchTeam/MatchCards.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames/bind';
 
 import { GAME_NAME_KR_TO_PATH_NAME, GAME_NAME_LIST_EN, PNGS } from '@/constants';
 
-import { GameClassName } from '@/components/landing/LandingMatch';
+import { GameClassName } from '@/components/landing/MatchTeam/MatchTeam';
 import { useDeviceType } from '@/hooks/useDeviceType';
 
 import styles from './MatchCards.module.scss';