✨ Add first page view

milideal · Sep 19, 2023 · c92e4d2 · c92e4d2
1 parent f061d82
commit c92e4d2
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 76 deletions.
diff --git a/index.html b/index.html
@@ -3,15 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="theme-color" content="#557153" />
-    <link rel="icon" href="icons/favicon-196x196.png" type="image/png" />
-    <link rel="alternate icon" href="/favicon.ico" type="ico" sizes="16x16" />
+    <link rel="icon" href="icons/favicon-96x96.png" type="image/png" />
+    <link rel="alternate icon" href="icons/favicon.ico" type="ico" sizes="16x16" />
     <link rel="apple-touch-icon" href="icons/apple-touch-icon-152x152.png" sizes="180x180" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="manifest" href="/manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>
-  <body>
+  <body class="pack">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
     <script>

diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "6.16.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,34 +1,11 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { Route, Routes } from 'react-router-dom';
+import Menu from "./pages/Menu";
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <Routes>
+      <Route path="/" element = {<Menu />} />
+    </Routes>
   )
 }
 

diff --git a/src/assets/etc-72x72.png b/src/assets/etc-72x72.png
diff --git a/src/assets/food-72x72.png b/src/assets/food-72x72.png
diff --git a/src/assets/home-72x72.png b/src/assets/home-72x72.png
diff --git a/src/assets/movie-72x72.png b/src/assets/movie-72x72.png
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,10 +1,15 @@
+import "@adorable.css"
+
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+import { BrowserRouter } from 'react-router-dom';
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 )
diff --git a/src/pages/Menu.tsx b/src/pages/Menu.tsx
@@ -0,0 +1,37 @@
+import sleepImg from "../assets/home-72x72.png";
+import foodImg from "../assets/food-72x72.png";
+import movieImg from "../assets/movie-72x72.png";
+import etcImg from "../assets/etc-72x72.png";
+
+const Menu = () => {
+  return <div className="vbox ml(30) mr(30)">
+    <div className="vbox">
+      <span className="font(32) 900 c(#363636)">총 1,214개의<br/> 군인 할인점들이 있어요.</span>
+      <span className="font(16) 900 c(#999999)">23.09.19 업데이트</span>
+    </div>
+    <div className="wrap gap(10) w(370) mt(24)">
+      <div className="vbox pack w(180) h(180) r(5) b(1/#D9D9D9) box-shadow(0/0/20/#000.1)">
+        <img src={sleepImg} />
+        <span className="font(16) 900 c(#363636)">숙박시설</span>
+      </div>
+      <div className="vbox pack w(180) h(180) r(5) b(1/#D9D9D9) box-shadow(0/0/20/#000.1)">
+        <img src={foodImg} />
+        <span className="font(16) 900 c(#363636)">식당</span>
+      </div>
+      <div className="vbox pack w(180) h(180) r(5) b(1/#D9D9D9) box-shadow(0/0/20/#000.1)">
+        <img src={movieImg} />
+        <span className="font(16) 900 c(#363636)">문화시설</span>
+      </div>
+      <div className="vbox pack w(180) h(180) r(5) b(1/#D9D9D9) box-shadow(0/0/20/#000.1)">
+        <img src={etcImg} />
+        <span className="font(16) 900 c(#363636)">기타</span>
+      </div>
+      <div className="vbox w(370) r(5) b(1/#D9D9D9) box-shadow(0/0/20/#000.1) pl(24) pt(28) pb(28)">
+        <span className="font(14) 900 c(#363636)">할인점 추가하기</span>
+        <span className="font(14) 900 c(#999999)">군인 장병들에게 잊지 못할 경험을 선물하세요.</span>
+      </div>
+    </div>
+  </div>
+}
+
+export default Menu;
diff --git a/yarn.lock b/yarn.lock
@@ -221,6 +221,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@remix-run/[email protected]":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.9.0.tgz#9033238b41c4cbe1e961eccb3f79e2c588328cf6"
+  integrity sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==
+
 "@swc/[email protected]":
   version "1.3.83"
   resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.83.tgz#eaeafce9bc9b8fce7d7c3d872b160b7660db8149"
@@ -1270,6 +1275,21 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+[email protected]:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.16.0.tgz#86f24658da35eb66727e75ecbb1a029e33ee39d9"
+  integrity sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==
+  dependencies:
+    "@remix-run/router" "1.9.0"
+    react-router "6.16.0"
+
+[email protected]:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.16.0.tgz#abbf3d5bdc9c108c9b822a18be10ee004096fb81"
+  integrity sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==
+  dependencies:
+    "@remix-run/router" "1.9.0"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"