From 8ac0ae2e46d27217a1cecd95ea17ce768a4e7a4d Mon Sep 17 00:00:00 2001 From: leejuhi <163210518+leejuhi@users.noreply.github.com> Date: Wed, 8 Jan 2025 03:12:13 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20nav=20=EA=B8=B0=EB=B3=B8=ED=88=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 기본툴 잡기 --- eslint.config.js | 1 + index.html | 6 ++- package-lock.json | 70 +++++++++++++++++++++++++++- package.json | 3 +- src/App.css | 42 ----------------- src/App.tsx | 41 ++++++---------- src/components/map/Kakaomap.tsx | 19 ++++++++ src/components/nav/NavBar.tsx | 53 +++++++++++++++++++++ src/components/pages/Homepage.tsx | 12 +++++ src/components/style/GlobalStyle.tsx | 20 ++++++++ src/components/style/font.ts | 7 +++ src/index.css | 68 --------------------------- src/main.tsx | 13 +++--- 13 files changed, 207 insertions(+), 148 deletions(-) delete mode 100644 src/App.css create mode 100644 src/components/map/Kakaomap.tsx create mode 100644 src/components/nav/NavBar.tsx create mode 100644 src/components/pages/Homepage.tsx create mode 100644 src/components/style/GlobalStyle.tsx create mode 100644 src/components/style/font.ts delete mode 100644 src/index.css 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..6e2a39c 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,13 @@ - + + 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/map/Kakaomap.tsx b/src/components/map/Kakaomap.tsx new file mode 100644 index 0000000..c3f31fd --- /dev/null +++ b/src/components/map/Kakaomap.tsx @@ -0,0 +1,19 @@ +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(33.450701, 126.570667), + level: 3, + }; + 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..efe755c --- /dev/null +++ b/src/components/nav/NavBar.tsx @@ -0,0 +1,53 @@ +import styled from "@emotion/styled"; +import { FaHome } from "react-icons/fa"; +import { FaStar } from "react-icons/fa6"; +import { IoPerson } from "react-icons/io5"; + +const Container = styled.div` + left: 0px; + width: 70px; + max-height: 100%; + height: 100vh; + position: fixed; + display: flex; + flex-direction: column; + box-shadow: 4px 0px 5px rgba(0, 0, 0, 0.03); +`; +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; + &:hover { + background-color: #003363; + color: white; + } +`; +const NavBar: React.FC = () => { + return ( + <> + + + + 지도 홈 + + + + + 저장 + + + + 내 정보 + + + + ); +}; +export default NavBar; diff --git a/src/components/pages/Homepage.tsx b/src/components/pages/Homepage.tsx new file mode 100644 index 0000000..1aeb201 --- /dev/null +++ b/src/components/pages/Homepage.tsx @@ -0,0 +1,12 @@ +import Kakaomap from "../map/Kakaomap.tsx"; +import NavBar from "../nav/NavBar.tsx"; + +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..5f9046a --- /dev/null +++ b/src/components/style/GlobalStyle.tsx @@ -0,0 +1,20 @@ +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( - , -) + +); From 49565ad49c2b8f386f582112abaa553d65b5591e Mon Sep 17 00:00:00 2001 From: leejuhi <163210518+leejuhi@users.noreply.github.com> Date: Sun, 12 Jan 2025 01:59:54 +0900 Subject: [PATCH 2/5] =?UTF-8?q?chore:=20=EC=A7=80=EB=8F=84=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 변경 --- index.html | 2 +- src/components/map/Kakaomap.tsx | 11 ++++++++--- src/components/nav/NavBar.tsx | 1 + src/components/style/GlobalStyle.tsx | 2 +- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 6e2a39c..b26b846 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=bff3c52558fe4cd34c69e2a59382c92c" > - Vite + React + TS + 혼비니
diff --git a/src/components/map/Kakaomap.tsx b/src/components/map/Kakaomap.tsx index c3f31fd..3bcf003 100644 --- a/src/components/map/Kakaomap.tsx +++ b/src/components/map/Kakaomap.tsx @@ -9,11 +9,16 @@ const Kakaomap = () => { useEffect(() => { const container = document.getElementById("map"); const options = { - center: new kakao.maps.LatLng(33.450701, 126.570667), - level: 3, + center: new kakao.maps.LatLng(37.552635722509, 126.92436042413), + level: 1, }; new kakao.maps.Map(container, options); }, []); - return
; + return ( +
+ ); }; export default Kakaomap; diff --git a/src/components/nav/NavBar.tsx b/src/components/nav/NavBar.tsx index efe755c..570ab47 100644 --- a/src/components/nav/NavBar.tsx +++ b/src/components/nav/NavBar.tsx @@ -4,6 +4,7 @@ import { FaStar } from "react-icons/fa6"; import { IoPerson } from "react-icons/io5"; const Container = styled.div` + padding-top: 50px; left: 0px; width: 70px; max-height: 100%; diff --git a/src/components/style/GlobalStyle.tsx b/src/components/style/GlobalStyle.tsx index 5f9046a..2d760fa 100644 --- a/src/components/style/GlobalStyle.tsx +++ b/src/components/style/GlobalStyle.tsx @@ -12,7 +12,7 @@ const GlobalStyle = () => ( padding: 0px; } body { - margin-left: 50px; + margin-left: 70px; } `} /> From 5429a8a9eaf5df3dd3d391888ca67ce88b708b1f Mon Sep 17 00:00:00 2001 From: leejuhi <163210518+leejuhi@users.noreply.github.com> Date: Sun, 12 Jan 2025 03:31:42 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=ED=99=88=EB=B3=B4=EB=93=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 홈보드 추가하기 애니메이션 및 다른 부분 추가 --- src/components/HomeBoard.tsx | 55 +++++++++++++++++++++++++++++++ src/components/nav/NavBar.tsx | 20 ++++++++--- src/components/pages/Homepage.tsx | 13 ++++++-- 3 files changed, 81 insertions(+), 7 deletions(-) create mode 100644 src/components/HomeBoard.tsx diff --git a/src/components/HomeBoard.tsx b/src/components/HomeBoard.tsx new file mode 100644 index 0000000..1e2b729 --- /dev/null +++ b/src/components/HomeBoard.tsx @@ -0,0 +1,55 @@ +import styled from "@emotion/styled"; +import { useState } from "react"; +import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io"; +interface PanelProps { + isOpen: boolean; +} +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: 4px 0px 5px rgba(0, 0, 0, 0.03); +`; +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/nav/NavBar.tsx b/src/components/nav/NavBar.tsx index 570ab47..be8e2cd 100644 --- a/src/components/nav/NavBar.tsx +++ b/src/components/nav/NavBar.tsx @@ -2,6 +2,7 @@ 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; @@ -12,9 +13,15 @@ const Container = styled.div` position: fixed; display: flex; flex-direction: column; - box-shadow: 4px 0px 5px rgba(0, 0, 0, 0.03); + background-color: white; + z-index: 1000; + box-shadow: 4px 0px 3px rgba(0, 0, 0, 0.03); `; -const Icon = styled.a` +interface IconProps { + isActive: boolean; +} + +const Icon = styled.a` display: flex; flex-direction: column; justify-content: center; @@ -25,26 +32,29 @@ const Icon = styled.a` 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 ( <> - + 지도 홈 - + 저장 - + 내 정보 diff --git a/src/components/pages/Homepage.tsx b/src/components/pages/Homepage.tsx index 1aeb201..8fca37e 100644 --- a/src/components/pages/Homepage.tsx +++ b/src/components/pages/Homepage.tsx @@ -1,11 +1,20 @@ +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 ( <> - + + + + ); }; From 3bcf9c66a838c65c0c7332eca94096545a1cb4e2 Mon Sep 17 00:00:00 2001 From: leejuhi <163210518+leejuhi@users.noreply.github.com> Date: Sun, 12 Jan 2025 04:02:01 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=ED=99=94=EC=9E=A5=EC=8B=A4=20?= =?UTF-8?q?=EB=B0=8F=20=EB=A7=88=ED=81=AC=20=EB=B2=84=ED=8A=BC=20=EB=A7=8C?= =?UTF-8?q?=EB=93=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 만들었음 --- src/components/HomeBoard.tsx | 67 +++++++++++++++++++++------- src/components/style/GlobalStyle.tsx | 8 ++++ 2 files changed, 60 insertions(+), 15 deletions(-) diff --git a/src/components/HomeBoard.tsx b/src/components/HomeBoard.tsx index 1e2b729..effad57 100644 --- a/src/components/HomeBoard.tsx +++ b/src/components/HomeBoard.tsx @@ -4,15 +4,39 @@ import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io"; interface PanelProps { isOpen: boolean; } -const Panel = styled.div` +const Container = styled.div` + position: absolute; + 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: relative; top: 0; height: 100vh; background: white; z-index: 100; width: ${({ isOpen }) => (isOpen ? "400px" : "0px")}; transition: width 0.3s ease-out; - box-shadow: 4px 0px 5px rgba(0, 0, 0, 0.03); + 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; @@ -35,19 +59,32 @@ const HomeBoard: React.FC = () => { }; return ( <> - - - + + + +
  • + 화장실 +
    • +
  • + 정수기 +
    • +
  • + 카페 +
    • +     + +     +     ); }; diff --git a/src/components/style/GlobalStyle.tsx b/src/components/style/GlobalStyle.tsx index 2d760fa..4cf0edb 100644 --- a/src/components/style/GlobalStyle.tsx +++ b/src/components/style/GlobalStyle.tsx @@ -14,6 +14,14 @@ const GlobalStyle = () => ( body { margin-left: 70px; } + li { + margin: 0px; + } + li, + ol, + ul { + list-style: none; + } `} /> ); From b54bf23093d4f441d803b46d6e9cd7922ff59ac6 Mon Sep 17 00:00:00 2001 From: leejuhi <163210518+leejuhi@users.noreply.github.com> Date: Sun, 12 Jan 2025 17:31:13 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=ED=8C=A8=EB=84=90=20=EC=95=88=20?= =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EB=B0=95=EC=8A=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 추가 --- src/components/Building.tsx | 22 ++++++++++++++ src/components/HomeBoard.tsx | 58 +++++++++++++++++++----------------- 2 files changed, 52 insertions(+), 28 deletions(-) create mode 100644 src/components/Building.tsx 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 index effad57..7f11700 100644 --- a/src/components/HomeBoard.tsx +++ b/src/components/HomeBoard.tsx @@ -1,11 +1,12 @@ 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` - position: absolute; + overflow: hidden; top: 0px; `; const MarkList = styled.ul` @@ -18,7 +19,7 @@ const MarkList = styled.ul` gap: 12px; `; const Panel = styled.div` - position: relative; + position: absolute; top: 0; height: 100vh; background: white; @@ -59,32 +60,33 @@ const HomeBoard: React.FC = () => { }; return ( <> - - - -
  • - 화장실 -
    • -
  • - 정수기 -
    • -
  • - 카페 -
    • -     - -     -     + + +
  • + 화장실 +
    • +
  • + 정수기 +
    • +
  • + 카페 +
    • +     + + + + +     ); };