Merge pull request #267 from boostcampwm-2022/266-feat-favicon-추가-및-스…

…타일-디테일링 FEAT: favicon 추가 및 스타일 디테일링
boostcampwm-2022 · Dec 18, 2022 · c40b660 · c40b660
2 parents d618005 + d21c92b
commit c40b660
Show file tree

Hide file tree

Showing 30 changed files with 72 additions and 9 deletions.
diff --git a/client/index.html b/client/index.html
@@ -10,6 +10,23 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/public/android-icon-144x144.png b/client/public/android-icon-144x144.png
diff --git a/client/public/android-icon-192x192.png b/client/public/android-icon-192x192.png
diff --git a/client/public/android-icon-36x36.png b/client/public/android-icon-36x36.png
diff --git a/client/public/android-icon-48x48.png b/client/public/android-icon-48x48.png
diff --git a/client/public/android-icon-72x72.png b/client/public/android-icon-72x72.png
diff --git a/client/public/android-icon-96x96.png b/client/public/android-icon-96x96.png
diff --git a/client/public/apple-icon-114x114.png b/client/public/apple-icon-114x114.png
diff --git a/client/public/apple-icon-120x120.png b/client/public/apple-icon-120x120.png
diff --git a/client/public/apple-icon-144x144.png b/client/public/apple-icon-144x144.png
diff --git a/client/public/apple-icon-152x152.png b/client/public/apple-icon-152x152.png
diff --git a/client/public/apple-icon-180x180.png b/client/public/apple-icon-180x180.png
diff --git a/client/public/apple-icon-57x57.png b/client/public/apple-icon-57x57.png
diff --git a/client/public/apple-icon-60x60.png b/client/public/apple-icon-60x60.png
diff --git a/client/public/apple-icon-72x72.png b/client/public/apple-icon-72x72.png
diff --git a/client/public/apple-icon-76x76.png b/client/public/apple-icon-76x76.png
diff --git a/client/public/apple-icon-precomposed.png b/client/public/apple-icon-precomposed.png
diff --git a/client/public/apple-icon.png b/client/public/apple-icon.png
diff --git a/client/public/favicon-16x16.png b/client/public/favicon-16x16.png
diff --git a/client/public/favicon-32x32.png b/client/public/favicon-32x32.png
diff --git a/client/public/favicon-96x96.png b/client/public/favicon-96x96.png
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}
diff --git a/client/public/ms-icon-144x144.png b/client/public/ms-icon-144x144.png
diff --git a/client/public/ms-icon-150x150.png b/client/public/ms-icon-150x150.png
diff --git a/client/public/ms-icon-310x310.png b/client/public/ms-icon-310x310.png
diff --git a/client/public/ms-icon-70x70.png b/client/public/ms-icon-70x70.png
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -44,7 +44,7 @@ const TutorialRadialOverlay = styled.div`
     position: absolute;
     left: 10vh;
     bottom: 10vh;
-    font-size: 80px;
+    font-size: 52px;
     opacity: 0.7;
     font-family: 'Roboto';
     color: ${PRIMARY_COLORS.green};

diff --git a/client/src/components/tutorial/TutorialVideo.tsx b/client/src/components/tutorial/TutorialVideo.tsx
@@ -24,7 +24,8 @@ const StyledOverlay = styled.div`
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  background-color: ${PRIMARY_COLORS.white};
+  background-color: ${PRIMARY_COLORS.black};
+  opacity: 0.9;
   width: 100vw;
   height: 100vh;
   position: fixed;
@@ -33,11 +34,6 @@ const StyledOverlay = styled.div`
   bottom: 0;
   right: 0;
   z-index: 10;
-
-  & > video {
-    width: 80%;
-    height: 80%;
-  }
 `;
 
 const StyledCancelButton = styled(Button)`
@@ -47,6 +43,14 @@ const StyledCancelButton = styled(Button)`
   right: 0px;
 `;
 
+const StyledVideo = styled.video`
+  position: relative;
+  width: max-content;
+  height: max-content;
+  max-width: 80%;
+  max-height: 80%;
+`;
+
 export const TutorialVideo = ({
   setIsOver,
 }: {
@@ -73,12 +77,13 @@ export const TutorialVideo = ({
     <StyledOverlay>
       <StyledCancelButton context={<CancelIcon fill={PRIMARY_COLORS.blue} />} onClick={handleCancel} />
       <Title>{titleArray[currentIndex]}</Title>
-      <video
+      <StyledVideo
         src={videoSrcArray[currentIndex]}
         ref={ref}
         onEnded={onEnded}
         onLoadedMetadata={onLoadedMetadata}
         autoPlay
+        controls
       />
       <Dots slides={videoSrcArray} currentIndex={currentIndex} setCurrentIndex={setCurrentIndex} duration={duration} />
     </StyledOverlay>

diff --git a/client/src/container/Header.tsx b/client/src/container/Header.tsx
@@ -48,7 +48,7 @@ const Header = (): ReactElement => {
                 text="튜토리얼 끝내기"
                 color={PRIMARY_COLORS.red}
                 fontWeight={'700'}
-                fontSize={'24px'}
+                fontSize={'20px'}
                 fontFamily={'Nanum Myeongjo'}
               />
             }