diff --git a/eslint.config.js b/eslint.config.js index 200c8fc..0387e22 100644 --- 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 index e4b78ea..b26b846 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,14 @@ - + - Vite + React + TS + + 혼비니
diff --git a/package-lock.json b/package-lock.json index 4010393..e671b5d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,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", @@ -1807,6 +1808,12 @@ "@types/node": "*" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -2645,6 +2652,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cosmiconfig": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", @@ -5240,6 +5256,46 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz", + "integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==", + "license": "MIT", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.1.tgz", + "integrity": "sha512-vSrQHWlJ5DCfyrhgo0k6zViOe9ToK8uT5XGSmnuC2R3/g261IdIMpZVqfjD6vWSXdnf5Czs4VA/V60oVR6/jnA==", + "license": "MIT", + "dependencies": { + "react-router": "7.1.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.9.tgz", @@ -5470,6 +5526,12 @@ "node": ">=10" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -5855,6 +5917,12 @@ "typescript": ">=4.2.0" } }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 4f3025d..b7c1b38 100644 --- 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 deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.tsx b/src/App.tsx index b651141..c2276ee 100644 --- 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 ( - <> -
- - Vite logo - - - React logo - -
-

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/components/Building.tsx b/src/components/Building.tsx new file mode 100644 index 0000000..d2f788b --- /dev/null +++ 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 ( + <> + + 홍익대학교 + + + ); +}; +export default Building; diff --git a/src/components/HomeBoard.tsx b/src/components/HomeBoard.tsx new file mode 100644 index 0000000..7f11700 --- /dev/null +++ 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` + 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 ( + <> + + +
  • + 화장실 +
    • +
  • + 정수기 +
    • +
  • + 카페 +
    • +     + + + + +     + + ); +}; + +export default HomeBoard; diff --git a/src/components/map/Kakaomap.tsx b/src/components/map/Kakaomap.tsx new file mode 100644 index 0000000..3bcf003 --- /dev/null +++ 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 ( +
    + ); +}; +export default Kakaomap; diff --git a/src/components/nav/NavBar.tsx b/src/components/nav/NavBar.tsx new file mode 100644 index 0000000..be8e2cd --- /dev/null +++ b/src/components/nav/NavBar.tsx @@ -0,0 +1,64 @@ +import styled from "@emotion/styled"; +import { FaHome } from "react-icons/fa"; +import { FaStar } from "react-icons/fa6"; +import { IoPerson } from "react-icons/io5"; +import { useLocation } from "react-router-dom"; + +const Container = styled.div` + padding-top: 50px; + left: 0px; + width: 70px; + max-height: 100%; + height: 100vh; + position: fixed; + display: flex; + flex-direction: column; + background-color: white; + z-index: 1000; + box-shadow: 4px 0px 3px rgba(0, 0, 0, 0.03); +`; +interface IconProps { + isActive: boolean; +} + +const Icon = styled.a` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: black; + width: 100%; + height: 70px; + font-size: 12px; + font-weight: 300; + text-decoration: none; + color: ${({ isActive }) => (!isActive ? "#003363" : "white")}; + background: ${({ isActive }) => (!isActive ? "white" : "#003363")}; + &:hover { + background-color: #003363; + color: white; + } +`; +const NavBar: React.FC = () => { + const location = useLocation(); + return ( + <> + + + + 지도 홈 + + + + + 저장 + + + + 내 정보 + + + + ); +}; +export default NavBar; diff --git a/src/components/pages/Homepage.tsx b/src/components/pages/Homepage.tsx new file mode 100644 index 0000000..8fca37e --- /dev/null +++ b/src/components/pages/Homepage.tsx @@ -0,0 +1,21 @@ +import styled from "@emotion/styled"; +import HomeBoard from "../HomeBoard.tsx"; +import Kakaomap from "../map/Kakaomap.tsx"; +import NavBar from "../nav/NavBar.tsx"; +const HomePageWrapper = styled.div` + position: relative; + width: calc(100vw - 70px); + height: 100vh; +`; +const HomePage = () => { + return ( + <> + + + + + + + ); +}; +export default HomePage; diff --git a/src/components/style/GlobalStyle.tsx b/src/components/style/GlobalStyle.tsx new file mode 100644 index 0000000..4cf0edb --- /dev/null +++ b/src/components/style/GlobalStyle.tsx @@ -0,0 +1,28 @@ +import { css, Global } from "@emotion/react"; +import font from "./font"; + +const GlobalStyle = () => ( + +); +export default GlobalStyle; diff --git a/src/components/style/font.ts b/src/components/style/font.ts new file mode 100644 index 0000000..de29cad --- /dev/null +++ b/src/components/style/font.ts @@ -0,0 +1,7 @@ +import { css } from "@emotion/react"; + +const fonts = css` + @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap"); +`; + +export default fonts; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 6119ad9..0000000 --- a/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.tsx b/src/main.tsx index bef5202..98ccb21 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,9 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.tsx' +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App.tsx"; -createRoot(document.getElementById('root')!).render( +createRoot(document.getElementById("root")!).render( - , -) + +);