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

Feature/#28 personal profile

pages/api/base.api.ts → apis/base.api.ts

@@ -22,29 +22,34 @@ export default class BaseAPI {
     });
 
     this.instance.interceptors.request.use((config: CustomAxiosRequestConfig) => {
-      if (config.isRequiredLogin) console.log('로그인 필수 기능');
+      if (config.isRequiredLogin) {
+        console.log('로그인 필수 기능');
+        config.headers[
+          'Authorization'
+        ] = `Bearer "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2NTEyMjkwODguMDQ3MjY3LCJleHAiOjE2NTE4MzM4ODguMDQ3MjY3LCJzb2NpYWxfaWQiOiIxMDc1MTg4NDkwMzk1ODQ2MTI2ODYifQ.JqVEYVlTvLB_8YYZBuWEe6fYO75xTZtA1PmMYOUAH_o"`;
+      }
 
       return config;
     });
   }
 
   protected async get(url: string, config?: CustomAxiosRequestConfig) {
     const response = await this.instance.get(url, config);
-    return response;
+    return response.data;
   }
 
   protected async post(url: string, data?: unknown, config?: CustomAxiosRequestConfig) {
     const response = await this.instance.post(url, data, config);
-    return response;
+    return response.data;
   }
 
   protected async put(url: string, data?: unknown, config?: CustomAxiosRequestConfig) {
     const response = await this.instance.put(url, data, config);
-    return response;
+    return response.data;
   }
 
   protected async delete(url: string, data?: object, config?: CustomAxiosRequestConfig) {
     const response = await this.instance.delete(url, { ...config, ...data });
-    return response;
+    return response.data;
   }
 }

pages/api/type/index.ts → apis/type/index.ts

@@ -1,5 +1,5 @@
 import { AxiosRequestConfig } from 'axios';
 
 export interface CustomAxiosRequestConfig extends AxiosRequestConfig {
-    isRequiredLogin?: boolean;
-}
+  isRequiredLogin?: boolean;
+}

pages/api/users.api.ts → apis/users.api.ts

@@ -1,15 +1,22 @@
 import BaseAPI from './base.api';
 
 import type { UserRegisterInfoType } from 'recoil/auth';
-
+import { UserEditForm } from 'types/user';
+import type { CustomAxiosRequestConfig } from './type';
 class UsersAPI extends BaseAPI {
   checkUserName(params: unknown) {
     return this.get('/check_nickname', { params });
   }
+  checkUsers(params: unknown) {
+    return this.get(`/${params}`);
+  }
   registerUser(body: UserRegisterInfoType) {
     // id값이 서버에서 발급 받은 token 값을 의미하는지?
     return this.post(`/id`, body);
   }
+  editUser(params: unknown, body: UserEditForm, config: CustomAxiosRequestConfig) {
+    return this.put(`/${params}`, body, config);
+  }
 }
 
 export default new UsersAPI('users');

components/Profile/AddImage/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import ImageUploadWrapper from 'components/common/ImageUploadWrapper';
+import { AddImageWrapper, AddImageSvg, AddImageText } from 'components/common/Atomic/AddItem';
+
+interface Props {
+  editMode: boolean;
+  text: string;
+}
+
+const AddImage: React.FC<Props> = ({ editMode, text }) => {
+  return (
+    <AddImageWrapper editMode={editMode}>
+      <ImageUploadWrapper name="banner">
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <AddImageSvg priority width={80} height={80} />
+          <AddImageText>{text}</AddImageText>
+        </div>
+      </ImageUploadWrapper>
+    </AddImageWrapper>
+  );
+};
+
+export default AddImage;

components/Profile/Banner/index.tsx

@@ -1,16 +1,12 @@
-import React, { useState } from 'react';
-import { useRecoilValue } from 'recoil';
+import React from 'react';
 
 import * as S from './styles';
 
-import AddImage from './AddImage';
-
-import { userRegisterInfoState, UserRegisterInfoType } from 'recoil/auth';
-
-const Banner: React.FC = () => {
-  const [banner, setBanner] = useState<string>();
-
-  return <S.BannerWrapper url={banner}>{!banner && <AddImage text="프로필 배너를 추가 해주세요." />}</S.BannerWrapper>;
+interface Props {
+  bannerImg: string;
+}
+const Banner: React.FC<Props> = ({ bannerImg, children }) => {
+  return <S.BannerWrapper url={bannerImg}>{children}</S.BannerWrapper>;
 };
 
 export default Banner;

components/Profile/Banner/styles.ts

@@ -4,7 +4,7 @@ import { styledProps } from './types';
 export const BannerWrapper = styled.div<styledProps>`
   width: 100%;
   height: 280px;
-  background-color: ${(props) => props.theme.color.backgroundGray};
+  background-color: ${(props) => props.theme.color.gray_200};
   background-image: ${(props) => props.url && `url(${props.url})`};
   background-repeat: no-repeat;
   background-position: center;

components/Profile/Banner/types.ts

@@ -1,6 +1,6 @@
 import { DefaultTheme } from 'styled-components';
 
 export interface styledProps {
-  url?: string | ArrayBuffer | null;
+  url?: string;
   theme: DefaultTheme;
 }

components/Profile/ItemList/index.tsx

@@ -4,15 +4,13 @@ import AddItemCard from 'components/common/AddItemCard';
 import Thumbnail from 'components/common/Thumbnail';
 interface Props {
   itemList: string[]; //데이터 형식에따라 타입 변환할 것
+  editMode?: boolean;
 }
-const ItemList: React.FC<Props> = ({ itemList }) => {
-  useEffect(() => {
-    console.log(itemList);
-  }, [itemList]);
+const ItemList: React.FC<Props> = ({ itemList, editMode }) => {
   return (
     <S.ItemListWrapper>
       {itemList.length ? (
-        itemList.map((item, i) => <Thumbnail key={i} item={item}></Thumbnail>)
+        itemList.map((item, i) => <Thumbnail key={i} item={item} editMode={editMode}></Thumbnail>)
       ) : (
         <AddItemCard></AddItemCard>
       )}

components/Profile/ProfileEdit/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ProfileEditButton } from 'components/common/Atomic/Tabs/Button';
+import Image from 'next/image';
+
+interface Props {
+  editMode: boolean;
+  editModeOnOff: (flag: boolean) => () => void;
+}
+const ProfileEdit: React.FC<Props> = ({ editMode, editModeOnOff }) => {
+  return (
+    <ProfileEditButton bgColor={editMode} onClick={editMode ? editModeOnOff(false) : editModeOnOff(true)}>
+      <Image src="/images/profile-edit.svg" width={24} height={24} />
+      <span>{editMode ? '수정 완료' : '프로필 수정'}</span>
+    </ProfileEditButton>
+  );
+};
+
+export default ProfileEdit;

components/Profile/UploadProduct/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { UploadProductButton } from 'components/common/Atomic/Tabs/Button';
+import Image from 'next/image';
+const UploadProduct = () => {
+  return (
+    <UploadProductButton bgColor>
+      <Image src="/images/profile-edit-write2.svg" width={24} height={24} />
+      <span>작품 업로드</span>
+    </UploadProductButton>
+  );
+};
+
+export default UploadProduct;

components/User/Following/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FollowButton } from 'components/common/Atomic/Tabs/Button';
+import Image from 'next/image';
+import { following_icon } from 'constants/imgUrl';
+const Following = () => {
+  return (
+    <FollowButton bgColor>
+      <Image src={following_icon} width={24} height={24} />
+      <span>팔로우</span>
+    </FollowButton>
+  );
+};
+
+export default Following;

components/User/Message/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Image from 'next/image';
+import { MessageButton } from 'components/common/Atomic/Tabs/Button';
+import { message_icon } from 'constants/imgUrl';
+const Message = () => {
+  return (
+    <MessageButton>
+      <Image src={message_icon} width={24} height={24} />
+      <span>메시지</span>
+    </MessageButton>
+  );
+};
+
+export default Message;