Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
travel
Commits
59f5e72f
Commit
59f5e72f
authored
Jul 13, 2022
by
Kim, MinGyu
Browse files
프로필 페이지
parent
29db1326
Changes
14
Hide whitespace changes
Inline
Side-by-side
frontend/src/App.tsx
View file @
59f5e72f
import
React
from
"
react
"
;
import
{
BrowserRouter
,
Route
,
Routes
,
Link
,
Outlet
}
from
"
react-router-dom
"
;
import
"
tailwindcss/tailwind.css
"
;
import
{
Login
,
Signup
}
from
"
./auth
"
;
import
{
Login
,
Signup
,
Profile
}
from
"
./auth
"
;
import
{
Board
}
from
"
./board
"
;
import
{
Header
,
Body
}
from
"
./home
"
;
import
Posting
from
"
./post/posting
"
;
...
...
@@ -18,6 +18,7 @@ export const App = () => {
<
Route
index
element
=
{
<
Body
/>
}
/>
<
Route
path
=
"board"
element
=
{
<
Board
/>
}
/>
<
Route
path
=
"posting"
element
=
{
<
Posting
/>
}
/>
<
Route
path
=
"profile"
element
=
{
<
Profile
/>
}
/>
</
Route
>
</
Route
>
</
Routes
>
...
...
frontend/src/apis/index.ts
View file @
59f5e72f
...
...
@@ -2,3 +2,4 @@ import axios from "axios";
export
*
as
authApi
from
"
./auth.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
{
IUser
}
from
"
../types
"
;
import
{
IUser
,
Profile
}
from
"
../types
"
;
import
{
profileApi
}
from
"
../apis
"
;
const
LOCAL_USER_INFO
=
"
survey-user-info
"
;
...
...
@@ -58,3 +59,8 @@ export const getLocalUser = () => {
}
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
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() {
검색
</
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
?
(
<
button
onClick
=
{
()
=>
{
logout
();
}
}
>
로그아웃
</
button
>
<
div
className
=
"flex"
>
<
Link
to
=
"/profile"
className
=
"mr-2 "
>
프로필
</
Link
>
<
div
className
=
"border-0 border-r-2"
></
div
>
<
div
></
div
>
<
button
className
=
"ml-2 mr-2"
onClick
=
{
()
=>
{
logout
();
}
}
>
로그아웃
</
button
>
<
div
className
=
"border-0 border-r-2"
></
div
>
<
div
></
div
>
</
div
>
)
:
(
<
button
className
=
"shrink-0 bg-white "
>
<
Link
...
...
@@ -43,7 +53,7 @@ export default function Header() {
</
button
>
)
}
</
div
>
<
button
className
=
"shrink-0
p-3
bg-white
"
>
<
button
className
=
"shrink-0 bg-white"
>
<
Link
to
=
"/board"
className
=
"hover:bg-purple-300 focus:text-purple-500"
...
...
frontend/src/index.tsx
View file @
59f5e72f
import
React
from
"
react
"
;
import
{
createRoot
}
from
"
react-dom/client
"
;
import
{
App
}
from
"
./App
"
;
import
{
AuthProvider
}
from
"
./auth/auth.context
"
;
const
container
=
document
.
getElementById
(
"
root
"
);
const
root
=
createRoot
(
container
!
);
root
.
render
(
<
React
.
StrictMode
>
{
/* <AuthProvider> */
}
<
App
/>
{
/* </AuthProvider> */
}
</
React
.
StrictMode
>
);
frontend/src/types/index.tsx
View file @
59f5e72f
...
...
@@ -28,3 +28,8 @@ export interface SignupUser {
name
:
string
;
password
:
string
;
}
export
interface
Profile
{
_id
:
string
;
email
:
string
;
}
src/controllers/user.controller.ts
View file @
59f5e72f
import
{
userDb
}
from
"
../db
"
;
import
{
asyncWrap
}
from
"
../helpers/asyncWrap
"
;
import
{
Request
}
from
"
express
"
;
export
interface
TypedRequestAuth
<
T
>
extends
Request
{
auth
:
T
;
}
export
const
getUsers
=
asyncWrap
(
async
(
req
,
res
)
=>
{
const
users
=
await
userDb
.
getUsers
();
...
...
@@ -12,3 +17,11 @@ export const createUser = asyncWrap(async (req, res) => {
const
newUser
=
await
userDb
.
createUser
(
user
);
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) => {
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";
import
userRouter
from
"
./user.route
"
;
import
authRouter
from
"
./auth.route
"
;
import
postRouter
from
"
./post.route
"
;
import
profileRouter
from
"
./profile.route
"
;
const
router
=
express
.
Router
();
router
.
use
(
"
/users
"
,
userRouter
);
router
.
use
(
"
/auth
"
,
authRouter
);
router
.
use
(
"
/posts
"
,
postRouter
);
router
.
use
(
"
/profile
"
,
profileRouter
)
//posting함수 -> mongodb에 posts json형식으로 저장
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
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment