feat. register view

@@ -44,6 +44,13 @@ export default {
             },
         });
     },
+    searchPatientById : (token : RecoilState<any>, patientId : string) => {
+        return client.get(`/doctor/patient/search/${patientId}`, {
+            headers : {
+                Authorization : token,
+            },
+        });
+    },
     registerPatient : (token : RecoilState<any>, Data : any) => {
         return client.post('/doctor/patient', Data, {
             headers : {

@@ -4,8 +4,10 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import Error from '../components/error';
 import Header from '../components/Header';
 import { LoginContainer } from "./login";
+import { RegisterContainer } from './register';
 import { MainContainer } from "./main";
 
+
 const Router = () => {
     return (
         <BrowserRouter>
@@ -14,6 +16,7 @@ const Router = () => {
             <Switch>
                 <Route exact path = '/' component = {MainContainer}/>
                 <Route exact path = '/login' component = {LoginContainer}/>
+                <Route exact path = '/register' component = {RegisterContainer}/>
             </Switch>
         </BrowserRouter>
     )

@@ -35,6 +35,10 @@ const LoginContainer = (props : LoginProps) => {
         });
     };
 
+    const onGoRegister = () => {
+        props.history.push('/register');
+    };
+
     const onLogin = async () => {
         try {
             const result : any = await authApi.login(loginForm);
@@ -59,6 +63,7 @@ const LoginContainer = (props : LoginProps) => {
             loginForm = {loginForm}
             onSetUserId = {onSetUserId}
             onSetPassword = {onSetPassword}
+            onGoRegister = {onGoRegister}
             onLogin = {onLogin}
         />
     )

@@ -9,6 +9,7 @@ interface LoginProps {
     };
     onSetUserId : React.ChangeEventHandler<HTMLInputElement>;
     onSetPassword : React.ChangeEventHandler<HTMLInputElement>;
+    onGoRegister : () => void;
     onLogin : React.MouseEventHandler<HTMLButtonElement>;
 }
 
@@ -16,6 +17,7 @@ const LoginPresenter = (props : LoginProps) => {
     return (
         <styled.Container>
             <styled.LoginWrapper>
+                <styled.LoginTitle>로그인</styled.LoginTitle>
                 <styled.LoginInputWrapper>
                     <styled.LoginEachInputWrapper>
                         <styled.LoginInputText>
@@ -42,7 +44,7 @@ const LoginPresenter = (props : LoginProps) => {
                 </styled.LoginInputWrapper>
                 <styled.RegisterButtonWrapper>
                     <styled.RegisterButton
-                        onClick = {() => console.log('회원가입 버튼')}
+                        onClick = {props.onGoRegister}
                     >
                         회원가입
                     </styled.RegisterButton>

@@ -11,7 +11,7 @@ export const Container = styled.div `
 
 export const LoginWrapper = styled.div `
     width : 35%;
-    border : 1px solid #ddd;
+    border : none;
     border-radius : 3px;
     display : flex;
     flex-direction : column;
@@ -23,6 +23,11 @@ export const LoginWrapper = styled.div `
 
 `;
 
+export const LoginTitle = styled.div `
+    font-size : 20px;
+    font-weight : 700;
+`;
+
 export const LoginInputWrapper = styled.div `
     margin : 10px 0;
     width : 80%;

@@ -41,25 +41,28 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
 
     const [editModal, setEditModal] = useState<boolean>(false);
     const [newPatientRegisterModal, setNewPatientRegisterModal] = useState<boolean>(false);
+    const [newPatientSearchId, setNewPatientSearchId] = useState<string>('');
+
 
 
     const fetchData = async() => {
         try {
             const res = await doctorApi.getDoctorsInfo(token);
             if(res.statusText === 'OK') {
-                setDoctorInfo(res.data);
+                const { doctorInfo } = res.data;
+                setDoctorInfo(doctorInfo);
                 setInfo({
                     infoType : 'DOCTOR',
-                    userNm : res.data.doctorNm,
-                    doctorType : res.data.doctorType,
-                    contact : res.data.contact,
+                    userNm : doctorInfo.doctorNm,
+                    doctorType : doctorInfo.doctorType,
+                    contact : doctorInfo.contact,
                     userAge : null,
                     patientInfo : '',
                 });
 
                 //로그인한 환자의 리스트를 가져옴 : 프론트에서 필터로 검색
                 await doctorApi.getPatientList(token).then(res => {
-                    setPatientList(res.data);
+                    setPatientList(res.data.patientList);
                 }).catch(error => console.log(error));
             }
         } catch(e) {
@@ -104,6 +107,26 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
     };
 
 
+    const onSetNewPatientSearchId = (e : React.ChangeEvent<HTMLInputElement>) => {
+        setNewPatientSearchId(e.target.value);
+    };
+
+    const onSearchNewPatientByEmail = async () => {
+        try {
+            await doctorApi.searchPatientById(token, newPatientSearchId).then(res => {
+                console.log(res.data);
+            }).catch(err => console.log(err));
+        } catch(e) {
+            console.log(e);
+        }
+    };
+
+
+    const onGoBottleDetail = (bottleId : number) => {
+        console.log(bottleId);
+    };
+
+
     useEffect(() => {
         if(!token || !token.length) {
             props.history.push('/login');
@@ -131,11 +154,16 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
             onFetchPatientDetail = {onFetchPatientDetail}
 
             onInitialize = {onInitialize}
+            onGoBottleDetail = {onGoBottleDetail}
 
             editModal = {editModal}
             setEditModal = {setEditModal}
+
             newPatientRegisterModal = {newPatientRegisterModal}
             setNewPatientRegisterModal = {setNewPatientRegisterModal}
+            newPatientSearchId = {newPatientSearchId}
+            onSetNewPatientSearchId = {onSetNewPatientSearchId}
+            onSearchNewPatientByEmail = {onSearchNewPatientByEmail}
         />
     );
 };

@@ -3,6 +3,8 @@ import React from 'react';
 import * as styled from './DoctorMenuStyled';
 
 const medicineImg = '/static/img/medicine.png';
+const lensImg = '/static/img/lens.png';
+const closeButton = '/static/img/close.png';
 
 
 interface DoctorMenuProps {
@@ -21,11 +23,16 @@ interface DoctorMenuProps {
     onFetchPatientDetail : (arg0 : string) => void;
 
     onInitialize : () => void;
+    onGoBottleDetail : (arg0 : number) => void;
 
     editModal : boolean;
     setEditModal : any;
+
     newPatientRegisterModal : boolean;
     setNewPatientRegisterModal : any;
+    newPatientSearchId: string;
+    onSetNewPatientSearchId : React.ChangeEventHandler<HTMLInputElement>;
+    onSearchNewPatientByEmail : () => void;
 }
 
 const DoctorMenuPresenter = (props : DoctorMenuProps) => {
@@ -38,7 +45,7 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
                         <styled.ModalClsButton
                             onClick = {() => props.setEditModal(false)}
                         >
-                            <styled.ModalClsButtonImg />
+                            <styled.ModalClsButtonImg src = {closeButton}/>
                             <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
                         </styled.ModalClsButton>
                     </styled.ModalClsButtonWrapper>
@@ -48,9 +55,13 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
                             <styled.NewPatientSearchWrapper>
                                 <styled.NewPatientSearchInput 
                                     placeholder = '환자 이메일을 입력하세요.'
+                                    value = {props.newPatientSearchId}
+                                    onChange = {props.onSetNewPatientSearchId}
                                 />
-                                <styled.NewPatientSearchButton>
-                                    <styled.NewPatientSearchButtonImg />
+                                <styled.NewPatientSearchButton
+                                    onClick = {props.onSearchNewPatientByEmail}
+                                >
+                                    <styled.NewPatientSearchButtonImg src = {lensImg}/>
                                 </styled.NewPatientSearchButton>
                             </styled.NewPatientSearchWrapper>
                             <styled.NewPatientSearchResultWrapper>
@@ -177,7 +188,8 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
                 props.patientDetail.bottleList.map((bottle : any) => {
                     return (
                         <styled.EachBottleWrapper
-                            key = {bottle._id}
+                            key = {bottle.bottleId}
+                            onClick = {() => props.onGoBottleDetail(bottle.bottleId)}
                         >
                             <styled.EachBottleImg src = {medicineImg}/>
                             <styled.EachBottleInfo>{bottle.medicine.name.slice(0, 14)}</styled.EachBottleInfo>

@@ -131,6 +131,7 @@ export const NewPatientSearchButton = styled.button `
     justify-content : center;
     align-items : center;
 
+    cursor : pointer;
 
     transition : .25s all;
     &:hover  {

+import React, { useState, useEffect } from "react";
+import { RouteComponentProps } from 'react-router-dom';
+
+import { useRecoilValue } from "recoil";
+import * as recoilUtil from '../../util/recoilUtil';
+
+import RegisterPresenter from "./RegisterPresenter";
+
+type RegisterProps = RouteComponentProps;
+
+const RegisterContainer = (props : RegisterProps) => {
+    return (
+        <RegisterPresenter
+
+        />
+    )
+};
+
+export default RegisterContainer;
\ No newline at end of file

+import React from 'react';
+
+import * as styled from './RegisterStyled';
+
+
+const RegisterPresenter = () => {
+    return (
+        <styled.Container>
+            <styled.RegisterWrapper>
+                <styled.RegisterTitle>회원 가입</styled.RegisterTitle>
+                <styled.RegisterInfo>* 의사만 회원가입이 가능합니다.</styled.RegisterInfo>
+                <styled.RegisterInfo style = {{fontSize : 10,}}>의사 인증을 위한 정보가 요구됩니다.</styled.RegisterInfo>
+                <styled.RegisterInputWrapper>
+                    <styled.RegisterInputText>이메일</styled.RegisterInputText>
+                    <styled.RegisterInput 
+                        placeholder = 'Email'
+                    />
+                </styled.RegisterInputWrapper>
+                <styled.RegisterInputWrapper>
+                    <styled.RegisterInputText>비밀번호</styled.RegisterInputText>
+                    <styled.RegisterInput 
+                        placeholder = 'Password'
+                    />
+                </styled.RegisterInputWrapper>
+                <styled.RegisterInputWrapper>
+                    <styled.RegisterInputText>비밀번호 확인</styled.RegisterInputText>
+                    <styled.RegisterInput 
+                        placeholder = 'Password Again'
+                    />
+                </styled.RegisterInputWrapper>
+            </styled.RegisterWrapper>
+        </styled.Container>
+    )
+};
+
+export default RegisterPresenter;
\ No newline at end of file

+import styled from 'styled-components';
+
+export const Container = styled.div `
+    width : 100%;
+    height : 80vh;
+    position : absolute;
+    display : flex;
+    justify-content : center;
+    align-items : center;
+`;
+
+export const RegisterWrapper = styled.div `
+    width : 35%;
+    border : none;
+    border-radius : 3px;
+
+    display : flex;
+    flex-direction : column;
+
+    justify-content : center;
+    align-items : center;
+    
+    padding : 30px 3px;
+
+    box-shadow: 0px 0px 10px #a0a0a0;
+
+`;
+
+export const RegisterTitle = styled.div `
+    font-size : 20px;
+    font-weight : 700;
+    margin : 0 0 20px 0;
+    color : #343434;
+`;
+
+export const RegisterInfo = styled.div `
+    width : 90%;
+    font-size : 12px;
+    color : #a0a0a0;
+`;
+
+export const RegisterInputWrapper = styled.div `
+    margin : 20px 0 5px 0;
+    width : 90%;
+    display : flex;
+    flex-direction : column;
+
+    justify-content : flex-start;
+    align-items : center;
+`;
+
+export const RegisterInputText = styled.div `
+    width : 80%;
+    font-size : 14px;
+    font-weight : 600;
+    margin : 0 0 10px 0;
+    color : #343434;
+
+`;
+
+export const RegisterInput = styled.input `
+    width : 80%;
+    padding : 0 0 5px 0;
+    border : none;
+    border-bottom : 1px solid #ddd;
+
+    &::placeholder {
+        color : #ddd;
+    }
+`;
\ No newline at end of file

+export { default as RegisterContainer } from './RegisterContainer';
\ No newline at end of file