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
6c265dde
Commit
6c265dde
authored
Jul 26, 2022
by
Yoon, Daeki
😅
Browse files
profile 로직 수정 변경
parent
da88857d
Changes
3
Show whitespace changes
Inline
Side-by-side
frontend/src/apis/profile.api.ts
View file @
6c265dde
...
@@ -7,7 +7,8 @@ export const profile = async () => {
...
@@ -7,7 +7,8 @@ export const profile = async () => {
};
};
export
const
profileUpload
=
async
(
formdata
:
FormData
)
=>
{
export
const
profileUpload
=
async
(
formdata
:
FormData
)
=>
{
await
axios
.
post
(
`
${
baseUrl
}
/profile`
,
formdata
);
const
{
data
}
=
await
axios
.
post
(
`
${
baseUrl
}
/profile`
,
formdata
);
return
data
;
};
};
export
const
deleteUser
=
async
()
=>
{
export
const
deleteUser
=
async
()
=>
{
...
...
frontend/src/auth/profile.tsx
View file @
6c265dde
import
React
,
{
useEffect
,
useState
}
from
"
react
"
;
import
React
,
{
ChangeEvent
,
FormEvent
,
useEffect
,
useState
}
from
"
react
"
;
import
{
Profile
}
from
"
../types
"
;
import
{
Profile
}
from
"
../types
"
;
import
{
profileApi
}
from
"
../apis
"
;
import
{
profileApi
}
from
"
../apis
"
;
import
{
useAuth
}
from
"
../auth/auth.context
"
;
import
{
useAuth
}
from
"
../auth/auth.context
"
;
...
@@ -7,89 +7,67 @@ import { Link } from "react-router-dom";
...
@@ -7,89 +7,67 @@ import { Link } from "react-router-dom";
export
default
function
Profile
()
{
export
default
function
Profile
()
{
// 로컬 저장소에는 로그인 여부만 저장
// 로컬 저장소에는 로그인 여부만 저장
const
[
email
,
setEmail
]
=
useState
(
""
);
const
[
email
,
setEmail
]
=
useState
(
""
);
const
[
picturename
,
setPicturename
]
=
useState
(
""
);
const
[
profile
,
setProfile
]
=
useState
<
{
const
[
file
,
setFile
]
=
useState
<
File
>
();
name
:
string
;
avatar
:
File
|
null
;
}
>
({
name
:
""
,
avatar
:
null
});
const
[
avatarUrl
,
setAvatarUrl
]
=
useState
(
""
);
const
[
imageSrc
,
setImageSrc
]
=
useState
(
""
);
const
[
imageSrc
,
setImageSrc
]
=
useState
(
""
);
const
[
nickname
,
setNickname
]
=
useState
(
""
);
const
[
placeholder
,
setPlaceholder
]
=
useState
(
""
);
const
{
logout
}
=
useAuth
();
const
{
logout
}
=
useAuth
();
const
handleProfile
=
async
()
=>
{
const
handleChange
=
(
e
:
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
user
:
Profile
=
await
profileApi
.
profile
();
const
{
name
,
value
,
files
}
=
e
.
target
;
return
user
;
console
.
log
(
"
name
"
,
name
,
"
value
"
,
value
);
if
(
files
)
{
setProfile
({
...
profile
,
[
name
]:
files
[
0
]
});
showImage
(
files
[
0
]);
}
else
{
setProfile
({
...
profile
,
[
name
]:
value
});
}
};
};
const
PictureSrc
=
(
fileB
lob
:
Blob
)
=>
{
const
showImage
=
(
b
lob
:
Blob
)
=>
{
const
reader
=
new
FileReader
();
const
reader
=
new
FileReader
();
reader
.
readAsDataURL
(
blob
);
reader
.
readAsDataURL
(
fileBlob
);
reader
.
onload
=
(
data
)
=>
{
reader
.
onload
=
(
data
)
=>
{
if
(
typeof
data
.
target
?.
result
===
"
string
"
)
{
if
(
typeof
data
.
target
?.
result
===
"
string
"
)
{
console
.
log
(
data
.
target
?.
result
);
//
console.log(data.target?.result);
setImageSrc
(
data
.
target
?.
result
);
setImageSrc
(
data
.
target
?.
result
);
}
}
};
};
};
};
const
onUploadFile
=
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
handleSubmit
=
async
(
e
:
FormEvent
)
=>
{
const
file
=
e
.
target
.
files
?.[
0
];
if
(
!
(
file
===
undefined
))
{
setFile
(
file
);
PictureSrc
(
file
);
}
};
const
onNickChange
=
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
newnickname
=
e
.
target
.
value
;
setNickname
(
newnickname
);
};
const
userChange
=
async
()
=>
{
const
profile
=
await
handleProfile
();
setEmail
(
profile
.
email
);
setPicturename
(
profile
.
fileInfo
.
newfilename
);
setPlaceholder
(
profile
.
fileInfo
.
nickname
);
};
const
handleClick
=
async
(
e
:
React
.
MouseEvent
<
HTMLButtonElement
,
globalThis
.
MouseEvent
>
)
=>
{
e
.
preventDefault
();
e
.
preventDefault
();
console
.
log
(
"
profile in submit
"
,
profile
);
const
formdata
=
new
FormData
();
const
formdata
=
new
FormData
();
if
(
!
(
file
===
undefined
||
nickname
===
""
))
{
profile
.
avatar
&&
formdata
.
append
(
"
avatar
"
,
profile
.
avatar
);
formdata
.
append
(
"
picture
"
,
file
);
formdata
.
append
(
"
name
"
,
profile
.
name
);
formdata
.
append
(
"
nickname
"
,
nickname
);
console
.
log
(
"
form data
"
,
formdata
.
get
(
"
avatar
"
));
console
.
log
(
"
both
"
);
profileApi
.
profileUpload
(
formdata
);
console
.
log
(
formdata
);
await
profileApi
.
profileUpload
(
formdata
);
}
else
if
(
!
(
file
===
undefined
)
&&
nickname
===
""
)
{
formdata
.
append
(
"
picture
"
,
file
);
await
profileApi
.
profileUpload
(
formdata
);
}
else
if
(
file
===
undefined
&&
!
(
nickname
===
""
))
{
formdata
.
append
(
"
nickname
"
,
nickname
);
await
profileApi
.
profileUpload
(
formdata
);
}
else
{
alert
(
"
수정할 정보를 입력해주세요.
"
);
}
};
};
const
d
elete
Click
=
async
()
=>
{
const
onD
elete
=
async
()
=>
{
if
(
confirm
(
"
삭제하시겠습니까?
"
)
==
true
)
{
if
(
confirm
(
"
삭제하시겠습니까?
"
)
==
true
)
{
const
success
=
await
profileApi
.
deleteUser
();
await
profileApi
.
deleteUser
();
if
(
success
)
{
await
logout
();
await
logout
();
}
}
}
else
{
}
};
};
useEffect
(()
=>
{
useEffect
(()
=>
{
userChange
();
const
getProfile
=
async
()
=>
{
const
user
:
Profile
=
await
profileApi
.
profile
();
console
.
log
(
"
user in effect
"
,
user
);
setEmail
(
user
.
email
);
setAvatarUrl
(
user
.
avatar
?.
newfilename
);
setProfile
({
...
profile
,
name
:
user
.
name
});
};
getProfile
();
},
[]);
},
[]);
return
(
return
(
<
div
className
=
"grid "
>
<
div
className
=
"grid "
>
<
form
className
=
""
>
<
form
className
=
""
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
" mt-10 text-2xl"
>
프로필 수정
</
div
>
<
div
className
=
" mt-10 text-2xl"
>
프로필 수정
</
div
>
<
div
className
=
"grid mt-10 border-0 border-y-2 border-gray-400 "
>
<
div
className
=
"grid mt-10 border-0 border-y-2 border-gray-400 "
>
<
div
className
=
"flex h-20"
>
<
div
className
=
"flex h-20"
>
...
@@ -112,38 +90,41 @@ export default function Profile() {
...
@@ -112,38 +90,41 @@ export default function Profile() {
className
=
"object-cover object-center h-full"
className
=
"object-cover object-center h-full"
/>
/>
)
:
(
)
:
(
avatarUrl
&&
(
<
img
<
img
src
=
{
"
http://localhost:3000/images/
"
+
picturename
}
src
=
{
"
http://localhost:3000/images/
"
+
avatarUrl
}
className
=
"object-cover object-center h-full"
className
=
"object-cover object-center h-full"
/>
/>
)
)
}
)
}
</
div
>
</
div
>
<
input
<
input
type
=
"file"
type
=
"file"
id
=
"files"
name
=
"avatar"
id
=
"avatar"
className
=
"hidden"
className
=
"hidden"
onChange
=
{
onUploadFil
e
}
onChange
=
{
handleChang
e
}
></
input
>
></
input
>
<
label
htmlFor
=
"
files
"
className
=
"border-2 m-5"
>
<
label
htmlFor
=
"
avatar
"
className
=
"border-2 m-5"
>
이미지 선택
이미지 선택
</
label
>
</
label
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
className
=
"flex border-0 border-t-2 h-20"
>
<
div
className
=
"flex border-0 border-t-2 h-20"
>
<
div
className
=
"basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0"
>
<
div
className
=
"basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0"
>
별명
이름
</
div
>
</
div
>
<
input
<
input
placeholder
=
{
placeholder
}
name
=
"name"
placeholder
=
{
profile
.
name
}
className
=
"basis-1/5 placeholder:text-black my-6 ml-5 border-2 "
className
=
"basis-1/5 placeholder:text-black my-6 ml-5 border-2 "
onChange
=
{
onNick
Change
}
onChange
=
{
handle
Change
}
/>
/>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
className
=
"flex md:mb-20 justify-center gap-x-3"
>
<
div
className
=
"flex md:mb-20 justify-center gap-x-3"
>
<
button
<
button
onClick
=
{
handle
Click
}
onClick
=
{
handle
Submit
}
className
=
" mt-5 h-12 w-40 border-2 border-blue-400 text-lg place-self-center"
className
=
" mt-5 h-12 w-40 border-2 border-blue-400 text-lg place-self-center"
>
>
저장하기
저장하기
...
@@ -154,7 +135,8 @@ export default function Profile() {
...
@@ -154,7 +135,8 @@ export default function Profile() {
</
button
>
</
button
>
<
button
<
button
onClick
=
{
deleteClick
}
type
=
"button"
onClick
=
{
onDelete
}
className
=
" mt-5 h-12 w-40 text-lg border-2 border-red-400 place-self-center"
className
=
" mt-5 h-12 w-40 text-lg border-2 border-red-400 place-self-center"
>
>
계정 삭제
계정 삭제
...
...
frontend/src/types/index.tsx
View file @
6c265dde
...
@@ -32,7 +32,8 @@ export interface SignupUser {
...
@@ -32,7 +32,8 @@ export interface SignupUser {
export
interface
Profile
{
export
interface
Profile
{
_id
:
string
;
_id
:
string
;
email
:
string
;
email
:
string
;
fileInfo
:
{
name
:
string
;
avatar
:
{
originalfilename
:
string
;
originalfilename
:
string
;
newfilename
:
string
;
newfilename
:
string
;
picturepath
:
string
;
picturepath
:
string
;
...
...
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