Merge branch 'feat/#111' of https://github.com/Neogasogaeseo/Naega-Web …

…into feat/#113
Neogasogaeseo · Jan 19, 2022 · 01bce2c · 01bce2c
2 parents 1f4d6c9 + 1a94a88
commit 01bce2c
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<File | null>(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
@@ -10,7 +10,7 @@ function ExpandListButton(props: ExpandListButtonProps) {
   const { onClick, isExpanded } = props;
   return (
     <StExpandListButton onClick={onClick}>
-      <span>더보기</span>
+      <span>{isExpanded ? '접기' : '더보기'}</span>
       {isExpanded ? <IcArrowViewMoreClose /> : <IcArrowViewMore />}
     </StExpandListButton>
   );

diff --git 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
@@ -56,7 +56,7 @@ function HomeTeam() {
         )}
         <StDivisionLine />
         <h1>나와 관련된 이슈 확인</h1>
-        {issueListData ? (
+        {issueListData && issueListData.length ? (
           <IssueCardList
             issueListData={issueListData}
             onIssueClick={(teamID, issueNumber) => {

diff --git a/src/presentation/pages/OAuthRedirectHandler/index.tsx b/src/presentation/pages/OAuthRedirectHandler/index.tsx
@@ -7,19 +7,21 @@ import { useLoginUser } from '@hooks/useLoginUser';
 
 const OAuthRedirectHandler = () => {
   const navigate = useNavigate();
-  const { setAccessToken } = useLoginUser();
+  const { saveLoginUser } = useLoginUser();
   const setKakaoAccessToken = useSetRecoilState(kakaoAccessTokenState);
   const setKakaoRefreshToken = useSetRecoilState(kakaoRefreshTokenState);
 
   useEffect(() => {
     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');
       }
     });