style: modify the className

src/pages/join.js

 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,37 +264,37 @@ 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>
 }