Skip to content

GitLab

Commit 9fba56f3 authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

Merge branch 'MK11' into MK12

parents 0ce1f449 bf0e037c
Show whitespace changes
Inline Side-by-side
frontend/src/App.tsx
View file @ 9fba56f3
...@@ -5,11 +5,16 @@ import { Login, Signup } from "./auth"; ...@@ -5,11 +5,16 @@ import { Login, Signup } from "./auth";
import { Board } from "./board"; import { Board } from "./board";
import { Header, Body } from "./home"; import { Header, Body } from "./home";
import Posting from "./post/posting"; import Posting from "./post/posting";
<<<<<<< HEAD
=======
import Layout from "./commons/layout";
>>>>>>> MK11
export const App = () => { export const App = () => {
return ( return (
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route element={<Layout />}>
<Route path="login" element={<Login />} /> <Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} /> <Route path="signup" element={<Signup />} />
<Route path="/" element={<Header />}> <Route path="/" element={<Header />}>
...@@ -17,6 +22,7 @@ export const App = () => { ...@@ -17,6 +22,7 @@ export const App = () => {
<Route path="board" element={<Board />} /> <Route path="board" element={<Board />} />
<Route path="posting" element={<Posting />} /> <Route path="posting" element={<Posting />} />
</Route> </Route>
</Route>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
); );
......
frontend/src/commons/layout.tsx 0 → 100644
View file @ 9fba56f3
import React, { ReactNode } from "react";
import { Outlet } from "react-router-dom";
import { AuthProvider } from "../auth/auth.context";
export default function Layout() {
return (
<AuthProvider>
<Outlet />
</AuthProvider>
);
}
frontend/src/home/body.tsx
View file @ 9fba56f3
...@@ -3,7 +3,7 @@ import { Outlet, useSearchParams } from "react-router-dom"; ...@@ -3,7 +3,7 @@ import { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme"; import Theme from "./theme";
import Citylist from "../Pages/citylist"; import Citylist from "../Pages/citylist";
import { getPicure } from "../Pages/pic"; import { getPicure } from "../Pages/pic";
import { PaginationLeft ,PaginationRight} from "../Pages/picpagination"; import { PaginationLeft, PaginationRight } from "../Pages/picpagination";
const initSearchParams = { theme: "", city: "" }; const initSearchParams = { theme: "", city: "" };
...@@ -48,32 +48,50 @@ export default function Body() { ...@@ -48,32 +48,50 @@ export default function Body() {
); );
}); });
const pre = () =>{ const pre = () => {
setSelected(selected -1) setSelected(selected - 1);
}; };
const next = () =>{ const next = () => {
setSelected(selected + 1) setSelected(selected + 1);
}; };
return ( return (
<div className="flex flex-col px-1 py-1"> <div className="flex flex-col">
<Theme handleClick={themeHandleClick} /> <Theme handleClick={themeHandleClick} />
<div className="flex flex-col md:flex-row py-10 "> <div className="flex flex-col md:flex-row py-5 ">
<div className="w-50"> <div className="w-50">
<Citylist handleClick={cityHandleClick} /> <Citylist handleClick={cityHandleClick} />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<div> <div>
<button onClick={pre} disabled={selected === 1}>&lt;{selected}</button> <button onClick={pre} disabled={selected === 1}>
<button onClick={next} disabled={selected === 3}>&gt;</button> &lt;{selected}
</button>
<button onClick={next} disabled={selected === 3}>
&gt;
</button>
</div> </div>
<div > <div>
<div className=" md:mr-10 md:basis-4/5 overflow-hidden"> <div className=" md:mr-10 md:basis-4/5 overflow-hidden">
<div className=" flex flex-row transition duration-500 relative" style={{"transform": 'translate(-' + (selected-1)*100 + '%)'}}> <div
<img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/> className=" flex flex-row transition duration-500 relative"
<img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/> style={{
<img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/> transform: "translate(-" + (selected - 1) * 100 + "%)",
}}
>
<img
className="border-2"
src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"
/>
<img
className="border-2"
src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"
/>
<img
className="border-2"
src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -85,8 +103,11 @@ export default function Body() { ...@@ -85,8 +103,11 @@ export default function Body() {
// Body Page // Body Page
); );
} }
{/* <div className=" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5"></div> */} {
{/* {Idpics.slice(offset, offset + limit).map((pic, index: number) => ( /* <div className=" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5"></div> */
}
{
/* {Idpics.slice(offset, offset + limit).map((pic, index: number) => (
<div <div
className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md" className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md"
key={index} key={index}
...@@ -97,6 +118,11 @@ export default function Body() { ...@@ -97,6 +118,11 @@ export default function Body() {
/> />
<p className="text-center text-xs">{pic.name}</p> <p className="text-center text-xs">{pic.name}</p>
</div> </div>
))} */} ))} */
{/* <PaginationLeft total={Idpics.length} page={page} setPage={setPage} /> */} }
{/* <PaginationRight total={Idpics.length} page={page} setPage={setPage} /> */} {
\ No newline at end of file /* <PaginationLeft total={Idpics.length} page={page} setPage={setPage} /> */
}
{
/* <PaginationRight total={Idpics.length} page={page} setPage={setPage} /> */
}
frontend/src/home/header.tsx
View file @ 9fba56f3
import React, { useState } from "react"; import React, { useReducer, useState } from "react";
import { Link, Outlet } from "react-router-dom"; import { Link, Outlet } from "react-router-dom";
import { useAuth } from "../auth/auth.context"; import { useAuth } from "../auth/auth.context";
...@@ -8,56 +8,51 @@ export default function Header() { ...@@ -8,56 +8,51 @@ export default function Header() {
const { logout } = useAuth(); const { logout } = useAuth();
return ( return (
<div className="flex flex-col "> <div className="flex flex-col ">
<div className="flex flex-row px-5 py-20 md:place-content-between"> <div className="flex py-10 ">
<button className="px-5 py-2"> <button className="shrink-0 mx-5">
<Link to="/" className="hover:bg-gray-200 focus:text-purple-500"> <Link to="/" className="hover:bg-gray-200 focus:text-purple-500">
Travel Report Travel Report
</Link> </Link>
</button> </button>
<div className="flex flex-row-reverse">
<div className="px-5 py-2 bg-teal-400 rounded"> <input
{localStorage.getItem("survey-user-info") ? ( className="md:ml-20 placeholder:text-white focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 md:placeholder:text-slate-400 w-20 md:w-1/2 border-y-4 border-l-4 border-sky-500 pl-9 rounded-l-full focus:border-0"
placeholder="어디로 여행가고 싶나요?"
/>
<button className="shrink-0 border-y-4 border-r-4 border-sky-500 rounded-r-full pr-4">
검색
</button>
<div className="shrink-0 p-3 md:ml-52 border-r-2 h-12">
{useAuth().user.isLoggedIn ? (
<button <button
onClick={() => { onClick={() => {
logout(); logout();
}} }}
> >
Logout 로그아웃
</button> </button>
) : ( ) : (
<button> <button className="shrink-0 bg-white ">
<Link to="/login">Login</Link> <Link
className="hover:bg-purple-300 focus:text-purple-500"
to="/login"
>
로그인
</Link>
</button> </button>
)} )}
</div> </div>
<button className="shrink-0 p-3 bg-white ">
<button className="px-5 py-2 bg-purple-400 rounded">
<Link <Link
to="/board" to="/board"
className="hover:bg-purple-300 focus:text-purple-500 " className="hover:bg-purple-300 focus:text-purple-500"
> >
Board 게시판
</Link> </Link>
</button> </button>
<div>
<label>
{/* <span className="sr-only">Search</span> */}
<span className="absolute inset-y-0 left-0 flex items-center pl-2">
<svg
className="h-5 w-5 fill-slate-300"
viewBox="0 0 20 20"
></svg>
</span>
<input
className="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
placeholder="Search for anything..."
type="text"
name="search"
/>
</label>
</div>
</div>
</div> </div>
<Outlet /> <Outlet />
</div> </div>
); );
......
frontend/src/home/theme.tsx
View file @ 9fba56f3
import React, { useEffect, MouseEvent, MouseEventHandler } from "react"; import React, { MouseEventHandler } from "react";
import { Outlet, useSearchParams } from "react-router-dom";
type ThemeProps = { type ThemeProps = {
handleClick: MouseEventHandler; handleClick: MouseEventHandler;
} };
export default function Theme({handleClick}: ThemeProps) { export default function Theme({ handleClick }: ThemeProps) {
return ( return (
<div className="overflow-x-scroll flex bg-emerald-400 rounded "> <div className="flex overflow-x-auto bg-emerald-400 md:px-52 ">
<button id={"surfing"} onClick={handleClick} className="shrink-0 px-5">서핑</button> <button
<button id={"activity"} onClick={handleClick} className="shrink-0 px-5">액티비티</button> id={"surfing"}
<button id={"camping"} onClick={handleClick} className="shrink-0 px-5 ">캠핑</button> onClick={handleClick}
<button id={"sking"} onClick={handleClick} className="shrink-0 px-5">스키</button> className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
<button id={"boat"} onClick={handleClick} className="shrink-0 px-5">보트</button> >
<button id={"desert"} onClick={handleClick} className="shrink-0 px-5">사막</button> 서핑
<button id={"golf"} onClick={handleClick} className="shrink-0 px-5">골프</button> </button>
<button id={"cave"} onClick={handleClick} className="shrink-0 px-5">동굴</button> <button
<button id={"history"} onClick={handleClick} className="shrink-0 px-5">문화재</button> id={"activity"}
<button id={"zoo"} onClick={handleClick} className="shrink-0 px-5">동물원</button> onClick={handleClick}
<button id={"cycling"} onClick={handleClick} className="shrink-0 px-5">사이클링</button> className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
액티비티
</button>
<button
id={"camping"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
캠핑
</button>
<button
id={"sking"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
스키
</button>
<button
id={"boat"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
보트
</button>
<button
id={"desert"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
사막
</button>
<button
id={"golf"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
골프
</button>
<button
id={"cave"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
동굴
</button>
<button
id={"history"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
문화재
</button>
<button
id={"zoo"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
동물원
</button>
<button
id={"cycling"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
사이클링
</button>
</div> </div>
); );
}; }
\ No newline at end of file
frontend/src/index.tsx
View file @ 9fba56f3
...@@ -8,8 +8,8 @@ const root = createRoot(container!); ...@@ -8,8 +8,8 @@ const root = createRoot(container!);
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<AuthProvider> {/* <AuthProvider> */}
<App /> <App />
</AuthProvider> {/* </AuthProvider> */}
</React.StrictMode> </React.StrictMode>
); );
frontend/src/pages/citylist.tsx
View file @ 9fba56f3
import React, { MouseEventHandler } from "react"; import React, { MouseEventHandler } from "react";
type CityProps = { type CityProps = {
handleClick: MouseEventHandler; handleClick: MouseEventHandler;
} };
export default function Citylist({handleClick}: CityProps) { export default function Citylist({ handleClick }: CityProps) {
return ( return (
<div className="overflow-auto flex flex-row mb-10 md:flex-col md:basis-1/5 md:mr-10 bg-gray-400 rounded "> <div className="overflow-auto w-full flex flex-row md:flex-col md:mr-24 bg-gray-400">
<button id={"Seoul"} onClick={handleClick} className="shrink-0 px-5 hover:underline">seoul</button> <div className="text-center px-5 py-2 bg-red-400 shrink-0">도시</div>
<button id={"Busan"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Busan</button> <button
<button id={"Incheon"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Incheon</button> id={"Seoul"}
<button id={"Daegoo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Daegoo</button> onClick={handleClick}
<button id={"Kwangjoo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Kwangjoo</button> className="px-5 py-2 hover:underline shrink-0"
<button id={"Daejeon"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Daejeon</button> >
<button id={"Woolsan"} onClick={handleClick} className="shrink-0 px-5 hover:underline">woolsan</button> 서울
<button id={"Sejong"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Sejong</button> </button>
<button id={"Dokdo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Dokdo</button> <button
<button id={"Jeju"} onClick={handleClick} className="shrink-0 px-5 hover:underline">jeju</button> id={"Busan"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
>
부산
</button>
<button
id={"Incheon"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
>
인천
</button>
<button
id={"Daegoo"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
>
대구
</button>
<button
id={"Kwangjoo"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
>
광주
</button>
<button
id={"Daejeon"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
>
대전
</button>
<button
id={"Woolsan"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
>
울산
</button>
<button
id={"Sejong"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
>
세종
</button>
<button
id={"Dokdo"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
>
독도
</button>
<button
id={"Jeju"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
>
제주
</button>
{/* citylist */} {/* citylist */}
</div> // Citylist Page </div>
// Citylist Page
); );
}; }
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment