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
butter-studio
Commits
01ce1fdf
Commit
01ce1fdf
authored
Jul 19, 2021
by
Jiwon Yoon
Browse files
Merge branch 'gyumin'
parents
297ac748
ae3326aa
Changes
14
Show whitespace changes
Inline
Side-by-side
client/.gitignore
View file @
01ce1fdf
...
@@ -18,7 +18,6 @@
...
@@ -18,7 +18,6 @@
.env.development.local
.env.development.local
.env.test.local
.env.test.local
.env.production.local
.env.production.local
.env
npm-debug.log*
npm-debug.log*
yarn-debug.log*
yarn-debug.log*
...
...
client/src/apis/auth.api.js
0 → 100644
View file @
01ce1fdf
import
axios
from
"
axios
"
;
import
{
baseUrl
}
from
"
../utils/baseUrl.js
"
;
import
config
from
"
../utils/clientConfig.js
"
;
const
login
=
async
(
id
,
password
)
=>
{
const
payload
=
{
id
,
password
};
const
{
data
}
=
await
axios
.
post
(
`
${
baseUrl
}
/api/auth/login`
,
payload
);
return
data
};
const
logout
=
async
()
=>
{
alert
(
"
로그아웃되었습니다.
"
);
localStorage
.
removeItem
(
config
.
loginUser
);
await
axios
.
get
(
`
${
baseUrl
}
/api/auth/logout`
);
};
const
signup
=
async
(
user
)
=>
{
const
url
=
`
${
baseUrl
}
/api/auth/signup`
await
axios
.
post
(
url
,
user
)
}
const
compareId
=
async
(
userId
)
=>
{
const
url
=
`
${
baseUrl
}
/api/auth/
${
userId
}
`
const
{
data
}
=
await
axios
.
get
(
url
)
return
data
}
const
authApi
=
{
login
,
logout
,
signup
,
compareId
,
};
export
default
authApi
\ No newline at end of file
client/src/components/BoxOffice/BoxOffice.js
View file @
01ce1fdf
...
@@ -35,13 +35,13 @@ const BoxOffice = () => {
...
@@ -35,13 +35,13 @@ const BoxOffice = () => {
return
(
return
(
<
div
className
=
"
container text-center my-3
"
>
<
div
className
=
"
container text-center my-3
"
>
{
console
.
log
(
typeof
(
TMDB_TopRated_Data
))}
{
console
.
log
(
typeof
(
TMDB_TopRated_Data
))}
<
div
className
=
"
row my-auto justify-content-center
"
>
<
div
className
=
"
row my-auto justify-content-center
"
>
<
div
id
=
"
recipeCarousel
"
className
=
"
carousel slide
"
data
-
bs
-
ride
=
"
carousel
"
data
-
bs
-
interval
=
"
999999999
"
>
<
div
id
=
"
recipeCarousel
"
className
=
"
carousel slide
"
data
-
bs
-
ride
=
"
carousel
"
data
-
bs
-
interval
=
"
999999999
"
>
<
div
className
=
{
`carousel-inner`
}
role
=
"
listbox
"
>
<
div
className
=
{
`carousel-inner`
}
role
=
"
listbox
"
>
{
TMDB_TopRated_Data
?
{
TMDB_TopRated_Data
?
TMDB_TopRated_Data
.
map
((
moviePoster
,
index
)
=>
(
TMDB_TopRated_Data
.
map
((
moviePoster
,
index
)
=>
(
<
div
className
=
{
`carousel-item
${
index
===
0
?
"
active
"
:
""
}
`
}
>
<
div
className
=
{
`carousel-item
${
index
===
0
?
"
active
"
:
""
}
`
}
>
<
div
className
=
"
col-sm-3
"
>
<
div
className
=
"
col-sm-3
"
>
<
div
className
=
"
card
"
>
<
div
className
=
"
card
"
>
<
div
className
=
"
card-img
"
>
<
div
className
=
"
card-img
"
>
...
@@ -51,7 +51,7 @@ const BoxOffice = () => {
...
@@ -51,7 +51,7 @@ const BoxOffice = () => {
<
/div
>
<
/div
>
<
/div
>
<
/div
>
))
))
:
(
<
div
>
영화를
불러올
수
없습니다
:(
<
/div>
)
}
:
(
<
div
>
영화를
불러올
수
없습니다
:(
<
/div>
)
}
<
/div
>
<
/div
>
<
a
className
=
"
carousel-control-prev bg-transparent w-aut
"
href
=
"
#recipeCarousel
"
role
=
"
button
"
<
a
className
=
"
carousel-control-prev bg-transparent w-aut
"
href
=
"
#recipeCarousel
"
role
=
"
button
"
data
-
bs
-
slide
=
"
prev
"
>
data
-
bs
-
slide
=
"
prev
"
>
...
@@ -64,88 +64,6 @@ const BoxOffice = () => {
...
@@ -64,88 +64,6 @@ const BoxOffice = () => {
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
// <div className="container">
// <h2 className="fw-bold text-white text-center mt-5">Box Office</h2>
// <div id="multi-carousel" className={`d-flex carousel slide align-items-center ${styles.customHeight}`} data-bs-ride="carousel">
// <div className="carousel-inner row">
// <div className="carousel-item active">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400/31f?text=1" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 1</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// <div className="carousel-item">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400/e66?text=2" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 2</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// <div className="carousel-item">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400/7d2?text=3" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 3</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// <div className="carousel-item">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400?text=4" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 4</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// <div className="carousel-item">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400/aba?text=5" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 5</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// <div className="carousel-item">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400/fc0?text=6" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 6</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// </div>
// <button className="carousel-control-prev" type="button" data-bs-target="#multi-carousel" data-bs-slide="prev">
// <span className="carousel-control-prev-icon" aria-hidden="true"></span>
// <span className="visually-hidden">Previous</span>
// </button>
// <button className="carousel-control-next" type="button" data-bs-target="#multi-carousel" data-bs-slide="next">
// <span className="carousel-control-next-icon" aria-hidden="true"></span>
// <span className="visually-hidden">Next</span>
// </button>
// </div>
// </div>
)
)
}
}
...
...
client/src/components/Login/Login.js
View file @
01ce1fdf
...
@@ -5,10 +5,11 @@ const Login = () => {
...
@@ -5,10 +5,11 @@ const Login = () => {
//useState를 이용해서 각 state 생성 및 초기값 저장
//useState를 이용해서 각 state 생성 및 초기값 저장
const
[
state
,
setState
]
=
useState
(
true
);
// 이 줄은 css에 해당하는 state
const
[
state
,
setState
]
=
useState
(
true
);
// 이 줄은 css에 해당하는 state
//state변수 지정 하지만 이 변수는 react에 의해 없어지지 않음, 그리고 그 다음 변수는 state변수를 갱신해주는 함수
//state변수 지정 하지만 이 변수는 react에 의해 없어지지 않음, 그리고 그 다음 변수는 state변수를 갱신해주는 함수
const
[
login
Text
,
setLogin
Text
]
=
useState
({
const
[
login
,
setLogin
]
=
useState
({
id
:
''
,
id
:
''
,
password
:
''
password
:
''
});
});
const
[
success
,
setSuccess
]
=
useState
(
false
);
const
[
guestText
,
setGusetText
]
=
useState
({
const
[
guestText
,
setGusetText
]
=
useState
({
guestName
:
''
,
guestName
:
''
,
...
@@ -21,7 +22,7 @@ const Login = () => {
...
@@ -21,7 +22,7 @@ const Login = () => {
const
handleLoginOnChange
=
(
e
)
=>
{
const
handleLoginOnChange
=
(
e
)
=>
{
// ... 전개 연산자
// ... 전개 연산자
// 현재 state에 방금 변화한 값을 다시 저장함
// 현재 state에 방금 변화한 값을 다시 저장함
setLogin
Text
({
...
login
Text
,
setLogin
({
...
login
,
[
e
.
target
.
name
]:
e
.
target
.
value
[
e
.
target
.
name
]:
e
.
target
.
value
})
})
};
};
...
@@ -35,7 +36,7 @@ const Login = () => {
...
@@ -35,7 +36,7 @@ const Login = () => {
return
(
return
(
<
div
className
=
{
`d-flex flex-column col-md-5 col-10`
}
>
<
div
className
=
{
`d-flex flex-column col-md-5 col-10`
}
>
{
/* nav-tabs */
}
{
/* nav-tabs */
}
{
/* {console.log(login
Text
)} */
}
{
/* {console.log(login)} */
}
<
ul
className
=
"
nav nav-fill nav-tabs w-100
"
id
=
"
loginTab
"
role
=
"
tablist
"
>
<
ul
className
=
"
nav nav-fill nav-tabs w-100
"
id
=
"
loginTab
"
role
=
"
tablist
"
>
<
li
className
=
"
nav-item fs-6
"
role
=
"
presentation
"
>
<
li
className
=
"
nav-item fs-6
"
role
=
"
presentation
"
>
<
button
className
=
{
`nav-link active px-2
${
styles
.
fontSize
}
`
}
style
=
{{
color
:
state
?
"
black
"
:
"
#FEDC00
"
,
backgroundColor
:
state
?
"
#FEDC00
"
:
"
black
"
}}
<
button
className
=
{
`nav-link active px-2
${
styles
.
fontSize
}
`
}
style
=
{{
color
:
state
?
"
black
"
:
"
#FEDC00
"
,
backgroundColor
:
state
?
"
#FEDC00
"
:
"
black
"
}}
...
...
client/src/components/Signup/Signup.js
View file @
01ce1fdf
import
styles
from
"
./signup.module.scss
"
;
import
styles
from
"
./signup.module.scss
"
;
import
{
useState
}
from
'
react
'
;
import
{
useState
,
useEffect
}
from
'
react
'
;
import
authApi
from
"
../../apis/auth.api.js
"
;
import
{
Redirect
}
from
"
react-router
"
;
import
catchErrors
from
"
../../utils/catchErrors.js
"
;
const
Signup
=
()
=>
{
const
Signup
=
()
=>
{
const
[
user
,
setUser
]
=
useState
({
const
[
userText
,
setUserText
]
=
useState
({
userId
:
''
,
userId
:
''
,
userName
:
''
,
userName
:
''
,
userBirthday
:
''
,
userBirthday
:
''
,
...
@@ -11,8 +13,12 @@ const Signup = () => {
...
@@ -11,8 +13,12 @@ const Signup = () => {
userPassword
:
''
,
userPassword
:
''
,
userRePassword
:
''
userRePassword
:
''
})
})
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
[
success
,
setSuccess
]
=
useState
(
false
);
//각 타입별 error 유무 state
//각 타입별 error 유무 state
const
[
errors
,
setErrors
]
=
useState
({
const
[
error
,
setError
]
=
useState
(
""
);
const
[
errorMsg
,
setErrorMsg
]
=
useState
({
errorId
:
null
,
errorId
:
null
,
errorName
:
false
,
errorName
:
false
,
errorBirthday
:
false
,
errorBirthday
:
false
,
...
@@ -26,87 +32,108 @@ const Signup = () => {
...
@@ -26,87 +32,108 @@ const Signup = () => {
//입력할때마다 state에 저장
//입력할때마다 state에 저장
const
handleUserOnChange
=
(
e
)
=>
{
const
handleUserOnChange
=
(
e
)
=>
{
setUser
Text
({
setUser
({
...
user
Text
,
...
user
,
[
e
.
target
.
name
]:
e
.
target
.
value
[
e
.
target
.
name
]:
e
.
target
.
value
})
})
}
}
//id(중복확인 체크, 형식 에러)
//id(중복확인 체크, 형식 에러)
const
handleOnClickId
=
(
e
)
=>
{
const
handleOnClickId
=
async
(
e
)
=>
{
if
(
userText
.
userId
.
length
<
5
)
{
e
.
preventDefault
();
e
.
preventDefault
();
// e.stopPropagati//on();
const
existId
=
await
authApi
.
compareId
(
user
.
userId
)
setErrors
(
errors
=>
({
if
(
user
.
userId
.
length
<
5
)
{
...
errors
,
setErrorMsg
(
errorMsg
=>
({
...
errorMsg
,
[
e
.
target
.
name
]:
true
[
e
.
target
.
name
]:
true
}));
}));
if
(
overlap
Id
===
true
)
{
if
(
exist
Id
===
true
)
{
setOverlapId
(
false
);
setOverlapId
(()
=>
(
false
)
)
;
};
};
}
else
{
}
else
{
e
.
preventDefault
();
setErrorMsg
(
errorMsg
=>
({
e
.
stopPropagation
();
...
errorMsg
,
setErrors
(
errors
=>
({
...
errors
,
[
e
.
target
.
name
]:
false
[
e
.
target
.
name
]:
false
}));
}));
setOverlapId
(
true
);
setOverlapId
(()
=>
(
true
));
alert
(
"
이 아이디는 사용가능합니다.
"
)
}
}
const
handleOnSummit
=
async
(
e
)
=>
{
e
.
preventDefault
();
try
{
setError
(
""
);
//처리가 될때까지 버튼(가입하기)이 안눌리게 지정
setLoading
(
true
);
//유효성 검사
validation
();
const
userData
=
user
;
//서버로 전송
await
authApi
.
signup
(
userData
)
alert
(
"
가입이 완료되었습니다. 로그인 해주세요.
"
);
setSuccess
(
true
);
}
catch
(
error
)
{
//에러전송
catchErrors
(
error
,
setError
);
}
finally
{
setLoading
(
false
);
}
}
}
}
//유효성 검사 함수
//유효성 검사 함수
const
vaildationData
=
(
text
,
compareValue
,
error
)
=>
{
const
vaildationData
=
(
text
,
compareValue
,
error
)
=>
{
if
(
text
!==
compareValue
)
{
if
(
text
!==
compareValue
)
{
setError
s
(
error
s
=>
({
...
error
s
,
[
error
]:
true
}))
setError
Msg
(
error
Msg
=>
({
...
error
Msg
,
[
error
]:
true
}))
;
}
else
{
}
else
{
setError
s
(
error
s
=>
({
...
error
s
,
[
error
]:
false
}))
setError
Msg
(
error
Msg
=>
({
...
error
Msg
,
[
error
]:
false
}))
;
}
}
}
}
//유효성 검사
//가입하기와 동시에 유효성 검사
const
validation
=
()
=>
{
const
handleonSubmit
=
(
e
)
=>
{
setPreId
(()
=>
(
user
.
userId
));
e
.
preventDefault
();
setPreId
(()
=>
(
userText
.
userId
));
console
.
log
(
preId
);
//아이디 유효성 검사
//아이디 유효성 검사
if
((
user
Text
.
userId
.
length
<
5
))
{
if
((
user
.
userId
.
length
<
5
))
{
setError
s
(
error
s
=>
({
...
error
s
,
errorId
:
true
}));
setError
Msg
(
error
Msg
=>
({
...
error
Msg
,
errorId
:
true
}));
}
else
if
((
user
Text
.
userId
.
length
>=
5
)
&&
(
overlapId
===
true
)){
}
else
if
((
user
.
userId
.
length
>=
5
)
&&
(
overlapId
===
true
)){
if
(
preId
!==
user
Text
.
userId
){
if
(
preId
!==
user
.
userId
){
console
.
log
(
preId
);
console
.
log
(
preId
);
setOverlapId
(()
=>
(
false
));
setOverlapId
(()
=>
(
false
));
}
}
}
}
else
if
(
user
Text
.
userId
>=
5
){
else
if
(
user
.
userId
>=
5
){
setError
s
(
error
s
=>
({
...
error
s
,
errorId
:
false
}));
setError
Msg
(
error
Msg
=>
({
...
error
Msg
,
errorId
:
false
}));
}
}
console
.
log
(
preId
);
//별명 에러유무 검사
//별명 유효성 검사
vaildationData
((
userText
.
userName
.
length
===
0
),
false
,
"
errorName
"
);
vaildationData
((
user
.
userName
.
length
===
0
),
false
,
"
errorName
"
);
// 생일 에러유무 검사
// 생일 유효성 검사
vaildationData
(
userText
.
userBirthday
.
length
,
6
,
"
errorBirthday
"
);
vaildationData
(
user
.
userBirthday
.
length
,
6
,
"
errorBirthday
"
);
// 휴대폰 에러유무 검사
// 휴대폰 유효성 검사
vaildationData
(
userText
.
userMbnum
.
length
,
11
,
"
errorMbnum
"
);
vaildationData
(
user
.
userMbnum
.
length
,
11
,
"
errorMbnum
"
);
// 비밀번호 에러유무 검사
// 비밀번호 유효성 검사
vaildationData
(
userText
.
userPassword
.
length
,
8
,
"
errorPassword
"
);
vaildationData
(
user
.
userPassword
.
length
,
8
,
"
errorPassword
"
);
// 비밀번호 확인 에러유무 검사
// 비밀번호 확인 유효성 검사
vaildationData
(
userText
.
userRePassword
,
userText
.
userPassword
,
"
errorRePassword
"
);
vaildationData
(
user
.
userRePassword
,
user
.
userPassword
,
"
errorRePassword
"
);
const
errorArray
=
Object
.
values
(
errors
);
// 최종 유효성 검사
// 최종 유효성 검사
if
(
overlapId
&&
(
errorArray
.
some
((
element
)
=>
(
element
))
===
false
))
{
if
(
overlapId
&&
(
Object
.
values
(
errorMsg
).
some
((
element
)
=>
(
element
))
===
false
))
{
console
.
log
(
userText
);
console
.
log
(
"
;sadasda
"
)
setTimeout
(()
=>
{
console
.
log
(
"
회원가입을 완료했습니다.
"
)},
2000
)
}
else
{
console
.
log
(
"
에러발생
"
)
throw
new
Error
(
"
유효하지 않은 데이터입니다.
"
);
}
}
}
if
(
success
)
{
return
<
Redirect
to
=
"
/login
"
/>
;
}
}
return
(
return
(
// 데이터 입력과 유효성 검사 후 보이는 경고창
// 데이터 입력과 유효성 검사 후 보이는 경고창
<
form
className
=
{
`d-flex col-md-6 col-12 justify-content-center`
}
>
<
form
className
=
{
`d-flex col-md-6 col-12 justify-content-center`
}
onSubmit
=
{
handleOnSummit
}
>
{
console
.
log
(
"
user
Text
==
"
,
user
Text
,
error
s
,
overlapId
)}
{
console
.
log
(
"
user==
"
,
user
,
error
Msg
,
overlapId
)}
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
d-flex flex-column
"
>
<
span
className
=
{
styles
.
title
}
>
회원가입
<
/span
>
<
span
className
=
{
styles
.
title
}
>
회원가입
<
/span
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
d-flex flex-column
"
>
...
@@ -114,12 +141,12 @@ const Signup = () => {
...
@@ -114,12 +141,12 @@ const Signup = () => {
<
label
className
=
{
styles
.
signupLabel
}
>
아이디
<
/label
>
<
label
className
=
{
styles
.
signupLabel
}
>
아이디
<
/label
>
<
div
className
=
"
d-flex col-md-auto
"
>
<
div
className
=
"
d-flex col-md-auto
"
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
userId
"
id
=
"
userId
"
placeholder
=
"
5~10자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
10
"
required
/>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
userId
"
id
=
"
userId
"
placeholder
=
"
5~10자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
10
"
required
/>
<
button
type
=
"
button
"
name
=
"
errorId
"
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleOnClickId
}
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#exampleModal
"
>
중복확인
<
/button
>
<
button
type
=
"
button
"
name
=
"
errorId
"
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleOnClickId
}
>
중복확인
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
{(
overlapId
===
false
)
&&
error
s
.
errorId
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
5
~
10
자리
사이로
입력해주세요
.
<
/p>
}
{(
overlapId
===
false
)
&&
error
Msg
.
errorId
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
5
~
10
자리
사이로
입력해주세요
.
<
/p>
}
{
overlapId
&&
(
error
s
.
errorId
===
false
)
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
아이디
중복이
확인되었습니다
.
<
/p>
}
{
overlapId
&&
(
error
Msg
.
errorId
===
false
)
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
아이디
중복이
확인되었습니다
.
<
/p>
}
{(
error
s
.
errorId
===
false
)
&&
(
overlapId
===
false
)
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
아이디
중복확인을
해주세요
.
<
/p>
}
{(
error
Msg
.
errorId
===
false
)
&&
(
overlapId
===
false
)
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
아이디
중복확인을
해주세요
.
<
/p>
}
<
/div
>
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
d-flex flex-column
"
>
...
@@ -127,7 +154,7 @@ const Signup = () => {
...
@@ -127,7 +154,7 @@ const Signup = () => {
<
label
className
=
{
styles
.
signupLabel
}
>
별명
<
/label
>
<
label
className
=
{
styles
.
signupLabel
}
>
별명
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userName
"
id
=
"
userName
"
placeholder
=
"
10자리 이내
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
10
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userName
"
id
=
"
userName
"
placeholder
=
"
10자리 이내
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
10
"
required
/>
<
/div
>
<
/div
>
{
error
s
.
errorName
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
10
자
이내로
입력해주세요
.
<
/p>
}
{
error
Msg
.
errorName
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
10
자
이내로
입력해주세요
.
<
/p>
}
<
/div
>
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
d-flex flex-column
"
>
...
@@ -135,7 +162,7 @@ const Signup = () => {
...
@@ -135,7 +162,7 @@ const Signup = () => {
<
label
className
=
{
styles
.
signupLabel
}
>
생년월일
<
/label
>
<
label
className
=
{
styles
.
signupLabel
}
>
생년월일
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
${
styles
.
input
.
placeholder
}
`
}
type
=
"
number
"
name
=
"
userBirthday
"
id
=
"
userBirthday
"
placeholder
=
"
6자리(예시: 991225)
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
999999
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
${
styles
.
input
.
placeholder
}
`
}
type
=
"
number
"
name
=
"
userBirthday
"
id
=
"
userBirthday
"
placeholder
=
"
6자리(예시: 991225)
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
999999
"
required
/>
<
/div
>
<
/div
>
{
error
s
.
errorBirthday
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
숫자
6
자리를
입력해주세요
.
<
/p>
}
{
error
Msg
.
errorBirthday
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
숫자
6
자리를
입력해주세요
.
<
/p>
}
<
/div
>
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
d-flex flex-column
"
>
...
@@ -143,7 +170,7 @@ const Signup = () => {
...
@@ -143,7 +170,7 @@ const Signup = () => {
<
label
className
=
{
styles
.
signupLabel
}
>
휴대폰
번호
<
/label
>
<
label
className
=
{
styles
.
signupLabel
}
>
휴대폰
번호
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
number
"
name
=
"
userMbnum
"
id
=
"
userMbnum
"
placeholder
=
"
-없이 11자리 입력
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
99999999999
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
number
"
name
=
"
userMbnum
"
id
=
"
userMbnum
"
placeholder
=
"
-없이 11자리 입력
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
99999999999
"
required
/>
<
/div
>
<
/div
>
{
error
s
.
errorMbnum
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>-
없이
숫자
11
자리를
입력해주세요
.
<
/p>
}
{
error
Msg
.
errorMbnum
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>-
없이
숫자
11
자리를
입력해주세요
.
<
/p>
}
<
/div
>
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
d-flex flex-column
"
>
...
@@ -151,7 +178,7 @@ const Signup = () => {
...
@@ -151,7 +178,7 @@ const Signup = () => {
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
<
/label
>
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userPassword
"
id
=
"
password
"
placeholder
=
"
8자리 입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userPassword
"
id
=
"
password
"
placeholder
=
"
8자리 입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
required
/>
<
/div
>
<
/div
>
{
error
s
.
errorPassword
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
8
자리를
입력해주세요
.
<
/p>
}
{
error
Msg
.
errorPassword
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
8
자리를
입력해주세요
.
<
/p>
}
<
/div
>
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
d-flex flex-column
"
>
...
@@ -159,26 +186,10 @@ const Signup = () => {
...
@@ -159,26 +186,10 @@ const Signup = () => {
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
확인
<
/label
>
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
확인
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userRePassword
"
id
=
"
userRePassword
"
placeholder
=
"
8자리 입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userRePassword
"
id
=
"
userRePassword
"
placeholder
=
"
8자리 입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
required
/>
<
/div
>
<
/div
>
{
error
s
.
errorRePassword
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
비밀번호가
일치하지
않습니다
.
<
/p>
}
{
error
Msg
.
errorRePassword
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
비밀번호가
일치하지
않습니다
.
<
/p>
}
<
/div
>
<
/div
>
<
buttom
className
=
{
`rounded my-3 py-2 fs-5
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
type
=
"
submit
"
onClick
=
{
handleonSubmit
}
>
가입하기
<
/buttom
>
<
button
className
=
{
`rounded my-3 py-2 fs-5
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
type
=
"
submit
"
disabled
=
{
loading
}
>
가입하기
<
/button
>
<
/div
>
{
/* 아이디 중복 확인 모달창 */
}
<
div
class
=
"
modal fade
"
id
=
"
exampleModal
"
tabindex
=
"
-1
"
aria
-
labelledby
=
"
exampleModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
class
=
"
modal-dialog
"
>
<
div
class
=
"
modal-content
"
>
<
div
class
=
"
modal-header
"
>
<
h5
class
=
"
modal-title
"
id
=
"
exampleModalLabel
"
>
아이디
중복
확인
<
/h5
>
<
/div
>
<
div
class
=
"
modal-body
"
>
이
아이디는
사용가능합니다
.
<
/div
>
<
div
class
=
"
modal-footer
"
>
<
button
type
=
"
button
"
className
=
"
btn btn-secondary
"
data
-
bs
-
dismiss
=
"
modal
"
>
닫기
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/form
>
<
/form
>
)
)
...
...
client/src/components/Signup/signup.module.scss
View file @
01ce1fdf
...
@@ -65,12 +65,6 @@ border: 1px solid white ;
...
@@ -65,12 +65,6 @@ border: 1px solid white ;
text-align
:
center
;
text-align
:
center
;
}
}
.btnHover
:focus
{
background-color
:
#f5e685
;
color
:
black
;
border-color
:
none
;
box-shadow
:
none
;
}
.passwordConfirmError
{
.passwordConfirmError
{
margin-bottom
:
0
;
margin-bottom
:
0
;
margin-top
:
0
.5rem
;
margin-top
:
0
.5rem
;
...
...
package-lock.json
View file @
01ce1fdf
...
@@ -1088,9 +1088,9 @@
...
@@ -1088,9 +1088,9 @@
"integrity"
:
"sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
"integrity"
:
"sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
},
},
"nodemon"
:
{
"nodemon"
:
{
"version"
:
"2.0.
7
"
,
"version"
:
"2.0.
12
"
,
"resolved"
:
"https://registry.npmjs.org/nodemon/-/nodemon-2.0.
7
.tgz"
,
"resolved"
:
"https://registry.npmjs.org/nodemon/-/nodemon-2.0.
12
.tgz"
,
"integrity"
:
"sha512-
XHzK69Awgnec9UzHr1kc8EomQh4sjTQ8oRf8TsGrSmHDx9/UmiGG9E/mM3BuTfNeFwdNBvrqQq/RHL0xIeyF
OA=="
,
"integrity"
:
"sha512-
egCTmNZdObdBxUBw6ZNwvZ/xzk24CKRs5K6d+5zbmrMr7rOpPmfPeF6OxM3DDpaRx331CQRFEktn+wrFFfBS
OA=="
,
"dev"
:
true
,
"dev"
:
true
,
"requires"
:
{
"requires"
:
{
"chokidar"
:
"^3.2.2"
,
"chokidar"
:
"^3.2.2"
,
...
...
package.json
View file @
01ce1fdf
...
@@ -28,6 +28,6 @@
...
@@ -28,6 +28,6 @@
"
sequelize
"
:
"
^6.6.4
"
"
sequelize
"
:
"
^6.6.4
"
},
},
"devDependencies"
:
{
"devDependencies"
:
{
"
nodemon
"
:
"
^2.0.
7
"
"
nodemon
"
:
"
^2.0.
12
"
}
}
}
}
server/app.js
View file @
01ce1fdf
import
express
from
'
express
'
import
express
from
'
express
'
import
cookieParser
from
'
cookie-parser
'
import
cookieParser
from
'
cookie-parser
'
import
mainRouter
from
'
./routes/index.js
'
import
mainRouter
from
'
./routes/index.js
'
import
movieRouter
from
'
./routes/movie.route.js
'
const
app
=
express
()
const
app
=
express
()
...
...
server/controllers/user.controller.js
0 → 100644
View file @
01ce1fdf
import
axios
from
'
axios
'
import
sequelize
from
'
sequelize
'
import
{
User
}
from
'
../db/index.js
'
const
compareId
=
async
(
req
,
res
)
=>
{
const
id
=
req
.
params
.
userId
;
const
userid
=
await
User
.
findAll
({
where
:{
userId
:
id
}});
if
(
userid
){
return
res
.
json
(
true
);
}
else
{
return
res
.
json
(
false
);
}
}
export
default
{
compareId
}
server/db/index.js
View file @
01ce1fdf
import
{
Sequelize
}
from
"
sequelize
"
;
import
{
Sequelize
}
from
"
sequelize
"
;
//
import UserModel from "../models/user.model.js";
import
UserModel
from
"
../models/user.model.js
"
;
import
MovieModel
from
"
../models/movie.model.js
"
;
import
MovieModel
from
"
../models/movie.model.js
"
;
import
dbConfig
from
"
../config/db.config.js
"
;
import
dbConfig
from
"
../config/db.config.js
"
;
...
@@ -19,11 +19,11 @@ const sequelize = new Sequelize(
...
@@ -19,11 +19,11 @@ const sequelize = new Sequelize(
}
}
);
);
//
const User = UserModel(sequelize)
const
User
=
UserModel
(
sequelize
)
const
Movie
=
MovieModel
(
sequelize
)
const
Movie
=
MovieModel
(
sequelize
)
export
{
export
{
sequelize
,
sequelize
,
//
User,
User
,
Movie
Movie
}
}
\ No newline at end of file
server/index.js
View file @
01ce1fdf
...
@@ -34,3 +34,5 @@ sequelize
...
@@ -34,3 +34,5 @@ sequelize
.
catch
((
err
)
=>
{
.
catch
((
err
)
=>
{
console
.
log
(
err
);
console
.
log
(
err
);
});
});
export
default
{}
\ No newline at end of file
server/routes/index.js
View file @
01ce1fdf
import
express
from
"
express
"
;
import
express
from
"
express
"
;
import
userRouter
from
'
./user.route.js
'
import
movieRouter
from
'
./movie.route.js
'
import
movieRouter
from
'
./movie.route.js
'
const
router
=
express
.
Router
();
const
router
=
express
.
Router
();
router
.
use
(
'
/movie
'
,
movieRouter
)
router
.
use
(
'
/movie
'
,
movieRouter
)
router
.
use
(
'
/auth
'
,
userRouter
)
export
default
router
;
export
default
router
;
\ No newline at end of file
server/routes/user.route.js
0 → 100644
View file @
01ce1fdf
import
express
from
"
express
"
;
import
userCtrl
from
"
../controllers/user.controller.js
"
;
const
router
=
express
.
Router
();
router
.
route
(
"
/
"
)
.
post
()
.
get
()
router
.
route
(
"
/:userId
"
)
.
get
(
userCtrl
.
compareId
)
export
default
router
;
\ No newline at end of file
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