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
770dd0ab
Commit
770dd0ab
authored
Jul 07, 2022
by
Yoon, Daeki
😅
Browse files
Signup 로직 추가하고 스타일 변경
parent
eef9d0c4
Changes
3
Hide whitespace changes
Inline
Side-by-side
frontend/src/apis/auth.api.ts
View file @
770dd0ab
import
axios
from
"
axios
"
;
import
axios
from
"
axios
"
;
import
{
SignupUser
}
from
"
../types
"
;
import
baseUrl
from
"
./baseUrl
"
;
import
baseUrl
from
"
./baseUrl
"
;
export
const
login
=
async
(
email
:
string
,
password
:
string
)
=>
{
export
const
login
=
async
(
email
:
string
,
password
:
string
)
=>
{
...
@@ -13,3 +14,8 @@ export const logout = async () => {
...
@@ -13,3 +14,8 @@ export const logout = async () => {
const
{
data
}
=
await
axios
.
get
(
`
${
baseUrl
}
/auth/logout`
);
const
{
data
}
=
await
axios
.
get
(
`
${
baseUrl
}
/auth/logout`
);
return
data
;
return
data
;
};
};
export
const
signup
=
async
(
user
:
SignupUser
)
=>
{
const
{
data
}
=
await
axios
.
post
(
`
${
baseUrl
}
/auth/signup`
,
user
);
return
data
;
};
frontend/src/auth/signup.tsx
View file @
770dd0ab
import
React
,
{
useState
}
from
"
react
"
;
import
React
,
{
FormEvent
,
useEffect
,
useState
}
from
"
react
"
;
import
{
Link
}
from
"
react-router-dom
"
;
import
{
Link
,
useNavigate
}
from
"
react-router-dom
"
;
import
{
authApi
}
from
"
../apis
"
;
import
{
catchErrors
}
from
"
../helpers
"
;
import
{
SignupUser
}
from
"
../types
"
;
export
default
function
Signup
()
{
export
default
function
Signup
()
{
const
[
user
,
setUser
]
=
useState
<
SignupUser
&
{
password2
:
string
}
>
({
name
:
""
,
email
:
""
,
password
:
""
,
password2
:
""
,
});
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
[
error
,
setError
]
=
useState
(
""
);
const
[
disabled
,
setDisabled
]
=
useState
(
false
);
const
[
success
,
setSuccess
]
=
useState
(
false
);
const
navigate
=
useNavigate
();
useEffect
(()
=>
{
setDisabled
(
!
(
user
.
name
&&
user
.
email
&&
user
.
password
&&
user
.
password2
));
},
[
user
]);
function
handleChange
(
event
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
{
const
{
name
,
value
}
=
event
.
currentTarget
;
console
.
log
(
`name:
${
name
}
, value:
${
value
}
`
);
setUser
({
...
user
,
[
name
]:
value
});
}
async
function
handleSubmit
(
event
:
FormEvent
)
{
event
.
preventDefault
();
try
{
console
.
log
(
"
checkPassword:
"
,
passwordMatch
());
console
.
log
(
"
user data
"
,
user
);
if
(
passwordMatch
())
{
const
{
password2
,
...
sUser
}
=
user
;
const
res
=
await
authApi
.
signup
(
sUser
);
console
.
log
(
"
서버연결됬나요
"
,
res
);
console
.
log
(
"
회원가입
"
);
setSuccess
(
true
);
setError
(
""
);
}
}
catch
(
error
)
{
console
.
log
(
"
에러발생
"
);
catchErrors
(
error
,
setError
);
}
finally
{
setLoading
(
false
);
}
}
function
passwordMatch
()
{
if
(
user
.
password
!==
user
.
password2
)
{
alert
(
"
비밀번호가 일치하지않습니다
"
);
console
.
log
(
"
password fail
"
);
return
false
;
}
else
{
console
.
log
(
"
password match
"
);
return
true
;
}
}
if
(
success
)
{
alert
(
"
회원가입 되었습니다
"
);
navigate
(
"
/login
"
,
{
replace
:
true
});
}
return
(
return
(
<
div
className
=
"flex flex-col "
>
<
div
className
=
"flex flex-col
items-center
"
>
<
div
className
=
"p-12
w-1/2 h-1/2
md:w-40 m
d:h-1/6
bg-red-400
place-self-center
rounded-2xl"
>
<
div
className
=
"p-12 md:w-40 m
t-8
bg-red-400 rounded-2xl"
>
<
Link
to
=
"/"
>
Travel Report
</
Link
>
<
Link
to
=
"/"
>
Travel Report
</
Link
>
</
div
>
</
div
>
<
form
className
=
"py-3 border-b border-white "
>
<
form
onSubmit
=
{
handleSubmit
}
className
=
"flex flex-col items-center mt-16 gap-y-4"
>
<
input
className
=
"placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
placeholder
=
"이름"
type
=
"text"
name
=
"name"
onChange
=
{
handleChange
}
/>
<
input
className
=
"placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
placeholder
=
"이메일"
type
=
"email"
name
=
"email"
onChange
=
{
handleChange
}
/>
<
input
<
input
className
=
"
placeholder
:
text
-
slate
-
300
className
=
"
placeholder
:
text
-
slate
-
300
bg
-
white
border
border
-
slate
-
500
rounded
-
2xl
bg
-
white
border
border
-
slate
-
500
rounded
-
2xl
py
-
2
pl
-
9
pr
-
3
py
-
2
pl
-
9
pr
-
3
focus
:
border
-
black
"
focus
:
border
-
black
"
placeholder
=
"비밀번호"
placeholder
=
"비밀번호"
type
=
"
text
"
type
=
"
password
"
name
=
"password"
name
=
"password"
// value={password}
// value={password}
//
onChange={
(e) => setPassword(e.target.value)
}
onChange
=
{
handleChange
}
/>
/>
<
input
<
input
...
@@ -25,18 +107,18 @@ export default function Signup() {
...
@@ -25,18 +107,18 @@ export default function Signup() {
bg
-
white
border
border
-
slate
-
500
rounded
-
2xl
bg
-
white
border
border
-
slate
-
500
rounded
-
2xl
py
-
2
pl
-
9
pr
-
3
py
-
2
pl
-
9
pr
-
3
focus
:
border
-
black
"
focus
:
border
-
black
"
placeholder
=
"비밀번호"
placeholder
=
"비밀번호
확인
"
type
=
"
text
"
type
=
"
password
"
name
=
"password"
name
=
"password
2
"
// value={password}
// value={password}
// onChange={(e) => setPassword(e.target.value)}
onChange
=
{
handleChange
}
/>
<
input
className
=
"placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
placeholder
=
"email"
type
=
"text"
name
=
"Id"
/>
/>
<
button
disabled
=
{
disabled
}
className
=
"place-self-center py-3 border-b border-white"
>
회원가입
</
button
>
</
form
>
</
form
>
</
div
>
</
div
>
);
);
...
...
frontend/src/types/index.tsx
View file @
770dd0ab
...
@@ -7,3 +7,9 @@ export interface PostType {
...
@@ -7,3 +7,9 @@ export interface PostType {
theme
?:
string
;
theme
?:
string
;
city
?:
string
;
city
?:
string
;
}
}
export
interface
SignupUser
{
email
:
string
;
name
:
string
;
password
:
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