[FE] client 디렉토리 reset, 전역 스타일 GlobalStyle을 사용하는 것으로 변경

client/package.json

@@ -20,7 +20,6 @@
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
-    "css-loader": "^7.1.2",
     "dotenv": "^16.4.5",
     "eslint": "^9.6.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -35,7 +34,6 @@
     "html-webpack-plugin": "^5.6.0",
     "modify-source-webpack-plugin": "^4.1.0",
     "prettier": "3.3.2",
-    "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
     "typescript": "^5.5.3",
     "typescript-eslint": "^7.16.0",
@@ -56,4 +54,4 @@
     "npm": ">=10.7.0",
     "node": ">=20.15.1"
   }
-}
+}

client/src/App.tsx

@@ -1,9 +1,13 @@
-import {HDesignProvider} from 'haengdong-design';
 import {Outlet} from 'react-router-dom';
+import {HDesignProvider} from 'haengdong-design';
+import {Global} from '@emotion/react';
+
+import {GlobalStyle} from './GlobalStyle';
 
 const App: React.FC = () => {
   return (
     <HDesignProvider>
+      <Global styles={GlobalStyle} />
       <Outlet />
     </HDesignProvider>
   );

client/src/GlobalStyle.ts

@@ -0,0 +1,157 @@
+import {css} from '@emotion/react';
+
+// reset css -> index css
+export const GlobalStyle = css`
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    vertical-align: baseline;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    font-size: 100%;
+    font: inherit;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  button {
+    cursor: pointer;
+    border: none;
+    background-color: transparent;
+  }
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    max-width: 768px;
+    height: 100lvh;
+    margin: 0 auto;
+
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  section {
+    width: 100%;
+  }
+
+  #root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+`;

client/src/index.tsx

@@ -3,8 +3,6 @@ import ReactDOM from 'react-dom/client';
 import {RouterProvider} from 'react-router-dom';
 
 import router from './router';
-import './reset.css';
-import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

client/webpack.config.js

@@ -38,10 +38,6 @@ export default {
         loader: 'ts-loader',
         exclude: /node_modules/,
       },
-      {
-        test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
-      },
       {
         test: /\.svg$/,
         use: [