박권수

style. Footer Update

......@@ -13,6 +13,44 @@ export const Container = styled.div `
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 `
display : flex;
flex-direction : row;
......
import React from 'react';
import { RouteComponentProps } from 'react-router';
import * as Alert from '../../util/alertMessage';
import * as styled from './FooterStyled';
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 (
<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.LicenseWrapper>
<styled.LicenseExplain>저작권</styled.LicenseExplain>
......
......@@ -181,7 +181,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
setFdbType = {setFdbType}
onSubmitFeedback = {onSubmitFeedback}
/>
<Footer/>
<Footer {...props}/>
</>
);
};
......
......@@ -33,7 +33,7 @@ const MainContainer = (props : MainProps) => {
userTypeCd === 'MANAGER' ?
<ManagerMenuContainer {...props}/> : null
}
<Footer/>
<Footer {...props}/>
</>
);
};
......