diff --git a/src/pages/join.js b/src/pages/join.js index a68f62504cbfd5615f6daded97e21a58c49effc1..02fc20d3179916f6713acfb5d249f0b35a76b434 100644 --- a/src/pages/join.js +++ b/src/pages/join.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import './join.css'; +import joinStyles from './join.module.css'; function Join(props){ // 초기값 세팅 @@ -225,26 +225,26 @@ function Join(props){ setSeePasswordCheck(!seePasswordCheck); } - return <div className="join"> - <div className="logo"> + return <div className={joinStyles.join}> + <div className={joinStyles.logo}> <a href="/"><img src="/logo.png" height='80px'/></a> </div> - <h2 className='title'>회원가입</h2> - <div className='userInput'> + <h2 className={joinStyles.title}>회원가입</h2> + <div className={joinStyles.userInput}> <form onSubmit={postInfo}> - <div className='id-el'> - <div className='input-with-img'> + <div className={joinStyles.id_el}> + <div className={joinStyles.input_with_img}> <img src="/id.png" height='17px' width='18px'/> <input type='text' onChange={onChangeId} placeholder='아이디'/> - <input type='button' value='중복확인' id='checkId' onClick={checkId}/> + <button type='button' className={joinStyles.checkId} onClick={checkId}>중복확인</button> </div> - <span className='message'>{idMessage}</span> + <span className={joinStyles.message}>{idMessage}</span> </div> - <div className='password-el'> - <div className='input-with-img'> + <div className={joinStyles.password_el}> + <div className={joinStyles.input_with_img}> <img src="/password.png" height='20px' width='14px'/> <input type={seePassword? 'password':'text'} onChange={onChangePassword} placeholder='비밀번호'/><br/> - <span className='eye'><span className='eye-img'> + <span className={joinStyles.eye}><span className={joinStyles.eye_img}> <img src={seePassword ? './eyeOff.png' : './eyeOn.png'} alt='비밀번호 가시성 전환' height='18px' @@ -252,11 +252,11 @@ function Join(props){ onClick={seePasswordHandler}/> </span></span> </div> - <span className='message'>{passwordMessage}</span> - <div className='input-with-img'> + <span className={joinStyles.message}>{passwordMessage}</span> + <div className={joinStyles.input_with_img}> <img src="/password.png" height='20px' width='14px'/> <input type={seePasswordCheck? 'password':'text'} onChange={onChangePasswordCheck} placeholder='비밀번호 확인'/> - <span className='eye'><span className='eye-img'> + <span className={joinStyles.eye}><span className={joinStyles.eye_img}> <img src={seePasswordCheck? './eyeOff.png' : './eyeOn.png'} alt='비밀번호 가시성 전환' height='18px' @@ -264,38 +264,38 @@ function Join(props){ onClick={seePasswordCheckHandler}/> </span></span> </div> - <span className='message'>{passwordCheckMessage}</span> + <span className={joinStyles.message}>{passwordCheckMessage}</span> </div> - <div className='name-el'> - <div className='input-with-img'> - <img src="/id.png" height='20px' /> + <div className={joinStyles.name_el}> + <div className={joinStyles.input_with_img}> + <img src="/id.png" height='17px' width='18px' /> <input type='name' onChange={onChangeName} placeholder='이름'/> </div> - <span className='message'>{nameMessage}</span> + <span className={joinStyles.message}>{nameMessage}</span> </div> - <div className='nickname-el'> - <div className='input-with-img'> + <div className={joinStyles.nickname_el}> + <div className={joinStyles.input_with_img}> <img src="/id.png" height='17px' width='18px'/> <input type='text' onChange={onChangeNickname} placeholder='닉네임'/> - <input type='button' value='중복확인' id='checkNickname' onClick={checkNickname}/> + <button type='button' className={joinStyles.checkNickname} onClick={checkNickname}>중복확인</button> </div> - <span className='message'>{nicknameMessage}</span> + <span className={joinStyles.message}>{nicknameMessage}</span> </div> - <div className='email-el'> - <div className='input-with-img'> + <div className={joinStyles.email_el}> + <div className={joinStyles.input_with_img}> <img src="/id.png" height='17px' width='18px'/> <input type='email' onChange={onChangeEmail} placeholder='이메일'/> </div> - <span className='message'>{emailMessage}</span> + <span className={joinStyles.message}>{emailMessage}</span> </div> <div> - <button type="submit" id='register'>등록</button> + <button type="submit" className={joinStyles.register}>등록</button> </div> </form> </div> - <div className="stick">―――――――――<span className="or"> 또는 </span>―――――――――</div> - <div className="gotoLogin">이미 계정이 있으신가요? <a href="/usre/login" className="loginText">로그인</a></div> + <div className={joinStyles.stick}>―――――――――<span className={joinStyles.or}> 또는 </span>―――――――――</div> + <div className={joinStyles.gotoLogin}>이미 계정이 있으신가요? <a href="/usre/login" className={joinStyles.loginText}>로그인</a></div> </div> } -export default Join; \ No newline at end of file +export default Join;