feat: 기타 수정, icon 및 폰트 cdn 변경

g-magazine-hackaton · Dec 6, 2023 · e0bbfc3 · e0bbfc3
1 parent 8a555c4
commit e0bbfc3
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -2,36 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/react.svg" />
+    <link rel="icon" type="image/svg+xml" href="/gmarket.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>로켓지송 프론트엔드</title>
+    <title>G-Magazine</title>
     <link
       rel="stylesheet"
       as="style"
       crossorigin="anonymous"
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"
     />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-      href="/fonts/GmarketSansBold.woff2"
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-      href="/fonts/GmarketSansMedium.woff2"
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-      href="/fonts/GmarketSansLight.woff2"
-    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/gmarket.ico b/public/gmarket.ico
diff --git a/public/plus.png b/public/plus.png
diff --git a/public/react.svg b/public/react.svg
diff --git a/src/apis/magazine.ts b/src/apis/magazine.ts
@@ -6,7 +6,7 @@ export type GoodsInfo = {
   goodsName: string;
   goodsPhotoUrl: string;
   goodsPrice: number;
-  goodsSelectedOption: string;
+  goodsOption: string;
 };
 
 export const getGoods = async () => {

diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
@@ -110,7 +110,6 @@ const Navbar = () => {
   const navigate = useNavigate();
   const title = useAtomValue(titleAtom);
   const [isScrollTop, setIsScrollTop] = useState(true);
-  console.log(title);
 
   // 상세 네비바 사용
   const showTitle = !![

diff --git a/src/components/ui/mazagine/SelectPopup.tsx b/src/components/ui/mazagine/SelectPopup.tsx
@@ -99,19 +99,13 @@ const SelectPopup = ({ onSelect, onClose }) => {
       <div css={popupStyle}>
         <div css={popupInnerStyle}>
           <div className="popup-header">
-            <span>매거진 상품 선택</span>
+            <span>내 구매 목록</span>
             <IoMdClose className="close-icon" onClick={onClose} />
           </div>
           <div className="popup-body">
             <ul css={itemInfoListStyle}>
               {goods?.map(
-                ({
-                  id,
-                  goodsName,
-                  goodsPhotoUrl,
-                  goodsPrice,
-                  goodsSelectedOption,
-                }) => {
+                ({ id, goodsName, goodsPhotoUrl, goodsPrice, goodsOption }) => {
                   const imageUrl = goodsPhotoUrl.split(',')[0];
                   return (
                     <li key={id} css={itemInfoWrapStyle}>
@@ -135,7 +129,7 @@ const SelectPopup = ({ onSelect, onClose }) => {
                             goodsName,
                             goodsPhotoUrl: imageUrl,
                             goodsPrice,
-                            goodsSelectedOption,
+                            goodsOption,
                           });
                         }}
                       >

diff --git a/src/components/ui/my-page/scrap-sheet.tsx b/src/components/ui/my-page/scrap-sheet.tsx
@@ -31,6 +31,7 @@ const SectionTitle = styled.div`
   margin-bottom: 8px;
   text-align: center;
   padding: 8px 0;
+  font-family: Gmarket Sans;
 `;
 
 const ImageWarp = styled.div`

diff --git a/src/pages/magazine/write.tsx b/src/pages/magazine/write.tsx
@@ -234,7 +234,7 @@ const MagazineWrite = () => {
     goodsPhotoUrl,
     goodsName,
     goodsPrice = 0,
-    goodsSelectedOption,
+    goodsOption,
   } = selectedItemData || {};
   const isWriteAvailable =
     images.length > 0 && content && folder && selectedItemData;
@@ -330,12 +330,10 @@ const MagazineWrite = () => {
                   <p className="item-price">
                     {formatNumber(goodsPrice)}
                     <span className="item-price-unit">원</span>
-                    {goodsSelectedOption && (
-                      <p className="item-option">
-                        선택 옵션 : {goodsSelectedOption}
-                      </p>
-                    )}
                   </p>
+                  {goodsOption && (
+                    <p className="item-option">선택 옵션 : {goodsOption}</p>
+                  )}
                 </>
               ) : (
                 <p style={{ textAlign: 'center' }}>상품을 선택해 주세요</p>

diff --git a/src/pages/rank.tsx b/src/pages/rank.tsx
@@ -78,6 +78,7 @@ const RankItem = styled.li`
   display: flex;
   align-items: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-family: Gmarket Sans;
 `;
 
 const UserName = styled.span`

diff --git a/src/pages/subscribe.tsx b/src/pages/subscribe.tsx
@@ -79,6 +79,7 @@ const SubscribeItem = styled.li`
   display: flex;
   align-items: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-family: Gmarket Sans;
 `;
 
 const ProfileImage = styled.img`

diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -1,6 +1,29 @@
 import { css } from '@emotion/react';
 
+const fontFace = `
+  @font-face {
+    font-family: 'GmarketSans';
+    font-weight: 500;
+    font-style: normal;
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.ttf') format("truetype");
+    font-display: swap;
+  } 
+  @font-face {
+    font-family: 'GmarketSans';
+    font-weight: 700;
+    font-style: normal;
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.ttf') format("truetype");
+    font-display: swap;
+  }
+`;
+
 const globalStyle = css`
+  ${fontFace}
+
   body {
     color: #111;
     font-size: 14px;