feat. bottle view -> medicine Modal, User Feedback, User Register and Header button, etc...

@@ -13,6 +13,7 @@
     "axios": "^0.21.1",
     "axios": "^0.21.1",
     "highcharts": "^9.2.0",
     "highcharts": "^9.2.0",
     "highcharts-react-official": "^3.0.0",
     "highcharts-react-official": "^3.0.0",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-router-dom": "^5.2.0",
@@ -20,6 +21,7 @@
     "recoil": "^0.4.0",
     "recoil": "^0.4.0",
     "recoil-persist": "^3.0.0",
     "recoil-persist": "^3.0.0",
     "styled-components": "^5.3.0",
     "styled-components": "^5.3.0",
+    "sweetalert2": "^11.1.3",
     "typescript": "^4.1.2",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
     "web-vitals": "^1.0.1"
   },
   },

@@ -16,4 +16,11 @@ export default {
     logout : () => {
     logout : () => {
         return client.post('/auth/logout');
         return client.post('/auth/logout');
     },
     },
+    verifyToken : (token : any) => {
+        return client.get('/auth/verifytoken', {
+            headers : {
+                Authorization : token,
+            },
+        });
+    },
 };
 };
\ No newline at end of file

@@ -7,18 +7,4 @@ export const client : AxiosInstance = axios.create({
         'Content-Type': 'application/json',
         'Content-Type': 'application/json',
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Origin': '*',
     },
     },
-});
-
-client.interceptors.request.use(
-
-);
-
-client.interceptors.response.use(
-    function (response) {
-        return response;
-    },
-    function (error) {
-        console.log(error.message);
-        return error;
-    }
-);
+});
\ No newline at end of file

@@ -14,7 +14,33 @@ export const Container = styled.div `
     align-items : center;
     align-items : center;
 `;
 `;
 
 
-export const HeaderWrapper = styled.div `
+export const HeaderLeftWrapper = styled.div `
+    flex : 1;
+    display : flex;
+    flex-direction : row;
+    justify-content : flex-start;
+    align-items : center;
+
+    border : none;
+
+    margin : 0 30px;
+`;
+
+export const HeaderRightWrapper = styled.div `
+    flex : 1;
+    display : flex;
+    flex-direction : row;
+    justify-content : flex-end;
+    align-items : center;
+
+    border : none;
+
+    margin : 0 30px;
+
+`;
+
+export const HeaderCenterWrapper = styled.div `
+    flex : 3;
     display : flex;
     display : flex;
     flex-direction : row;
     flex-direction : row;
     justify-content : center;
     justify-content : center;
@@ -31,8 +57,69 @@ export const TitleImg = styled.img `
 `;
 `;
 
 
 export const Title = styled.div `
 export const Title = styled.div `
-    flex : 1;
     text-align : center;
     text-align : center;
     font-size : 17px;
     font-size : 17px;
     font-weight : 800;
     font-weight : 800;
+`;
+
+export const Backbutton = styled.button `
+    border : 1px solid #337DFF;
+    border-radius : 5px;
+    background-color : transparent;
+    color : #337DFF;
+    padding : 4px 17px;
+
+    transition : .25s all;
+
+    display : flex;
+    flex-direction : row;
+    justify-content : center;
+
+    cursor : pointer;
+
+    &:hover {
+        opacity : .5;
+    }
+`;
+
+export const BackbuttonImg = styled.img `
+    height : 14px;
+    width : 14px;
+    margin : 0 6px 0 0;
+`;
+
+export const BackbuttonText = styled.div `
+    font-size : 15px;
+    font-weight : 700;
+    letter-spacing : 1px;
+`;
+
+export const LogoutButton = styled.button `
+    display : flex;
+    justify-content : center;
+    // align-items : center;
+
+    background-color : transparent;
+    border : none;
+    border-bottom : 1px solid #a0a0a0;
+    padding : 0 4px 4px 4px;
+
+    cursor : pointer;
+    transition : .25s all;
+
+    &:hover { 
+        opacity : .5;
+    }
+`;
+
+export const LogoutButtonImg = styled.img `
+    height : 15px;
+    width : 15px;
+    margin : 0 4px 0 0;
+`;
+
+export const LogoutButtonText = styled.div `
+    color : #a0a0a0;
+    font-size : 13px;
+    letter-spacing : 1px;
 `;
 `;
\ No newline at end of file

-import React from 'react';
+import React, { useEffect } from 'react';
+import { RouteComponentProps } from 'react-router';
 
 
+import { useRecoilState } from 'recoil';
+import * as recoilUtil from '../../util/recoilUtil';
+
+import * as Alert from '../../util/alertMessage';
 import * as styled from './HeaderStyled';
 import * as styled from './HeaderStyled';
 
 
+import { authApi } from '../../api';
+
 const headerImg = '/static/img/pharmacy.png';
 const headerImg = '/static/img/pharmacy.png';
+const backButtonWhite = '/static/img/backButtonWhite.png';
+const backButtonBlue = '/static/img/backButtonBlue.png';
+const logout = '/static/img/logout.png';
+
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface HeaderProps extends RouteComponentProps {}
+
+const Header = (props : HeaderProps) => {
+
+    const [token, setToken] = useRecoilState(recoilUtil.token);
+
+
+    const onLogout = () => {
+        const logout = async () => {
+            try {
+                await authApi.logout();
+                setToken(null);
+                Alert.onSuccess('로그인 페이지로 이동합니다.', () => props.history.push('/login'));
+            } catch(e) {
+                Alert.onError('알 수 없는 에러가 발생했습니다.', () => props.history.push('/'));
+            }
+        };
+
+        Alert.onCheck('정말 로그아웃 하시겠습니까?', logout, () => null);
+    };
+
+    const verifyToken = async () => {
+        try {
+            const result = await authApi.verifyToken(token);
+            if(result.statusText !== 'OK') {
+                setToken(null);
+                Alert.onError('세션이 만료되었습니다. 다시 로그인하세요.', () => props.history.push('/login'));
+            }
+        } catch(e) {
+            console.log(e);
+            setToken(null);
+            Alert.onError('세션이 만료되었습니다. 다시 로그인하세요.', () => props.history.push('/login'));
+        }
+    };
+
+    const onGoBack = () => {
+        props.history.goBack();
+    };
 
 
+    useEffect(() => {
+        verifyToken();
+    }, []);
 
 
-const Header = () => {
     return (
     return (
         <styled.Container>
         <styled.Container>
-            <styled.HeaderWrapper>
+            <styled.HeaderLeftWrapper>
+            {
+                (token && token.length && props.location.pathname !== '/') || props.location.pathname === '/register' ?
+                <styled.Backbutton
+                    onClick = {onGoBack}
+                >
+                    <styled.BackbuttonImg src = {backButtonBlue}/>
+                    <styled.BackbuttonText>뒤로 가기</styled.BackbuttonText>
+                </styled.Backbutton> : null
+            }
+            </styled.HeaderLeftWrapper>
+            <styled.HeaderCenterWrapper>
                 <styled.TitleImg src = {headerImg} />
                 <styled.TitleImg src = {headerImg} />
                 <styled.Title>내 손 안의 주치의</styled.Title>
                 <styled.Title>내 손 안의 주치의</styled.Title>
-            </styled.HeaderWrapper>
+            </styled.HeaderCenterWrapper>
+            <styled.HeaderRightWrapper>
+            {
+                token && token.length ?
+                <styled.LogoutButton
+                    onClick = {onLogout}
+                >
+                    <styled.LogoutButtonImg src = {logout}/>
+                    <styled.LogoutButtonText>로그아웃</styled.LogoutButtonText>
+                </styled.LogoutButton> : null
+            }
+            </styled.HeaderRightWrapper>
         </styled.Container>
         </styled.Container>
     )
     )
 };
 };

 import React, { useEffect } from 'react';
 import React, { useEffect } from 'react';
-import * as recoilUtil from '../../util/recoilUtil';
-import { useRecoilState } from 'recoil';
 
 
 import * as styled from './ErrorStyled';
 import * as styled from './ErrorStyled';
 
 
 
 
 const ErrorContainer = () => {
 const ErrorContainer = () => {
-
-    const [error, setError] = useRecoilState(recoilUtil.error);
-
-    useEffect(() => {
-        console.log(error);
-    }, [error]);
-
     return (
     return (
-        <>
-            {
-                error ?
-                <styled.Container>
-                    {error}
-                </styled.Container> : null
-            }
-        </>
+        <styled.Container>
+        </styled.Container>
     );
     );
 }; 
 }; 
 
 
-export default ErrorContainer;
+export default ErrorContainer;
\ No newline at end of file

+import Swal from "sweetalert2";
+
+export const onError = (text : string, confirmAction : () => void) => {
+    Swal.fire({
+        title : '오류 발생',
+        icon : 'error',
+        text,
+        confirmButtonText : '확인',
+        confirmButtonColor : '#337DFF'
+    }).then((res) => {
+        if(res.isConfirmed) {
+            confirmAction();
+        }
+    });
+};
+
+export const onSuccess = (text : string, successAction : () => void) => {
+    Swal.fire({
+        title : '성공',
+        icon : 'success',
+        text,
+        showConfirmButton : false,
+        timer : 1500,
+    }).then(res => {
+        successAction();
+    });
+};
+
+export const onCheck = (text : string, confirmAction : () => void, denyAction : () => void) => {
+    Swal.fire({
+        title : '확인',
+        icon : 'question',
+        text,
+        confirmButtonText : '확인',
+        confirmButtonColor : '#337DFF',
+        showDenyButton : true,
+        denyButtonText : '취소',
+        denyButtonColor : '#343434',
+    }).then(res => {
+        if(res.isConfirmed) {
+            confirmAction();
+        } else if(res.isDenied) {
+            denyAction();
+        }
+    });
+}
\ No newline at end of file

+import moment from 'moment';
+
+export const make = (chartData : any[], numberOfRow : number) => {
+    const now = new Date();
+    const result : any = {};
+    new Array(numberOfRow).fill(null).forEach((item : any, index : number) => {
+        const key = moment(now).format('MM/DD');
+        result[key] = 0;
+        now.setDate(now.getDate() - 1);
+    })
+
+    chartData.forEach((data : any) => {
+        const key : string = moment(data.takeDate).format('MM/DD');
+        result[key] = result[key] + 1;
+    });
+
+    const categories : any = [];
+    const data : any = [];
+
+    Object.entries(result).forEach((item : any) => {
+        categories.push(item[0]);
+        data.push(item[1]);
+    });
+
+    categories.reverse();
+    data.reverse();
+
+    return {
+        categories,
+        data,
+    }
+};
\ No newline at end of file

@@ -13,10 +13,4 @@ export const userTypeCd = atom({
     key : 'userTypeCd',
     key : 'userTypeCd',
     default : 'NORMAL',
     default : 'NORMAL',
     effects_UNSTABLE : [persistAtom],
     effects_UNSTABLE : [persistAtom],
-});
-
-export const error = atom({
-    key : 'error',
-    default : null,
-    effects_UNSTABLE : [persistAtom],
-})
\ No newline at end of file
+});
\ No newline at end of file

 import React from "react";
 import React from "react";
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
 
 
 import Error from '../components/error';
 import Error from '../components/error';
-import Header from '../components/Header';
 import { LoginContainer } from "./login";
 import { LoginContainer } from "./login";
 import { RegisterContainer } from './register';
 import { RegisterContainer } from './register';
 import { MainContainer } from "./main";
 import { MainContainer } from "./main";
@@ -13,12 +12,12 @@ const Router = () => {
     return (
     return (
         <BrowserRouter>
         <BrowserRouter>
             <Error />
             <Error />
-            <Header />
             <Switch>
             <Switch>
                 <Route exact path = '/' component = {MainContainer}/>
                 <Route exact path = '/' component = {MainContainer}/>
                 <Route exact path = '/login' component = {LoginContainer}/>
                 <Route exact path = '/login' component = {LoginContainer}/>
                 <Route exact path = '/register' component = {RegisterContainer}/>
                 <Route exact path = '/register' component = {RegisterContainer}/>
-                <Route exact path = '/bottle' component = {BottleInfoContainer}/>
+                <Route exact path = '/bottle/:bottleId' component = {BottleInfoContainer}/>
+                <Redirect path = '*' to = '/'/>
             </Switch>
             </Switch>
         </BrowserRouter>
         </BrowserRouter>
     )
     )

 import React, { useState, useEffect } from 'react';
 import React, { useState, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { RouteComponentProps } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { useRecoilValue } from 'recoil';
+
 import * as recoilUtil from '../../util/recoilUtil';
 import * as recoilUtil from '../../util/recoilUtil';
+import * as makeChart from '../../util/makeChart';
+import * as Alert from '../../util/alertMessage';
 
 
-import HighCharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
+import moment from 'moment';
 
 
+import Header from '../../components/Header';
 import BottleInfoPresenter from './BottleInfoPresenter';
 import BottleInfoPresenter from './BottleInfoPresenter';
 
 
 import { doctorApi } from '../../api';
 import { doctorApi } from '../../api';
 
 
 
 
-type BottleInfoProps = RouteComponentProps
+
+interface RouteParmas {
+    bottleId : string;
+}
+
+type BottleInfoProps = RouteComponentProps<RouteParmas>
 
 
 const BottleInfoContainer = (props : BottleInfoProps) => {
 const BottleInfoContainer = (props : BottleInfoProps) => {
 
 
+    const { bottleId } = props.match.params;
+
     const token = useRecoilValue(recoilUtil.token);
     const token = useRecoilValue(recoilUtil.token);
     const userTypeCd = useRecoilValue(recoilUtil.userTypeCd);
     const userTypeCd = useRecoilValue(recoilUtil.userTypeCd);
+    
+    const [bottleInfo, setBottleInfo] = useState<any>({
+        feedbackList : [],
+        medicine : {},
+        bottleId : 0,
+        takeMedicineHist : [],
+    });
+
+    const numberOfChartItem = 7;
+    const [chartOption, setChartOption] = useState<any>({
+        chart : {
+            type : 'line',
+            height : 300,
+            width : 450,
+        },
+        title : {
+            text : '',
+            style : { 'color' : '#343434', 'fontSize' : '15px', 'fontWeight' : '700' },
+            margin : 10,
+        },
+        xAxis : {
+            categories : [],
+        },
+        series : [{
+            name : '약 복용 횟수',
+            color : '#337DFF',
+            data : [],
+        }],
+    });
+
+    const [feedback, setFeedback] = useState<string>('');
+    const [fdbType, setFdbType] = useState<string>('RECOMMEND');
+
+    const [medicineInfoModal, setMedicineInfoModal] = useState<boolean>(false);
+
 
 
+    const fetchData = async () => {
+        setFeedback('');
+        setFdbType('RECOMMEND');
+        setMedicineInfoModal(false);
 
 
+        try {
+            const result = await doctorApi.getPatientBottleDetail(token, bottleId);
+            if (result.statusText === 'OK') {
+                const { categories, data } = makeChart.make(result.data.takeMedicineHist, numberOfChartItem);
+                setBottleInfo({
+                    ...result.data,
+                    feedbackList : result.data.feedbackList.map((feedback : any) => {
+                        return {
+                            ...feedback,
+                            fdbDtm : moment(feedback.fdbDtm).format('YYYY-MM-DD hh:mm'),
+                        }
+                    }),
+                });
+                setChartOption({
+                    ...chartOption,
+                    title : {
+                        text : result.data.medicine.name,
+                    },
+                    xAxis : {
+                        categories,
+                    },
+                    series : [{
+                        data,
+                    }]
+                });
+            } else {
+                Alert.onError('접근 권한이 없습니다.', () => props.history.push('/'));
+            }
+        } catch(e) {
+            Alert.onError(e.response.data.error, () => props.history.push('/'));
+
+            console.log(e);
+        }
+    };
+
+    const onSetFeedback = (e : React.ChangeEvent<HTMLTextAreaElement>) => {
+        setFeedback(e.target.value);
+    };
+
+    const onSubmitFeedback = () => {
+        const register = async () => {
+           if(feedback.length) {
+                try {
+                    const res = await doctorApi.writeBottleFeedback(token, {
+                        bottleId,
+                        fdbType,
+                        feedback
+                    });
+                    if(res.statusText === 'OK') {
+                        Alert.onSuccess('피드백이 등록되었습니다.', () => fetchData());
+                    } else {
+                        console.log(res);
+                        Alert.onError('피드백 등록에 실패했습니다.', () => null);
+                    }
+                } catch(e) {
+                    Alert.onError(e.response.data.error, () => fetchData());
+                }
+           } else {
+               Alert.onError('피드백 내용을 입력하세요.', () => null);
+           }
+        }
+        
+        Alert.onCheck('피드백을 등록하시겠습니까?', register, () => null);
+
+    };
+
+ 
     useEffect(() => {
     useEffect(() => {
         if(userTypeCd !== 'DOCTOR') {
         if(userTypeCd !== 'DOCTOR') {
-            props.history.push('/');
+            Alert.onError('접근 권한이 없습니다.', () => props.history.push('/'));
         }
         }
+        fetchData();
     }, [userTypeCd]);
     }, [userTypeCd]);
 
 
     return (
     return (
+        <>
+        <Header {...props} />
         <BottleInfoPresenter
         <BottleInfoPresenter
+            bottleInfo = {bottleInfo}
+            chartOption = {chartOption}
+
+            medicineInfoModal = {medicineInfoModal}
+            setMedicineInfoModal = {setMedicineInfoModal}
 
 
+            feedback = {feedback}
+            onSetFeedback = {onSetFeedback}
+            fdbType = {fdbType}
+            setFdbType = {setFdbType}
+            onSubmitFeedback = {onSubmitFeedback}
         />
         />
+        </>
     );
     );
 };
 };
 
 

 import React from 'react';
 import React from 'react';
+import HighCharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
 
 
 import * as styled from './BottleInfoStyled';
 import * as styled from './BottleInfoStyled';
 
 
+const plus = '/static/img/plus.png';
+const closeButton = '/static/img/close.png';
 
 
-const BottleInfoPresenter = () => {
+
+interface BottleInfoProps {
+    bottleInfo : {
+        feedbackList : any[];
+        medicine : any;
+        bottleId : number;
+        takeMedicineHist : any[];
+    };
+    chartOption : any;
+
+    medicineInfoModal : boolean;
+    setMedicineInfoModal : (arg0 : boolean) => void;
+
+    feedback : string;
+    onSetFeedback : React.ChangeEventHandler<HTMLTextAreaElement>;
+    fdbType : string;
+    setFdbType : (arg0 : string) => void;
+    onSubmitFeedback : () => void;
+}
+
+const BottleInfoPresenter = (props : BottleInfoProps) => {
     return (
     return (
         <styled.Container>
         <styled.Container>
-
+            {
+                props.medicineInfoModal ?
+                <styled.ModalContainer>
+                    <styled.ModalClsButtonWrapper>
+                        <styled.ModalClsButton
+                            onClick = {() => props.setMedicineInfoModal(false)}
+                        >
+                            <styled.ModalClsButtonImg src = {closeButton}/>
+                            <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
+                        </styled.ModalClsButton>
+                    </styled.ModalClsButtonWrapper>
+                    <styled.ModalContentWrapper>
+                        <styled.ModalContent>
+                            <styled.MedicineNameWrapper>
+                                <styled.MedicineName>{props.bottleInfo.medicine.name}</styled.MedicineName>
+                                <styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{props.bottleInfo.medicine.company}</styled.MedicineName>
+                            </styled.MedicineNameWrapper>
+                            <styled.MedicineInfoWrapper>
+                                <styled.MedicineEachInfoWrapper>
+                                    <styled.MedicineEachInfoTitle>효능</styled.MedicineEachInfoTitle>
+                                    <styled.MedicineEachInfo>{props.bottleInfo.medicine.target}</styled.MedicineEachInfo>
+                                </styled.MedicineEachInfoWrapper>
+                                <styled.MedicineEachInfoWrapper>
+                                    <styled.MedicineEachInfoTitle>복용 정보</styled.MedicineEachInfoTitle>
+                                    <styled.MedicineEachInfo>{props.bottleInfo.medicine.dosage}</styled.MedicineEachInfo>
+                                </styled.MedicineEachInfoWrapper>
+                                <styled.MedicineEachInfoWrapper>
+                                    <styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>주의 사항</styled.MedicineEachInfoTitle>
+                                    <styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.warn}</styled.MedicineEachInfo>
+                                </styled.MedicineEachInfoWrapper>
+                                <styled.MedicineEachInfoWrapper>
+                                    <styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>부작용</styled.MedicineEachInfoTitle>
+                                    <styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.antiEffect}</styled.MedicineEachInfo>
+                                </styled.MedicineEachInfoWrapper>
+                            </styled.MedicineInfoWrapper>
+                        </styled.ModalContent>
+                    </styled.ModalContentWrapper>
+                </styled.ModalContainer> : null
+            }
+            <styled.ChartAndFeedbackWrapper>
+                <styled.ChartWrapper>
+                    <styled.MedicineDetailViewButtonWrapper>
+                        <styled.MedicineDetailViewButton
+                            onClick = {() => props.setMedicineInfoModal(true)}
+                        >
+                            <styled.MedicineDetailViewButtonImg src = {plus}/>
+                        </styled.MedicineDetailViewButton>
+                    </styled.MedicineDetailViewButtonWrapper>
+                    <HighchartsReact 
+                        highCharts = {HighCharts}
+                        options = {props.chartOption}
+                    />
+                </styled.ChartWrapper>
+                <styled.FeedbackWrapper>
+                    <styled.FeedbackInfoTitle>피드백 내역</styled.FeedbackInfoTitle>
+                    {
+                        props.bottleInfo.feedbackList.map((feedback : any) => {
+                            return (
+                                <styled.FeedbackEachItemWrapper
+                                    key = {feedback._id}
+                                >
+                                    <styled.FeedbackType fdbType = {feedback.fdbType}/>
+                                    <styled.FeedbackTitle>{feedback.feedback}</styled.FeedbackTitle>
+                                    <styled.FeedbackDtm>등록일<br/>{feedback.fdbDtm}</styled.FeedbackDtm>
+                                </styled.FeedbackEachItemWrapper>
+                            )
+                        })
+                    }
+                </styled.FeedbackWrapper>
+            </styled.ChartAndFeedbackWrapper>
+            <styled.NewFeedbackRegWrapper>
+                <styled.NewFeedbackRegInput 
+                    value = {props.feedback}
+                    onChange = {props.onSetFeedback}
+                />
+                <styled.NewFeedbackButtonWrapper>
+                    <styled.NewFeedbackTypeButtonWrapper>
+                       <styled.NewFeedbackTypeButtonEachWrapper>
+                            <styled.NewFeedbackTypeButton 
+                                valueType = 'RECOMMEND'
+                                selected = {props.fdbType === 'RECOMMEND'}
+                                onClick = {() => props.setFdbType('RECOMMEND')}
+                            />
+                            <styled.NewFeedbackTypeButtonText>권고</styled.NewFeedbackTypeButtonText>
+                        </styled.NewFeedbackTypeButtonEachWrapper>
+                        <styled.NewFeedbackTypeButtonEachWrapper>
+                            <styled.NewFeedbackTypeButton 
+                                valueType = 'CAUTION'
+                                selected = {props.fdbType === 'CAUTION'}
+                                onClick = {() => props.setFdbType('CAUTION')}
+                            />
+                            <styled.NewFeedbackTypeButtonText>주의</styled.NewFeedbackTypeButtonText>
+                        </styled.NewFeedbackTypeButtonEachWrapper> 
+                        <styled.NewFeedbackTypeButtonEachWrapper>
+                            <styled.NewFeedbackTypeButton 
+                                valueType = 'WARN'
+                                selected = {props.fdbType === 'WARN'}
+                                onClick = {() => props.setFdbType('WARN')}
+                            />
+                            <styled.NewFeedbackTypeButtonText>경고</styled.NewFeedbackTypeButtonText>
+                        </styled.NewFeedbackTypeButtonEachWrapper> 
+                        <styled.NewFeedbackTypeButtonEachWrapper>
+                            <styled.NewFeedbackTypeButton
+                                valueType = 'CRITICAL'
+                                selected = {props.fdbType === 'CRITICAL'}
+                                onClick = {() => props.setFdbType('CRITICAL')}
+                            />
+                            <styled.NewFeedbackTypeButtonText>치명</styled.NewFeedbackTypeButtonText>
+                        </styled.NewFeedbackTypeButtonEachWrapper> 
+                    </styled.NewFeedbackTypeButtonWrapper>
+                    <styled.NewFeedbackRegButton
+                        onClick = {props.onSubmitFeedback}
+                    >
+                        {/* <styled.NewFeedbackRegButtonImg /> */}
+                        <styled.NewFeedbackRegButtonText>피드백<br/>등록</styled.NewFeedbackRegButtonText>
+                    </styled.NewFeedbackRegButton>
+                </styled.NewFeedbackButtonWrapper>
+            </styled.NewFeedbackRegWrapper>
         </styled.Container>
         </styled.Container>
     );
     );
 };
 };

-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+
+const ModalOn = keyframes `
+    0% {
+        background-color : rgba(52, 52, 52, .0);
+    }
+    20% {
+        background-color : rgba(52, 52, 52, .2);
+    }
+    40% {
+        background-color : rgba(52, 52, 52, .4);
+    }
+    60% {
+        background-color : rgba(52, 52, 52, .5);
+    }
+    80% {
+        background-color : rgba(52, 52, 52, .6);
+    }
+    100% {
+        background-color : rgba(52, 52, 52, .7);
+    }
+
+`;
+
 
 
 export const Container = styled.div `
 export const Container = styled.div `
+    height : 100vh;
+    width : 100%;
+    display : flex;
+    flex-direction : column;
+    justify-content : center;
+`;
+
+export const ModalContainer = styled.div `
+    height : 100%;
+    width : 100%;
+    z-index : 99;
+    position : absolute;
+
+    display : flex;
+    flex-direction : column;
+
+    animation : ${ModalOn} .5s;
+
+    background-color : rgba(52, 52, 52, .7);
+
+`;
+
+export const ModalClsButtonWrapper = styled.div `
+    flex : 1;    
+
+    display : flex;
+
+    justify-content : flex-end;
+    align-items : center;
+    padding : 0 20px;
+
+    border : none;
+    background-color : transprent;    
+`;
+
+export const ModalClsButton = styled.button `
+    border : none;
+    background-color : transparent;
+
+    cursor : pointer;
+
+    color : #fff;
+
+    display : flex;
+    flex-direction : row;
+
+    justify-content : center;
+    align-items : center;
+
+    transition : .25s all;
+    &:hover {
+        opacity : .5;
+    }
+`;
+
+export const ModalClsButtonImg = styled.img `
+    height : 20px;
+    width : 20px;
+
+    margin : 0 10px 0 0;
+`;
+
+export const ModalClsButtonText = styled.div `
+    font-size : 18px;
+    font-weight : 700;
+`;
+
+export const ModalContentWrapper = styled.div `
+    flex : 8;
+
+    display : flex;
+    flex-direction : column;
+
+    justify-content : center;
+    align-items : center;
+
+    border : none;
+`;
+
+export const ModalContent = styled.div `
+    width : 700px;
+    height : 500px;
+
+    background-color : #fff;
+    border : 1.2px solid #337DFF;
+    border-radius : 5px;
+    
+    display : flex;
+    flex-direction : column;
+
+    // justify-content : center;
+    align-items : center;
+`;
+
+export const MedicineNameWrapper = styled.div `
+    flex : 1
+    border : none;
+    border-bottom : 1px solid #ddd;
+    width : 100%;
+
+    padding : 4% 0;
+
+    display : flex;
+    flex-direction : column;
+    justify-content : center;
+    align-items : center;
+`;
+
+export const MedicineName = styled.div `
+    font-size : 20px;
+    font-weight : 700;
+    letter-spacing : 1px;
+
+    color : #337DFF;
+`;
+
+export const MedicineInfoWrapper = styled.div `
+    flex : 9;
+    width : 100%;
+
+    overflow : scroll;
+    border : 1px solid;
+
+    display : flex;
+    flex-direction : column;
+    align-items : center;
+
+    padding : 0 0 0 3px;
+
+    &::-webkit-scrollbar {
+        width : 3px;
+        background-color : transparent;
+        height : 0px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color : #337DFF;
+    }
+
+`;
+
+export const MedicineEachInfoWrapper = styled.div `
+    display : flex;
+    flex-direction : column;
+
+    width : 80%;
+    padding : 20px 10%;
+    border : none;
+    border-bottom : 1px solid #ddd;
+`;
+
+export const MedicineEachInfoTitle = styled.div `
+    font-size : 14px;
+    font-weight : 500;
+    color : #337DFF;
+    margin : 0 0 5px 0;
+`;
+
+export const MedicineEachInfo = styled.div `
+    font-size : 16px;
+    letter-spacing : 1px;
+`;
+
+export const ChartAndFeedbackWrapper = styled.div `
+    flex : 3;
+    display : flex;
+    flex-direction : row;
+
+    justify-content : space-around;
+
+`;
+
+export const ChartWrapper = styled.div `
+    border : 1px solid transparent;
+    padding : 10px;
+
+    border-radius : 4px;
+
+    display : flex;
+    flex-direction : column;
+    justify-content : center;
+    align-items : center;
+
+    box-shadow: 0px 0px 10px #a0a0a0;
+
+`;
+
+export const MedicineDetailViewButtonWrapper = styled.div `
+    border : none;
+    width : 100%;
+    
+    display : flex;
+    flex-direction : row;
+    justify-content : flex-end;
+    align-items : center;
+`;
+
+export const MedicineDetailViewButton = styled.button `
+    height : 25px;
+    width : 25px;
+
+    display : flex;
+    justify-content : center;
+    align-items : center;
+
+    background-color : transparent;
+    border : 1px solid #ddd;
+    border-radius : 3px;
+
+    cursor : pointer;
+
+    box-shadow: 0px 0px 3px 0 #a0a0a0;
+
+    opacity : .7;
+
+    &:hover {
+        opacity : 1;
+    }
+`;
+
+export const MedicineDetailViewButtonImg = styled.img `
+    height : 15px;
+    width : 15px;
+`;
+
+export const FeedbackWrapper = styled.div `
+    overflow : scroll;
+    border : 1px solid transparent;
+    width : 500px;
+
+    max-height : 420px;
+
+    border-radius : 4px;
+
+    box-shadow: 0px 0px 10px #a0a0a0;
+
+    display : flex;
+    flex-direction : column;
+
+    align-items : center;
+
+    padding : 0 0 0 3px;
+
+    &::-webkit-scrollbar {
+        width : 3px;
+        background-color : transparent;
+        height : 0px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color : #337DFF;
+    }
+`;
+
+export const FeedbackInfoTitle = styled.div `
+    width : 100%;
+    text-align : center;
+
+    border : none;
+    border-bottom : 2px solid #ddd;
+
+    padding : 10px 0;
+
+    font-size : 17px;
+    font-weight : 600;
+
+    background-color : transparent;
+`;
+
+export const FeedbackEachItemWrapper = styled.div `
+    width : 100%;
+    padding : 10px 0;
+
+    border : none;
+    border-bottom : 1px solid #ddd;
+    
+    background-color : transparent;
+
+    display : flex;
+    flex-direction : row;
+    align-items : center;
+`;
+
+export const FeedbackType = styled.div<{fdbType : string}> `
+    margin : 0 0 0 10px;
+
+    border : none;
+    border-radius : 100px;
+
+    height : 12px;
+    width : 12px;
+
+
+    background-color : ${props => 
+        props.fdbType === 'RECOMMEND' ? '#337DFF'
+        : props.fdbType === 'CAUTION' ? '#FFE77B'
+        : props.fdbType === 'WARN' ? '#FF8941'
+        : props.fdbType === 'CRITICAL' ? '#E40000' : 'transparent'
+    };
+`;
+
+export const FeedbackTitle = styled.div `
+    flex : 7;
+
+    height : 100%;
+
+    padding : 0 10px;
+
+    display : flex;
+    flex-direction : row;
+
+    align-items : center;
+
+    font-size : 12px;
+    font-weight : 500;
+`;
+
+export const FeedbackDtm = styled.div `
+    flex : 2;
+
+    height : 100%;
+
+    padding : 0 10px;
+
+    display : flex;
+    flex-direction : row;
+
+    align-items : center;
+
+    border : none;
+    border-left : 1px solid #ddd;
+
+    font-size : 10px;
+    font-weight : 400;
+`;
+
+
+export const NewFeedbackRegWrapper = styled.div `
+    margin : 20px 10px;
+
+    flex : 2;
+    display : flex;
+    flex-direction : row;
+    justify-content : center;
+
+    padding : 20px;
+
+    border : 1px solid transparent;
+    border-radius : 4px;
+
+    box-shadow: 0px 0px 10px #a0a0a0;
+
+`;
+
+export const NewFeedbackRegInput = styled.textarea `
+    resize : none;
+    flex : 10;
+
+    padding : 30px;
+
+    font-size : 14px;
+
+    border : 1px solid #a0a0a0;
+    border-radius : 4px;
+`;
+
+export const NewFeedbackButtonWrapper  = styled.div `
+    flex : 2;
+    border : none;
+
+    display : flex;
+    flex-direction : column;
+    justify-content : center;
+    align-items : center;
+
+    gap : 2%;
+
+`;
+
+export const NewFeedbackTypeButtonWrapper = styled.div `
+    flex : 5;
+    display : flex;
+    flex-direction : column;
+
+    border : none;
+    width : 70%;
+`;
+
+export const NewFeedbackTypeButtonEachWrapper = styled.div `
+    flex : 1;
+    display : flex;
+    flex-direction : row;
+    justify-content : flex-start;
+    align-items : center;
+
+    width : 100%;
+    padding : 10% 0;
+
+    border : none;
+`;
+
+export const NewFeedbackTypeButton = styled.button<{valueType : string, selected : boolean}> `
+    height : 15px;
+    width : 15px;
+
+    border : 1px solid #ddd;
+    border-radius : 3px;
+    background-color : ${props => 
+        props.selected && props.valueType === 'RECOMMEND' ? '#337DFF'
+        : props.selected && props.valueType === 'CAUTION' ? '#FFE77B'
+        : props.selected &&  props.valueType === 'WARN' ? '#FF8941'
+        : props.selected && props.valueType === 'CRITICAL' ? '#E40000' : 'transparent'
+    };
+
+    display : flex;
+    justify-content : center;
+    align-items : center;
+
+    cursor : pointer;
+
+    margin : 0 5% 0 0;
+
+    transition : .25s all;
+
+    &:hover {
+        background-color : ${props => 
+            props.valueType === 'RECOMMEND' ? '#337DFF'
+            : props.valueType === 'CAUTION' ? '#FFE77B'
+            : props.valueType === 'WARN' ? '#FF8941'
+            : props.valueType === 'CRITICAL' ? '#E40000' : 'transparent'
+        };
+    }
+`
+
+export const NewFeedbackTypeButtonText = styled.div `
+    font-size : 12px;
+    font-weight : 500;
+    letter-spacing : 1px;
+`;
+
+export const NewFeedbackRegButton = styled.button `
+    flex : 2;
+    width : 70%;
+
+    cursor : pointer;
+
+    border : 1px solid transparent;
+    border-radius : 4px;
+    background-color : #343434;
+    color : #fff;
+
+    transition : .25s all;
+
+    &:hover {
+        background-color : transparent;
+        border : 1px solid #343434;
+        color : #343434;
+    }
+`;
+
+export const NewFeedbackRegButtonText = styled.div `
+    font-size : 15px;
+    letter-spacing : 1px;
+    font-weight : 600;
+
+    font-color : #fff
+
+
+`;
+
+export const NewFeedbackRegButtonImg = styled.img `
 
 
 `;
 `;
\ No newline at end of file

@@ -4,12 +4,16 @@ import { RouteComponentProps } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import { useRecoilState } from 'recoil';
 import * as recoilUtil from '../../util/recoilUtil';
 import * as recoilUtil from '../../util/recoilUtil';
 
 
+import * as Alert from '../../util/alertMessage';
+
+import Header from '../../components/Header';
 import LoginPresenter from './LoginPresenter';
 import LoginPresenter from './LoginPresenter';
 
 
 import { authApi } from '../../api';
 import { authApi } from '../../api';
 
 
 
 
-type LoginProps = RouteComponentProps
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface LoginProps extends RouteComponentProps {}
 
 
 const LoginContainer = (props : LoginProps) => {
 const LoginContainer = (props : LoginProps) => {
 
 
@@ -17,9 +21,19 @@ const LoginContainer = (props : LoginProps) => {
         userId : '',
         userId : '',
         password : '',
         password : '',
     });
     });
+
     const [token, setToken] = useRecoilState(recoilUtil.token);
     const [token, setToken] = useRecoilState(recoilUtil.token);
     const [userTypeCd, setUserTypeCd] = useRecoilState(recoilUtil.userTypeCd);
     const [userTypeCd, setUserTypeCd] = useRecoilState(recoilUtil.userTypeCd);
-    const [error, setError] = useRecoilState(recoilUtil.error);
+
+
+    const fetchData = async() => {
+        if(token && token.length) {
+            const result = await authApi.verifyToken(token);
+            if (result.statusText === 'OK') {
+                props.history.push('/');
+            }
+        } 
+    };
 
 
     const onSetUserId = (e : React.ChangeEvent<HTMLInputElement>) => {
     const onSetUserId = (e : React.ChangeEvent<HTMLInputElement>) => {
         setLoginForm({
         setLoginForm({
@@ -42,23 +56,26 @@ const LoginContainer = (props : LoginProps) => {
     const onLogin = async () => {
     const onLogin = async () => {
         try {
         try {
             const result : any = await authApi.login(loginForm);
             const result : any = await authApi.login(loginForm);
-            if(result.statusText === 'OK') {
+            if(result.statusText === 'OK' && result.data.userTypeCd !== 'NORMAL') {
                 setToken(result.data.token);
                 setToken(result.data.token);
                 setUserTypeCd(result.data.userTypeCd);
                 setUserTypeCd(result.data.userTypeCd);
-                props.history.push('/');
+                Alert.onSuccess('로그인 성공, 메인 화면으로 이동합니다.', () => props.history.push('/'));
+            } else if(result.data.userTypeCd === 'NORMAL') {
+                Alert.onError('권한이 없는 유저입니다.', () => props.history.push('/'));
             }
             }
         } catch(e) {
         } catch(e) {
-            setError('로그인에 실패했습니다.');
-            console.log(e);
+            Alert.onError(e.response.data, () => null);
         }
         }
 
 
     };
     };
 
 
     useEffect(() => {
     useEffect(() => {
-        console.log('loginPage');
+        fetchData();
     }, []);
     }, []);
 
 
     return (
     return (
+        <>
+        <Header {...props} />
         <LoginPresenter
         <LoginPresenter
             loginForm = {loginForm}
             loginForm = {loginForm}
             onSetUserId = {onSetUserId}
             onSetUserId = {onSetUserId}
@@ -66,6 +83,7 @@ const LoginContainer = (props : LoginProps) => {
             onGoRegister = {onGoRegister}
             onGoRegister = {onGoRegister}
             onLogin = {onLogin}
             onLogin = {onLogin}
         />
         />
+        </>
     )
     )
 };
 };
 
 

@@ -17,7 +17,7 @@ const LoginPresenter = (props : LoginProps) => {
     return (
     return (
         <styled.Container>
         <styled.Container>
             <styled.LoginWrapper>
             <styled.LoginWrapper>
-                <styled.LoginTitle>로그인</styled.LoginTitle>
+                <styled.LoginTitle>🩺로그인</styled.LoginTitle>
                 <styled.LoginInputWrapper>
                 <styled.LoginInputWrapper>
                     <styled.LoginEachInputWrapper>
                     <styled.LoginEachInputWrapper>
                         <styled.LoginInputText>
                         <styled.LoginInputText>

-import styled from 'styled-components';
+import styled, { keyframes} from 'styled-components';
+
+
+const twinkle = keyframes `
+    0% {
+        opacity : 1;
+        background-color : #337DFF;
+    }
+    20% {
+        opacity : .75;
+    }
+    40% {
+        opacity : .5;
+    }
+    60% {
+        opacity : .5;
+    }
+    80% {
+        opacity : .75;
+    }
+    100% {
+        opacity : 1;
+        background-color : #337DFF;
+    }
+`
+
+const twinkleText = keyframes `
+    0% {
+        opacity : 1;
+    }
+    20% {
+        opacity : .75;
+    }
+    40% {
+        opacity : .5;
+    }
+    60% {
+        opacity : .5;
+    }
+    80% {
+        opacity : .75;
+    }
+    100% {
+        opacity : 1;
+    }
+`;
 
 
 export const Container = styled.div `
 export const Container = styled.div `
     width : 100%;
     width : 100%;
@@ -73,10 +118,8 @@ export const RegisterButton = styled.button `
 
 
     font-size : 11px;
     font-size : 11px;
 
 
-    transition : .25s all;
-
     &:hover { 
     &:hover { 
-        opacity : .5;
+        animation : ${twinkleText} 2s infinite;
     }
     }
     
     
 `;
 `;
@@ -97,10 +140,10 @@ export const LoginButton = styled.button<{isLoginButton : boolean}> `
     border-radius : 5px;
     border-radius : 5px;
     padding : 10px 30px;
     padding : 10px 30px;
 
 
+    width : 80%;
+
     cursor : pointer;
     cursor : pointer;
     
     
-    transition : .25s all;
-
     color : #343434;
     color : #343434;
     font-weight : 600;
     font-weight : 600;
 
 
@@ -108,6 +151,7 @@ export const LoginButton = styled.button<{isLoginButton : boolean}> `
         background-color : #343434;
         background-color : #343434;
         color : #fff;
         color : #fff;
         border : 1.2px solid transparent;
         border : 1.2px solid transparent;
+        animation : ${twinkle} 1.5s infinite linear;
     }
     }
 
 
     margin : 0 15px;
     margin : 0 15px;

@@ -4,6 +4,8 @@ import { RouteComponentProps} from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { useRecoilValue } from 'recoil';
 import * as recoilUtil from '../../util/recoilUtil';
 import * as recoilUtil from '../../util/recoilUtil';
 
 
+
+import Header from '../../components/Header';
 import DoctorMenuContainer from './doctor';
 import DoctorMenuContainer from './doctor';
 import ManagerMenuContainer from './manager';
 import ManagerMenuContainer from './manager';
 
 
@@ -22,9 +24,15 @@ const MainContainer = (props : MainProps) => {
     }, []);
     }, []);
 
 
     return (
     return (
-        userTypeCd === 'DOCTOR' ?
-        <DoctorMenuContainer {...props}/> :
-        <ManagerMenuContainer {...props}/>
+        <>
+        <Header {...props}/>
+        {
+            userTypeCd === 'DOCTOR' ?
+            <DoctorMenuContainer {...props}/> :
+            userTypeCd === 'MANAGER' ?
+            <ManagerMenuContainer {...props}/> : null
+        }
+        </>
     );
     );
 };
 };
 
 

@@ -6,6 +6,8 @@ import DoctorMenuPresenter from './DoctorMenuPresenter';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import * as recoilUtil from '../../../util/recoilUtil';
 import * as recoilUtil from '../../../util/recoilUtil';
 
 
+import * as Alert from '../../../util/alertMessage';
+
 import { doctorApi, authApi } from '../../../api';
 import { doctorApi, authApi } from '../../../api';
 
 
 
 
@@ -36,13 +38,15 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
 
 
     const [searchPatientKeyword, setSearchPatientKeyword] = useState<string>('');
     const [searchPatientKeyword, setSearchPatientKeyword] = useState<string>('');
     const [filteringPatientList, setFilteringPatientList] = useState<any>([]);
     const [filteringPatientList, setFilteringPatientList] = useState<any>([]);
-
+    
     const [patientDetail, setPatientDetail] = useState<any>();
     const [patientDetail, setPatientDetail] = useState<any>();
 
 
     const [editModal, setEditModal] = useState<boolean>(false);
     const [editModal, setEditModal] = useState<boolean>(false);
+    const [editPatientInfo, setEditPatientInfo] = useState<string>(''); 
+
     const [newPatientRegisterModal, setNewPatientRegisterModal] = useState<boolean>(false);
     const [newPatientRegisterModal, setNewPatientRegisterModal] = useState<boolean>(false);
     const [newPatientSearchId, setNewPatientSearchId] = useState<string>('');
     const [newPatientSearchId, setNewPatientSearchId] = useState<string>('');
-
+    const [newPatientSearchResult, setNewPatientSearchResult] = useState<any | null>(null);
 
 
 
 
     const fetchData = async() => {
     const fetchData = async() => {
@@ -92,7 +96,8 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
         }
         }
     };
     };
 
 
-    const onInitialize = () => {
+    const onInitialize = async () => {
+        await fetchData();
         setInfo({
         setInfo({
             infoType : 'DOCTOR',
             infoType : 'DOCTOR',
             userNm : doctorInfo.doctorNm,
             userNm : doctorInfo.doctorNm,
@@ -103,9 +108,46 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
         });
         });
         setFilteringPatientList([]);
         setFilteringPatientList([]);
         setSearchPatientKeyword('');
         setSearchPatientKeyword('');
+        setEditModal(false);
+        setEditPatientInfo('');
+        setNewPatientRegisterModal(false);
+        setNewPatientSearchId('');
+        setNewPatientSearchResult(null);
         setPatientDetail(null);
         setPatientDetail(null);
     };
     };
 
 
+    const onEditPatientInfo = (e : React.ChangeEvent<HTMLTextAreaElement>) => {
+        setEditPatientInfo(e.target.value);
+    };
+
+    const onSubmitPatientInfo = () => {
+        if(editPatientInfo.length && patientDetail) {
+            const onSubmit = async () => {
+                try {
+                    const result = await doctorApi.writePatientInfo(token, {
+                        patientId : patientDetail.profile.userId,
+                        info : editPatientInfo,
+                    });
+                    if(result.statusText === 'OK') {
+                        Alert.onSuccess('환자의 특이사항을 업데이트했습니다.', () => onInitialize());
+                    } else {
+                        Alert.onError('특이사항을 기록하는데 실패했습니다.', () => null);
+                    }
+    
+                } catch(e) {
+                    Alert.onError(e.response.data.error, () => null);
+                }
+            };
+
+            Alert.onCheck('환자의 특이사항을 업데이트하시겠습니까?', onSubmit, () => null);
+
+        } else {
+            Alert.onError('환자의 특이사항을 기록하세요.', () => null);
+        }
+        
+
+    };
+
 
 
     const onSetNewPatientSearchId = (e : React.ChangeEvent<HTMLInputElement>) => {
     const onSetNewPatientSearchId = (e : React.ChangeEvent<HTMLInputElement>) => {
         setNewPatientSearchId(e.target.value);
         setNewPatientSearchId(e.target.value);
@@ -114,16 +156,51 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
     const onSearchNewPatientByEmail = async () => {
     const onSearchNewPatientByEmail = async () => {
         try {
         try {
             await doctorApi.searchPatientById(token, newPatientSearchId).then(res => {
             await doctorApi.searchPatientById(token, newPatientSearchId).then(res => {
-                console.log(res.data);
-            }).catch(err => console.log(err));
+                setNewPatientSearchResult(res.data);
+            }).catch(err => {
+                console.log(err);
+                Alert.onError('검색 결과가 없습니다.', () => null);
+                setNewPatientSearchResult(null);
+            });
         } catch(e) {
         } catch(e) {
-            console.log(e);
+            Alert.onError(e.response.data.error, () => null);
+        }
+    };
+
+    const onRegisterNewPatient = () => {
+        if(newPatientSearchResult) {
+            const { patientId, patientNm } = newPatientSearchResult;
+            const onRegisterReq = async () => {
+                try {
+                    const result = await doctorApi.registerPatient(token, {
+                        patientId,
+                    });
+                    if(result.statusText === 'OK') {
+                        Alert.onSuccess('환자에게 담당의 등록 요청을 전송했습니다.', () => null);
+                    } else {
+                        Alert.onError('환자에게 담당의 등록 요청을 실패했습니다.', () => null);
+                    }
+                } catch(e) {
+                    Alert.onError(e.response.data.error, () => null);
+                }
+            };
+
+            Alert.onCheck(`${patientNm} 환자에게 담당의 등록 요청을 전송하시겠습니까?`, onRegisterReq, () => null);
+        } else {
+            Alert.onError('환자를 먼저 검색해주세요.', () => null);
         }
         }
     };
     };
 
 
+    const onCloseModal = async () => {
+        setNewPatientRegisterModal(false);
+        setNewPatientSearchId('');
+        setNewPatientSearchResult(null);
+        setEditModal(false);
+        setEditPatientInfo('');
+    };
 
 
     const onGoBottleDetail = (bottleId : number) => {
     const onGoBottleDetail = (bottleId : number) => {
-        console.log(bottleId);
+        props.history.push(`/bottle/${bottleId}`);
     };
     };
 
 
 
 
@@ -158,12 +235,19 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
 
 
             editModal = {editModal}
             editModal = {editModal}
             setEditModal = {setEditModal}
             setEditModal = {setEditModal}
+            editPatientInfo = {editPatientInfo}
+            onEditPatientInfo = {onEditPatientInfo}
+            onSubmitPatientInfo = {onSubmitPatientInfo}
 
 
             newPatientRegisterModal = {newPatientRegisterModal}
             newPatientRegisterModal = {newPatientRegisterModal}
             setNewPatientRegisterModal = {setNewPatientRegisterModal}
             setNewPatientRegisterModal = {setNewPatientRegisterModal}
             newPatientSearchId = {newPatientSearchId}
             newPatientSearchId = {newPatientSearchId}
             onSetNewPatientSearchId = {onSetNewPatientSearchId}
             onSetNewPatientSearchId = {onSetNewPatientSearchId}
             onSearchNewPatientByEmail = {onSearchNewPatientByEmail}
             onSearchNewPatientByEmail = {onSearchNewPatientByEmail}
+            onRegisterNewPatient = {onRegisterNewPatient}
+            onCloseModal = {onCloseModal}
+
+            newPatientSearchResult = {newPatientSearchResult}
         />
         />
     );
     );
 };
 };

@@ -5,6 +5,8 @@ import * as styled from './DoctorMenuStyled';
 const medicineImg = '/static/img/medicine.png';
 const medicineImg = '/static/img/medicine.png';
 const lensImg = '/static/img/lens.png';
 const lensImg = '/static/img/lens.png';
 const closeButton = '/static/img/close.png';
 const closeButton = '/static/img/close.png';
+const edit = '/static/img/edit.png';
+const refreshing = '/static/img/refreshing.png';
 
 
 
 
 interface DoctorMenuProps {
 interface DoctorMenuProps {
@@ -27,23 +29,30 @@ interface DoctorMenuProps {
 
 
     editModal : boolean;
     editModal : boolean;
     setEditModal : any;
     setEditModal : any;
+    editPatientInfo : string;
+    onEditPatientInfo : React.ChangeEventHandler<HTMLTextAreaElement>;
+    onSubmitPatientInfo : () => void;
 
 
     newPatientRegisterModal : boolean;
     newPatientRegisterModal : boolean;
     setNewPatientRegisterModal : any;
     setNewPatientRegisterModal : any;
     newPatientSearchId: string;
     newPatientSearchId: string;
     onSetNewPatientSearchId : React.ChangeEventHandler<HTMLInputElement>;
     onSetNewPatientSearchId : React.ChangeEventHandler<HTMLInputElement>;
     onSearchNewPatientByEmail : () => void;
     onSearchNewPatientByEmail : () => void;
+    onRegisterNewPatient : () => void;
+    onCloseModal : () => void;
+
+    newPatientSearchResult : any;
 }
 }
 
 
 const DoctorMenuPresenter = (props : DoctorMenuProps) => {
 const DoctorMenuPresenter = (props : DoctorMenuProps) => {
     return (
     return (
         <styled.Container>
         <styled.Container>
             {
             {
-                props.editModal ? 
+                props.newPatientRegisterModal ? 
                 <styled.ModalContainer>
                 <styled.ModalContainer>
                     <styled.ModalClsButtonWrapper>
                     <styled.ModalClsButtonWrapper>
                         <styled.ModalClsButton
                         <styled.ModalClsButton
-                            onClick = {() => props.setEditModal(false)}
+                            onClick = {() => props.setNewPatientRegisterModal(false)}
                         >
                         >
                             <styled.ModalClsButtonImg src = {closeButton}/>
                             <styled.ModalClsButtonImg src = {closeButton}/>
                             <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
                             <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
@@ -65,13 +74,28 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
                                 </styled.NewPatientSearchButton>
                                 </styled.NewPatientSearchButton>
                             </styled.NewPatientSearchWrapper>
                             </styled.NewPatientSearchWrapper>
                             <styled.NewPatientSearchResultWrapper>
                             <styled.NewPatientSearchResultWrapper>
-                                🤔검색 결과가 없습니다.
+                                {
+                                    props.newPatientSearchResult ?
+                                    <styled.NewPatientSearchResult>
+                                        <styled.NewPatientSearchResultInfoWrapper>
+                                            <styled.NewPatientSearchResultInfo>이름 : </styled.NewPatientSearchResultInfo>
+                                            <styled.NewPatientSearchResultInfoText>
+                                                {props.newPatientSearchResult.patientNm}
+                                            </styled.NewPatientSearchResultInfoText>
+                                        </styled.NewPatientSearchResultInfoWrapper>
+                                    </styled.NewPatientSearchResult> :
+                                    '🤔검색 결과가 없습니다.'
+                                }
                             </styled.NewPatientSearchResultWrapper>
                             </styled.NewPatientSearchResultWrapper>
                             <styled.NewPatientRegisterButtonWrapper>
                             <styled.NewPatientRegisterButtonWrapper>
-                                <styled.NewPatientRegisterButton>
+                                <styled.NewPatientRegisterButton
+                                    onClick = {props.onRegisterNewPatient}
+                                >
                                     확인
                                     확인
                                 </styled.NewPatientRegisterButton>
                                 </styled.NewPatientRegisterButton>
-                                <styled.NewPatientRegisterButton>
+                                <styled.NewPatientRegisterButton
+                                    onClick = {props.onCloseModal}
+                                >
                                     취소
                                     취소
                                 </styled.NewPatientRegisterButton>
                                 </styled.NewPatientRegisterButton>
                             </styled.NewPatientRegisterButtonWrapper>
                             </styled.NewPatientRegisterButtonWrapper>
@@ -80,6 +104,60 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
                     <styled.ModalClsButtonWrapper/>
                     <styled.ModalClsButtonWrapper/>
                 </styled.ModalContainer> : null
                 </styled.ModalContainer> : null
             }
             }
+            {
+                props.editModal ?
+                <styled.ModalContainer>
+                    <styled.ModalClsButtonWrapper>
+                        <styled.ModalClsButton
+                            onClick = {() => props.setEditModal(false)}
+                        >
+                            <styled.ModalClsButtonImg src = {closeButton}/>
+                            <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
+                        </styled.ModalClsButton>
+                    </styled.ModalClsButtonWrapper>
+                    <styled.ModalContentWrapper>
+                        <styled.ModalContent>
+                            <styled.PatientInfoViewContainer>
+                                <styled.PatientInfoPatientNmWrapper>
+                                    <styled.PatientInfoPatientNmInfo>이름 : </styled.PatientInfoPatientNmInfo>
+                                    <styled.PatientInfoPatientNm>{props.info.userNm}</styled.PatientInfoPatientNm>
+                                </styled.PatientInfoPatientNmWrapper>
+                                <styled.PatientInfoView>
+                                
+                                {
+                                    props.info.patientInfo.split('\n\n').map((patientInfoText : string) => {
+                                        return (
+                                            <div key = {patientInfoText}>
+                                            {patientInfoText}<br/><br/>
+                                            </div>
+                                        )
+                                    })
+                                }
+                                </styled.PatientInfoView>
+                            </styled.PatientInfoViewContainer>
+                            <styled.PatientInfoEditWrapper>
+                                <styled.PatientInfoEditInput
+                                    value = {props.editPatientInfo}
+                                    onChange = {props.onEditPatientInfo}
+                                />
+                            </styled.PatientInfoEditWrapper>
+                            <styled.PatientInfoEditButtonWrapper>
+                                <styled.PatientInfoEditButton
+                                    onClick = {props.onSubmitPatientInfo}
+                                >
+                                    확인
+                                </styled.PatientInfoEditButton>
+                                <styled.PatientInfoEditButton
+                                    onClick = {props.onCloseModal}
+                                >
+                                    취소
+                                </styled.PatientInfoEditButton>
+                            </styled.PatientInfoEditButtonWrapper>
+                        </styled.ModalContent>
+                    </styled.ModalContentWrapper>
+                    <styled.ModalClsButtonWrapper/>
+                </styled.ModalContainer> : null
+            }
             <styled.InfoAndSearchWrapper>
             <styled.InfoAndSearchWrapper>
                 <styled.InfoWrapper>
                 <styled.InfoWrapper>
                     {
                     {
@@ -99,8 +177,10 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
                             </styled.InfoEachWrapper>
                             </styled.InfoEachWrapper>
                         </styled.InfoSquare> :
                         </styled.InfoSquare> :
                         <styled.InfoSquare>
                         <styled.InfoSquare>
-                            <styled.EditPatientInfoButton>
-                                <styled.EditPatientInfoButtonImg />
+                            <styled.EditPatientInfoButton
+                                onClick = {() => props.setEditModal(true)}
+                            >
+                                <styled.EditPatientInfoButtonImg src = {edit}/>
                                 <styled.EditPatientInfoButtonText>수정</styled.EditPatientInfoButtonText>
                                 <styled.EditPatientInfoButtonText>수정</styled.EditPatientInfoButtonText>
                             </styled.EditPatientInfoButton>
                             </styled.EditPatientInfoButton>
                             <styled.InfoEachWrapper>
                             <styled.InfoEachWrapper>
@@ -134,7 +214,7 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
                         </styled.InfoSquare>
                         </styled.InfoSquare>
                     }
                     }
                     <styled.NewPatientButton 
                     <styled.NewPatientButton 
-                        onClick = {() => props.setEditModal(true)}
+                        onClick = {() => props.setNewPatientRegisterModal(true)}
                     >
                     >
                         새 환자 등록
                         새 환자 등록
                     </styled.NewPatientButton>
                     </styled.NewPatientButton>
@@ -147,12 +227,12 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
                             onChange = {props.onSetKeyword}
                             onChange = {props.onSetKeyword}
                         />
                         />
                         <styled.SearchButton>
                         <styled.SearchButton>
-                            검색
+                            <styled.SearchButtonImg src = {lensImg}/>
                         </styled.SearchButton>
                         </styled.SearchButton>
                         <styled.SearchButton
                         <styled.SearchButton
                             onClick = {props.onInitialize}
                             onClick = {props.onInitialize}
                         >
                         >
-                            초기화
+                            <styled.SearchButtonImg src = {refreshing}/>
                         </styled.SearchButton>
                         </styled.SearchButton>
                     </styled.SearchBarWrapper>
                     </styled.SearchBarWrapper>
                     <styled.SearchResultWrapper>
                     <styled.SearchResultWrapper>

-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+
+const ModalOn = keyframes `
+    0% {
+        background-color : rgba(52, 52, 52, .0);
+    }
+    20% {
+        background-color : rgba(52, 52, 52, .2);
+    }
+    40% {
+        background-color : rgba(52, 52, 52, .4);
+    }
+    60% {
+        background-color : rgba(52, 52, 52, .5);
+    }
+    80% {
+        background-color : rgba(52, 52, 52, .6);
+    }
+    100% {
+        background-color : rgba(52, 52, 52, .7);
+    }
+
+`;
+
 
 
 export const Container = styled.div `
 export const Container = styled.div `
     height : 100vh;
     height : 100vh;
@@ -17,6 +41,8 @@ export const ModalContainer = styled.div `
     display : flex;
     display : flex;
     flex-direction : column;
     flex-direction : column;
 
 
+    animation : ${ModalOn} .5s;
+
     background-color : rgba(52, 52, 52, .7);
     background-color : rgba(52, 52, 52, .7);
 
 
 `;
 `;
@@ -55,8 +81,8 @@ export const ModalClsButton = styled.button `
 `;
 `;
 
 
 export const ModalClsButtonImg = styled.img `
 export const ModalClsButtonImg = styled.img `
-    height : 25px;
-    width : 25px;
+    height : 20px;
+    width : 20px;
 
 
     margin : 0 10px 0 0;
     margin : 0 10px 0 0;
 `;
 `;
@@ -159,6 +185,35 @@ export const NewPatientSearchResultWrapper = styled.div `
 
 
     font-size : 14px;
     font-size : 14px;
     color : #a0a0a0;
     color : #a0a0a0;
+    font-weight : 600;
+`;
+
+export const NewPatientSearchResult = styled.div `
+    border : none;
+
+    display : flex;
+    flex-direction : row;
+    justify-content : center;
+    align-items : center;
+`;
+
+export const NewPatientSearchResultInfoWrapper = styled.div `
+    display : flex;
+`;
+
+export const NewPatientSearchResultInfo = styled.div `
+    font-size : 13px;
+    font-weight : 600;
+    color : #a0a0a0;
+
+    margin : 0 5px 0 0;
+`;
+
+export const NewPatientSearchResultInfoText = styled.div `
+    font-size : 14px;
+    color : #343434;
+    font-weight : 600;
+    letter-spacing : 1px;
 `;
 `;
 
 
 export const NewPatientRegisterButtonWrapper = styled.div `
 export const NewPatientRegisterButtonWrapper = styled.div `
@@ -195,6 +250,130 @@ export const NewPatientRegisterButton = styled.button `
 `;
 `;
 
 
 
 
+export const PatientInfoViewContainer = styled.div `
+    overflow : scroll;
+    flex : 6;
+
+    border : none;
+    width : 100%;
+
+    display : flex;
+    flex-direction : column;
+
+    &::-webkit-scrollbar {
+        width : 3px;
+        background-color : transparent;
+        height : 1px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color : #337DFF;
+    }
+`;
+
+export const PatientInfoPatientNmWrapper = styled.div `
+    display : flex;
+    flex-direction : row;
+
+    justify-content : center;
+    align-items : center;
+    
+    width : 100%;
+
+    padding : 15px 0;
+
+    border : none;
+    border-bottom : 1px solid #ddd;
+
+`;
+
+export const PatientInfoPatientNmInfo = styled.div `
+    font-size : 15px;
+    font-weight : 500;
+    margin : 0 5px;
+`;
+
+export const PatientInfoPatientNm = styled.div `
+    font-size : 20px;
+    font-weight : 700;
+    margin : 0 5px;
+    letter-spacing : 1px;
+
+    color : #337DFF;
+`;
+
+export const PatientInfoView = styled.div `
+    padding : 15px 15px;
+
+    font-size : 15px;
+    font-weight : 500;
+    letter-spacing : 1px;
+
+`;
+
+export const PatientInfoEditWrapper = styled.div `
+    flex : 3;
+
+    border : none;
+    width : 100%;
+
+    display : flex;
+    justify-content : center;
+    align-items : center;
+
+`;
+
+export const PatientInfoEditInput = styled.textarea `
+    width : 100%;
+
+    resize : none;
+
+    padding : 15px;
+    margin : 15px;
+    border : 1px solid #ddd;
+`;
+
+export const PatientInfoEditButtonWrapper = styled.div `
+    flex : 2;
+
+    border : none;
+    width : 100%;
+
+    display : flex;
+    flex-direction : row;
+
+    justify-content : center;
+    align-items : center;
+
+    gap : 8%;
+
+`;
+
+export const PatientInfoEditButton = styled.button `
+    background-color : #fff;
+    color : #337DFF;
+    border : 1px solid #337DFF;
+    border-radius : 3px;
+
+    cursor : pointer;
+
+    transition : .25s all;
+
+    font-size : 16px;
+    font-weight : 600;
+
+    padding : 10px 30px;
+    margin : 0 10px;
+
+    &:hover {
+        background-color : #337DFF;
+        color : #fff;
+        border : 1px solid transparent;
+    }
+`;
+
+
+
 export const InfoAndSearchWrapper = styled.div `
 export const InfoAndSearchWrapper = styled.div `
     flex : 3;
     flex : 3;
     display : flex;
     display : flex;
@@ -369,8 +548,10 @@ export const SearchBar = styled.input `
 
 
 export const SearchButton = styled.button `
 export const SearchButton = styled.button `
     border : 1px solid #ddd;
     border : 1px solid #ddd;
+    border-radius : 3px;
 
 
     background-color : transparent;
     background-color : transparent;
+    opacity : .7;
 
 
     height : 50px;
     height : 50px;
     width : 50px;
     width : 50px;
@@ -379,12 +560,20 @@ export const SearchButton = styled.button `
 
 
     cursor : pointer;
     cursor : pointer;
 
 
+    display : flex;
+    justify-content : center;
+    align-items : center;
+
     &:hover {
     &:hover {
-        color : #fff;
-        background-color : #343434;
+        opacity : 1;
     }
     }
 `;
 `;
 
 
+export const SearchButtonImg = styled.img `
+    height : 20px;
+    width : 20px;
+`;
+
 export const SearchResultWrapper = styled.div `
 export const SearchResultWrapper = styled.div `
     flex : 5;
     flex : 5;
     border : 1px solid #ddd;
     border : 1px solid #ddd;

 import React, { useState, useEffect } from "react";
 import React, { useState, useEffect } from "react";
 import { RouteComponentProps } from 'react-router-dom';
 import { RouteComponentProps } from 'react-router-dom';
 
 
-import { useRecoilValue } from "recoil";
+import { useRecoilValue, useRecoilState } from "recoil";
 import * as recoilUtil from '../../util/recoilUtil';
 import * as recoilUtil from '../../util/recoilUtil';
 
 
+import Header from '../../components/Header';
 import RegisterPresenter from "./RegisterPresenter";
 import RegisterPresenter from "./RegisterPresenter";
 
 
-type RegisterProps = RouteComponentProps;
+import { authApi } from '../../api';
+
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface RegisterProps extends RouteComponentProps {}
 
 
 const RegisterContainer = (props : RegisterProps) => {
 const RegisterContainer = (props : RegisterProps) => {
+
+    const [token, setToken] = useRecoilState(recoilUtil.token);
+
+    const fetchData = async() => {
+        if(token && token.length) {
+            const result = await authApi.verifyToken(token);
+            if (result.statusText === 'OK') {
+                props.history.push('/');
+            }
+        } 
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+
     return (
     return (
+        <>
+        <Header {...props}/>
         <RegisterPresenter
         <RegisterPresenter
 
 
         />
         />
+        </>
     )
     )
 };
 };
 
 

@@ -9,7 +9,7 @@ const RegisterPresenter = () => {
             <styled.RegisterWrapper>
             <styled.RegisterWrapper>
                 <styled.RegisterTitle>회원 가입</styled.RegisterTitle>
                 <styled.RegisterTitle>회원 가입</styled.RegisterTitle>
                 <styled.RegisterInfo>* 의사만 회원가입이 가능합니다.</styled.RegisterInfo>
                 <styled.RegisterInfo>* 의사만 회원가입이 가능합니다.</styled.RegisterInfo>
-                <styled.RegisterInfo style = {{fontSize : 10,}}>의사 인증을 위한 정보가 요구됩니다.</styled.RegisterInfo>
+                <styled.RegisterInfo style = {{fontSize : 10,}}>의사 인증을 위한 정보가 요구됩니다. 해당 정보는 인증을 위한 용도로만 사용됩니다.</styled.RegisterInfo>
                 <styled.RegisterInputWrapper>
                 <styled.RegisterInputWrapper>
                     <styled.RegisterInputText>이메일</styled.RegisterInputText>
                     <styled.RegisterInputText>이메일</styled.RegisterInputText>
                     <styled.RegisterInput 
                     <styled.RegisterInput 

@@ -35,7 +35,7 @@ export const RegisterTitle = styled.div `
 
 
 export const RegisterInfo = styled.div `
 export const RegisterInfo = styled.div `
     width : 90%;
     width : 90%;
-    font-size : 12px;
+    font-size : 13px;
     color : #a0a0a0;
     color : #a0a0a0;
 `;
 `;