Const-Project · BeanMouse · Jan 12, 2025 · Jan 7, 2025 · Jan 11, 2025 · Jan 11, 2025
diff --git a/eslint.config.js b/eslint.config.js
@@ -19,6 +19,7 @@ export default [
     rules: {
       "react/react-in-jsx-scope": "off", // React 17 이상에서는 불필요
       "react/jsx-no-target-blank": ["error", { allowReferrer: true }], // 보안 문제 해결
+      "@typescript-eslint/no-explicit-any": "off",
     },
   },
 ];
diff --git a/index.html b/index.html
@@ -1,10 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=bff3c52558fe4cd34c69e2a59382c92c"
+    ></script>
+    <title>혼비니</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "@emotion/styled": "^11.14.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.4.0"
+    "react-icons": "^5.4.0",
+    "react-router-dom": "^7.1.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,34 +1,19 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import HomePage from "./components/pages/Homepage.tsx";
+import NavBar from "./components/nav/NavBar.tsx";
+import GlobalStyle from "./components/style/GlobalStyle.tsx";
 
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
-    <>
-      <div>
-        <a href="https://vite.dev">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev">
-          <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>
-    </>
+    <div>
+      <GlobalStyle />
+      <BrowserRouter>
+        <NavBar />
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+        </Routes>
+      </BrowserRouter>
+    </div>
   );
 }
 

diff --git a/src/components/Building.tsx b/src/components/Building.tsx
@@ -0,0 +1,22 @@
+import styled from "@emotion/styled";
+
+const Container = styled.div`
+  position: relative;
+  padding: 45px;
+  overflow: hidden;
+`;
+const Title = styled.div`
+  width: 300px;
+  font-size: 30px;
+  font-weight: 600;
+`;
+const Building = () => {
+  return (
+    <>
+      <Container>
+        <Title>홍익대학교</Title>
+      </Container>
+    </>
+  );
+};
+export default Building;
diff --git a/src/components/HomeBoard.tsx b/src/components/HomeBoard.tsx
@@ -0,0 +1,94 @@
+import styled from "@emotion/styled";
+import { useState } from "react";
+import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
+import Building from "./Building";
+interface PanelProps {
+  isOpen: boolean;
+}
+const Container = styled.div`
+  overflow: hidden;
+  top: 0px;
+`;
+const MarkList = styled.ul`
+  position: absolute;
+  display: flex;
+  flex-direction: vertical;
+  left: 100%;
+  top: 15px;
+  margin-left: 30px;
+  gap: 12px;
+`;
+const Panel = styled.div<PanelProps>`
+  position: absolute;
+  top: 0;
+  height: 100vh;
+  background: white;
+  z-index: 100;
+  width: ${({ isOpen }) => (isOpen ? "400px" : "0px")};
+  transition: width 0.3s ease-out;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
+`;
+const Mark = styled.button`
+  background: white;
+  width: 120px;
+  height: 40px;
+  border-radius: 20px;
+  font-size: 15px;
+  border: none;
+  cursor: pointer;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+  padding: 10px;
+`;
+const Button = styled.button`
+  position: absolute;
+  background: white;
+  border: 1px solid rgb(234, 234, 234);
+  width: 25px;
+  height: 50px;
+  top: 50%;
+  left: 100%;
+  border-radius: 0 10px 10px 0;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 17px;
+`;
+
+const HomeBoard: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+  return (
+    <>
+      <Panel isOpen={isOpen}>
+        <MarkList>
+          <li>
+            <Mark> 화장실</Mark>
+          </li>
+          <li>
+            <Mark>정수기</Mark>
+          </li>
+          <li>
+            <Mark>카페</Mark>
+          </li>
+        </MarkList>
+        <Button onClick={toggleMenu}>
+          {!isOpen ? (
+            <>
+              <IoIosArrowForward />
+            </>
+          ) : (
+            <>
+              <IoIosArrowBack />
+            </>
+          )}
+        </Button>
+        <Container>
+          <Building />
+        </Container>
+      </Panel>
+    </>
+  );
+};
+
+export default HomeBoard;
diff --git a/src/components/map/Kakaomap.tsx b/src/components/map/Kakaomap.tsx
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+declare global {
+  interface Window {
+    kakao: any;
+  }
+}
+const { kakao } = window;
+const Kakaomap = () => {
+  useEffect(() => {
+    const container = document.getElementById("map");
+    const options = {
+      center: new kakao.maps.LatLng(37.552635722509, 126.92436042413),
+      level: 1,
+    };
+    new kakao.maps.Map(container, options);
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{ width: "calc(100vw - 70px)", height: "100vh" }}
+    ></div>
+  );
+};
+export default Kakaomap;