Merge pull request #52 from Andrevile/feature/#28-PersonalProfile

Feature/#28 personal profile

apis/base.api.ts

@@ -28,10 +28,7 @@ export default class BaseAPI {
 
     this.instance.interceptors.request.use((config: CustomAxiosRequestConfig) => {
       if (config.isRequiredLogin) {
-        this.handleAuthenticationInterceptor;
-        // config.headers[
-        //   'Authorization'
-        // ] = `Bearer "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2NTEyMjkwODguMDQ3MjY3LCJleHAiOjE2NTE4MzM4ODguMDQ3MjY3LCJzb2NpYWxfaWQiOiIxMDc1MTg4NDkwMzk1ODQ2MTI2ODYifQ.JqVEYVlTvLB_8YYZBuWEe6fYO75xTZtA1PmMYOUAH_o"`;
+        config = this.handleAuthenticationInterceptor(config);
       }
 
       return config;
@@ -62,7 +59,7 @@ export default class BaseAPI {
     return {
       ...config,
       headers: {
-        Authorization: `Bearer ${this.getJwtToken()}`,
+        Authorization: `Bearer "${this.getJwtToken()}"`,
       },
     };
   }

apis/teams.api.ts

@@ -0,0 +1,23 @@
+import { TeamTypes } from 'types/team';
+import BaseAPI from './base.api';
+
+import type { CustomAxiosRequestConfig } from './type';
+
+class TeamsAPI extends BaseAPI {
+  //https://apibora.shop/api/team/
+  checkTeamProfile(params: unknown) {
+    return this.get<TeamTypes>(`/${params}`);
+  }
+
+  //   editUser(params: unknown, body: UserEditForm, config: CustomAxiosRequestConfig) {
+  //     return this.put(`/${params}`, body, config);
+  //   }
+  //   kakaoOauth(body, config?: CustomAxiosRequestConfig) {
+  //     return this.post<PostOauthBody, PostOauthResponse>('kakao', body, { ...config });
+  //   }
+  //   googleOauth(body, config?: CustomAxiosRequestConfig) {
+  //     return this.post<PostOauthBody, PostOauthResponse>('google', body, { ...config });
+  //   }
+}
+
+export default new TeamsAPI('team');

constants/imgUrl.ts

@@ -11,3 +11,5 @@ export const edit_icon = '/images/edit-icon.svg';
 export const following_icon = '/images/icon-add-round.svg';
 
 export const message_icon = '/images/icon-message.svg';
+
+export const team_profile_icon = '/images/team-profile-icon.svg';

constants/tabMenu.ts

@@ -1,4 +1,9 @@
-export const tabMenuArr = [
+export const userTabMenuArr = [
   { id: 'post', name: '작업물', isActive: true },
   { id: 'scrap', name: '스크랩', isActive: false },
 ];
+
+export const teamTabMenuArr = [
+  { id: 'post', name: '작업물', isActive: true },
+  { id: 'member', name: '멤버', isActive: false },
+];

hooks/useForm.ts

@@ -0,0 +1,18 @@
+import React, { ChangeEvent, Dispatch, SetStateAction, useCallback, useState } from 'react';
+
+const useForm = <T>(
+  initialData: T
+): [T, Dispatch<SetStateAction<T>>, (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void] => {
+  const [values, setValues] = useState(initialData);
+  const handler = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const { name, value } = e.target;
+      setValues({ ...values, [name]: value });
+    },
+    [values, setValues]
+  );
+
+  return [values, setValues, handler];
+};
+
+export default useForm;

hooks/useImageHandle.ts

@@ -9,8 +9,6 @@ const useImageHandle = (name: string) => {
     secretAccessKey: process.env.NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY,
   });
 
-  console.log(awsObj);
-
   const myBucket = new AWS.S3({
     params: { Bucket: process.env.NEXT_PUBLIC_AWS_STORAGE_BUCKET_NAME },
     region: process.env.NEXT_PUBLIC_AWS_REGION,
@@ -19,8 +17,6 @@ const useImageHandle = (name: string) => {
   const storeImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const currentFile = (e.target as HTMLInputElement).files[0];
     const currentFileName = currentFile.name.replaceAll(' ', '');
-    console.log(currentFile);
-    console.log(currentFileName);
 
     const params = {
       ACL: 'public-read',

pages/profile.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import Image from 'next/image';
 import styled from 'styled-components';
@@ -9,7 +9,7 @@ import ImageUploadWrapper from 'components/common/ImageUploadWrapper';
 import { ProfileIcon, ProfileWrapper, CameraIcon, CameraIconWrapper } from 'components/common/Atomic/Profile';
 import { TabButton } from 'components/common/Atomic/Tabs/TabButton';
 import { camera_icon, default_profile } from 'constants/imgUrl';
-import { tabMenuArr } from 'constants/tabMenu';
+import { userTabMenuArr } from 'constants/tabMenu';
 import usersApi from 'apis/users.api';
 import { UserEditForm } from 'types/user';
 import { userEditForm } from 'utils/userEditForm';
@@ -18,25 +18,39 @@ import { Keyword } from 'components/common/Atomic/Tabs/Keyword';
 import ProfileEdit from 'components/Profile/ProfileEdit';
 import UploadProduct from 'components/Profile/UploadProduct';
 import { UploadButton } from 'components/common/Atomic/Tabs/Button';
+import useForm from 'hooks/useForm';
+import Router from 'next/router';
+import { userInfo } from 'recoil/auth';
+import { useRecoilState } from 'recoil';
 
 const Profile = () => {
   const queryClient = useQueryClient();
-  const { isLoading, isError, error, data } = useQuery(['user-profile'], () => usersApi.checkUsers(4), {
-    onSuccess: (data) => {
-      setTestForm(userEditForm(data));
-    },
-  }); // useQuery로 유저정보 받아옴.
+  const [, setUserInfo] = useRecoilState(userInfo);
 
-  const { mutate: userInfoMutate } = useMutation(() => usersApi.editUser(4, testForm, { isRequiredLogin: true }), {
-    onSuccess: (data) => {
-      console.log('data', data);
-      queryClient.setQueryData('user-profile', data);
-    },
-  });
+  const { isLoading, isError, error, data } = useQuery(
+    ['user-profile'],
+    () => usersApi.checkUsers(sessionStorage.getItem('id')),
+    {
+      onSuccess: (data) => {
+        setValues(userEditForm(data));
+        setUserInfo(data);
+        console.log(data);
+      },
+    }
+  );
+
+  const { mutate: userInfoMutate } = useMutation(
+    () => usersApi.editUser(sessionStorage.getItem('id'), values, { isRequiredLogin: true }),
+    {
+      onSuccess: ({ data }) => {
+        queryClient.setQueryData('user-profile', data);
+      },
+    }
+  );
 
   const [editMode, setEditMode] = useState<boolean>(false);
   const [currentTab, setCurrentTab] = useState('post');
-  const [testForm, setTestForm] = useState<UserEditForm>();
+  const [values, setValues, handler] = useForm<UserEditForm>();
   //Suspense를 사용하게 된다면, useQuery를 여러개 선언하는것은 사용할 수 없으므로, useQueries를 사용해야함
   const Items = {
     post: ['작업물1'], //['아이템1', '아이템2'],
@@ -66,7 +80,7 @@ const Profile = () => {
 
   const selectTab = useCallback(
     (id: string) => () => {
-      tabMenuArr.forEach((tab) => {
+      userTabMenuArr.forEach((tab) => {
         if (tab.id === id) {
           tab.isActive = true;
           setCurrentTab(tab.id);
@@ -78,17 +92,11 @@ const Profile = () => {
     [currentTab]
   );
 
-  const testFormHook = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
-      const { name, value } = e.target;
-      console.log('name = %s value = %s', name, value);
-      console.log('banner : ', testForm.backgroundImage);
-      console.log('profile : ', testForm.profileImage);
-      console.log('description : ', testForm.description);
-      setTestForm({ ...testForm, [name]: value });
-    },
-    [testForm, setTestForm]
-  );
+  useEffect(() => {
+    if (!sessionStorage.getItem('jwtToken')) {
+      Router.push('/');
+    }
+  }, []);
   if (isLoading) {
     return <h1>Loading</h1>;
   }
@@ -144,7 +152,7 @@ const Profile = () => {
               <span>{numberWithCommas(data?.followingCount)}</span>
             </FollowInfo>
             {editMode ? (
-              <DescriptionArea name="description" onChange={testFormHook} placeholder="사용자 소개를 입력해주세요." />
+              <DescriptionArea name="description" onChange={handler} placeholder="사용자 소개를 입력해주세요." />
             ) : (
               <p>{data?.description}</p>
             )}
@@ -157,7 +165,7 @@ const Profile = () => {
         </InfoAside>
       </InfoWrapper>
       <div style={{ marginBottom: '40px' }}>
-        {tabMenuArr.map((tab, i) => (
+        {userTabMenuArr.map((tab, i) => (
           <TabButton active={tab.isActive} key={i} onClick={selectTab(tab.id)}>
             {tab.name}
             <span>{Items[tab.id].length}</span>

pages/user/[id].tsx

@@ -4,7 +4,7 @@ import Layout from 'components/Layout';
 import Banner from 'components/Profile/Banner';
 import ItemList from 'components/Profile/ItemList';
 import { TabButton } from 'components/common/Atomic/Tabs/TabButton';
-import { tabMenuArr } from 'constants/tabMenu';
+import { userTabMenuArr } from 'constants/tabMenu';
 import usersApi from 'apis/users.api';
 import { useRouter } from 'next/router';
 import Image from 'next/image';
@@ -48,7 +48,7 @@ const UserProfile: React.FC = () => {
 
   const selectTab = useCallback(
     (id: string) => () => {
-      tabMenuArr.forEach((tab) => {
+      userTabMenuArr.forEach((tab) => {
         if (tab.id === id) {
           tab.isActive = true;
           setCurrentTab(tab.id);
@@ -101,7 +101,7 @@ const UserProfile: React.FC = () => {
         </InfoAside>
       </InfoWrapper>
       <div style={{ marginBottom: '40px' }}>
-        {tabMenuArr.map((tab, i) => (
+        {userTabMenuArr.map((tab, i) => (
           <TabButton active={tab.isActive} key={i} onClick={selectTab(tab.id)}>
             {tab.name}
             <span>{Items[tab.id].length}</span>

recoil/auth.ts

@@ -1,4 +1,5 @@
 import { atom } from 'recoil';
+import { User } from 'types/user';
 
 export interface UserCategoryType {
   mainCategory: number;
@@ -21,6 +22,11 @@ export interface socialLoginState {
   socialType: string;
 }
 
+export const userInfo = atom<User | null>({
+  key: 'userInfo',
+  default: null,
+});
+
 export const userRegisterInfoState = atom<UserRegisterInfoType>({
   key: 'userRegisterInfoState',
   default: {

types/team.d.ts

@@ -0,0 +1,11 @@
+export interface TeamTypes {
+  id: number;
+  title: string;
+  description: string;
+  leader: number;
+  teamProfileImage: string;
+  backgroundImage: string;
+  postCount: number;
+  memberCount: number;
+  teamFollowCount: number;
+}

types/user.d.ts

@@ -1,5 +1,5 @@
 export interface User {
-  id: number;
+  id: string;
   email: string;
   nickname: string;
   description: string;

utils/userEditForm.ts

@@ -1,7 +1,6 @@
 import { User, UserEditForm } from 'types/user';
 
 export const userEditForm = (user: User): UserEditForm => {
-  console.log('user', user);
   return {
     email: user.email,
     nickname: user.nickname,