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
e99115b3
Commit
e99115b3
authored
Jul 21, 2022
by
Kim, MinGyu
Browse files
프로필 변경 및 css 개선
parent
316b6e6d
Changes
2
Show whitespace changes
Inline
Side-by-side
frontend/src/auth/profile.tsx
View file @
e99115b3
...
@@ -10,6 +10,7 @@ export default function Profile() {
...
@@ -10,6 +10,7 @@ export default function Profile() {
const
[
file
,
setFile
]
=
useState
<
File
>
();
const
[
file
,
setFile
]
=
useState
<
File
>
();
const
[
imageSrc
,
setImageSrc
]
=
useState
(
""
);
const
[
imageSrc
,
setImageSrc
]
=
useState
(
""
);
const
[
nickname
,
setNickname
]
=
useState
(
""
);
const
[
nickname
,
setNickname
]
=
useState
(
""
);
const
[
placeholder
,
setPlaceholder
]
=
useState
(
""
);
const
{
logout
}
=
useAuth
();
const
{
logout
}
=
useAuth
();
const
handleProfile
=
async
()
=>
{
const
handleProfile
=
async
()
=>
{
...
@@ -39,28 +40,43 @@ export default function Profile() {
...
@@ -39,28 +40,43 @@ export default function Profile() {
};
};
const
onNickChange
=
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
onNickChange
=
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
nickname
=
e
.
target
.
value
;
const
new
nickname
=
e
.
target
.
value
;
setNickname
(
nickname
);
setNickname
(
new
nickname
);
};
};
const
userChange
=
async
()
=>
{
const
userChange
=
async
()
=>
{
const
profile
=
await
handleProfile
();
const
profile
=
await
handleProfile
();
setEmail
(
profile
.
email
);
setEmail
(
profile
.
email
);
setPicturename
(
profile
.
avatar
.
newfilename
);
setPicturename
(
profile
.
avatar
.
newfilename
);
setPlaceholder
(
profile
.
avatar
.
nickname
);
};
};
const
handleClick
=
async
(
const
handleClick
=
async
(
e
:
React
.
MouseEvent
<
HTMLButtonElement
,
globalThis
.
MouseEvent
>
e
:
React
.
MouseEvent
<
HTMLButtonElement
,
globalThis
.
MouseEvent
>
)
=>
{
)
=>
{
const
formdata
=
new
FormData
();
const
formdata
=
new
FormData
();
if
(
!
(
file
===
undefined
||
fil
e
===
null
))
{
if
(
!
(
file
===
undefined
||
nicknam
e
===
""
))
{
formdata
.
append
(
"
picture
"
,
file
);
formdata
.
append
(
"
picture
"
,
file
);
}
formdata
.
append
(
"
nickname
"
,
nickname
);
formdata
.
append
(
"
nickname
"
,
nickname
);
console
.
log
(
"
both
"
);
await
profileApi
.
picture
(
formdata
);
}
else
if
(
!
(
file
===
undefined
)
&&
nickname
===
""
)
{
formdata
.
append
(
"
picture
"
,
file
);
console
.
log
(
"
file
"
);
await
profileApi
.
picture
(
formdata
);
await
profileApi
.
picture
(
formdata
);
}
else
if
(
file
===
undefined
&&
!
(
nickname
===
""
))
{
formdata
.
append
(
"
nickname
"
,
nickname
);
console
.
log
(
"
picture
"
);
await
profileApi
.
picture
(
formdata
);
}
else
{
alert
(
"
수정할 정보를 입력해주세요.
"
);
}
};
};
const
deleteClick
=
async
()
=>
{
const
deleteClick
=
async
()
=>
{
await
profileApi
.
deleteUser
().
then
(()
=>
logout
());
await
profileApi
.
deleteUser
().
then
(()
=>
{
logout
();
console
.
log
(
"
test
"
);
});
};
};
useEffect
(()
=>
{
useEffect
(()
=>
{
...
@@ -68,64 +84,69 @@ export default function Profile() {
...
@@ -68,64 +84,69 @@ export default function Profile() {
},
[]);
},
[]);
return
(
return
(
<
div
className
=
"grid "
>
<
div
className
=
"grid
md:px-60
"
>
<
form
className
=
""
>
<
form
className
=
"
justify-items-center
"
>
<
div
className
=
"ml-
4
0 mt-10"
>
프로필
</
div
>
<
div
className
=
"ml-
2
0 mt-10"
>
프로필
수정
</
div
>
<
div
className
=
"grid
ml-40
mt-20 border-0 border-y-2
w-2/3
"
>
<
div
className
=
"grid mt-20 border-0 border-y-2 "
>
<
div
className
=
"flex"
>
<
div
className
=
"flex"
>
<
div
className
=
"py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center "
>
<
div
className
=
"py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center
shrink-0
"
>
Email
Email
</
div
>
</
div
>
<
div
className
=
"basis-full my-5 p-5"
>
{
email
}
</
div
>
<
div
className
=
"basis-full my-5 p-5"
>
{
email
}
</
div
>
</
div
>
</
div
>
<
div
className
=
"flex border-0 border-t-2"
>
<
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
className
=
"py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center
shrink-0
"
>
사진
사진
</
div
>
</
div
>
<
div
className
=
"basis-full p-2"
>
<
div
className
=
"basis-full p-2 "
>
<
div
className
=
"overflow-hidden w-40 h-40 rounded-full border-2 m-5"
>
{
imageSrc
?
(
{
imageSrc
?
(
<
img
<
img
src
=
{
imageSrc
}
src
=
{
imageSrc
}
width
=
{
200
}
className
=
"object-cover object-center h-full"
height
=
{
200
}
alt
=
"preview-img"
/>
/>
)
:
(
)
:
(
<
img
<
img
src
=
{
"
http://localhost:3000/images/
"
+
picturename
}
src
=
{
"
http://localhost:3000/images/
"
+
picturename
}
width
=
{
200
}
className
=
"object-cover object-center h-full"
height
=
{
200
}
/>
/>
)
}
)
}
</
div
>
<
input
<
input
type
=
"file"
type
=
"file"
id
=
"files"
id
=
"files"
className
=
"hidden"
className
=
"hidden"
onChange
=
{
onUploadFile
}
onChange
=
{
onUploadFile
}
></
input
>
></
input
>
<
label
htmlFor
=
"files"
className
=
"border-2"
>
<
label
htmlFor
=
"files"
className
=
"border-2
m-5
"
>
이미지 선택
이미지 선택
</
label
>
</
label
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
className
=
"flex border-0 border-t-2"
>
<
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
className
=
"py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center
shrink-0
"
>
별명
별명
</
div
>
</
div
>
<
div
className
=
"basis-full "
>
<
div
className
=
"basis-full "
>
<
input
<
input
placeholder
=
"빈칸"
placeholder
=
{
placeholder
}
className
=
"basis-full placeholder:text-black my-10 ml-5"
className
=
"basis-full placeholder:text-black my-10 ml-5
border-2
"
onChange
=
{
onNickChange
}
onChange
=
{
onNickChange
}
/>
/>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
className
=
"grid justify-items-center mb-20"
>
<
div
className
=
"grid grid-cols-2 my-4 md:mb-20 justify-items-center"
>
<
button
onClick
=
{
handleClick
}
className
=
" border-2 "
>
<
button
onClick
=
{
handleClick
}
className
=
"w-20 border-2 shrink-0 ml-10"
>
저장하기
저장하기
</
button
>
</
button
>
<
button
onClick
=
{
deleteClick
}
className
=
"border-2"
>
<
button
onClick
=
{
deleteClick
}
className
=
"w-20 border-2 shrink-0 mr-10"
>
계정 삭제
계정 삭제
</
button
>
</
button
>
</
div
>
</
div
>
...
...
frontend/src/home/header.tsx
View file @
e99115b3
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