diff --git a/README.md b/README.md index 4ee41c77932a85d9cb16ce95e726bf4240a6bcc5..61c6e8fa5f187567db981acc7ff3ba03d06f5eca 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ ## 프로젝트 깃 클론 한 뒤에 할일 ### 프로젝트에 필요한 패키지 설치 - +#### gkg 다음은 터미널에서 **클론 한 후 단 한번만 실행합니다.** 1. 백엔드 패키지 설치 diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 80d1daf9dc35ebf13c2f0209529796d6cb424510..5b921a7597180c0f811f0c8b3104baf284d2c25a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,26 +1,23 @@ import React from "react"; -import { Link, Outlet } from "react-router-dom"; -import { Route, Routes } from "react-router-dom"; +import { BrowserRouter, Route, Routes, Link, Outlet} from "react-router-dom"; import "tailwindcss/tailwind.css"; -import { BrowserRouter } from "react-router-dom"; -import HomePage from "./Pages/HomePage"; -import BodyPage from "./Pages/BodyPage"; -import Login from "./Pages/LoginPage"; -import Board from "./Pages/BoardPage"; -import Signup from "./Pages/SignupPage"; - - +import Header from "./pages/header"; +import Body from "./pages/body"; +import Board from "./pages/board"; +import Login from "./pages/login"; +import Citylist from "./pages/citylist"; +import Theme from "./pages/theme"; export const App = () => { return ( - }> - } /> - } /> + } /> + } /> + }> + } /> + } /> - } /> - } /> ); diff --git a/frontend/src/pages/board.tsx b/frontend/src/pages/board.tsx new file mode 100644 index 0000000000000000000000000000000000000000..47b37a8c09bd901b6ea000860548e9c409be0d90 --- /dev/null +++ b/frontend/src/pages/board.tsx @@ -0,0 +1,8 @@ +import React from "react"; + + +export default function Board() { + return ( +
Board
// Board Page + ); +}; \ No newline at end of file diff --git a/frontend/src/pages/body.tsx b/frontend/src/pages/body.tsx new file mode 100644 index 0000000000000000000000000000000000000000..4ea512b669c0a5b4265e2ccce01f96dd72ba3458 --- /dev/null +++ b/frontend/src/pages/body.tsx @@ -0,0 +1,53 @@ +import React, { MouseEventHandler, useEffect, MouseEvent } from "react"; +import { BrowserRouter, Route, Routes, Link, Outlet, useSearchParams } from "react-router-dom"; +import Theme from "./theme"; +import getUrl from "../url" + +// const initSearchParams = ["theme", "city"] +const initSearchParams = { "theme": "1", "city": "1" } +export default function Body() { + const [searchParams, setSearchParams] = useSearchParams(initSearchParams) + + useEffect(() => { + console.log(searchParams.get('theme'), searchParams.get('city')) + setSearchParams(searchParams) + }, []) + + const handleClick = (event: MouseEvent) => { + console.log(`theme id= ${event.currentTarget.id}`) + } + + // const imgs = [1, 2, 3, 4, 5] + let url=getUrl(); + return ( +
+
+ +
+
+
01
+
02
+
03
+
04
+
05
+
06
+
07
+
08
+
09
+
10
+ {/* citylist */} +
+
+ {url.map(url => ( +
{url.url}
+ ))} + {/* pic */} +
+
+ + +
+ +
// Body Page + ); +}; diff --git a/frontend/src/pages/citylist.tsx b/frontend/src/pages/citylist.tsx new file mode 100644 index 0000000000000000000000000000000000000000..abc0d5d9d1fd5c4f0ca3c010eb253dd1c74a139a --- /dev/null +++ b/frontend/src/pages/citylist.tsx @@ -0,0 +1,8 @@ +import React from "react"; + + +export default function Citylist() { + return ( +
citylist
// Citylist Page + ); +}; \ No newline at end of file diff --git a/frontend/src/pages/header.tsx b/frontend/src/pages/header.tsx new file mode 100644 index 0000000000000000000000000000000000000000..c858d45eabca03796170099673d5682a2c309ec6 --- /dev/null +++ b/frontend/src/pages/header.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import {Link, Outlet} from "react-router-dom"; + +import "tailwindcss/tailwind.css"; + + +export default function Header() { + return ( +
+
+ +
+ + +
+ +
+
+
+ +
+ ); + } \ No newline at end of file diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx new file mode 100644 index 0000000000000000000000000000000000000000..ea6453655608881ec9d926c93bdee364eed6149a --- /dev/null +++ b/frontend/src/pages/login.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +export default function Login() { + return ( +
Login
// Login Page + ); +}; \ No newline at end of file diff --git a/frontend/src/pages/theme.tsx b/frontend/src/pages/theme.tsx new file mode 100644 index 0000000000000000000000000000000000000000..5a6bc9abdbb4d2dba4a639974f0d3d826f10bcfc --- /dev/null +++ b/frontend/src/pages/theme.tsx @@ -0,0 +1,25 @@ +import React, { MouseEvent, MouseEventHandler } from "react"; + +type ThemeProps = { + handleClick: MouseEventHandler; +} +export default function Theme({handleClick}: ThemeProps) { + // const handleClick = (event: MouseEvent) => { + // console.log(event.currentTarget.id) + // } + + return ( +
+ + + + + + + + + + +
+ ); +}; \ No newline at end of file diff --git a/frontend/src/url.tsx b/frontend/src/url.tsx new file mode 100644 index 0000000000000000000000000000000000000000..507955cf6bc39edd2a1c68029b441c764470a8a3 --- /dev/null +++ b/frontend/src/url.tsx @@ -0,0 +1,33 @@ +let url = [ + {url : "1"}, + {url : "2"}, + {url : "3"}, + {url : "4"}, + {url : "5"}, + {url : "6"}, + {url : "7"}, + {url : "8"}, + {url : "9"}, + {url : "10"}, + {url : "11"}, + {url : "12"}, + {url : "13"}, + {url : "14"}, +]; + + +export default function getUrl(){ + return url; +} + + +// Url() { +// const imgs = [1, 2, 3, 4, 5]; +// return ( +// { +// imgs.map(img => ( +//
{img}
+// )) +// } // Board Page +// ); +// }; \ No newline at end of file