Skip to content

GitLab

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

Merge branch 'MK11' into MK12

parents 0ce1f449 bf0e037c
Hide whitespace changes
Inline Side-by-side
frontend/src/App.tsx
View file @ 9fba56f3
......@@ -5,17 +5,23 @@ import { Login, Signup } from "./auth";
import { Board } from "./board";
import { Header, Body } from "./home";
import Posting from "./post/posting";
<<<<<<< HEAD
=======
import Layout from "./commons/layout";
>>>>>>> MK11
export const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} />
<Route path="/" element={<Header />}>
<Route index element={<Body />} />
<Route path="board" element={<Board />} />
<Route path="posting" element={<Posting />} />
<Route element={<Layout />}>
<Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} />
<Route path="/" element={<Header />}>
<Route index element={<Body />} />
<Route path="board" element={<Board />} />
<Route path="posting" element={<Posting />} />
</Route>
</Route>
</Routes>
</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";
import Theme from "./theme";
import Citylist from "../Pages/citylist";
import { getPicure } from "../Pages/pic";
import { PaginationLeft ,PaginationRight} from "../Pages/picpagination";
import { PaginationLeft, PaginationRight } from "../Pages/picpagination";
const initSearchParams = { theme: "", city: "" };
......@@ -48,45 +48,66 @@ export default function Body() {
);
});
const pre = () =>{
setSelected(selected -1)
};
const pre = () => {
setSelected(selected - 1);
};
const next = () =>{
setSelected(selected + 1)
};
const next = () => {
setSelected(selected + 1);
};
return (
<div className="flex flex-col px-1 py-1">
<div className="flex flex-col">
<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">
<Citylist handleClick={cityHandleClick} />
</div>
<div className="flex flex-col">
<div>
<button onClick={pre} disabled={selected === 1}>&lt;{selected}</button>
<button onClick={next} disabled={selected === 3}>&gt;</button>
<button onClick={pre} disabled={selected === 1}>
&lt;{selected}
</button>
<button onClick={next} disabled={selected === 3}>
&gt;
</button>
</div>
<div >
<div>
<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 + '%)'}}>
<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
className=" flex flex-row transition duration-500 relative"
style={{
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>
<Outlet />
</div>
// 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
className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md"
key={index}
......@@ -97,6 +118,11 @@ export default function Body() {
/>
<p className="text-center text-xs">{pic.name}</p>
</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 { useAuth } from "../auth/auth.context";
......@@ -8,56 +8,51 @@ export default function Header() {
const { logout } = useAuth();
return (
<div className="flex flex-col ">
<div className="flex flex-row px-5 py-20 md:place-content-between">
<button className="px-5 py-2">
<div className="flex py-10 ">
<button className="shrink-0 mx-5">
<Link to="/" className="hover:bg-gray-200 focus:text-purple-500">
Travel Report
</Link>
</button>
<div className="flex flex-row-reverse">
<div className="px-5 py-2 bg-teal-400 rounded">
{localStorage.getItem("survey-user-info") ? (
<button
onClick={() => {
logout();
}}
>
Logout
</button>
) : (
<button>
<Link to="/login">Login</Link>
</button>
)}
</div>
<button className="px-5 py-2 bg-purple-400 rounded">
<Link
to="/board"
className="hover:bg-purple-300 focus:text-purple-500 "
<input
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
onClick={() => {
logout();
}}
>
Board
</Link>
</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>
로그아웃
</button>
) : (
<button className="shrink-0 bg-white ">
<Link
className="hover:bg-purple-300 focus:text-purple-500"
to="/login"
>
로그인
</Link>
</button>
)}
</div>
<button className="shrink-0 p-3 bg-white ">
<Link
to="/board"
className="hover:bg-purple-300 focus:text-purple-500"
>
게시판
</Link>
</button>
</div>
<Outlet />
</div>
);
......
frontend/src/home/theme.tsx
View file @ 9fba56f3
import React, { useEffect, MouseEvent, MouseEventHandler } from "react";
import { Outlet, useSearchParams } from "react-router-dom";
import React, { MouseEventHandler } from "react";
type ThemeProps = {
handleClick: MouseEventHandler;
}
};
export default function Theme({handleClick}: ThemeProps) {
export default function Theme({ handleClick }: ThemeProps) {
return (
<div className="overflow-x-scroll flex bg-emerald-400 rounded ">
<button id={"surfing"} onClick={handleClick} className="shrink-0 px-5">서핑</button>
<button id={"activity"} onClick={handleClick} className="shrink-0 px-5">액티비티</button>
<button id={"camping"} onClick={handleClick} className="shrink-0 px-5 ">캠핑</button>
<button id={"sking"} onClick={handleClick} className="shrink-0 px-5">스키</button>
<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 id={"cave"} onClick={handleClick} className="shrink-0 px-5">동굴</button>
<button id={"history"} onClick={handleClick} className="shrink-0 px-5">문화재</button>
<button id={"zoo"} onClick={handleClick} className="shrink-0 px-5">동물원</button>
<button id={"cycling"} onClick={handleClick} className="shrink-0 px-5">사이클링</button>
<div className="flex overflow-x-auto bg-emerald-400 md:px-52 ">
<button
id={"surfing"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
서핑
</button>
<button
id={"activity"}
onClick={handleClick}
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>
);
};
\ No newline at end of file
}
frontend/src/index.tsx
View file @ 9fba56f3
......@@ -8,8 +8,8 @@ const root = createRoot(container!);
root.render(
<React.StrictMode>
<AuthProvider>
<App />
</AuthProvider>
{/* <AuthProvider> */}
<App />
{/* </AuthProvider> */}
</React.StrictMode>
);
frontend/src/pages/citylist.tsx
View file @ 9fba56f3
import React, { MouseEventHandler } from "react";
import React, { MouseEventHandler } from "react";
type CityProps = {
handleClick: MouseEventHandler;
}
};
export default function Citylist({handleClick}: CityProps) {
export default function Citylist({ handleClick }: CityProps) {
return (
<div className="overflow-auto flex flex-row mb-10 md:flex-col md:basis-1/5 md:mr-10 bg-gray-400 rounded ">
<button id={"Seoul"} onClick={handleClick} className="shrink-0 px-5 hover:underline">seoul</button>
<button id={"Busan"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Busan</button>
<button id={"Incheon"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Incheon</button>
<button id={"Daegoo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Daegoo</button>
<button id={"Kwangjoo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Kwangjoo</button>
<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 id={"Dokdo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Dokdo</button>
<button id={"Jeju"} onClick={handleClick} className="shrink-0 px-5 hover:underline">jeju</button>
<div className="overflow-auto w-full flex flex-row md:flex-col md:mr-24 bg-gray-400">
<div className="text-center px-5 py-2 bg-red-400 shrink-0">도시</div>
<button
id={"Seoul"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
>
서울
</button>
<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 */}
</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