feat. Bottle View Component Star

t

@@ -11,6 +11,8 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "axios": "^0.21.1",
+    "highcharts": "^9.2.0",
+    "highcharts-react-official": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

@@ -6,6 +6,7 @@ import Header from '../components/Header';
 import { LoginContainer } from "./login";
 import { RegisterContainer } from './register';
 import { MainContainer } from "./main";
+import { BottleInfoContainer } from "./bottleInfo";
 
 
 const Router = () => {
@@ -17,6 +18,7 @@ const Router = () => {
                 <Route exact path = '/' component = {MainContainer}/>
                 <Route exact path = '/login' component = {LoginContainer}/>
                 <Route exact path = '/register' component = {RegisterContainer}/>
+                <Route exact path = '/bottle' component = {BottleInfoContainer}/>
             </Switch>
         </BrowserRouter>
     )

+import React, { useState, useEffect } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import * as recoilUtil from '../../util/recoilUtil';
+
+import HighCharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+
+import BottleInfoPresenter from './BottleInfoPresenter';
+
+import { doctorApi } from '../../api';
+
+
+type BottleInfoProps = RouteComponentProps
+
+const BottleInfoContainer = (props : BottleInfoProps) => {
+
+    const token = useRecoilValue(recoilUtil.token);
+    const userTypeCd = useRecoilValue(recoilUtil.userTypeCd);
+
+
+    useEffect(() => {
+        if(userTypeCd !== 'DOCTOR') {
+            props.history.push('/');
+        }
+    }, [userTypeCd]);
+
+    return (
+        <BottleInfoPresenter
+
+        />
+    );
+};
+
+export default BottleInfoContainer;
\ No newline at end of file

+import React from 'react';
+
+import * as styled from './BottleInfoStyled';
+
+
+const BottleInfoPresenter = () => {
+    return (
+        <styled.Container>
+
+        </styled.Container>
+    );
+};
+
+export default BottleInfoPresenter;
\ No newline at end of file

+import styled from 'styled-components';
+
+export const Container = styled.div `
+
+`;
\ No newline at end of file

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