diff --git a/src/application/hooks/useLoginUser.ts b/src/application/hooks/useLoginUser.ts index 4d742e09..2c61c9ff 100644 --- a/src/application/hooks/useLoginUser.ts +++ b/src/application/hooks/useLoginUser.ts @@ -1,4 +1,5 @@ import { api } from '@api/index'; +import { LoginUser } from '@api/types/user'; import { errorState } from '@stores/error'; import { authState, loginUserState } from '@stores/login-user'; import { useRecoilState } from 'recoil'; @@ -18,13 +19,20 @@ export function useLoginUser() { setLoginUser({ id: -1, accessToken: '', username: '', userID: '', profileImage: '' }); }; + const saveLoginUser = (loginUser: LoginUser) => { + setLoginUser(loginUser); + setIsAuthenticated(true); + console.log(loginUser); + localStorage.setItem('token', loginUser.accessToken); + }; + const initLoginUser = async () => { try { const token = localStorage.getItem('token'); + console.log(token); if (!token) throw '토큰이 없습니다'; const user = await api.loginUserService.getUserInfo(token); - setLoginUser(user); - setIsAuthenticated(true); + saveLoginUser(user); } catch (error) { setError(error); } @@ -35,6 +43,7 @@ export function useLoginUser() { setAccessToken, removeAccessToken, initLoginUser, + saveLoginUser, isAuthenticated, isLoading: !error && !isAuthenticated, error: error, diff --git a/src/infrastructure/api/index.ts b/src/infrastructure/api/index.ts index c258d7cb..25afef39 100644 --- a/src/infrastructure/api/index.ts +++ b/src/infrastructure/api/index.ts @@ -1,4 +1,3 @@ -import { loginUserMock } from '../mock/login-user'; import { neososeoFormDataMock } from '../mock/neososeo-form'; import { userDataMock } from '../mock/user'; import { teamDataRemote } from '../remote/team'; @@ -8,6 +7,7 @@ import { NeogaService } from './neoga'; import { NeososeoFormService } from './neososeo-form'; import { TeamService } from './team'; import { UserService } from './user'; +import { loginUserRemote } from '@infrastructure/remote/login-user'; export const api: APIService = getAPIMethod(); @@ -18,7 +18,7 @@ function getAPIMethod(): APIService { function provideMockAPIService(): APIService { const teamService = teamDataRemote(); const userService = userDataMock(); - const loginUserService = loginUserMock(); + const loginUserService = loginUserRemote(); const neogaService = NeogaDataRemote(); const neososeoFormService = neososeoFormDataMock(); diff --git a/src/infrastructure/api/login-user.ts b/src/infrastructure/api/login-user.ts index 1d496a64..48e1a3d6 100644 --- a/src/infrastructure/api/login-user.ts +++ b/src/infrastructure/api/login-user.ts @@ -7,7 +7,7 @@ export interface LoginUserService { export const postLogin = async ( kakaoToken: string, -): Promise<{ user?: object; accesstoken: string; refreshtoken: string }> => { +): Promise<{ user?: any; accesstoken: string; refreshtoken?: string }> => { try { const response = await publicAPI.post({ url: `/auth/login`, diff --git a/src/infrastructure/api/types/user.ts b/src/infrastructure/api/types/user.ts index fda7a90e..080176bd 100644 --- a/src/infrastructure/api/types/user.ts +++ b/src/infrastructure/api/types/user.ts @@ -11,7 +11,7 @@ export interface LoginUser { accessToken: string; username: string; userID: string; - profileImage: string; + profileImage: string | null; } export interface User { diff --git a/src/infrastructure/remote/login-user.ts b/src/infrastructure/remote/login-user.ts new file mode 100644 index 00000000..4c35df2c --- /dev/null +++ b/src/infrastructure/remote/login-user.ts @@ -0,0 +1,17 @@ +import { LoginUserService } from '@api/login-user'; +import { publicAPI } from './base'; + +export function loginUserRemote(): LoginUserService { + const getUserInfo = async (token: string) => { + const response = await publicAPI.get({ url: '/user', headers: { accesstoken: token } }); + if (response.status !== 200) throw '유저 조회 실패'; + return { + id: response.data.id, + username: response.data.name, + userID: response.data.profileId, + profileImage: response.data.image, + accessToken: token, + }; + }; + return { getUserInfo }; +} diff --git a/src/infrastructure/remote/team.ts b/src/infrastructure/remote/team.ts index 188b8121..e35c658c 100644 --- a/src/infrastructure/remote/team.ts +++ b/src/infrastructure/remote/team.ts @@ -64,11 +64,13 @@ export function teamDataRemote(): TeamService { const response = await privateAPI.get({ url: `/team` }); if (response.status === 200) return { - profileListData: response.data.map((team: any) => ({ - id: team.id, - profileImage: team.image ?? imgEmptyProfile, - profileName: team.name, - })), + profileListData: response.data + ? response.data.map((team: any) => ({ + id: team.id, + profileImage: team.image ?? imgEmptyProfile, + profileName: team.name, + })) + : [], }; else throw '서버 통신 실패'; }; @@ -96,23 +98,24 @@ export function teamDataRemote(): TeamService { const getMyTeamIssue = async () => { const response = await privateAPI.get({ url: `/team/issue` }); + console.log(response); if (response.status === 200) return { - issueListData: response.data.map((team: any) => ({ - issueNumber: team.id, - issueMembers: team.feedback.map((member: any) => ({ - id: member.userId, - profileName: member.name, - profileImage: member.image, - })), - category: team.categoryName, - createdAt: team.dates, - content: team.content, - teamID: team.teamId, - issueCardImage: team.teamImage, - teamName: team.teamname, - memberName: team.username, - })), + issueListData: response.data + ? response.data.map((team: any) => ({ + issueNumber: team.id, + issueMembers: team.feedback.map((member: any) => ({ + id: member.userId, + profileName: member.name, + profileImage: member.image, + })), + category: team.categoryName, + createdAt: team.dates, + content: team.content, + teamName: team.teamname, + memberName: team.username, + })) + : [], }; else throw '서버 통신 실패'; }; diff --git a/src/presentation/components/JoinForm/index.tsx b/src/presentation/components/JoinForm/index.tsx index d0f60718..4874536c 100644 --- a/src/presentation/components/JoinForm/index.tsx +++ b/src/presentation/components/JoinForm/index.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ import React, { useEffect, useState } from 'react'; import { StJoinForm, @@ -28,7 +27,7 @@ function JoinForm() { const [image, setImage] = useState(null); const [inputId, setInputId] = useState(''); const [inputName, setInputName] = useState(''); - const { setAccessToken } = useLoginUser(); + const { saveLoginUser } = useLoginUser(); const navigate = useNavigate(); useEffect(() => { @@ -59,8 +58,15 @@ function JoinForm() { form.append('accesstoken', accessToken); form.append('refreshtoken', refreshToken); - const getData = await postJoin(form); - setAccessToken(getData.accesstoken); + const response = await postJoin(form); + + saveLoginUser({ + id: response.user, + accessToken: response.accesstoken, + username: response.user.name, + userID: response.user.profileId, + profileImage: response.user.image, + }); navigate('/joinComplete'); } catch (error) { console.error(error); //나중에 또 처리합시다. diff --git a/src/presentation/components/common/ExpandListButton/index.tsx b/src/presentation/components/common/ExpandListButton/index.tsx index e43ec19d..fecb6159 100644 --- a/src/presentation/components/common/ExpandListButton/index.tsx +++ b/src/presentation/components/common/ExpandListButton/index.tsx @@ -10,7 +10,7 @@ function ExpandListButton(props: ExpandListButtonProps) { const { onClick, isExpanded } = props; return ( - 더보기 + {isExpanded ? '접기' : '더보기'} {isExpanded ? : } ); diff --git a/src/presentation/components/common/HomeHeader/index.tsx b/src/presentation/components/common/HomeHeader/index.tsx index a601a2a5..2071dd9d 100644 --- a/src/presentation/components/common/HomeHeader/index.tsx +++ b/src/presentation/components/common/HomeHeader/index.tsx @@ -18,7 +18,8 @@ function HomeHeader() { useEffect(() => { if (!location) return; - setCurrentTab(location.pathname.split('/')[2]); + const selectedTab = location.pathname.split('/')[2]; + setCurrentTab(selectedTab ?? 'neoga'); }, [location]); /* diff --git a/src/presentation/pages/Home/Team/index.tsx b/src/presentation/pages/Home/Team/index.tsx index e9d8b7b6..749480d7 100644 --- a/src/presentation/pages/Home/Team/index.tsx +++ b/src/presentation/pages/Home/Team/index.tsx @@ -56,7 +56,7 @@ function HomeTeam() { )}

나와 관련된 이슈 확인

- {issueListData ? ( + {issueListData && issueListData.length ? ( { diff --git a/src/presentation/pages/OAuthRedirectHandler/index.tsx b/src/presentation/pages/OAuthRedirectHandler/index.tsx index 26eda67a..08c7825f 100644 --- a/src/presentation/pages/OAuthRedirectHandler/index.tsx +++ b/src/presentation/pages/OAuthRedirectHandler/index.tsx @@ -7,7 +7,7 @@ import { useLoginUser } from '@hooks/useLoginUser'; const OAuthRedirectHandler = () => { const navigate = useNavigate(); - const { setAccessToken } = useLoginUser(); + const { saveLoginUser } = useLoginUser(); const setKakaoAccessToken = useSetRecoilState(kakaoAccessTokenState); const setKakaoRefreshToken = useSetRecoilState(kakaoRefreshTokenState); @@ -15,11 +15,13 @@ const OAuthRedirectHandler = () => { const code = new URL(window.location.href).searchParams.get('code') ?? ''; //인가코드 postLogin(code).then((response) => { if (response.user) { - setAccessToken(response.accesstoken); + const { id, profileId, name, image } = response.user; + const accessToken = response.accesstoken; + saveLoginUser({ id, accessToken, username: name, userID: profileId, profileImage: image }); navigate('/home'); } else { setKakaoAccessToken(response.accesstoken); - setKakaoRefreshToken(response.refreshtoken); + setKakaoRefreshToken(response.refreshtoken ?? ''); navigate('/join'); } });