diff --git a/frontend/src/Pages/posting.tsx b/frontend/src/Pages/posting.tsx index cae4a9557966b3272dae0c20580e651842029d37..a6447ca3ad9c3a9ff757f3a5cb8e372cf3c48368 100644 --- a/frontend/src/Pages/posting.tsx +++ b/frontend/src/Pages/posting.tsx @@ -1,25 +1,124 @@ -import React from "react"; +import React, { useState } from "react"; +import Theme from "./theme"; +import { PostType } from "./typesrc"; +import axios from "axios"; + +function Title() { + const [title, setTitle] = useState("질문종류"); + + function TitleChange(e: { target: { value: React.SetStateAction } }) { + setTitle(e.target.value); + } +} + +function Body() { + const [body, setBody] = useState("질문종류"); + + function BodyChange(e: { target: { value: React.SetStateAction } }) { + setBody(e.target.value); + } +} + +function SelectCity() { + const [selectCity, setSelectCity] = useState("질문종류"); + + function CityChange(e: { target: { value: React.SetStateAction } }) { + setSelectCity(e.target.value); + } + return ( + + ); +} + +function SelectTheme() { + const [selectTheme, setSelectTheme] = useState("질문종류"); + + function ThemeChange(e: { target: { value: React.SetStateAction } }) { + setSelectTheme(e.target.value); + } + return ( + + ); +} +// 눌렀다는 데이터가 어딘가에 있어야 한다. Map 객체를 이용해서 기타등등 + +// function postup() { +// axios.post("localhost:3000/api/post/up", { +// id: "a", +// title: title, +// body: body, +// date: `${() => new Date()}`, +// theme: selectTheme, +// city: selectCity, +// }); +// } export default function Posting() { - return( -
-
-
-

Id

-

empty

- - -

city

- - -
-
- -
-
- -
-
+ return ( +
+
+
+

Id

+

empty

+ + + + +
+ +
+ +
+
+
- ); -} \ No newline at end of file +
+
+ ); +} diff --git a/frontend/src/Pages/typesrc.tsx b/frontend/src/Pages/typesrc.tsx index 2c674eac6cffea75be0a0abaecfc087f9345ca7b..7010b13696b8d0b3902e55c71736185a70c653ed 100644 --- a/frontend/src/Pages/typesrc.tsx +++ b/frontend/src/Pages/typesrc.tsx @@ -7,4 +7,4 @@ export interface PostType { theme?: string; city?: string; -} \ No newline at end of file +} diff --git a/frontend/src/pages/board.tsx b/frontend/src/pages/board.tsx index 0a2ce4c429f1d0c770a0d08243ce9fadb27633d4..d482ffdcaf40e1d199810fcec143568ab5e939ab 100644 --- a/frontend/src/pages/board.tsx +++ b/frontend/src/pages/board.tsx @@ -4,68 +4,116 @@ import { PostType } from "./typesrc"; import Post from "./post"; 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); } interface Posts { - posts: PostType[]; + posts: PostType[]; } export const fakes = [ - { id: "a", title: '여행가고싶다...', date: '2022-06-30', counts: 0 }, - { id: "b", title: '바다!바다!바다!', date: '2022-08-01', counts: 0 }, - { id: "c", title: 'Jeju-island', date: '2022-9-10', counts: 0 }, - { id: "d", title: '마! 부싼 가봤나!', date: '2022-9-22', counts: 0 }, - { id: "e", title: 'Daegu', date: '2022-10-1', counts: 0 }, - { id: "f", title: '강원도 감자는 맛있다.', date: '2022-12-12', counts: 0 }, - { id: "g", title: '부산남자의 서울여행', date: '2022-12-25', counts: 0 } + { + id: "a", + title: "여행가고싶다...", + date: "2022-06-30", + counts: 0, + theme: "surfing", + city: "seoul", + }, + { + id: "b", + title: "바다!바다!바다!", + date: "2022-08-01", + counts: 0, + theme: "surfing", + city: "seoul", + }, + { + id: "c", + title: "Jeju-island", + date: "2022-9-10", + counts: 0, + theme: "surfing", + city: "seoul", + }, + { + id: "d", + title: "마! 부싼 가봤나!", + date: "2022-9-22", + counts: 0, + theme: "surfing", + city: "seoul", + }, + { + id: "e", + title: "Daegu", + date: "2022-10-1", + counts: 0, + theme: "surfing", + city: "seoul", + }, + { + id: "f", + title: "강원도 감자는 맛있다.", + date: "2022-12-12", + counts: 0, + theme: "surfing", + city: "seoul", + }, + { + id: "g", + title: "부산남자의 서울여행", + date: "2022-12-25", + counts: 0, + theme: "surfing", + city: "seoul", + }, ]; export default function BoardPage() { + const [posts, setPosts] = useState(fakes); - const [posts, setPosts] = useState(fakes); + const titleHandleClick = (event: MouseEvent) => { + const postId = event.currentTarget.id; + const newposts = [...posts]; + newposts.forEach((post) => { + if (post.id === postId) { + post.counts = post.counts + 1; + return; + } + }); + setPosts(newposts); + }; - const titleHandleClick = (event: MouseEvent) => { - const postId = event.currentTarget.id - const newposts = [...posts] - newposts.forEach(post => { - if (post.id === postId) { - post.counts = post.counts + 1 - return - } - }) - setPosts(newposts) - } + return ( +
+
+
`Travel Report's Board`
+
`여행지 후기를 남겨주세요!`
+
- - return ( -
-
-
- `Travel Report's Board` -
-
- `여행지 후기를 남겨주세요!` -
-
- -
-
-
{/* Link */} -
-
-
-
Title
-
Date
-
Clicks
-
-
- {posts.map((post) => ( - - ))} -
-
-
+
+
+
+ + + +
{" "} + {/* Link */}
- ); -} \ No newline at end of file +
+
+
Title
+
Date
+
Clicks
+
+
+ {posts.map((post) => ( + + ))} +
+
+
+
+ ); +} diff --git a/frontend/src/pages/header.tsx b/frontend/src/pages/header.tsx index ae83dc4ae830e6c042f38067a1c950895714dd0c..2d78c8d8fcbd1cd4cfad3921ab244a350d481dc4 100644 --- a/frontend/src/pages/header.tsx +++ b/frontend/src/pages/header.tsx @@ -14,6 +14,7 @@ export default function Header() {
- - ) + ); } export default function Login() { - return ( - -
- {/*
*/} -
- -
- Travel Report -
- -
- -
- - - - -
-
- -
- -
-
- - -
- {/*
*/} -
// Login Page - ); -} \ No newline at end of file + return ( +
+ {/*
*/} +
+
+ Travel Report +
+ +
+
+ +
+
+ +
+ +
+
+
+ {/*
*/} +
// Login Page + ); +} diff --git a/src/app.ts b/src/app.ts index ec26419071dd2d89005f8c5363f092ff9de46531..2c8b902222d0af43efbeabf00fa4c5a432074d83 100644 --- a/src/app.ts +++ b/src/app.ts @@ -8,6 +8,8 @@ app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser()); +app.get('/', (req, res) => res.send('Hello World! 안녕하세요')) + app.use("/api", router); app.use((err: any, req: Request, res: Response, next: NextFunction) => { console.log("익스프레스 에러: ", err); diff --git a/src/controllers/auth.controller.ts b/src/controllers/auth.controller.ts index a8f90a1d3587b72e5b10515abdfe1a307b3c69de..b1b2ea5c0cd6c488f1d39ee488055673256052e2 100644 --- a/src/controllers/auth.controller.ts +++ b/src/controllers/auth.controller.ts @@ -25,15 +25,15 @@ export const login = asyncWrap(async (req, res) => { return res.status(401).send("잘못된 비밀번호를 입력하셨습니다"); } // 3) 비밀번호가 맞으면 토큰 생성 - const token = jwt.sign({ userId: user.id }, jwtCofig.secret, { + const token = jwt.sign({ userId: user.id }, jwtCofig.secret, { //userId를 토큰에다 넣는 중. expiresIn: jwtCofig.expires, }); // 4) 토큰을 쿠키에 저장 - res.cookie(cookieConfig.name, token, { - maxAge: cookieConfig.maxAge, - path: "/", - httpOnly: envConfig.mode === "production", - secure: envConfig.mode === "production", + res.cookie(cookieConfig.name, token, {//token은 쿠키에 무엇을 실렸는가 이다. 항상 갖고 있다가 홈페이지 들어가면 서버로 접속 + maxAge: cookieConfig.maxAge,// 이 기간 한에서만 유효 + path: "/",//어떠한 경로에 관해서만 쓴다. 지금은 전부에 쓴다. + httpOnly: envConfig.mode === "production", //false 면 브라우저에서 쿠키를 조작, true면 조작할 수 있다. + secure: envConfig.mode === "production", //true 면 https 를 통해서만 쿠키 전달, false면 }); // 5) 사용자 반환 res.json({ @@ -51,15 +51,15 @@ export const requireLogin = asyncWrap(async (reqExp, res, next) => { const req = reqExp as TypedRequestAuth; try { // 1) 쿠키 토큰 존재 여부 확인 - const token = req.cookies[cookieConfig.name]; + const token = req.cookies[cookieConfig.name]; //클라이언트 쪽에서 보낸 토큰을 받는중 if (!token) { throw new Error("토큰이 존재하지 않습니다"); } // 2) 쿠키 유효성 검사 - const decodedUser = jwt.verify(token, jwtCofig.secret); + const decodedUser = jwt.verify(token, jwtCofig.secret); // 아까보낸 토근을 디코딩중. // 3) 요청 객체에 토큰 사용자 객체 추가 req.auth = decodedUser; - next(); + next();// 에러가 안나오면 next 사용, 나오면 catch쪽으로. } catch (error) { res.clearCookie(cookieConfig.name); console.log("error in requreLogin===\n", error); diff --git a/src/controllers/index.ts b/src/controllers/index.ts index 6f46f1d954d66cf79d0bf2f0f63e35f7e7292401..82eed0c70de8f110ee7b35491cc08cdbc66f5ec0 100644 --- a/src/controllers/index.ts +++ b/src/controllers/index.ts @@ -1,3 +1,3 @@ export * as userCtrl from "./user.controller"; export * as authCtrl from "./auth.controller"; -export * as postCtrl from "./post.controller"; \ No newline at end of file +export * as postCtrl from "./post.controller"; diff --git a/src/controllers/post.controller.ts b/src/controllers/post.controller.ts index 27d21673422d41c652232685317380d890131285..c09dc774db860be45d28a9420c0d19aef409d9b4 100644 --- a/src/controllers/post.controller.ts +++ b/src/controllers/post.controller.ts @@ -51,4 +51,4 @@ export const posting = asyncWrap(async (req, res) => { // 8) 사용자 반환 res.json({}); -}); \ No newline at end of file +}); diff --git a/src/db/index.ts b/src/db/index.ts index 3f5d832cc02130a92ca2d9f4052f3ec64d4357f1..64daf8dca85fad679735d4938b4fb850900ca5c3 100644 --- a/src/db/index.ts +++ b/src/db/index.ts @@ -1,3 +1,2 @@ export * as userDb from "./user.db"; export * as postDb from "./post.db"; - diff --git a/src/db/post.db.ts b/src/db/post.db.ts index 89778f5599bcc6eb2c4a95665f6beed8c14406c4..86dd9f49540c74726d568e4eb7be1994dcef5689 100644 --- a/src/db/post.db.ts +++ b/src/db/post.db.ts @@ -1,3 +1,11 @@ +import { PostType, Post } from "../models"; + +export const createPost = async (post: PostType) => { + const newPost = await Post.create(post); + return newPost; +}; + + export const checkTitleNull = async ( title : string, @@ -36,3 +44,4 @@ export const selectCity = async ( } } + diff --git a/src/index.ts b/src/index.ts index 1748e7d8d192b0d5ef9a1bb332a82fe0e376f5bc..0155bfd180c6da6656e8040769b62d8fefc68cf0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,6 +5,7 @@ import { mongoUri } from "./config"; connect(mongoUri) .then((mgs) => { console.log(`Mongoose is connected with version: ${mgs.version}`); + app.listen(3000, () => { console.log(`server is running on port ${3000}`); }); diff --git a/src/models/index.ts b/src/models/index.ts index 5f1152ce8d0302f06b04dc4532033876497d0ba0..11f41a6cfc6eaf29089c534d41ed4c0075e06479 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -1 +1,3 @@ export { default as User, IUser } from "./user.model"; +export { default as Post, PostType } from "./post.model"; + diff --git a/src/models/post.model.ts b/src/models/post.model.ts new file mode 100644 index 0000000000000000000000000000000000000000..1324e740d84a77082f4c7ee2cf7a9d6851ba4b5a --- /dev/null +++ b/src/models/post.model.ts @@ -0,0 +1,24 @@ +import { model, Schema } from "mongoose"; + +export interface PostType { + id: string; + title: string; + date: Date; + body : string; + counts?: number; + theme: string; + city: string; + } + +const schema = new Schema({ + id : {type: String}, + title : { type: String }, + date : {type: Date}, + body : {type : String}, + counts : {type: Number}, + theme : {type: String}, + city : {type: String}, + +}); + +export default model("Post", schema); diff --git a/src/models/user.model.ts b/src/models/user.model.ts index e8803340ee61a42f66751aaffbb4d571055c9a1c..cd084624ed678fb169b42c4d6a85e56095d0bb3f 100644 --- a/src/models/user.model.ts +++ b/src/models/user.model.ts @@ -14,7 +14,7 @@ const validateEmail = (email: string) => { const schema = new Schema({ email: { - type: String, + type: String,//mongoose type 인 String 으로 일반적인 string 과는 겉으로는 대문자 차이 rquired: true, unique: true, validate: [validateEmail, "이메일을 입력해주세요"], diff --git a/src/routes/index.ts b/src/routes/index.ts index 591462a9539093ca5abfaa6bc7c4984a424a04a8..cf0635ce1dc5470586a8b6dcc1abdf7d83b33816 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -9,4 +9,5 @@ router.use("/users", userRouter); router.use("/auth", authRouter); router.use("/posts", postRouter); //router.route + export default router;