diff --git a/index.html b/index.html
index e4b78eae..b822ee43 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,10 @@
-
+
- Vite + React + TS
+ 비트
diff --git a/src/App.tsx b/src/App.tsx
index 46be228e..fbfe5894 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,31 +1,15 @@
-import { useState } from "react";
-import "./App.css";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
+import router from "./routes/Router";
+import { RouterProvider } from "react-router-dom";
+import theme from "./styles/theme";
+import GlobalStyle from "./styles/global";
+import { ThemeProvider } from "styled-components";
function App() {
- const [count, setCount] = useState(0);
- const [hi, setHi] = useState([]);
-
return (
- <>
-
- Vite + React
-
-
-
- Edit src/App.tsx and save to test HMR
-
-
Click on the Vite and React logos to learn more
-
+
+
+
+
);
}
diff --git a/src/main.tsx b/src/main.tsx
index 966f17a4..95e2bdc2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,6 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
-import "./index.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
index 4addc3a4..790cf867 100644
--- a/src/routes/Router.tsx
+++ b/src/routes/Router.tsx
@@ -1,6 +1,6 @@
import { createBrowserRouter } from "react-router-dom";
-export const router = createBrowserRouter([
+const router = createBrowserRouter([
// {
// path: "/A",
// element: ,
@@ -15,3 +15,4 @@ export const router = createBrowserRouter([
// },
// ...
]);
+export default router;
diff --git a/src/styles/.gitkeep b/src/styles/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/styles/generator.ts b/src/styles/generator.ts
index 58056c5c..5529dd66 100644
--- a/src/styles/generator.ts
+++ b/src/styles/generator.ts
@@ -1,11 +1,11 @@
import { css } from "styled-components";
export const Generators = {
- flexGenerator: (flexDirection = "row", justifyContent = "center", alignItems = "center") => css`
+ flexGenerator: (flexDirection = "row", alignItems = "center", justifyContent = "center") => css`
display: flex;
flex-direction: ${flexDirection};
- justify-content: ${justifyContent};
align-items: ${alignItems};
+ justify-content: ${justifyContent};
`,
fontGenerator: (
fontSize = "1.6rem",
diff --git a/src/styles/global.ts b/src/styles/global.ts
index 7745cc63..50c6f73a 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -8,39 +8,41 @@ const global = createGlobalStyle`
* {
box-sizing: border-box;
}
-
html {
+ font-size: 62.5%;
+
+ background-color: ${({ theme }) => theme.colors.black};
+
+ user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color:rgb(0 0 0 / 0%);
- scroll-behavior: smooth;
+ scroll-behavior: smooth;
+ }
+
- font-size: 62.5%;
- user-select: none;
- }
ul, li {
padding-left: 0;
+
list-style: none;
}
a {
color: inherit;
-
text-decoration: none;
}
input, button {
+ background-color: transparent;
outline: none;
-
border: none;
- background-color: transparent;
}
button {
- cursor: pointer;
-
padding: 0;
+
+ cursor: pointer;
}
input {
@@ -51,6 +53,17 @@ const global = createGlobalStyle`
}
}
+ /* 모바일뷰 세팅 */
+ body {
+ width: 375px;
+ min-height: 100%;
+ margin: 0 auto;
+ overflow-x: hidden;
+
+ background-color: ${({ theme }) => theme.colors.pink_400};
+ }
+
+
`;
export default global;