Skip to content

GitLab

Commit 59f5e72f authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

프로필 페이지

parent 29db1326
Show whitespace changes
Inline Side-by-side
frontend/src/App.tsx
View file @ 59f5e72f
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 { Login, Signup } from "./auth"; import { Login, Signup, Profile } 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";
...@@ -18,6 +18,7 @@ export const App = () => { ...@@ -18,6 +18,7 @@ export const App = () => {
<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 path="profile" element={<Profile />} />
</Route> </Route>
</Route> </Route>
</Routes> </Routes>
......
frontend/src/apis/index.ts
View file @ 59f5e72f
...@@ -2,3 +2,4 @@ import axios from "axios"; ...@@ -2,3 +2,4 @@ import axios from "axios";
export * as authApi from "./auth.api"; export * as authApi from "./auth.api";
export * as postApi from "./post.api"; export * as postApi from "./post.api";
export * as profileApi from "./profile.api"
\ No newline at end of file
frontend/src/apis/profile.api.ts 0 → 100644
View file @ 59f5e72f
import axios from "axios";
import baseUrl from "./baseUrl";
export const profile = async () => {
const { data } = await axios.get(`${baseUrl}/profile`);
return data;
};
\ No newline at end of file
frontend/src/auth/auth.helper.ts
View file @ 59f5e72f
import { authApi } from "../apis"; import { authApi } from "../apis";
import { IUser } from "../types"; import { IUser, Profile } from "../types";
import { profileApi } from "../apis";
const LOCAL_USER_INFO = "survey-user-info"; const LOCAL_USER_INFO = "survey-user-info";
...@@ -58,3 +59,8 @@ export const getLocalUser = () => { ...@@ -58,3 +59,8 @@ export const getLocalUser = () => {
} }
return user; return user;
}; };
export const handleProfile = async () => {
const user : Profile = await profileApi.profile();
return user
};
\ No newline at end of file
frontend/src/auth/auth.helper.tsx deleted 100644 → 0
View file @ 29db1326
import { authApi } from "../apis";
import { IUser } from "../types";
const LOCAL_USER_INFO = "survey-user-info";
/**
* 1. 백엔드 로그인을 호출하여 로그인 정보를 얻습니다.
* 2. 로컬 저장소에 저장합니다.
* 3. 사용자 정보를 반환합니다.
* @param email 이메일
* @param password 비밀번호
* @returns 사용자 정보
*/
export const handleLogin = async (email: string, password: string) => {
const user: IUser = await authApi.login(email, password);
// 로컬 저장소에는 로그인 여부만 저장
localStorage.setItem(
LOCAL_USER_INFO,
JSON.stringify({
isLoggedIn: user.isLoggedIn,
})
);
return user;
};
/**
* 로컬 저장소의 정보를 삭제합니다.
* 백엔드 로그아웃을 호출하여 쿠키를 제거합니다.
*/
export const handleLogout = async () => {
console.log("handle logout called");
localStorage.removeItem(LOCAL_USER_INFO);
try {
await authApi.logout();
} catch (error) {
console.log("logout 중에 에러 발생:", error);
}
};
/**
* 1. 로컬 저장소에 저장된 사용자 로그인 정보를 반환합니다.
* 2. 로컬 저장소에 정보가 없으면 { isLoggedIn: false }를 반환합니다.
* @returns 로컬 저장소에 저장된 사용자 정보
*/
export const getLocalUser = () => {
console.log("get local user called");
const userInfo = localStorage.getItem(LOCAL_USER_INFO);
const user: IUser = { isLoggedIn: false };
if (!userInfo) {
return user;
}
const userData = JSON.parse(userInfo);
if (userData.isLoggedIn) {
user.isLoggedIn = true;
} else {
user.isLoggedIn = false;
}
return user;
};
frontend/src/auth/index.tsx
View file @ 59f5e72f
export { default as Login } from "./login"; export { default as Login } from "./login";
export { default as Signup } from "./signup"; export { default as Signup } from "./signup";
export { default as Profile } from "./profile";
frontend/src/auth/profile.tsx 0 → 100644
View file @ 59f5e72f
import React, { useEffect, useState } from "react";
import { handleProfile } from "./auth.helper";
export default function Profile() {
// 로컬 저장소에는 로그인 여부만 저장
const [email, setemail] = useState("");
const emailChange = async () => {
const profile = await handleProfile();
setemail(profile.email);
};
useEffect(() => {
emailChange();
}, []);
return (
<div className="grid ">
<div className="ml-20 mt-10">프로필 </div>
<div className="grid m-20 border-0 border-y-2">
<div className="flex">
<div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center ">
Email
</div>
<div className="basis-full">{email}</div>
</div>
<div className="flex border-0 border-t-2">
<div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center">
사진
</div>
<div className="basis-full">a</div>
</div>
<div className="flex border-0 border-t-2">
<div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center">
별명
</div>
<div className="basis-full">a</div>
</div>
</div>
</div>
);
}
frontend/src/home/header.tsx
View file @ 59f5e72f
...@@ -23,15 +23,25 @@ export default function Header() { ...@@ -23,15 +23,25 @@ export default function Header() {
검색 검색
</button> </button>
<div className="shrink-0 p-3 md:ml-52 border-r-2 h-12"> <div className="shrink-0 p-3 md:ml-40 h-12">
{useAuth().user.isLoggedIn ? ( {useAuth().user.isLoggedIn ? (
<div className="flex">
<Link to="/profile" className="mr-2 ">
프로필
</Link>
<div className="border-0 border-r-2"></div>
<div></div>
<button <button
className="ml-2 mr-2"
onClick={() => { onClick={() => {
logout(); logout();
}} }}
> >
로그아웃 로그아웃
</button> </button>
<div className="border-0 border-r-2"></div>
<div></div>
</div>
) : ( ) : (
<button className="shrink-0 bg-white "> <button className="shrink-0 bg-white ">
<Link <Link
...@@ -43,7 +53,7 @@ export default function Header() { ...@@ -43,7 +53,7 @@ export default function Header() {
</button> </button>
)} )}
</div> </div>
<button className="shrink-0 p-3 bg-white "> <button className="shrink-0 bg-white">
<Link <Link
to="/board" to="/board"
className="hover:bg-purple-300 focus:text-purple-500" className="hover:bg-purple-300 focus:text-purple-500"
......
frontend/src/index.tsx
View file @ 59f5e72f
import React from "react"; import React from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { App } from "./App"; import { App } from "./App";
import { AuthProvider } from "./auth/auth.context";
const container = document.getElementById("root"); const container = document.getElementById("root");
const root = createRoot(container!); const root = createRoot(container!);
root.render( root.render(
<React.StrictMode> <React.StrictMode>
{/* <AuthProvider> */}
<App /> <App />
{/* </AuthProvider> */}
</React.StrictMode> </React.StrictMode>
); );
frontend/src/types/index.tsx
View file @ 59f5e72f
...@@ -28,3 +28,8 @@ export interface SignupUser { ...@@ -28,3 +28,8 @@ export interface SignupUser {
name: string; name: string;
password: string; password: string;
} }
export interface Profile {
_id: string;
email: string;
}
src/controllers/user.controller.ts
View file @ 59f5e72f
import { userDb } from "../db"; import { userDb } from "../db";
import { asyncWrap } from "../helpers/asyncWrap"; import { asyncWrap } from "../helpers/asyncWrap";
import { Request } from "express";
export interface TypedRequestAuth<T> extends Request {
auth: T;
}
export const getUsers = asyncWrap(async (req, res) => { export const getUsers = asyncWrap(async (req, res) => {
const users = await userDb.getUsers(); const users = await userDb.getUsers();
...@@ -12,3 +17,11 @@ export const createUser = asyncWrap(async (req, res) => { ...@@ -12,3 +17,11 @@ export const createUser = asyncWrap(async (req, res) => {
const newUser = await userDb.createUser(user); const newUser = await userDb.createUser(user);
return res.json(newUser); return res.json(newUser);
}); });
export const getProfile = asyncWrap(async (reqExp, res) => {
const req = reqExp as TypedRequestAuth<{userId : string}>; // 앞에서는 토큰으로써 사용하기 때문에 JwtPayload 를 사용하고 여기서는 verify 에서 토큰을 디코딩했기에 ObjectId 타입의 string으로 바뀌게 된다.
const {userId} = req.auth;
const profile = await userDb.getProfile(userId);
res.json(profile)
})
\ No newline at end of file
src/db/user.db.ts
View file @ 59f5e72f
...@@ -34,3 +34,8 @@ export const isUser = async (email: string) => { ...@@ -34,3 +34,8 @@ export const isUser = async (email: string) => {
return false; return false;
} }
}; };
export const getProfile = async (userId : string) => {
const profile = await User.findById(userId)
return profile //이름 수정
}
\ No newline at end of file
src/routes/index.ts
View file @ 59f5e72f
...@@ -2,12 +2,14 @@ import express from "express"; ...@@ -2,12 +2,14 @@ import express from "express";
import userRouter from "./user.route"; import userRouter from "./user.route";
import authRouter from "./auth.route"; import authRouter from "./auth.route";
import postRouter from "./post.route"; import postRouter from "./post.route";
import profileRouter from "./profile.route";
const router = express.Router(); const router = express.Router();
router.use("/users", userRouter); router.use("/users", userRouter);
router.use("/auth", authRouter); router.use("/auth", authRouter);
router.use("/posts", postRouter); router.use("/posts", postRouter);
router.use("/profile", profileRouter)
//posting함수 -> mongodb에 posts json형식으로 저장 //posting함수 -> mongodb에 posts json형식으로 저장
export default router; export default router;
src/routes/profile.route.ts 0 → 100644
View file @ 59f5e72f
import express from "express";
import { userCtrl, authCtrl } from "../controllers";
const router = express.Router();
router
.route("/")
.get(authCtrl.requireLogin, userCtrl.getProfile)
export default router;
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