Skip to content

GitLab

Commit fef3942c authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

프론트엔드 파일 구조 변경

parent 85077051
Hide whitespace changes
Inline Side-by-side
frontend/src/App.tsx
View file @ fef3942c
import React from "react"; import React from "react";
import { BrowserRouter, Route, Routes, Link, Outlet} from "react-router-dom"; import { BrowserRouter, Route, Routes, Link, Outlet } from "react-router-dom";
import "tailwindcss/tailwind.css"; import "tailwindcss/tailwind.css";
import Header from "./Pages/header"; import { Login, Signup } from "./auth";
import Body from "./Pages/body"; import { Board } from "./board";
import Board from "./Pages/board"; import { Header, Body } from "./home";
import Login from "./Pages/login"; import Posting from "./post/posting";
import Signup from "./Pages/signup";
import Posting from "./Pages/posting";
export const App = () => { export const App = () => {
return ( return (
...@@ -14,11 +12,11 @@ export const App = () => { ...@@ -14,11 +12,11 @@ export const App = () => {
<Routes> <Routes>
<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 />}>
<Route index element={<Body />} /> <Route index element={<Body />} />
<Route path="board" element={<Board />} /> <Route path="board" element={<Board />} />
<Route path="posting" element={<Posting/>} /> <Route path="posting" element={<Posting />} />
</Route> </Route>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
......
frontend/src/Pages/post.tsx deleted 100644 → 0
View file @ 85077051
import React, { MouseEventHandler } from "react";
import { PostType } from "./typesrc";
type Props = {
post: PostType;
handleClick: MouseEventHandler;
}
export default function Post({ handleClick, post }: Props) {
return (
<div className="flex flex-row h-16 divide-x-2 border-2 border-solid">
<div className="basis-full">
<button id={post.id} onClick={handleClick}>{post.title}</button>
</div>
<div className="basis-3/12">{post.date}</div>
<div className="basis-2/12">{post.counts}</div>
</div>
);
}
\ No newline at end of file
frontend/src/Pages/signup.tsx deleted 100644 → 0
View file @ 85077051
import React, { useState } from "react";
import { Link } from "react-router-dom";
function PasswordUpdate() {
const [password, setPassword] = useState("");
const [confirm, setConfirm] = useState("");
const [result, setResult] = useState("");
const [email, setEmail] = useState("");
const [alert, setAlert] = useState("");
function isEmail() {
var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
if(regExp.test(email)){
setAlert("이메일 형식이 맞습니다.")
}else{
setAlert("이메일 형식이 틀립니다.")
}
return
}
const reform = () => {
if (password && confirm){
if (password==confirm) {
setResult("비밀번호가 일치합니다.");
} else {
setResult("비밀번호가 다릅니다.");
}
}else {
setResult("비밀번호가 입력되지 않았습니다.")
}
};
return (
<div>
<div className="place-self-center py-3 border-b border-white ">
<input
className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black"placeholder="비밀번호" type="text"
name="password"
value={password}
onChange={(e) => setPassword(e.target.value )}
/>
</div>
<div className="place-self-center py-3 border-b border-white ">
<input
className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black"placeholder="비밀번호 확인" type="text"
name="confirm"
value={confirm}
onKeyUp={reform} onChange={(e) => setConfirm(e.target.value )}
>
</input>
</div>
<p>{result}</p>
<input className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black
" placeholder="email" type="text" name="Id"
onChange={(e) => setEmail(e.target.value )}
onKeyUp={isEmail}
/>
<p>{alert}</p>
</div>
);
}
export default function Signup () {
return(
<div className="gap-5 flex flex-col ">
<div className="p-12 w-1/2 h-1/2 md:w-40 md:h-1/6 bg-red-400 place-self-center rounded-2xl">
<Link to="/">Travel Report</Link>
</div>
<div className="flex flex-col w-auto h-80 md:w-1/2 bg-white border-2 border-black grid place-items-center rounded-xl place-self-center">
<div className="place-self-center py-3 border-b border-white ">
<input className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black" placeholder="ID " type="text"/>
</div>
<div className="showText place-self-center">
<PasswordUpdate />
</div>
<button className="place-self-center py-3 border-b border-white
">
회원가입 버튼
</button>
</div>
</div>
)
}
//출처 : //https://www.daleseo.com/react-forms/
\ No newline at end of file
frontend/src/Pages/typesrc.tsx deleted 100644 → 0
View file @ 85077051
export interface PostType {
id: string;
title: string;
body?:string;
date: string;
counts?: number;
theme?: string;
city?: string;
}
frontend/src/apis/auth.api.ts 0 → 100644
View file @ fef3942c
import axios from "axios";
import baseUrl from "./baseUrl";
export const login = async (email: string, password: string) => {
const { data } = await axios.post(`${baseUrl}/auth/login`, {
email,
password,
});
return data;
};
export const logout = async () => {
const { data } = await axios.get(`${baseUrl}/auth/logout`);
return data;
};
frontend/src/apis/baseUrl.ts 0 → 100644
View file @ fef3942c
export default "/api";
frontend/src/apis/index.ts 0 → 100644
View file @ fef3942c
import axios from "axios";
export * as authApi from "./auth.api";
frontend/src/auth/index.tsx 0 → 100644
View file @ fef3942c
export { default as Login } from "./login";
export { default as Signup } from "./signup";
frontend/src/pages/login.tsx → frontend/src/auth/login.tsx
View file @ fef3942c
...@@ -64,7 +64,7 @@ export default function Login() { ...@@ -64,7 +64,7 @@ export default function Login() {
return ( return (
<div> <div>
{/* <form onSubmit={loginsubmit}> */} {/* <form onSubmit={loginsubmit}> */}
<div className="flex flex-row grid grid-rows-2"> <div className="flex flex-row grid-rows-2">
<div className=" p-12 w-1/2 h-1/2 md:w-40 md:h-40 bg-red-400 place-self-center rounded-2xl"> <div className=" p-12 w-1/2 h-1/2 md:w-40 md:h-40 bg-red-400 place-self-center rounded-2xl">
<Link to="/">Travel Report</Link> <Link to="/">Travel Report</Link>
</div> </div>
......
frontend/src/auth/signup.tsx 0 → 100644
View file @ fef3942c
import React, { useState } from "react";
import { Link } from "react-router-dom";
export default function Signup() {
return (
<div className="flex flex-col ">
<div className="p-12 w-1/2 h-1/2 md:w-40 md:h-1/6 bg-red-400 place-self-center rounded-2xl">
<Link to="/">Travel Report</Link>
</div>
<form className="py-3 border-b border-white ">
<input
className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black"
placeholder="비밀번호"
type="text"
name="password"
// value={password}
// onChange={(e) => setPassword(e.target.value)}
/>
<input
className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black"
placeholder="비밀번호"
type="text"
name="password"
// value={password}
// onChange={(e) => setPassword(e.target.value)}
/>
<input
className="placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
placeholder="email"
type="text"
name="Id"
/>
</form>
</div>
);
}
frontend/src/pages/board.tsx → frontend/src/board/board.tsx
View file @ fef3942c
import React, { useState, MouseEvent } from "react"; import React, { useState, MouseEvent } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { PostType } from "./typesrc"; import { PostType } from "../types";
import Post from "./post"; import Post from "../post/post";
function range(start: number, end: number) { function range(start: number, end: number) {
return new Array(end - start + 1).fill(undefined).map((_, i) => i + start); return new Array(end - start + 1).fill(undefined).map((_, i) => i + start);
......
frontend/src/board/index.tsx 0 → 100644
View file @ fef3942c
export { default as Board } from "./board";
frontend/src/home/body.tsx 0 → 100644
View file @ fef3942c
import React, { useEffect, MouseEvent, useState } from "react";
import { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme";
import Citylist from "../Pages/citylist";
import { getPicure } from "../Pages/pic";
import Pagination from "../Pages/picpagination";
const initSearchParams = { theme: "", city: "" };
export default function Body() {
let limit = 15;
const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
const [page, setPage] = useState(1);
const offset = (page - 1) * limit;
let getPics = getPicure();
useEffect(() => {
console.log(searchParams.get("theme"), searchParams.get("city"));
// setSearchParams(searchParams)
}, []);
const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
console.log(`theme id= ${event.currentTarget.id}`);
setSearchParams({
...Object.fromEntries(searchParams),
theme: event.currentTarget.id,
});
};
const cityHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
console.log(`city id= ${event.currentTarget.id}`);
setSearchParams({
...Object.fromEntries(searchParams),
city: event.currentTarget.id,
});
};
let themechange = searchParams.get("theme");
let citylistchange = searchParams.get("city");
const Idpics = getPics.filter((p) => {
return (
(p.themeid == themechange && p.cityid == citylistchange) ||
(p.themeid == themechange && citylistchange == "") ||
(themechange == "" && p.cityid == citylistchange) ||
(themechange == "" && citylistchange == "")
);
});
return (
<div className="flex flex-col px-1 py-1">
<Theme handleClick={themeHandleClick} />
<div className="flex flex-col md:flex-row py-10 ">
<Citylist handleClick={cityHandleClick} />
<div className="flex-row md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
{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}
>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
))}
<Pagination total={Idpics.length} page={page} setPage={setPage} />
</div>
</div>
<Outlet />
</div>
// Body Page
);
}
frontend/src/home/index.tsx 0 → 100644
View file @ fef3942c
export { default as Body } from "./body";
export { default as Header } from "./header";
export { default as Theme } from "./theme";
frontend/src/index.html
View file @ fef3942c
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack TypeScript React TailwindCSS Template</title> <title>Travel Report</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
......
frontend/src/pages/body.tsx deleted 100644 → 0
View file @ 85077051
import React, { useEffect, MouseEvent,useState } from "react";
import { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme";
import Citylist from "./citylist";
import {getPicure} from "./pic";
import Pagination from "./picpagination"
import { LibManifestPlugin } from "webpack";
const initSearchParams = { "theme": "", "city": "" }
export default function Body() {
let limit = 15;
const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
const [page, setPage] = useState(1);
const offset = (page-1) *limit;
let getPics = getPicure();
useEffect(() => {
console.log(searchParams.get('theme'), searchParams.get('city'))
// setSearchParams(searchParams)
}, [])
const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
console.log(`theme id= ${event.currentTarget.id}`)
setSearchParams({
...Object.fromEntries(searchParams),
theme: event.currentTarget.id,
})
}
const cityHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
console.log(`city id= ${event.currentTarget.id}`)
setSearchParams({
...Object.fromEntries(searchParams),
city: event.currentTarget.id
})
}
let themechange = searchParams.get('theme');
let citylistchange = searchParams.get('city');
const Idpics = getPics.filter(p => {
return (p.themeid == themechange && p.cityid == citylistchange)||
(p.themeid == themechange && citylistchange == "")||
(themechange == "" && p.cityid == citylistchange)||
(themechange == "" && citylistchange == "")
})
return (
<div className="flex flex-col px-1 py-1">
<Theme handleClick={themeHandleClick} />
<div className="flex flex-col md:flex-row py-10 ">
<Citylist handleClick={cityHandleClick} />
<div className="flex-row md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
{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}>
<img src={pic.url} className="w-full h-10 md:h-20 object-center" />
<p className="text-center text-xs">{pic.name}</p>
</div>
))}
<Pagination total={Idpics.length} page = {page} setPage ={setPage}/>
</div>
</div>
<Outlet />
</div>
// Body Page
);
};
frontend/src/post/post.tsx 0 → 100644
View file @ fef3942c
import React, { MouseEventHandler } from "react";
import { PostType } from "../types";
type Props = {
post: PostType;
handleClick: MouseEventHandler;
};
export default function Post({ handleClick, post }: Props) {
return (
<div className="flex flex-row h-16 divide-x-2 border-2 border-solid">
<div className="basis-full">
<button id={post.id} onClick={handleClick}>
{post.title}
</button>
</div>
<div className="basis-3/12">{post.date}</div>
<div className="basis-2/12">{post.counts}</div>
</div>
);
}
frontend/src/Pages/posting.tsx → frontend/src/post/posting.tsx
View file @ fef3942c
import React, { useState } from "react"; import React, { useState } from "react";
import Theme from "./theme";
import { PostType } from "./typesrc";
import axios from "axios";
function Title() { function Title() {
const [title, setTitle] = useState<string>("질문종류"); const [title, setTitle] = useState<string>("질문종류");
......
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