Merge pull request #35 from TeamBNBN/fe/webfont

[Front-End] design: 로고, 폰트 추가

frontend/src/assets/logo.svg

@@ -0,0 +1,3 @@
+<svg width="167" height="25" viewBox="0 0 167 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.856 25V1.96H22.072V6.216H5.112V11.336H18.744V15.624H5.112V20.744H22.072V25H0.856ZM27.372 25C26.54 25 25.7933 24.7973 25.132 24.392C24.4707 23.9867 23.9373 23.4533 23.532 22.792C23.148 22.1307 22.956 21.3947 22.956 20.584V10.856C22.956 10.0453 23.148 9.30933 23.532 8.648C23.9373 7.98667 24.4707 7.45333 25.132 7.048C25.7933 6.64267 26.54 6.44 27.372 6.44H37.644V0.359999H41.836V25H27.372ZM27.564 20.808H37.26C37.3667 20.808 37.452 20.776 37.516 20.712C37.6013 20.6267 37.644 20.5307 37.644 20.424V11.016C37.644 10.9093 37.6013 10.824 37.516 10.76C37.452 10.6747 37.3667 10.632 37.26 10.632H27.564C27.4573 10.632 27.3613 10.6747 27.276 10.76C27.212 10.824 27.18 10.9093 27.18 11.016V20.424C27.18 20.5307 27.212 20.6267 27.276 20.712C27.3613 20.776 27.4573 20.808 27.564 20.808ZM47.6145 25C46.8038 25 46.0572 24.7973 45.3745 24.392C44.7132 23.9867 44.1798 23.4533 43.7745 22.792C43.3905 22.1307 43.1985 21.3947 43.1985 20.584V6.44H47.3905V20.424C47.3905 20.5307 47.4225 20.6267 47.4865 20.712C47.5718 20.776 47.6678 20.808 47.7745 20.808H57.4705C57.5772 20.808 57.6625 20.776 57.7265 20.712C57.8118 20.6267 57.8545 20.5307 57.8545 20.424V6.44H62.0465V20.584C62.0465 21.3947 61.8438 22.1307 61.4385 22.792C61.0545 23.4533 60.5318 23.9867 59.8705 24.392C59.2092 24.7973 58.4625 25 57.6305 25H47.6145ZM64.3285 25V1.96H85.5445V6.216H68.5845V11.336H82.2165V15.624H68.5845V25H64.3285ZM90.3655 25C89.5548 25 88.8188 24.7973 88.1575 24.392C87.4962 23.9867 86.9628 23.4533 86.5575 22.792C86.1522 22.1307 85.9495 21.3947 85.9495 20.584V10.856C85.9495 10.0453 86.1522 9.30933 86.5575 8.648C86.9628 7.98667 87.4962 7.45333 88.1575 7.048C88.8188 6.64267 89.5548 6.44 90.3655 6.44H100.381C101.192 6.44 101.928 6.64267 102.589 7.048C103.272 7.45333 103.805 7.98667 104.189 8.648C104.595 9.30933 104.797 10.0453 104.797 10.856V20.584C104.797 21.3947 104.595 22.1307 104.189 22.792C103.805 23.4533 103.283 23.9867 102.621 24.392C101.96 24.7973 101.213 25 100.381 25H90.3655ZM90.5255 20.808H100.221C100.328 20.808 100.413 20.776 100.477 20.712C100.563 20.6267 100.605 20.5307 100.605 20.424V11.016C100.605 10.9093 100.563 10.824 100.477 10.76C100.413 10.6747 100.328 10.632 100.221 10.632H90.5255C90.4188 10.632 90.3228 10.6747 90.2375 10.76C90.1735 10.824 90.1415 10.9093 90.1415 11.016V20.424C90.1415 20.5307 90.1735 20.6267 90.2375 20.712C90.3228 20.776 90.4188 20.808 90.5255 20.808ZM111.242 25C110.431 25 109.695 24.7973 109.034 24.392C108.372 23.9867 107.839 23.4533 107.434 22.792C107.028 22.1307 106.826 21.3947 106.826 20.584V10.856C106.826 10.0453 107.028 9.30933 107.434 8.648C107.839 7.98667 108.372 7.45333 109.034 7.048C109.695 6.64267 110.431 6.44 111.242 6.44H125.642V10.632H111.402C111.295 10.632 111.199 10.6747 111.114 10.76C111.05 10.824 111.018 10.9093 111.018 11.016V20.424C111.018 20.5307 111.05 20.6267 111.114 20.712C111.199 20.776 111.295 20.808 111.402 20.808H125.674V25H111.242ZM131.495 25C130.684 25 129.937 24.7973 129.254 24.392C128.593 23.9867 128.06 23.4533 127.654 22.792C127.27 22.1307 127.078 21.3947 127.078 20.584V6.44H131.271V20.424C131.271 20.5307 131.303 20.6267 131.366 20.712C131.452 20.776 131.548 20.808 131.655 20.808H141.351C141.457 20.808 141.543 20.776 141.607 20.712C141.692 20.6267 141.735 20.5307 141.735 20.424V6.44H145.927V20.584C145.927 21.3947 145.724 22.1307 145.319 22.792C144.935 23.4533 144.412 23.9867 143.75 24.392C143.089 24.7973 142.343 25 141.51 25H131.495ZM151.648 25C150.838 25 150.102 24.7973 149.44 24.392C148.779 23.9867 148.246 23.4533 147.84 22.792C147.435 22.1307 147.232 21.3947 147.232 20.584V19.88H151.424V20.424C151.424 20.5307 151.456 20.6267 151.52 20.712C151.606 20.776 151.702 20.808 151.808 20.808H161.504C161.611 20.808 161.696 20.776 161.76 20.712C161.846 20.6267 161.888 20.5307 161.888 20.424V18.216C161.888 18.1093 161.846 18.024 161.76 17.96C161.696 17.8747 161.611 17.832 161.504 17.832H151.648C150.838 17.832 150.102 17.6293 149.44 17.224C148.779 16.8187 148.246 16.2853 147.84 15.624C147.435 14.9627 147.232 14.2267 147.232 13.416V10.856C147.232 10.0453 147.435 9.30933 147.84 8.648C148.246 7.98667 148.779 7.45333 149.44 7.048C150.102 6.64267 150.838 6.44 151.648 6.44H161.664C162.496 6.44 163.243 6.64267 163.904 7.048C164.566 7.45333 165.099 7.98667 165.504 8.648C165.91 9.30933 166.112 10.0453 166.112 10.856V11.56H161.888V11.016C161.888 10.9093 161.846 10.824 161.76 10.76C161.696 10.6747 161.611 10.632 161.504 10.632H151.808C151.702 10.632 151.606 10.6747 151.52 10.76C151.456 10.824 151.424 10.9093 151.424 11.016V13.224C151.424 13.3307 151.456 13.4267 151.52 13.512C151.606 13.576 151.702 13.608 151.808 13.608H161.664C162.496 13.608 163.243 13.8107 163.904 14.216C164.566 14.6213 165.099 15.1547 165.504 15.816C165.91 16.4773 166.112 17.2133 166.112 18.024V20.584C166.112 21.3947 165.91 22.1307 165.504 22.792C165.099 23.4533 164.566 23.9867 163.904 24.392C163.243 24.7973 162.496 25 161.664 25H151.648Z" fill="black"/>
+</svg>

frontend/src/components/Header/Header.jsx

@@ -11,7 +11,10 @@ export default function Header() {
               to={'/'}
               className={styles.logo}
             >
-              Logo
+              <img
+                src="/src/assets/logo.svg"
+                alt="logo"
+              />
             </Link>
           </li>
           <li>

frontend/src/components/Header/Header.module.css

@@ -26,6 +26,10 @@
   box-sizing: border-box;
 }
 
+.logo {
+  display: flex;
+}
+
 .group {
   display: flex;
   align-items: center;

frontend/src/index.css

@@ -1,3 +1,11 @@
+@font-face {
+  font-family: 'Pretendard Variable';
+  font-weight: 45 920;
+  font-style: normal;
+  font-display: fallback;
+  src: url('./assets/fonts/PretendardVariable.woff2') format('woff2-variations');
+}
+
 :root {
   /* primitive colors */
   --black: #000;
@@ -142,16 +150,21 @@
 
 body {
   font-family:
+    'Pretendard Variable',
     Pretendard,
-    Pretendard Variable,
     -apple-system,
     BlinkMacSystemFont,
-    Apple SD Gothic Neo,
+    system-ui,
-    sans-serif,
+    Roboto,
-    Apple Color Emoji,
+    'Helvetica Neue',
-    Segoe UI Emoji,
+    'Segoe UI',
-    Segoe UI Symbol,
+    'Apple SD Gothic Neo',
-    Noto Color Emoji;
+    'Noto Sans KR',
+    'Malgun Gothic',
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    sans-serif;
   margin: 0;
   padding: 0;
 }