⚡ SVG Sprite를 활용한 SVG 관리 (#22)

- icon sprite 추가
- SVG 컴포넌트화
- 고정 및 반응형 박스 레이아웃 mixin 수정

Closes #22

src/features/feed-main-header/ui/FeedMainHeader.scss

@@ -11,11 +11,7 @@
     display: flex;
 
     .icon-link {
-      @include responsive-dimensions(44px, 44px);
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      @include fixed-box(44px, 44px);
     }
   }
 }

src/features/feed-main-header/ui/FeedMainHeader.tsx

@@ -1,27 +1,24 @@
 import { Link } from 'react-router-dom';
 
-import NotificationIcon from '@/shared/ui/icon/assets/notification_icon.svg?react';
-import PennywayLogo from '@/shared/ui/icon/assets/pennyway_logo_icon.svg?react';
-import SearchIcon from '@/shared/ui/icon/assets/search_icon.svg?react';
-import WritingIcon from '@/shared/ui/icon/assets/writing_icon.svg?react';
+import { Icon } from '@/shared/ui';
 
 import './FeedMainHeader.scss';
 
 export const FeedMainHeader = () => {
   return (
     <header id='feed-main-header'>
       <div className='header-left'>
-        <PennywayLogo />
+        <Icon name='pennyway-logo' width='99' height='17.32' />
       </div>
       <nav className='header-right'>
-        <Link to='search' className='icon-link'>
-          <SearchIcon />
+        <Link to='search' className='icon icon-link'>
+          <Icon name='search' width='24' height='24' />
         </Link>
-        <Link to='writing' className='icon-link'>
-          <WritingIcon />
+        <Link to='writing' className='icon icon-link'>
+          <Icon name='writing' width='24' height='24' />
         </Link>
-        <Link to='notification' className='icon-link'>
-          <NotificationIcon />
+        <Link to='notification' className='icon icon-link'>
+          <Icon name='notification' width='24' height='24' />
         </Link>
       </nav>
     </header>

src/features/feed/ui/Feed.scss

@@ -10,11 +10,7 @@
       align-items: center;
 
       .kebab-icon-btn {
-        @include responsive-dimensions(44px, 44px);
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        @include fixed-box(44px, 44px);
       }
     }
 
@@ -32,7 +28,7 @@
       align-items: center;
 
       .count-divider {
-        @include responsive-dimensions(2px, 2px);
+        @include responsive-box(2px, 2px);
 
         margin: 0 4px;
         background-color: $gray4;
@@ -56,7 +52,7 @@
       }
 
       .icon-btn {
-        @include responsive-dimensions(20px, 20px);
+        @include fixed-box(20px, 20px);
       }
     }
   }

src/features/feed/ui/Feed.tsx

@@ -1,9 +1,4 @@
-import { Profile } from '@/shared/ui';
-import BookmarkIcon from '@/shared/ui/icon/assets/bookmark_icon.svg?react';
-import ChatIcon from '@/shared/ui/icon/assets/chat_icon.svg?react';
-import KebabMenuIcon from '@/shared/ui/icon/assets/kebab_menu_icon.svg?react';
-import LikeIcon from '@/shared/ui/icon/assets/like_icon.svg?react';
-import SharedIcon from '@/shared/ui/icon/assets/share_icon.svg?react';
+import { Icon, Profile } from '@/shared/ui';
 import { calculateElapsedTime } from '@/shared/utils';
 
 import './Feed.scss';
@@ -22,8 +17,8 @@ export const Feed: React.FC<FeedProps> = ({ feed }) => {
             content={calculateElapsedTime(updatedAt)}
           />
 
-          <button className='kebab-icon-btn'>
-            <KebabMenuIcon />
+          <button className='icon kebab-icon-btn'>
+            <Icon name='kebab-menu' width='20' height='20' color='red' />
           </button>
         </header>
         <div className='feed-content'>
@@ -36,19 +31,19 @@ export const Feed: React.FC<FeedProps> = ({ feed }) => {
         </div>
         <footer className='feed-footer'>
           <div className='footer-left'>
-            <button className='icon-btn'>
-              <LikeIcon />
+            <button className='icon icon-btn'>
+              <Icon name='like' width='20' height='20' />
             </button>
-            <button className='icon-btn'>
-              <ChatIcon />
+            <button className='icon icon-btn'>
+              <Icon name='chat' width='20' height='20' />
             </button>
-            <button className='icon-btn'>
-              <SharedIcon />
+            <button className='icon icon-btn'>
+              <Icon name='share' width='20' height='20' />
             </button>
           </div>
           <div className='footer-right'>
-            <button className='icon-btn'>
-              <BookmarkIcon />
+            <button className='icon icon-btn'>
+              <Icon name='bookmark' width='20' height='20' />
             </button>
           </div>
         </footer>

src/shared/styles/_index.scss

@@ -1,3 +1,3 @@
 @forward 'colors.scss';
 @forward 'fonts.scss';
-@forward 'responsive.scss';
+@forward 'box.scss';

src/shared/styles/responsive.scss → src/shared/styles/box.scss

@@ -1,4 +1,9 @@
-@mixin responsive-dimensions($default-width, $default-height) {
+@mixin fixed-box($default-width, $default-height) {
+  width: $default-width;
+  height: $default-height;
+}
+
+@mixin responsive-box($default-width, $default-height) {
   width: $default-width;
   height: $default-height;
 

src/shared/styles/reset.scss

@@ -127,3 +127,9 @@ button {
   border: none;
   padding: 0;
 }
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/shared/ui/button/ActiveButton.scss

@@ -1,7 +1,7 @@
 @use '@/shared/styles/_index.scss' as *;
 
 @mixin confirmButton($isDisabled: false) {
-  @include responsive-dimensions(108px, 40px);
+  @include responsive-box(108px, 40px);
   @extend .h4semi;
   border-radius: 4px;
 
@@ -25,10 +25,10 @@
   border-radius: 30px;
 
   @if $isLg {
-    @include responsive-dimensions(280px, 30px);
+    @include responsive-box(280px, 30px);
     @extend .b1semi;
   } @else {
-    @include responsive-dimensions(48px, 24px);
+    @include responsive-box(48px, 24px);
     @extend .b2semi;
   }
   @if $isDisabled {

src/shared/ui/button/BasicButton.scss

@@ -4,15 +4,15 @@
 }
 
 .confirm-cancle {
-  @include responsive-dimensions(108px, 40px);
+  @include responsive-box(108px, 40px);
   @extend .h4semi;
   border-radius: 4px;
   color: $gray4;
   background-color: $gray2;
 }
 
 .bsm-option {
-  @include responsive-dimensions(280px, 40px);
+  @include responsive-box(280px, 40px);
   @extend .h4md;
   background-color: $gray1;
   color: $gray5;
@@ -21,7 +21,7 @@
 }
 
 .bsm-cancle {
-  @include responsive-dimensions(280px, 47px);
+  @include responsive-box(280px, 47px);
   @extend .h4semi;
   text-align: center;
   background-color: $gray5;

src/shared/ui/header/PageHeader.scss

@@ -1,7 +1,7 @@
 @use '@/shared/styles/_index.scss' as *;
 
 .page-header {
-  @include responsive-dimensions(320px, 44px);
+  @include responsive-box(320px, 44px);
   display: flex;
   align-items: center;
   justify-content: space-between;

src/shared/ui/header/PageHeader.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 
-import BackIcon from '@/shared/ui/icon/assets/back_icon.svg?react';
+import { Icon } from '..';
+
 import './PageHeader.scss';
 
 interface PageHeaderProps {
@@ -12,7 +13,7 @@ export const PageHeader = ({ prevPageLink, page }: PageHeaderProps) => {
   return (
     <div className='page-header'>
       <Link to={prevPageLink}>
-        <BackIcon />
+        <Icon name='back' width='44' height='44' />
       </Link>
       <p className='page'>{page}</p>
     </div>