style. Footer Update

@@ -13,6 +13,44 @@ export const Container = styled.div `
     flex-direction : column;
     flex-direction : column;
 `;
 `;
 
 
+export const TermsWrapper = styled.div `
+    width : 100%:
+
+    display : flex;
+    flex-direction : row;
+
+    padding : 0 0 20px 0;
+    margin : 0 0 10px 0;
+
+    background-color : transparent;
+    border : none;
+
+    border-bottom : 1px solid #ddd;
+`;
+
+export const EachTerms = styled.button `
+    color : #000;
+    background-color : transparent;
+
+    margin : 0 10px 0 0;
+    padding : 0 0 5px 0;
+
+    cursor : pointer;
+
+    font-size : 13px;
+
+    font-weight : 400;
+    border : none;
+    border-bottom : 1px solid;
+
+    transition : .25s all;
+
+    &:hover {
+        color : #337DFF;
+        opacity : .5;
+    }
+`;
+
 export const InfoWrapper = styled.div `
 export const InfoWrapper = styled.div `
     display : flex;
     display : flex;
     flex-direction : row;
     flex-direction : row;

 import React from 'react';
 import React from 'react';
+import { RouteComponentProps } from 'react-router';
+
+import * as Alert from '../../util/alertMessage';
 import * as styled from './FooterStyled';
 import * as styled from './FooterStyled';
 
 
+
 const ApiLicense = '/static/img/apiLicense.png';
 const ApiLicense = '/static/img/apiLicense.png';
 
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface FooterProps extends RouteComponentProps {}
+
+
+const Footer = (props : FooterProps) => {
+
+
+    const onGoTerm = () => {
+        Alert.onWarning('준비중입니다.', () => null);
+    };
+
+    const onGoPrivateLicense = () => {
+        Alert.onWarning('준비중입니다.', () => null);
+    };
+
+    const onGoServiceCenter = () => {
+        Alert.onWarning('준비중입니다.', () => null);
+    };
 
 
-const Footer = () => {
     return (
     return (
         <styled.Container>
         <styled.Container>
+            <styled.TermsWrapper>
+                <styled.EachTerms
+                    onClick = {onGoTerm}
+                >
+                    이용약관
+                </styled.EachTerms>
+                <styled.EachTerms
+                    onClick = {onGoPrivateLicense}
+                >
+                    개인정보처리방침
+                </styled.EachTerms>
+                <styled.EachTerms
+                    onClick = {onGoServiceCenter}
+                >
+                    고객센터
+                </styled.EachTerms>
+            </styled.TermsWrapper>
             <styled.InfoWrapper>
             <styled.InfoWrapper>
                 <styled.LicenseWrapper>
                 <styled.LicenseWrapper>
                     <styled.LicenseExplain>저작권</styled.LicenseExplain>
                     <styled.LicenseExplain>저작권</styled.LicenseExplain>

@@ -181,7 +181,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
             setFdbType = {setFdbType}
             setFdbType = {setFdbType}
             onSubmitFeedback = {onSubmitFeedback}
             onSubmitFeedback = {onSubmitFeedback}
         />
         />
-        <Footer/>
+        <Footer {...props}/>
         </>
         </>
     );
     );
 };
 };

@@ -33,7 +33,7 @@ const MainContainer = (props : MainProps) => {
             userTypeCd === 'MANAGER' ?
             userTypeCd === 'MANAGER' ?
             <ManagerMenuContainer {...props}/> : null
             <ManagerMenuContainer {...props}/> : null
         }
         }
-        <Footer/>
+        <Footer {...props}/>
         </>
         </>
     );
     );
 };
 };