Skip to content

Commit 2c8c1fd

Browse files
mimizaemimizae
committed
Feat: 닉네임 기본 값 설정 & prettier 적용
1 parent 0bed2f2 commit 2c8c1fd

30 files changed

Lines changed: 1476 additions & 1504 deletions

File tree

‎src/components/TopBar/dto.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
export interface TopBarProps {
2-
ID?: string; // 사용자 ID, optional prop
3-
text?: string; // 텍스트, optional prop
2+
ID?: string; // 사용자 ID, optional prop
3+
text?: string; // 텍스트, optional prop
44
RightButtonSrc?: string; // KebabMenuButton src의 Optional prop
5-
LeftButtonSrc?: string; // BackButton src의 Optional prop
6-
onLeftClick?: () => void; // BackButton src의 Optional prop
7-
onRightClick?: () => void; // KebabMenuButton src의 Optional prop
8-
$withBorder?: boolean;
9-
}
5+
LeftButtonSrc?: string; // BackButton src의 Optional prop
6+
onLeftClick?: () => void; // BackButton src의 Optional prop
7+
onRightClick?: () => void; // KebabMenuButton src의 Optional prop
8+
$withBorder?: boolean;
9+
}
1010

1111
export interface TopbarLayoutProps {
1212
$withBorder?: boolean;
13-
}
13+
}

‎src/components/TopBar/index.tsx‎

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,52 @@
11
import { StyledText } from '../../components/Text/StyledText';
22
import theme from '../../styles/theme';
3-
import { TopbarLayout,TextLayout, BackButton, KebabMenuButton } from './styles';
3+
import { TopbarLayout, TextLayout, BackButton, KebabMenuButton } from './styles';
44
import { useNavigate } from 'react-router-dom';
55
import { TopBarProps } from './dto';
66

7-
8-
const TopBar: React.FC<TopBarProps> = ({ ID = '', text = '', RightButtonSrc, LeftButtonSrc, onLeftClick, onRightClick, $withBorder = false }) => {
7+
const TopBar: React.FC<TopBarProps> = ({
8+
ID = '',
9+
text = '',
10+
RightButtonSrc,
11+
LeftButtonSrc,
12+
onLeftClick,
13+
onRightClick,
14+
$withBorder = false,
15+
}) => {
916
const nav = useNavigate();
1017

1118
return (
12-
<TopbarLayout $withBorder={$withBorder}> {/*border-bottom 유무*/}
19+
<TopbarLayout $withBorder={$withBorder}>
20+
{' '}
21+
{/*border-bottom 유무*/}
1322
<BackButton
14-
src={LeftButtonSrc || ''}
15-
alt="back"
16-
onClick={() => {
17-
if (onLeftClick) {
18-
onLeftClick();
19-
} else {
20-
nav(-1);
21-
}
22-
}}
23-
/>
23+
src={LeftButtonSrc || ''}
24+
alt="back"
25+
onClick={() => {
26+
if (onLeftClick) {
27+
onLeftClick();
28+
} else {
29+
nav(-1);
30+
}
31+
}}
32+
/>
2433
<TextLayout>
2534
<StyledText $textTheme={{ style: 'body4-light', lineHeight: 1.5 }} color={theme.colors.gray3}>
2635
{ID}
2736
</StyledText>
28-
<StyledText $textTheme={{ style: 'body2-light', lineHeight: 1 }}>
29-
{text}
30-
</StyledText>
37+
<StyledText $textTheme={{ style: 'body2-light', lineHeight: 1 }}>{text}</StyledText>
3138
</TextLayout>
3239
<KebabMenuButton
33-
src={RightButtonSrc || ''} // 이미지 사용 || 이미지 사용 X
34-
alt="menu"
35-
onClick={() => {
36-
if (onRightClick) {
37-
onRightClick();
38-
}
39-
}}
40-
/>
41-
</TopbarLayout>
42-
);
40+
src={RightButtonSrc || ''} // 이미지 사용 || 이미지 사용 X
41+
alt="menu"
42+
onClick={() => {
43+
if (onRightClick) {
44+
onRightClick();
45+
}
46+
}}
47+
/>
48+
</TopbarLayout>
49+
);
4350
};
4451

4552
export default TopBar;

‎src/pages/Login/components/Google/GoogleCallback.tsx‎

Lines changed: 43 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,48 @@
1-
import React, { useEffect } from "react";
2-
import { useNavigate } from "react-router-dom";
3-
import axios from "axios";
4-
import Loading from "../../../../components/Loading";
1+
import React, { useEffect } from 'react';
2+
import { useNavigate } from 'react-router-dom';
3+
import axios from 'axios';
4+
import Loading from '../../../../components/Loading';
55

66
const GoogleCallback: React.FC = () => {
7-
const navigate = useNavigate();
8-
useEffect(() => {
9-
const query = new URLSearchParams(window.location.search);
10-
const code = query.get('code');
11-
console.log(code);
12-
13-
if (code) {
14-
15-
// 인증 코드를 쿼리스트링으로 백엔드 서버에 전송
16-
axios.get(`https://api-dev.oodd.today/auth/login/google?code=${code}`)
17-
.then(response => {
18-
const statusCode = response.status;
19-
console.log(JSON.stringify(response.data));
20-
const token = response.data.accessToken; // 응답 중, 성공 여부와 user 정보 추출
21-
localStorage.setItem('id','22'); // 로그인 성공을 하면... isSuccess랑 토큰이 오니까... 내 정보 조회를 먼저 해서 id를 가져 와서 로컬에 저장하기~
22-
localStorage.removeItem('jwt_token');
23-
localStorage.setItem('jwt_token', token);
24-
console.log(token);
25-
console.log(localStorage.getItem('jwt_token'))
26-
if (statusCode === 200) { // Postman에서 api 호출해 보고 응답을 보고 적어야 함
27-
// user.id를 서버로 보내 해당 유저의 nickname 유무에 따른 리디렉션
28-
navigate('/');
29-
} else {
30-
console.error('로그인 실패:', response.data);
31-
alert('구글 계정의 정보를 불러오지 못했습니다.');
32-
navigate('/login');
33-
// 로그인 실패 시 처리 (예: 오류 페이지로 리디렉션)
34-
}
35-
})
36-
.catch(error => {
37-
console.error('서버 요청 실패:', error);
38-
});
39-
} else {
40-
// 인증 코드가 없는 경우 처리
41-
console.error('인증 코드가 없습니다.');
42-
}
43-
}, [navigate]);
44-
return(
45-
<Loading/>
46-
);
7+
const navigate = useNavigate();
8+
useEffect(() => {
9+
const query = new URLSearchParams(window.location.search);
10+
const code = query.get('code');
11+
console.log(code);
12+
13+
if (code) {
14+
// 인증 코드를 쿼리스트링으로 백엔드 서버에 전송
15+
axios
16+
.get(`https://api-dev.oodd.today/auth/login/google?code=${code}`)
17+
.then((response) => {
18+
const statusCode = response.status;
19+
console.log(JSON.stringify(response.data));
20+
const token = response.data.accessToken; // 응답 중, 성공 여부와 user 정보 추출
21+
localStorage.setItem('id', '22'); // 로그인 성공을 하면... isSuccess랑 토큰이 오니까... 내 정보 조회를 먼저 해서 id를 가져 와서 로컬에 저장하기~
22+
localStorage.removeItem('jwt_token');
23+
localStorage.setItem('jwt_token', token);
24+
console.log(token);
25+
console.log(localStorage.getItem('jwt_token'));
26+
if (statusCode === 200) {
27+
// Postman에서 api 호출해 보고 응답을 보고 적어야 함
28+
// user.id를 서버로 보내 해당 유저의 nickname 유무에 따른 리디렉션
29+
navigate('/');
30+
} else {
31+
console.error('로그인 실패:', response.data);
32+
alert('구글 계정의 정보를 불러오지 못했습니다.');
33+
navigate('/login');
34+
// 로그인 실패 시 처리 (예: 오류 페이지로 리디렉션)
35+
}
36+
})
37+
.catch((error) => {
38+
console.error('서버 요청 실패:', error);
39+
});
40+
} else {
41+
// 인증 코드가 없는 경우 처리
42+
console.error('인증 코드가 없습니다.');
43+
}
44+
}, [navigate]);
45+
return <Loading />;
4746
};
4847

4948
export default GoogleCallback;
50-
51-
52-
53-

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

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
1-
import React from "react";
2-
import { StyledText } from "../../../../components/Text/StyledText";
3-
import theme from "../../../../styles/theme";
4-
import google from '../../../../assets/Login/google.png'
5-
import { SocialLogin, LogoImgWrapper, LogoImage, TextWrapper } from "../style";
1+
import React from 'react';
2+
import { StyledText } from '../../../../components/Text/StyledText';
3+
import theme from '../../../../styles/theme';
4+
import google from '../../../../assets/Login/google.png';
5+
import { SocialLogin, LogoImgWrapper, LogoImage, TextWrapper } from '../style';
66

77
const Google: React.FC = () => {
8-
const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
9-
const redirectUri = encodeURIComponent(import.meta.env.VITE_DEV_DOMAIN ? import.meta.env.VITE_DEV_DOMAIN + '/auth/google/callback' : 'http://localhost:3000/auth/google/callback');
8+
const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
9+
const redirectUri = encodeURIComponent(
10+
import.meta.env.VITE_DEV_DOMAIN
11+
? import.meta.env.VITE_DEV_DOMAIN + '/auth/google/callback'
12+
: 'http://localhost:3000/auth/google/callback',
13+
);
1014

11-
const handleLogin = () => {
12-
window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}&scope=profile email`;
13-
};
15+
const handleLogin = () => {
16+
window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}&scope=profile email`;
17+
};
1418

15-
return (
16-
<SocialLogin $bgColor="#ffffff" $border onClick={handleLogin}>
17-
<LogoImgWrapper $logowidth="2.5rem" $logoheight="2.2rem">
18-
<LogoImage src={google} alt="Google logo" />
19-
</LogoImgWrapper>
20-
<TextWrapper $left="1.5rem">
21-
<StyledText $textTheme={{ style: 'body3-light', lineHeight: 1.5 }} color={theme.colors.gray4}>
22-
구글로 시작하기
23-
</StyledText>
24-
</TextWrapper>
25-
</SocialLogin>
26-
);
19+
return (
20+
<SocialLogin $bgColor="#ffffff" $border onClick={handleLogin}>
21+
<LogoImgWrapper $logowidth="2.5rem" $logoheight="2.2rem">
22+
<LogoImage src={google} alt="Google logo" />
23+
</LogoImgWrapper>
24+
<TextWrapper $left="1.5rem">
25+
<StyledText $textTheme={{ style: 'body3-light', lineHeight: 1.5 }} color={theme.colors.gray4}>
26+
구글로 시작하기
27+
</StyledText>
28+
</TextWrapper>
29+
</SocialLogin>
30+
);
2731
};
2832

2933
export default Google;

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

Lines changed: 58 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,68 @@
11
//카카오 인증 완료 후 인증 코드는 승인된 리디렉트 URL로
22

3-
import React, { useEffect } from "react";
4-
import { useNavigate } from "react-router-dom";
5-
import axios from "axios";
6-
import { UserInfoDto } from "../../../ProfileViewer/ResponseDto/UserInfoDto";
7-
import request from "../../../../apis/core";
8-
import Loading from "../../../../components/Loading";
3+
import React, { useEffect } from 'react';
4+
import { useNavigate } from 'react-router-dom';
5+
import axios from 'axios';
6+
import { UserInfoDto } from '../../../ProfileViewer/ResponseDto/UserInfoDto';
7+
import request from '../../../../apis/core';
8+
import Loading from '../../../../components/Loading';
99

1010
const KakaoCallback: React.FC = () => {
11-
const navigate = useNavigate();
11+
const navigate = useNavigate();
1212

13-
useEffect(()=>{
13+
useEffect(() => {
14+
const code = new URL(window.location.href).searchParams.get('code'); // URL에서 인증 코드 추출
15+
console.log(code); // 인증 코드 출력
1416

15-
const code = new URL(window.location.href).searchParams.get("code"); // URL에서 인증 코드 추출
16-
console.log(code); // 인증 코드 출력
17-
18-
if (code) {
19-
// 인증 코드를 쿼리스트링으로 백엔드 서버에 전송
20-
axios.get(`https://api-dev.oodd.today/auth/login/kakao?code=${code}`)
21-
.then(response => {
22-
const statusCode = response.status; // 200 OK
23-
console.log(JSON.stringify(response.data))
24-
if (statusCode === 200) { // 추후 Postman에서 api 호출해 보고 응답을 보고 적어야 함
25-
// userid를 서버로 보내 해당 유저의 nickname 유무에 따른 리디렉션
26-
const token = response.data.accessToken;
27-
28-
localStorage.setItem('id', response.data.id); // 응답으로 id가 오지 않기 때문에 여기서 설정해야 함 수정 필요?
29-
localStorage.removeItem('jwt_token');
30-
localStorage.setItem('jwt_token', token);
31-
const userid = localStorage.getItem('id');
17+
if (code) {
18+
// 인증 코드를 쿼리스트링으로 백엔드 서버에 전송
19+
axios
20+
.get(`https://api-dev.oodd.today/auth/login/kakao?code=${code}`)
21+
.then((response) => {
22+
const statusCode = response.status; // 200 OK
23+
console.log(JSON.stringify(response.data));
24+
if (statusCode === 200) {
25+
// 추후 Postman에서 api 호출해 보고 응답을 보고 적어야 함
26+
// userid를 서버로 보내 해당 유저의 nickname 유무에 따른 리디렉션
27+
const token = response.data.accessToken;
3228

33-
request.get<UserInfoDto>(`/users/${userid}`)
34-
.then(response => {
35-
console.log(response);
36-
if(response.result.nickname){
37-
navigate('/');
38-
}
39-
else{
40-
navigate(`/signup`)
41-
}
42-
})
43-
.catch(error => {
44-
// API 요청 실패 시 처리
45-
console.error('API 요청 실패:', error);
46-
alert('사용자 정보를 불러오지 못했습니다.');
47-
navigate('/login'); // 실패 시 로그인 페이지로 리디렉션
48-
});
49-
} else {
50-
console.error('로그인 실패:', response.data);
51-
alert('카카오 계정의 정보를 불러오지 못했습니다.');
52-
navigate('/login');
53-
// 로그인 실패 시 처리 (예: 오류 페이지로 리디렉션)
54-
}
55-
})
56-
.catch(error => {
57-
console.error('서버 요청 실패:', error);
58-
});
59-
} else {
60-
// 인증 코드가 없는 경우 처리
61-
console.error('인증 코드가 없습니다.');
62-
}
63-
}, [navigate]);
64-
return(
65-
<Loading/>
66-
)
29+
localStorage.setItem('id', response.data.id); // 응답으로 id가 오지 않기 때문에 여기서 설정해야 함 수정 필요?
30+
localStorage.removeItem('jwt_token');
31+
localStorage.setItem('jwt_token', token);
32+
const userid = localStorage.getItem('id');
33+
34+
request
35+
.get<UserInfoDto>(`/users/${userid}`)
36+
.then((response) => {
37+
console.log(response);
38+
if (response.result.nickname) {
39+
navigate('/');
40+
} else {
41+
navigate(`/signup`);
42+
}
43+
})
44+
.catch((error) => {
45+
// API 요청 실패 시 처리
46+
console.error('API 요청 실패:', error);
47+
alert('사용자 정보를 불러오지 못했습니다.');
48+
navigate('/login'); // 실패 시 로그인 페이지로 리디렉션
49+
});
50+
} else {
51+
console.error('로그인 실패:', response.data);
52+
alert('카카오 계정의 정보를 불러오지 못했습니다.');
53+
navigate('/login');
54+
// 로그인 실패 시 처리 (예: 오류 페이지로 리디렉션)
55+
}
56+
})
57+
.catch((error) => {
58+
console.error('서버 요청 실패:', error);
59+
});
60+
} else {
61+
// 인증 코드가 없는 경우 처리
62+
console.error('인증 코드가 없습니다.');
63+
}
64+
}, [navigate]);
65+
return <Loading />;
6766
};
6867

6968
export default KakaoCallback;

‎src/pages/Login/components/Kakao/KakaoLoginDto.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export interface KakaoLoginDto {
2-
status: number;
3-
data: {
4-
message: string;
5-
accessToken: string;
6-
}
7-
}
2+
status: number;
3+
data: {
4+
message: string;
5+
accessToken: string;
6+
};
7+
}

0 commit comments

Comments
 (0)