feat: add style settings (#29)

* feat: add fonts file

* feat: add global.css and apply to _app.tsx

* feat: add color contstant file

* feat: add media query constant file

* feat: add styles constant index file

* feat: update Test file

src/components/common/Test/Test.tsx

@@ -4,6 +4,11 @@ interface Props {
   text?: string;
 }
 
-const Test = ({ text }: Props) => <p className={styles.text}>{text}</p>;
+const Test = ({ text }: Props) => (
+  <div>
+    <p className={styles.text}>{text}</p>
+    <p className={`${styles.text} hipi`}>{text}</p>
+  </div>
+);
 
 export default Test;

src/constants/styles/color.ts

@@ -0,0 +1,21 @@
+export const COLORS = {
+  primary: {
+    red: '#EA4335',
+    yellow: '#FBBC04',
+    green: '#0F9D58',
+    blue: '#4285F4',
+  },
+  grayscale: {
+    white: '#FFFFFF',
+    gray1: '#F3F5F7',
+    gray2: '#ECEEF0',
+    gray3: '#E2E5E8',
+    gray4: '#D4D8DC',
+    gray5: '#B5B9BD',
+    gray6: '#8E9398',
+    gray7: '#505458',
+    gray8: '#3A3D40',
+    gray9: '#252729',
+    black: '#101112',
+  },
+};

src/constants/styles/index.ts

@@ -0,0 +1,2 @@
+export * from './color';
+export * from './mediaQuery';

src/constants/styles/mediaQuery.ts

@@ -0,0 +1,10 @@
+const BREAK_POINTS = [800, 1280] as const;
+
+/**
+ * media query 적용 기준 값
+ */
+export const MEDIA_QUERY = {
+  mobile: `screen and (max-width: ${BREAK_POINTS[0]}px)`,
+  tablet: `screen and (min-width: ${BREAK_POINTS[0]}px) and (max-width: ${BREAK_POINTS[1]}px)`,
+  pc: `screen and (min-width: ${BREAK_POINTS[1]}px )`,
+} as const;

src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import type { AppProps } from 'next/app';
+import './global.css';
 
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;

src/pages/global.css

@@ -0,0 +1,26 @@
+@font-face {
+  font-family: 'SUIT Variable';
+  font-weight: 100 900;
+  src: url('../assets/fonts/SUIT-Variable.woff2') format('woff2-variations');
+}
+
+@font-face {
+  font-family: 'Nanum BaReunHiPi';
+  font-weight: 100 900;
+  src: url('../assets/fonts/Nanum-BaReunHiPi.woff2') format('woff2-variations');
+}
+
+*,
+*:before,
+*:after {
+  font-family: 'SUIT Variable';
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.hipi {
+  font-family: 'Nanum BaReunHiPi';
+}