Merge pull request #5 from peauty/feature/PEAUTY-32

[PEAUTY-31] 글로벌 스타일 추가 적용
peauty · Nov 18, 2024 · 088afb1 · 088afb1
2 parents 4b84a5b + a523b11
commit 088afb1
Show file tree

Hide file tree

Showing 17 changed files with 4,544 additions and 6,403 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="kr">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/svg/favicon.svg" />
     <link type="text/css" rel="stylesheet" href="./src/reset.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>애견 미용의 기준 PEAUTY</title>

diff --git a/src/assets/fonts/Pretendard-Medium.subset.woff b/src/assets/fonts/Pretendard-Medium.subset.woff
diff --git a/src/assets/fonts/Pretendard-Regular.subset.woff b/src/assets/fonts/Pretendard-Regular.subset.woff
diff --git a/src/assets/fonts/Pretendard-SemiBold.subset.woff b/src/assets/fonts/Pretendard-SemiBold.subset.woff
diff --git a/src/global-style.ts b/src/global-style.ts
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
-import GlobalStyle from "./global-style";
+import GlobalStyle from "../src/style/global-style";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

diff --git a/src/page/main/index.styles.ts b/src/page/main/index.styles.ts
@@ -0,0 +1 @@
+//index.styles.ts
diff --git a/src/page/main/index.tsx b/src/page/main/index.tsx
@@ -0,0 +1 @@
+//main indexedDB.tsx
diff --git a/src/page/my-page/index.styles.ts b/src/page/my-page/index.styles.ts
@@ -0,0 +1 @@
+//index.styles.ts
diff --git a/src/page/my-page/index.tsx b/src/page/my-page/index.tsx
@@ -0,0 +1 @@
+//index.tsx
diff --git a/src/style/color.ts b/src/style/color.ts
@@ -0,0 +1,24 @@
+export const colors = {
+    white: '#ffffff',
+    black: '#000000',
+
+    black100: '#262626',
+
+    gray100: '#f6f6f6',
+    gray200: '#d9d9d9',
+    gray300: '#aeaeae',
+
+    blue100: 'rgba(87, 123, 254, 0.1)',
+    blue200: '#577BFE',
+
+    red100: '#ffd4d4',
+    red200: '#ffb4b4',
+    red300: '#fa2626',
+
+    kakaoBackground: '#f6e24b',
+
+    grayOpacity100: 'rgba(0, 0, 0, 0.1)',
+    grayOpacity200: 'rgba(0, 0, 0, 0.2)',
+    grayOpacity300: 'rgba(0, 0, 0, 0.6)',
+  } as const;
+
diff --git a/src/style/fonts.css b/src/style/fonts.css
@@ -0,0 +1,26 @@
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 600;
+  font-display: swap;
+  src:
+    local('Pretendard SemiBold'),
+    url('../assets/fonts/Pretendard-SemiBold.subset.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Pretendard Medium'),
+    url('../assets/fonts/Pretendard-Medium.subset.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Pretendard Regular'),
+    url('../assets/fonts/Pretendard-Regular.subset.woff') format('woff');
+}
diff --git a/src/style/global-style.ts b/src/style/global-style.ts
@@ -0,0 +1,80 @@
+import { createGlobalStyle } from "styled-components";
+import theme from "./theme";
+import "./normalize.css";
+import "./fonts.css";
+
+const GlobalStyle = createGlobalStyle`
+  :root {
+    font-family: 'Pretendard Variable', 'Pretendard', '-apple-system', 'BlinkMacSystemFont',
+      'system-ui', 'Roboto', 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR',
+      'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'sans-serif';
+    color: ${theme.colors.black100};
+    background-color: ${theme.colors.gray100};   
+  }
+
+  * {
+    box-sizing: border-box;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    font-family: inherit;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  *::before,
+  *::after {
+    box-sizing: border-box !important;
+  }
+
+  html{
+    margin: 0;
+	  padding: 0;
+	  border: 0;
+    display: flex;
+    justify-content: center;
+}
+  body {
+    width: 100%;
+    height: 100%;
+    padding: 0 25px;
+    overscroll-behavior: none;
+    background-color: ${theme.colors.white};
+    max-width: ${theme.size.maxWidth};
+    min-width: ${theme.size.minWidth};
+    margin: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  a {
+    outline: none;
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  button {
+    outline: none;
+    border: none;
+    cursor: pointer;
+    background: none;
+    padding-block: 0;
+    padding-inline: 0;
+  }
+
+  textarea {
+    border: none;
+    resize: none;
+    outline: none;
+  }
+
+  input {
+    outline: none;
+    border: none;
+    background: none;
+  }
+`;
+
+export default GlobalStyle;