[Fix]: GlobalHeader 수정, postHeader 수정, button 공용컴포넌트로 수정, LogoButton 컴포넌트 생성

src/assets/styles/_font.scss

@@ -42,3 +42,12 @@
   font-style: normal;
   font-display: swap;
 }
+
+/* Poppins */
+@font-face {
+  font-family: 'Poppins';
+  src: url('@/assets/fonts/Poppins-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

src/assets/styles/_variables.scss

@@ -5,6 +5,7 @@
   --font-family-noto-sans: 'Noto Sans', sans-serif;
   --font-family-nanum-myeongjo: 'Nanum Myeongjo', serif;
   --font-family-nanum-son-pyeonji: 'Nanum Son Pyeonji', cursive;
+	--font-family-poppins: 'Poppins', sans-serif;
 
   /* Font sizes */
   --font-size-28: 28px;

src/components/Button/LogoButton.jsx

@@ -0,0 +1,16 @@
+import logoIcon from '@/assets/icons/icon_logo_basic.svg';
+import styles from './LogoButton.module.scss';
+import { Link } from 'react-router-dom';
+
+const LogoButton = () => {
+  return (
+    <Link to='/' className={styles['button__link']}>
+      <div className={styles['button__logo']}>
+        <img src={logoIcon} alt='Logo' className={styles['button__logo-icon']} />
+        Rolling
+      </div>
+    </Link>
+  );
+};
+
+export default LogoButton;

src/components/Button/LogoButton.module.scss

@@ -0,0 +1,26 @@
+.button {
+	&__link {
+    padding: 10px 10px;
+    border-radius: 6px;
+    transition: background-color 0.2s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+  &__logo {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		font-family: var(--font-family-poppins);
+		font-weight: 700;
+		font-size: 20px;
+		color: #4A494F;
+		gap: 8px;
+  }
+	&__logo-icon {
+		aspect-ratio: 1;
+		width: 28px;
+	}
+}

src/components/Header/GlobalHeader.jsx

@@ -4,6 +4,8 @@ import Style from './GlobalHeader.module.scss';
 import useShowComponent from '@/hooks/useShowComponent';
 import { DEVICE_TYPES } from '@/constants/deviceType';
 import { useDeviceType } from '@/hooks/useDeviceType';
+import Button from '../Button/Button';
+import LogoButton from '../Button/LogoButton';
 /**
  * GlobalHeader 컴포넌트
  * @description - 애플리케이션의 상단 헤더 컴포넌트로, 로고와 버튼을 포함합니다.
@@ -29,20 +31,18 @@ function GlobalHeader() {
     <header className={Style['header']}>
       <div className={Style['header__container']}>
         {/*  루트로 이동*/}
-        <Link to='/' className={Style['header__logo-link']}>
-          <img src={LOGO} alt='Logo' className={Style['header__logo']} />
-        </Link>
+        <LogoButton />
         {/* todo: 디자인시스템 버튼으로 교체 */}
         {showButton && (
-          <button
-            size='36'
+          <Button
+            size='40'
             variant='outlined'
             onClick={handleButtonClick}
             aria-label='롤링 페이퍼 만들기'
             className={Style['header__button']}
           >
             롤링 페이퍼 만들기
-          </button>
+          </Button>
         )}
       </div>
     </header>

src/components/Header/GlobalHeader.module.scss

@@ -15,31 +15,4 @@
     justify-content: space-between;
     padding: 0 24px;
   }
-  &__logo-link {
-    padding: 6px 12px;
-    border-radius: 6px;
-    transition: background-color 0.2s ease-in-out;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-  &__logo {
-    height: 30px;
-  }
-  // 임시 버튼입니다.
-  &__button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 6px 16px;
-    font-size: var(--font-size-16);
-    font-weight: var(--font-weight-medium);
-    font-family: var(--font-family-base);
-    height: var(--button-size-36);
-    background-color: var(--color-white);
-    border-radius: 6px;
-    border: 1px solid var(--color-gray-300);
-  }
 }

src/components/PostHeader/EmojiGroup/EmojiBadge.module.scss

@@ -15,7 +15,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: #666666;
+  background-color: rgb(0,0,0,0.54);
   border-radius: 32px;
   color: #ffffff;
   white-space: nowrap;

src/components/PostHeader/EmojiGroup/ToggleEmoji.module.scss

@@ -4,6 +4,11 @@
   display: flex;
   align-items: center;
   gap: 8px; /* 각 뱃지 간격 */
+	@include mobile {
+		justify-content: start;
+	}
+	width: 270px;
+	justify-content: end;
 
   &__button-icon {
     transition: transform 0.3s ease;

src/pages/CreateRollingPaperPage/CreateRollingPaperPage.module.scss

@@ -15,6 +15,11 @@ $wrapper-desktop-width: 720px;
 		flex-direction: column;
 		gap: 30px;
 
+		@include tablet {
+      flex-direction: row;
+			gap:20px;			
+		}
+
     @include mobile {
       flex-direction: row;
 			gap:20px;