feat. 의사 회원가입시, 면허증 등록으로 변경 완료

-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { RouteComponentProps } from 'react-router-dom';
 
 import { useRecoilValue, useRecoilState } from "recoil";
@@ -26,7 +26,6 @@ const RegisterContainer = (props : RegisterProps) => {
         password : '',
         passwordCheck : '',
         info : {
-            doctorLicense : File,
             hospitalNm : '',
             hospitalAddr : '',
             contact : '',
@@ -34,6 +33,8 @@ const RegisterContainer = (props : RegisterProps) => {
             doctorNm : '',
         },
     });
+    const [doctorInfoFile, setDoctorInfoFile] = useState<FileList | null>(null);
+    const doctorInfoFile_Select = useRef(null);
 
     const [page, setPage] = useState<number>(1);
     const [error, setError] = useState<string | null>(null);
@@ -79,9 +80,8 @@ const RegisterContainer = (props : RegisterProps) => {
                 setError('비밀번호가 일치하지 않습니다.')
             } else setError(null);
         } else if(page === 2) {
-            if(!registerForm.info.doctorLicense.length &&
-                 !validator.isAlphanumeric(registerForm.info.doctorLicense)) {
-                setError('의사 자격 번호를 입력해야 합니다.');
+            if(!doctorInfoFile) {
+                setError('의사 자격 인증 파일을 첨부해야 합니다.');
             } else if(registerForm.info.doctorNm.length < 2) {
                 setError('의사 이름을 올바르게 입력해야 합니다.');
             } else if(!registerForm.info.contact) {
@@ -121,13 +121,7 @@ const RegisterContainer = (props : RegisterProps) => {
     };
 
     const onSetDoctorLicense = (e : React.ChangeEvent<HTMLInputElement>) => {
-        setRegisterForm({
-            ...registerForm,
-            info : {
-                ...registerForm.info,
-                doctorLicense : e.target.value,
-            },
-        });
+        setDoctorInfoFile(e.target.files);
     };
 
     const onSetHospitalNm = (e : React.ChangeEvent<HTMLInputElement>) => {
@@ -237,16 +231,21 @@ const RegisterContainer = (props : RegisterProps) => {
             Data.append('doctorNm', registerForm.info.doctorNm);
             Data.append('doctorType', registerForm.info.doctorType);
 
-            Data.append('doctorInfoFile', registerForm.info.doctorLicense[0]);
+            Data.append('doctorInfoFile', doctorInfoFile ? doctorInfoFile[0] : '');
 
 
             const onRegisterDoctor = async () => {
+                //로딩 진행
+                setLoading(true);
+
                 try {
                     const result = await authApi.registerDoctor(Data);
                     if(result.data === 'Created') {
+                        setLoading(false);
                         Alert.onSuccess('회원가입 성공, 관리자의 승인을 대기하세요.', () => props.history.push('/login'));
                     }
                 } catch(e : any) {
+                    setLoading(false);
                     Alert.onError(e.response.data.error, () => null);
                 }
             };
@@ -265,7 +264,7 @@ const RegisterContainer = (props : RegisterProps) => {
 
     useEffect(() => {
         validateRegisterForm();
-    }, [registerForm, page]);
+    }, [registerForm, doctorInfoFile, page]);
 
     useEffect(() => {
         if(selectHospital) {
@@ -306,6 +305,8 @@ const RegisterContainer = (props : RegisterProps) => {
         <Header {...props}/>
         <RegisterPresenter
             registerForm = {registerForm}
+            doctorInfoFile = {doctorInfoFile}
+            doctorInfoFile_Select = {doctorInfoFile_Select}
             page = {page}
             error = {error}
 

@@ -10,13 +10,13 @@ const uncheck = '/static/img/uncheck.png'
 const next = '/static/img/next.png';
 const prev = '/static/img/prev.png';
 
+
 interface RegisterProps {
     registerForm : {
         userId : string;
         password : string;
         passwordCheck : string;
         info : {
-            doctorLicense : string;
             hospitalNm : string;
             hospitalAddr : string;
             contact : string;
@@ -24,6 +24,8 @@ interface RegisterProps {
             doctorNm : string;
         },
     };
+    doctorInfoFile : FileList | null;
+    doctorInfoFile_Select : any;
     page : number;
     error : string | null;
 
@@ -148,8 +150,7 @@ const RegisterPresenter = (props : RegisterProps) => {
                         </styled.ModalButton>
                     </styled.ModalButtonWrapper>
                     </>
-                </Modal>
-                :null
+                </Modal> : null
             }
             <styled.RegisterWrapper>
                 <styled.RegisterBackButtonWrapper>
@@ -204,11 +205,19 @@ const RegisterPresenter = (props : RegisterProps) => {
                     <>
                     <styled.RegisterInputWrapper>
                         <styled.RegisterInputText>의사 자격증 번호</styled.RegisterInputText>
-                        <styled.RegisterInput 
-                            placeholder = "Doctor's License"
-                            value = {props.registerForm.info.doctorLicense}
+                        <input type = 'file'
+                            style = {{ display : 'none' }}
                             onChange = {props.onSetDoctorLicense}
+                            ref = {props.doctorInfoFile_Select}
                         />
+                        <styled.RegisterFileUploadWrapper>
+                            <styled.RegisterFileUploadButton onClick = {() => props.doctorInfoFile_Select.current.click()}>
+                                파일 첨부
+                            </styled.RegisterFileUploadButton>
+                            <styled.RegisterFileUploadInfoText>
+                                {props.doctorInfoFile ? props.doctorInfoFile[0].name : ''}
+                            </styled.RegisterFileUploadInfoText>
+                        </styled.RegisterFileUploadWrapper>
                     </styled.RegisterInputWrapper>
                     <styled.RegisterInputWrapper>
                         <styled.RegisterInputText>이름</styled.RegisterInputText>

@@ -314,6 +314,55 @@ export const RegisterInput = styled.input `
     }
 `;
 
+export const RegisterFileUploadWrapper = styled.div `
+    width : 80%;
+    display : flex;
+    flex-direction : row;
+
+    justify-content : flex-start;
+    align-items : center;
+
+    border : none;
+    background-color : transparent;
+`;
+
+export const RegisterFileUploadButton = styled.button `
+    display : flex;
+    flex-direction : row;
+
+    justify-content : center;
+    align-items : center;
+
+    border-radius : 3px;
+    border : 1px solid #343434;
+    background-color : transparent;
+    color : #343434;
+
+    padding : 3px 4px;
+
+    font-size : 12px;
+    font-weight : 600;
+
+    cursor : pointer;
+    transition : .25s all;
+
+    &:hover {
+        border : 1px solid #337DFF;
+        color : #fff;
+        background-color : #337DFF;
+    }
+
+    margin : 0 5% 0 0;
+
+`;
+
+export const RegisterFileUploadInfoText = styled.div `
+    font-size : 12px;
+    font-weight : 600;
+
+    color : #337DFF;
+`;
+
 export const RegisterInputSearchButton = styled.button `
     position : absolute;