Merge pull request #12 from TeamRecorDream/feat/#2-style

[전체] 뷰 스타일 구현
TeamRecorDream · May 10, 2024 · bbfe694 · bbfe694
2 parents c0466d9 + 3a9a6df
commit bbfe694
Show file tree

Hide file tree

Showing 30 changed files with 417 additions and 50 deletions.
diff --git a/public/svg/ic_feeling_L_blank.svg b/public/svg/ic_feeling_L_blank.svg
diff --git a/public/svg/pc_Kakaotalk.svg → public/svg/ic_pc_Kakaotalk.svg b/public/svg/pc_Kakaotalk.svg → public/svg/ic_pc_Kakaotalk.svg
diff --git a/public/svg/pc_backgr_halfstars.svg → public/svg/ic_pc_backgr_halfstars.svg b/public/svg/pc_backgr_halfstars.svg → public/svg/ic_pc_backgr_halfstars.svg
diff --git a/public/svg/pc_backgr_stars.svg → public/svg/ic_pc_backgr_stars.svg b/public/svg/pc_backgr_stars.svg → public/svg/ic_pc_backgr_stars.svg
diff --git a/public/svg/pc_blank.svg → public/svg/ic_pc_blank.svg b/public/svg/pc_blank.svg → public/svg/ic_pc_blank.svg
diff --git a/public/svg/pc_logo.svg → public/svg/ic_pc_logo.svg b/public/svg/pc_logo.svg → public/svg/ic_pc_logo.svg
diff --git a/public/svg/pc_recordream.svg → public/svg/ic_pc_recordream.svg b/public/svg/pc_recordream.svg → public/svg/ic_pc_recordream.svg
diff --git a/public/svg/kakao.svg b/public/svg/kakao.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,21 +1,29 @@
 import { RouterProvider } from "react-router-dom";
-import styled from "styled-components";
+import styled, { ThemeProvider } from "styled-components";
 import router from "./router/Router";
 import GlobalStyle from "./style/GlobalStyle";
-import { IcPcBackgrStars } from "./assets/svg/index";
+import theme from "./style/theme";
 
 function App() {
   return (
     <AppWrapper>
-      <RouterProvider router={router} />
-      <GlobalStyle />
+      <ThemeProvider theme={theme}>
+        <GlobalStyle />
+        <RouterProvider router={router} />
+      </ThemeProvider>
     </AppWrapper>
   );
 }
 
 export default App;
 
-const AppWrapper = styled(IcPcBackgrStars)`
+const AppWrapper = styled.div`
+  position: relative;
+
+  max-width: var(--app-max-width, 375px);
+  min-height: calc(var(--vh, 1vh) * 100);
+  margin-right: auto;
+  margin-left: auto;
+
   border: none;
-  object-fit: cover;
 `;
diff --git a/src/assets/svg/IcFeelingLBlank.tsx b/src/assets/svg/IcFeelingLBlank.tsx
@@ -0,0 +1,33 @@
+import type { SVGProps } from "react";
+const SvgIcFeelingLBlank = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128" {...props}>
+    <g clipPath="url(#ic_feeling_L_blank_svg__a)">
+      <path
+        fill="#fff"
+        d="m62.476 7.65 2.463 20.766c2.125 17.905 16.242 32.022 34.147 34.146l20.765 2.464-20.765 2.464C81.18 69.614 67.064 83.73 64.939 101.636l-2.463 20.765-2.464-20.765C57.887 83.731 43.77 69.614 25.866 67.49L5.1 65.026l20.765-2.464c17.904-2.124 32.021-16.241 34.146-34.146z"
+      />
+      <g filter="url(#ic_feeling_L_blank_svg__b)">
+        <circle cx={62.476} cy={65.025} r={20.655} fill="#fff" />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="ic_feeling_L_blank_svg__a">
+        <path fill="#fff" d="M0 0h128v128H0z" />
+      </clipPath>
+      <filter
+        id="ic_feeling_L_blank_svg__b"
+        width={134.319}
+        height={134.32}
+        x={-4.684}
+        y={-2.135}
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur result="effect1_foregroundBlur_2469_1097" stdDeviation={23.252} />
+      </filter>
+    </defs>
+  </svg>
+);
+export default SvgIcFeelingLBlank;
diff --git a/src/assets/svg/IcKakao.tsx b/src/assets/svg/IcKakao.tsx
@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+const SvgKakao = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18" {...props}>
+    <g clipPath="url(#kakao_svg__a)">
+      <path
+        fill="#000"
+        fillRule="evenodd"
+        d="M9 .6C4.03.6 0 3.713 0 7.552c0 2.388 1.558 4.493 3.932 5.745l-.999 3.648c-.088.322.28.579.563.392l4.377-2.889q.555.056 1.127.057c4.97 0 9-3.113 9-6.953C18 3.713 13.97.6 9 .6"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="kakao_svg__a">
+        <path fill="#fff" d="M0 0h18v18H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgKakao;
diff --git a/src/assets/svg/PcBackgrHalfstars.tsx → src/assets/svg/IcPcBackgrHalfstars.tsx b/src/assets/svg/PcBackgrHalfstars.tsx → src/assets/svg/IcPcBackgrHalfstars.tsx
@@ -1,17 +1,17 @@
 import type { SVGProps } from "react";
-const SvgPcBackgrHalfstars = (props: SVGProps<SVGSVGElement>) => (
+const SvgIcPcBackgrHalfstars = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1920 1080" {...props}>
-    <g clipPath="url(#pc_backgr_halfstars_svg__a)">
+    <g clipPath="url(#ic_pc_backgr_halfstars_svg__a)">
       <path fill="#02040F" d="M0 0h1920v1080H0z" />
       <g fill="#fff" opacity={0.6}>
         <path d="m266.5 202 .247 3.253 3.253.247-3.253.247L266.5 209l-.247-3.253L263 205.5l3.253-.247zM45 243l.283 3.717L49 247l-3.717.283L45 251l-.283-3.717L41 247l3.717-.283zM92.5 116l.248 3.253L96 119.5l-3.252.247L92.5 123l-.248-3.253L89 119.5l3.252-.247zM224.5 103l.389 5.111 5.111.389-5.111.389L224.5 114l-.389-5.111L219 108.5l5.111-.389zM150.5 42l.389 5.111L156 47.5l-5.111.389L150.5 53l-.389-5.111L145 47.5l5.111-.389zM141 209l.424 5.576L147 215l-5.576.424L141 221l-.424-5.576L135 215l5.576-.424zM373.5 192l.46 6.04 6.04.46-6.04.46-.46 6.04-.46-6.04-6.04-.46 6.04-.46zM41 53l.283 3.717L45 57l-3.717.283L41 61l-.283-3.717L37 57l3.717-.283zM353.5 251l.318 4.182 4.182.318-4.182.318L353.5 260l-.318-4.182L349 255.5l4.182-.318zM284.5 54l.318 4.182L289 58.5l-4.182.318L284.5 63l-.318-4.182L280 58.5l4.182-.318zM332.5 146l.318 4.182 4.182.318-4.182.318L332.5 155l-.318-4.182L328 150.5l4.182-.318zM535.5 202l.247 3.253 3.253.247-3.253.247L535.5 209l-.247-3.253L532 205.5l3.253-.247zM314 243l.283 3.717L318 247l-3.717.283L314 251l-.283-3.717L310 247l3.717-.283zM361.5 116l.247 3.253 3.253.247-3.253.247L361.5 123l-.247-3.253L358 119.5l3.253-.247zM493.5 103l.389 5.111 5.111.389-5.111.389L493.5 114l-.389-5.111L488 108.5l5.111-.389zM419.5 42l.389 5.111L425 47.5l-5.111.389L419.5 53l-.389-5.111L414 47.5l5.111-.389zM410 209l.424 5.576L416 215l-5.576.424L410 221l-.424-5.576L404 215l5.576-.424zM642.5 192l.46 6.04 6.04.46-6.04.46-.46 6.04-.46-6.04-6.04-.46 6.04-.46zM310 53l.283 3.717L314 57l-3.717.283L310 61l-.283-3.717L306 57l3.717-.283zM622.5 251l.318 4.182 4.182.318-4.182.318L622.5 260l-.318-4.182L618 255.5l4.182-.318zM553.5 54l.318 4.182L558 58.5l-4.182.318L553.5 63l-.318-4.182L549 58.5l4.182-.318zM601.5 146l.318 4.182 4.182.318-4.182.318L601.5 155l-.318-4.182L597 150.5l4.182-.318zM866.5 202l.247 3.253 3.253.247-3.253.247L866.5 209l-.247-3.253L863 205.5l3.253-.247zM645 243l.283 3.717L649 247l-3.717.283L645 251l-.283-3.717L641 247l3.717-.283zM692.5 116l.247 3.253 3.253.247-3.253.247L692.5 123l-.247-3.253L689 119.5l3.253-.247zM824.5 103l.389 5.111 5.111.389-5.111.389L824.5 114l-.389-5.111L819 108.5l5.111-.389zM750.5 42l.389 5.111L756 47.5l-5.111.389L750.5 53l-.389-5.111L745 47.5l5.111-.389zM741 209l.424 5.576L747 215l-5.576.424L741 221l-.424-5.576L735 215l5.576-.424zM973.5 192l.46 6.04 6.04.46-6.04.46-.46 6.04-.46-6.04-6.04-.46 6.04-.46zM641 53l.283 3.717L645 57l-3.717.283L641 61l-.283-3.717L637 57l3.717-.283zM953.5 251l.318 4.182 4.182.318-4.182.318L953.5 260l-.318-4.182L949 255.5l4.182-.318zM884.5 54l.318 4.182L889 58.5l-4.182.318L884.5 63l-.318-4.182L880 58.5l4.182-.318zM932.5 146l.318 4.182 4.182.318-4.182.318L932.5 155l-.318-4.182L928 150.5l4.182-.318zM1186.5 202l.25 3.253 3.25.247-3.25.247-.25 3.253-.25-3.253-3.25-.247 3.25-.247zM965 243l.283 3.717L969 247l-3.717.283L965 251l-.283-3.717L961 247l3.717-.283zM1012.5 116l.25 3.253 3.25.247-3.25.247-.25 3.253-.25-3.253-3.25-.247 3.25-.247zM1144.5 103l.39 5.111 5.11.389-5.11.389-.39 5.111-.39-5.111-5.11-.389 5.11-.389zM1070.5 42l.39 5.111 5.11.389-5.11.389-.39 5.111-.39-5.111-5.11-.389 5.11-.389zM1061 209l.42 5.576 5.58.424-5.58.424L1061 221l-.42-5.576L1055 215l5.58-.424zM1293.5 192l.46 6.04 6.04.46-6.04.46-.46 6.04-.46-6.04-6.04-.46 6.04-.46zM961 53l.283 3.717L965 57l-3.717.283L961 61l-.283-3.717L957 57l3.717-.283zM1273.5 251l.32 4.182 4.18.318-4.18.318-.32 4.182-.32-4.182-4.18-.318 4.18-.318zM1204.5 54l.32 4.182 4.18.318-4.18.318-.32 4.182-.32-4.182-4.18-.318 4.18-.318zM1252.5 146l.32 4.182 4.18.318-4.18.318-.32 4.182-.32-4.182-4.18-.318 4.18-.318zM1466.5 202l.25 3.253 3.25.247-3.25.247-.25 3.253-.25-3.253-3.25-.247 3.25-.247zM1245 243l.28 3.717 3.72.283-3.72.283L1245 251l-.28-3.717L1241 247l3.72-.283zM1292.5 116l.25 3.253 3.25.247-3.25.247-.25 3.253-.25-3.253-3.25-.247 3.25-.247zM1424.5 103l.39 5.111 5.11.389-5.11.389-.39 5.111-.39-5.111-5.11-.389 5.11-.389zM1350.5 42l.39 5.111 5.11.389-5.11.389-.39 5.111-.39-5.111-5.11-.389 5.11-.389zM1341 209l.42 5.576 5.58.424-5.58.424L1341 221l-.42-5.576L1335 215l5.58-.424zM1573.5 192l.46 6.04 6.04.46-6.04.46-.46 6.04-.46-6.04-6.04-.46 6.04-.46zM1241 53l.28 3.717L1245 57l-3.72.283L1241 61l-.28-3.717L1237 57l3.72-.283zM1553.5 251l.32 4.182 4.18.318-4.18.318-.32 4.182-.32-4.182-4.18-.318 4.18-.318zM1484.5 54l.32 4.182 4.18.318-4.18.318-.32 4.182-.32-4.182-4.18-.318 4.18-.318zM1532.5 146l.32 4.182 4.18.318-4.18.318-.32 4.182-.32-4.182-4.18-.318 4.18-.318zM1827.5 202l.25 3.253 3.25.247-3.25.247-.25 3.253-.25-3.253-3.25-.247 3.25-.247zM1606 243l.28 3.717 3.72.283-3.72.283L1606 251l-.28-3.717L1602 247l3.72-.283zM1653.5 116l.25 3.253 3.25.247-3.25.247-.25 3.253-.25-3.253-3.25-.247 3.25-.247zM1785.5 103l.39 5.111 5.11.389-5.11.389-.39 5.111-.39-5.111-5.11-.389 5.11-.389zM1711.5 42l.39 5.111 5.11.389-5.11.389-.39 5.111-.39-5.111-5.11-.389 5.11-.389zM1702 209l.42 5.576 5.58.424-5.58.424L1702 221l-.42-5.576L1696 215l5.58-.424zM1934.5 192l.46 6.04 6.04.46-6.04.46-.46 6.04-.46-6.04-6.04-.46 6.04-.46zM1602 53l.28 3.717L1606 57l-3.72.283L1602 61l-.28-3.717L1598 57l3.72-.283zM1914.5 251l.32 4.182 4.18.318-4.18.318-.32 4.182-.32-4.182-4.18-.318 4.18-.318zM1845.5 54l.32 4.182 4.18.318-4.18.318-.32 4.182-.32-4.182-4.18-.318 4.18-.318zM1893.5 146l.32 4.182 4.18.318-4.18.318-.32 4.182-.32-4.182-4.18-.318 4.18-.318z" />
       </g>
     </g>
     <defs>
-      <clipPath id="pc_backgr_halfstars_svg__a">
+      <clipPath id="ic_pc_backgr_halfstars_svg__a">
         <path fill="#fff" d="M0 0h1920v1080H0z" />
       </clipPath>
     </defs>
   </svg>
 );
-export default SvgPcBackgrHalfstars;
+export default SvgIcPcBackgrHalfstars;