Skip to content

Commit

Permalink
<docs>: 주석 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@StopSoo
StopSoo committed Dec 8, 2023
1 parent ea93923 commit 26237dd
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 77 deletions.
131 changes: 55 additions & 76 deletions src/component/login/LoginTemplate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,52 +6,52 @@ import googleLogo from '../resource/logo_google.png';

import WhiteBox from './WhiteBox'

function LoginTemplate () {
const login = (socialtype) => {
try {
window.location.replace(
`${process.env.REACT_APP_BE_HOST}/api/v1/auth/login/oauth-types/${socialtype}`
);
} catch (error) {
console.error("유효하지 않은 URL입니다!", error);
}
};
function LoginTemplate() {
const login = (socialtype) => {
try {
window.location.replace(
`${process.env.REACT_APP_BE_HOST}/api/v1/auth/login/oauth-types/${socialtype}`
);
} catch (error) {
console.error("유효하지 않은 URL입니다!", error);
}
};

return (
//align-items: center -> 적용이 안되는 문제로 우선 삭제
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>
<WhiteBox >
<h1 className="title">로그인하기</h1>
<h3>소셜 로그인으로 진행하세요</h3>
<HorizontalLine position="top"/>
<ButtonContainer >
<SocialLoginButton socialtype="kakao" onClick={() => login('kakao')}>
<SocialButtonIcon src={kakaoLogo} alt="카카오 로고" className="social-icon"/>
카카오 로그인
</SocialLoginButton>
<SocialLoginButton socialtype="naver" onClick={() => login('naver')}>
<SocialButtonIcon src={naverLogo} alt="네이버 로고" className="social-icon"/>
네이버 로그인
</SocialLoginButton>
<SocialLoginButton socialtype="google" onClick={() => login('google')}>
<SocialButtonIcon src={googleLogo} alt="구글 로고" className="social-icon"/>
&nbsp; 구글 로그인
</SocialLoginButton>
</ButtonContainer >
<HorizontalLine position="top"/>
{/* <HorizontalLine position="bottom"/>
return (
//align-items: center -> 적용이 안되는 문제로 우선 삭제
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
<WhiteBox >
<h1 className="title">로그인하기</h1>
<h3>소셜 로그인으로 진행하세요</h3>
<HorizontalLine position="top" />
<ButtonContainer >
<SocialLoginButton socialtype="kakao" onClick={() => login('kakao')}>
<SocialButtonIcon src={kakaoLogo} alt="카카오 로고" className="social-icon" />
카카오 로그인
</SocialLoginButton>
<SocialLoginButton socialtype="naver" onClick={() => login('naver')}>
<SocialButtonIcon src={naverLogo} alt="네이버 로고" className="social-icon" />
네이버 로그인
</SocialLoginButton>
<SocialLoginButton socialtype="google" onClick={() => login('google')}>
<SocialButtonIcon src={googleLogo} alt="구글 로고" className="social-icon" />
&nbsp; 구글 로그인
</SocialLoginButton>
</ButtonContainer >
<HorizontalLine position="top" />
{/* <HorizontalLine position="bottom"/>
<SignInButton >회원가입하기</SignInButton > */}
</WhiteBox >
</div>
);
</WhiteBox >
</div>
);
};

const LineStyled = styled.span `
const LineStyled = styled.span`
flex: 1;
border-top: 1px solid var(--light-gray);
`;

const TextStyled = styled.span `
const TextStyled = styled.span`
padding: 0 35px;
color: var(--light-gray);
font-size: 22px;
Expand All @@ -66,18 +66,18 @@ const LineContainer = styled.div`
justify-content: center;
`;

const HorizontalLine = ({position}) => {
return (
<LineContainer>
{position === 'top' && <LineStyled />}
{position === 'bottom' && <LineStyled />}
{position === 'bottom' && <TextStyled>또는</TextStyled>}
{position === 'bottom' && <LineStyled />}
</LineContainer>
);
const HorizontalLine = ({ position }) => {
return (
<LineContainer>
{position === 'top' && <LineStyled />}
{position === 'bottom' && <LineStyled />}
{position === 'bottom' && <TextStyled>또는</TextStyled>}
{position === 'bottom' && <LineStyled />}
</LineContainer>
);
};

const ButtonContainer = styled.div`
const ButtonContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -99,15 +99,15 @@ const SocialLoginButton = styled.button`
&:hover { filter: brightness(95%); }
outline: none;
border: ${props =>
props.socialtype === 'google' ? '1px solid #D9D9D9' : 'none'};
border: ${props =>
props.socialtype === 'google' ? '1px solid #D9D9D9' : 'none'};
background-color: ${props =>
props.socialtype === 'naver' ? '#03c75a' :
props.socialtype === 'kakao' ? '#FEE500' :
props.socialtype === 'naver' ? '#03c75a' :
props.socialtype === 'kakao' ? '#FEE500' :
props.socialtype === 'google' ? '#FFF' : 'var(--white)'};
color: ${props =>
props.socialtype === 'naver' ? '#FFF' :
props.socialtype === 'kakao' ? '#000' :
props.socialtype === 'naver' ? '#FFF' :
props.socialtype === 'kakao' ? '#000' :
props.socialtype === 'google' ? '#000' : 'var(--black)'};
`;

Expand All @@ -118,25 +118,4 @@ const SocialButtonIcon = styled.img`
margin-right: 27%;
`;

//사이트 자체 로그인 지원 안하므로 삭제됨
// const SignInButton = styled.button`
// margin-left: auto;
// margin-right: auto;

// display: flex;
// align-items: center;
// justify-content: center;
// width: 400px;
// height: 50px;
// margin-top: 5%;
// border-radius: 12px;
// border : 1px solid var(--light-gray);
// background-color: var(--white);
// font-size: 14px;
// font-weight: 700;
// &:active { opacity: 0.4; }
// &:hover { filter: brightness(95%); }
// `;

export default LoginTemplate;

export default LoginTemplate;
1 change: 0 additions & 1 deletion src/screen/MainScreen.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import BeforeLoginSet from '../component/main screen/BeforeLogin';
import AfterLoginSet from '../component/main screen/AfterLogin';
import { getCookie } from '../api/cookie';

/* 로그인 여부에 따라 다른 화면을 렌더링 */
function MainScreen(props) {
const token = getCookie('access_token');

Expand Down

0 comments on commit 26237dd

Please sign in to comment.