Skip to content

Commit b1662d9

Browse files
mimizaemimizae
committed
Merge branch 'dev' of https://github.com/oodd-team/oodd-web-react into feat/OD-140
2 parents 2c3ad1d + 34c1fd7 commit b1662d9

10 files changed

Lines changed: 99 additions & 107 deletions

File tree

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
33
import Home from './pages/Home';
44
import Login from './pages/Login';
55
import SignUp from './pages/SignUp';
6-
import LoginComplete from './pages/Login/components/LoginComplete';
6+
import LoginComplete from './pages/Login/LoginComplete';
77
import TermsAgreement from './pages/TermsAgreement';
88

99
import Profile from './pages/Profile';

src/pages/Login/components/LoginComplete.tsx renamed to src/pages/Login/LoginComplete/index.tsx

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
11
import React, { useEffect, useState } from 'react';
22
import { useLocation, useNavigate } from 'react-router-dom';
33

4-
import Loading from '../../../components/Loading';
5-
import Modal from '../../../components/Modal';
4+
import { getUserInfoByJwtApi } from '@/apis/auth';
5+
import { handleError } from '@/apis/util/handleError';
6+
import { postTermsAgreementApi } from '@/apis/user';
67

7-
import { getUserInfoByJwtApi } from '../../../apis/auth';
8-
import { handleError } from '../../../apis/util/handleError';
9-
import { postTermsAgreementApi } from '../../../apis/user';
8+
import Loading from '@/components/Loading';
9+
import Modal from '@/components/Modal';
1010

1111
const LoginComplete: React.FC = () => {
12-
const location = useLocation();
13-
const navigate = useNavigate();
1412
const [isModalOpen, setIsModalOpen] = useState(false);
1513
const [modalMessage, setModalMessage] = useState('');
14+
const location = useLocation();
15+
const navigate = useNavigate();
16+
17+
const handleModalClose = () => {
18+
setIsModalOpen(false);
19+
navigate('/login'); // 모달 닫힌 후 로그인 페이지로 이동
20+
};
21+
22+
const hasAgreedToTerms = async (userId: number): Promise<boolean> => {
23+
try {
24+
await postTermsAgreementApi(userId);
25+
return true; // 이용 약관 동의 완료된 사용자
26+
} catch {
27+
return false; // 이용 약관 동의 필요한 사용자
28+
}
29+
};
1630

1731
useEffect(() => {
1832
// URLSearchParams를 사용해 쿼리 문자열에서 token 추출
@@ -30,12 +44,12 @@ const LoginComplete: React.FC = () => {
3044
console.log(response);
3145

3246
const { nickname, name, userId } = response.data;
33-
localStorage.setItem('my_id', `${userId}`);
47+
localStorage.setItem('current_user_id', `${userId}`);
3448

3549
if (nickname && name) {
3650
if (nickname && name) {
37-
const isAgreed = await checkTermsAgreement(userId);
38-
navigate(isAgreed ? '/' : '/terms-agreement');
51+
const isAgreed = await hasAgreedToTerms(userId);
52+
navigate(isAgreed ? '/' : '/terms-agreement'); // 이용 약관이 필요하면 (false) 해당 페이지로 이동
3953
}
4054
} else {
4155
navigate('/signup');
@@ -51,20 +65,6 @@ const LoginComplete: React.FC = () => {
5165
}
5266
}, [location]);
5367

54-
const checkTermsAgreement = async (userId: number): Promise<boolean> => {
55-
try {
56-
await postTermsAgreementApi(userId);
57-
return true; // 동의 완료
58-
} catch {
59-
return false; // 동의 필요
60-
}
61-
};
62-
63-
const handleModalClose = () => {
64-
setIsModalOpen(false);
65-
navigate('/login'); // 모달 닫힌 후 로그인 페이지로 이동
66-
};
67-
6868
return (
6969
<>
7070
<Loading />

‎src/pages/Login/SocialLoginButton/dto.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface SocialLoginProps {
2+
bgColor: string;
3+
logoSrc: string;
4+
altText: string;
5+
buttonText: string;
6+
provider: 'naver' | 'kakao';
7+
}

‎src/pages/Login/SocialLoginButton/index.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
3+
import theme from '@/styles/theme';
4+
5+
import type { SocialLoginProps } from './dto';
6+
7+
import { SocialLoginContainer, LogoImgWrapper, LogoImage, StyledTextWrapper } from './style';
8+
9+
const SERVER_URI = import.meta.env.VITE_NEW_API_URL;
10+
11+
const SocialLoginButton: React.FC<SocialLoginProps> = ({ bgColor, logoSrc, altText, buttonText, provider }) => {
12+
const handleSocialLoginClick = () => {
13+
// 리다이렉트 URL 설정
14+
const redirectUrl = encodeURIComponent(`${import.meta.env.VITE_DOMAIN || window.location.origin}/login/complete`);
15+
16+
// 서버 URL 생성
17+
const serverUrl = `${SERVER_URI}/auth/login/${provider}?redirectUrl=${redirectUrl}`;
18+
19+
// 서버로 리다이렉션
20+
window.open(serverUrl, '_self');
21+
};
22+
23+
return (
24+
<SocialLoginContainer $bgColor={bgColor} onClick={handleSocialLoginClick}>
25+
<LogoImgWrapper>
26+
<LogoImage src={logoSrc} alt={altText} />
27+
</LogoImgWrapper>
28+
<StyledTextWrapper
29+
$textTheme={{ style: 'body2-bold' }}
30+
color={provider === 'kakao' ? theme.colors.black : theme.colors.white}
31+
>
32+
{buttonText}
33+
</StyledTextWrapper>
34+
</SocialLoginContainer>
35+
);
36+
};
37+
38+
export default SocialLoginButton;

src/pages/Login/components/style.tsx renamed to src/pages/Login/SocialLoginButton/style.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import styled from 'styled-components';
2+
import { StyledText } from '@/components/Text/StyledText';
23

3-
export const SocialLogin = styled.button<{ $bgColor: string; $border?: boolean }>`
4+
export const SocialLoginContainer = styled.button<{ $bgColor: string; $border?: boolean }>`
45
display: flex;
56
align-items: center;
67
width: calc(100% - 3.5rem);
@@ -27,7 +28,7 @@ export const LogoImage = styled.img`
2728
max-height: 100%;
2829
`;
2930

30-
export const TextWrapper = styled.section<{ $left?: string }>`
31+
export const StyledTextWrapper = styled(StyledText)<{ $left?: string }>`
3132
display: flex;
3233
width: 12.5rem;
3334
padding-left: ${({ $left }) => $left || '1.2rem'};

‎src/pages/Login/components/Kakao/index.tsx‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎src/pages/Login/components/Naver/index.tsx‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎src/pages/Login/index.tsx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import React from 'react';
22

3-
import { OODDFrame } from '../../components/Frame/Frame';
4-
import Naver from './components/Naver';
5-
import Kakao from './components/Kakao';
3+
import { OODDFrame } from '@/components/Frame/Frame';
4+
import theme from '@/styles/theme';
5+
6+
import kakaoLogo from '@/assets/default/snsIcon/kakao.svg';
7+
import naverLogo from '@/assets/default/snsIcon/naver.svg';
8+
9+
import SocialLoginButton from './SocialLoginButton/index';
610

711
import { LoginContainer, StyledWelcomeWrapper } from './styles';
8-
import theme from '../../styles/theme';
912

1013
const Login: React.FC = () => {
1114
return (
@@ -14,8 +17,20 @@ const Login: React.FC = () => {
1417
<StyledWelcomeWrapper $textTheme={{ style: 'title2-bold' }} color={theme.colors.black}>
1518
{'반가워요! \n계정을 선택해주세요.'}
1619
</StyledWelcomeWrapper>
17-
<Kakao />
18-
<Naver />
20+
<SocialLoginButton
21+
bgColor="#FEE500"
22+
logoSrc={kakaoLogo}
23+
altText="Kakao logo"
24+
buttonText="Kakao로 계속하기"
25+
provider="kakao"
26+
/>
27+
<SocialLoginButton
28+
bgColor="#05B918"
29+
logoSrc={naverLogo}
30+
altText="Naver logo"
31+
buttonText="네이버로 계속하기"
32+
provider="naver"
33+
/>
1934
</LoginContainer>
2035
</OODDFrame>
2136
);

‎src/pages/Login/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from 'styled-components';
2-
import { StyledText } from '../../components/Text/StyledText';
2+
import { StyledText } from '@/components/Text/StyledText';
33

44
export const LoginContainer = styled.main`
55
display: flex;

‎src/utils/getCurrentUserId.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const getCurrentUserId = () => {
2+
const idFromStorage = localStorage.getItem('current_user_id');
3+
return Number(idFromStorage);
4+
};

0 commit comments

Comments
 (0)