feat. 차트 에러, 전체 복용기록조회 등

@@ -11,7 +11,7 @@ export const make = (chartData : any[], numberOfRow : number) => {
 
     chartData.forEach((data : any) => {
         const key : string = moment(data.takeDate).format('MM/DD');
-        result[key] = result[key] + 1;
+        !isNaN(result[key]) ? result[key] = result[key] + 1 : null;
     });
 
     const categories : any = [];
@@ -28,5 +28,5 @@ export const make = (chartData : any[], numberOfRow : number) => {
     return {
         categories,
         data,
-    }
+    };
 };
\ No newline at end of file

@@ -35,6 +35,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
         takeMedicineHist : [],
     });
 
+    //차트에 표시되는 행의 개수
     const numberOfChartItem = 7;
     const [chartOption, setChartOption] = useState<any>({
         chart : {
@@ -56,14 +57,17 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
             data : [],
         }],
     });
+    const [takeMedicineHist, setTakeMedicineHist] = useState<any[]>([]);
 
     const [feedback, setFeedback] = useState<string>('');
     const [fdbType, setFdbType] = useState<string>('RECOMMEND');
 
     const [medicineInfoModal, setMedicineInfoModal] = useState<boolean>(false);
+    const [modalType, setModalType] = useState<string>('hist'); //hist , info
 
 
     const fetchData = async () => {
+        setModalType('hist');
         setFeedback('');
         setFdbType('RECOMMEND');
         setMedicineInfoModal(false);
@@ -71,6 +75,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
         try {
             const result = await doctorApi.getPatientBottleDetail(token, bottleId);
             if (result.statusText === 'OK') {
+                setTakeMedicineHist(result.data.takeMedicineHist);
                 const { categories, data } = makeChart.make(result.data.takeMedicineHist, numberOfChartItem);
                 setBottleInfo({
                     ...result.data,
@@ -134,6 +139,14 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
 
     };
 
+    const onViewTakeHist = () => {
+        if(modalType === 'info')    setModalType('hist');
+    };
+
+    const onViewMedicineInfo = () => {
+        if(modalType === 'hist')    setModalType('info');
+    };
+
  
     useEffect(() => {
         if(userTypeCd !== 'DOCTOR') {
@@ -148,8 +161,12 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
         <BottleInfoPresenter
             bottleInfo = {bottleInfo}
             chartOption = {chartOption}
+            takeMedicineHist = {takeMedicineHist}
 
             medicineInfoModal = {medicineInfoModal}
+            modalType = {modalType}
+            onViewTakeHist = {onViewTakeHist}
+            onViewMedicineInfo = {onViewMedicineInfo}
             setMedicineInfoModal = {setMedicineInfoModal}
 
             feedback = {feedback}
@@ -157,6 +174,8 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
             fdbType = {fdbType}
             setFdbType = {setFdbType}
             onSubmitFeedback = {onSubmitFeedback}
+
+
         />
         </>
     );

@@ -16,8 +16,12 @@ interface BottleInfoProps {
         takeMedicineHist : any[];
     };
     chartOption : any;
+    takeMedicineHist : any[];
 
     medicineInfoModal : boolean;
+    modalType : string;
+    onViewTakeHist : () => void;
+    onViewMedicineInfo : () => void;
     setMedicineInfoModal : (arg0 : boolean) => void;
 
     feedback : string;
@@ -34,6 +38,59 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
                 props.medicineInfoModal ?
                 <Modal onModalClose = {() => props.setMedicineInfoModal(false)}>
                 <>
+                    <styled.ModalTypeButtonWrapper>
+                        <styled.ModalTypeButton
+                            isSelect = {props.modalType === 'hist'}
+                            onClick = {props.onViewTakeHist}
+                        >
+                            복용 기록
+                        </styled.ModalTypeButton>
+                        <styled.ModalTypeButton
+                            isSelect = {props.modalType === 'info'}
+                            onClick = {props.onViewMedicineInfo}
+                        >
+                            약 정보
+                        </styled.ModalTypeButton>
+                    </styled.ModalTypeButtonWrapper>
+                    {
+                        props.modalType === 'hist' ?
+                        <>
+                        <styled.MedicineNameWrapper>
+                            <styled.MedicineName>{`복용 기록`}</styled.MedicineName>
+                            <styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{`전체 : ${props.takeMedicineHist.length}건`}</styled.MedicineName>
+                        </styled.MedicineNameWrapper>
+                        <styled.MedicineInfoWrapper>
+                        {
+                            props.takeMedicineHist.map((hist : any) => {
+                                return (
+                                    <styled.HistWrapper
+                                        key = {hist._id}
+                                    >
+                                        <styled.HistDtmWrapper>
+                                            <styled.HistInfoEachWrapper style = {{fontSize : 11}}>복용 날짜</styled.HistInfoEachWrapper>
+                                            <styled.HistDtm>{hist.takeDate}</styled.HistDtm>
+                                        </styled.HistDtmWrapper>
+                                        <styled.HistInfoWrapper>
+                                            <styled.HistInfoEachWrapper>
+                                                약병 내 온도
+                                                <styled.HistInfoEach>{hist.temperature}℃</styled.HistInfoEach>
+                                            </styled.HistInfoEachWrapper>
+                                            <styled.HistInfoEachWrapper>
+                                                약병 내 습도
+                                                <styled.HistInfoEach>{hist.humidity}%</styled.HistInfoEach>
+                                            </styled.HistInfoEachWrapper>
+                                            <styled.HistInfoEachWrapper>
+                                                약병 내 잔량
+                                                <styled.HistInfoEach>{hist.balance}%</styled.HistInfoEach>
+                                            </styled.HistInfoEachWrapper>
+                                        </styled.HistInfoWrapper>
+                                    </styled.HistWrapper>
+                                )
+                            })
+                        }
+                        </styled.MedicineInfoWrapper>
+                        </> :
+                        <>
                         <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>
@@ -57,6 +114,8 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
                             </styled.MedicineEachInfoWrapper>
                         </styled.MedicineInfoWrapper>
                         </>
+                    }
+                </>
                 </Modal> : null
             }
             <styled.ChartAndFeedbackWrapper>

@@ -9,6 +9,108 @@ export const Container = styled.div `
     justify-content : center;
 `;
 
+export const ModalTypeButtonWrapper = styled.div `
+    border : none;
+    display : flex;
+    flex-direction : row;
+
+    width : 100%;
+
+    justify-content : center;
+    align-items : center;
+
+    background-color : transparent;
+    
+    gap : 5%;
+
+    padding : 3% 0 0 0;
+`;
+
+export const ModalTypeButton = styled.button<{isSelect : boolean}> `
+    border : 1px solid #337DFF;
+    border-radius : 3px;
+    color : ${props => props.isSelect ? '#fff' : '#337DFF'};
+    background-color : ${props => props.isSelect ? '#337DFF' : '#fff'};
+
+    padding : 1% 3%;
+
+    cursor : pointer;
+
+    font-size : 16px;
+    font-weight : ${props => props.isSelect ? '600' : '500'};
+
+    transition : .25s all;
+
+    &:hover {
+        opacity : .5;
+    }
+
+`;
+
+export const HistWrapper = styled.div `
+    display : flex;
+    flex-direction : column;
+
+    height : 65px;
+    width : 100%;
+
+    border : none;
+    border-bottom : 1px solid #ddd;
+`;
+
+export const HistDtmWrapper = styled.div `
+    flex : 2;
+    padding : 0 3%;
+
+    border : none;
+
+    display : flex;
+    flex-direction : column;
+
+    justify-content : center;
+
+`;
+
+export const HistDtm = styled.div `
+    font-size : 18px;
+    color : #000;
+`;
+
+export const HistInfoWrapper = styled.div `
+    flex : 1;
+    padding : 0 3%;
+
+    border : none;
+
+    display : flex;
+    flex-direction : row;
+    align-items : flex-start;
+    
+`;
+
+export const HistInfoEachWrapper = styled.div `
+    flex : 1;
+    border : none;
+
+    display : flex;
+    flex-direction : row;
+    align-items : center;
+
+    gap : 5%;
+
+    font-size : 14px;
+    font-weight : 500;
+
+    color : #a0a0a0;
+`;
+
+export const HistInfoEach = styled.div `
+    font-size : 15px;
+    font-weight : 600;
+
+    color : #337DFF;
+`;
+
 export const MedicineNameWrapper = styled.div `
     border : none;
     border-bottom : 1px solid #ddd;
@@ -59,6 +161,7 @@ export const MedicineEachInfoWrapper = styled.div `
     display : flex;
     flex-direction : column;
 
+
     width : 80%;
     padding : 20px 10%;
     border : none;