[FE] Feat/#502

frontend/src/apiHooks/usePatch.ts

@@ -0,0 +1,43 @@
+import { patchApi } from '../apis/patchApi';
+import useToast from '../hooks/useToast';
+import { ContentTypeType } from '../types/Api';
+
+interface fetchPutProps {
+  url: string;
+  payload: {};
+  errorMessage: string;
+  contentType?: ContentTypeType;
+  onSuccess?: () => void;
+  isThrow?: boolean;
+}
+
+const usePatch = () => {
+  const { showToast } = useToast();
+
+  const fetchPatch = async ({
+    url,
+    payload,
+    contentType,
+    errorMessage,
+    onSuccess,
+    isThrow,
+  }: fetchPutProps) => {
+    try {
+      const responseData = await patchApi(url, payload, contentType);
+
+      if (onSuccess) {
+        onSuccess();
+      }
+
+      return responseData;
+    } catch (e) {
+      showToast('error', errorMessage);
+
+      if (isThrow) throw e;
+    }
+  };
+
+  return { fetchPatch };
+};
+
+export default usePatch;

frontend/src/apis/patchApi.ts

@@ -0,0 +1,37 @@
+import { DEFAULT_PROD_URL } from '../constants';
+import { ContentTypeType } from '../types/Api';
+import withTokenRefresh from './utils';
+
+export const patchApi = async (
+  url: string,
+  data: {},
+  contentType?: ContentTypeType,
+) => {
+  return await withTokenRefresh(async () => {
+    const apiUrl = `${DEFAULT_PROD_URL + url}`;
+    const userToken = localStorage.getItem('userToken');
+    const headers: any = {
+      'content-type': 'application/json',
+    };
+
+    if (userToken) {
+      headers['Authorization'] = `Bearer ${userToken}`;
+    }
+
+    if (contentType) {
+      headers['content-type'] = contentType;
+    }
+
+    const response = await fetch(apiUrl, {
+      method: 'PATCH',
+      headers,
+      body: JSON.stringify(data),
+    });
+
+    if (response.status >= 400) {
+      throw new Error('[SERVER] PUT 요청에 실패했습니다.');
+    }
+
+    return response;
+  });
+};

frontend/src/components/MyInfo/UpdateMyInfo.tsx

@@ -1,36 +1,43 @@
 import { styled } from 'styled-components';
 import Flex from '../common/Flex';
-import ProfileDefaultImage from '../../assets/profile_defaultImage.svg';
 import Box from '../common/Box';
 import Space from '../common/Space';
 import { ProfileProps } from '../../types/Profile';
 import Button from '../common/Button';
+import Text from '../common/Text';
+import usePatch from '../../apiHooks/usePatch';
 
 interface UpdateMyInfoProps {
-  isThereImg: boolean;
-  myInfoNameAndEmail: ProfileProps;
+  myInfo: ProfileProps;
   setIsModifyMyInfo: React.Dispatch<React.SetStateAction<boolean>>;
-  setMyInfoNameAndEmail: React.Dispatch<React.SetStateAction<ProfileProps>>;
+  setMyInfo: React.Dispatch<React.SetStateAction<ProfileProps>>;
 }
 
 const UpdateMyInfo = ({
-  isThereImg,
-  myInfoNameAndEmail,
+  myInfo,
   setIsModifyMyInfo,
-  setMyInfoNameAndEmail,
+  setMyInfo,
 }: UpdateMyInfoProps) => {
+  const { fetchPatch } = usePatch();
+
   const onChangeMyInfoName = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value.length >= 20) return;
-    setMyInfoNameAndEmail({ ...myInfoNameAndEmail, name: e.target.value });
-  };
-
-  const onChangeMyInfoEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value.length >= 35) return;
-    setMyInfoNameAndEmail({ ...myInfoNameAndEmail, email: e.target.value });
+    setMyInfo({ ...myInfo, name: e.target.value });
   };
 
-  const onClickModifyButton = () => {
-    setIsModifyMyInfo(false);
+  const onClickModifyButton = async () => {
+    await fetchPatch({
+      url: '/members/my/profiles',
+      payload: {
+        nickName: myInfo.name,
+      },
+      errorMessage: '회원정보 수정에 실패했습니다.',
+      isThrow: true,
+      onSuccess: () => {
+        localStorage.setItem('user', JSON.stringify(myInfo));
+        setIsModifyMyInfo(false);
+      },
+    });
   };
 
   return (
@@ -41,22 +48,14 @@ const UpdateMyInfo = ({
       $justifyContent="center"
       $alignItems="center"
     >
-      {isThereImg ? (
-        <MyInfoImg src="https://images.unsplash.com/photo-1480429370139-e0132c086e2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=988&q=80" />
-      ) : (
-        <ProfileDefaultImage />
-      )}
-      <Space size={7} />
+      <MyInfoImg src={myInfo.image} />
+      <Space size={5} />
       <Box>
-        <MyInfoInput
-          value={myInfoNameAndEmail.name}
-          onChange={onChangeMyInfoName}
-        />
+        <MyInfoInput value={myInfo.name} onChange={onChangeMyInfoName} />
         <Space size={0} />
-        <MyInfoInput
-          value={myInfoNameAndEmail.email}
-          onChange={onChangeMyInfoEmail}
-        />
+        <Text color="black" $fontSize="small" $fontWeight="normal">
+          {myInfo.email}
+        </Text>
       </Box>
       <Space size={3} />
       <Button variant="primary" onClick={onClickModifyButton}>

frontend/src/components/MyInfo/index.tsx

@@ -9,20 +9,25 @@ import UpdateMyInfo from './UpdateMyInfo';
 import Button from '../common/Button';
 import useToast from '../../hooks/useToast';
 import { DEFAULT_PROD_URL } from '../../constants';
+import Setting from '../../assets/setting.svg';
 
 const user = JSON.parse(localStorage.getItem('user') || '{}');
 const accessToken = localStorage.getItem('userToken');
 
 const MyInfo = () => {
   const { showToast } = useToast();
 
-  const [isThereImg, setIsThereImg] = useState<boolean>(true);
   const [isModifyMyInfo, setIsModifyMyInfo] = useState<boolean>(false);
-  const [myInfoNameAndEmail, setMyInfoNameAndEmail] = useState<ProfileProps>({
+  const [myInfo, setMyInfo] = useState<ProfileProps>({
     name: user.nickName,
     email: user.email,
+    image: user.imageUrl,
   });
 
+  const onClickSetting = () => {
+    setIsModifyMyInfo(true);
+  };
+
   const onClickLogout = async (e: React.MouseEvent<HTMLButtonElement>) => {
     try {
       fetch(`${DEFAULT_PROD_URL}/logout`, {
@@ -48,10 +53,9 @@ const MyInfo = () => {
   if (isModifyMyInfo) {
     return (
       <UpdateMyInfo
-        isThereImg={isThereImg}
-        myInfoNameAndEmail={myInfoNameAndEmail}
+        myInfo={myInfo}
         setIsModifyMyInfo={setIsModifyMyInfo}
-        setMyInfoNameAndEmail={setMyInfoNameAndEmail}
+        setMyInfo={setMyInfo}
       />
     );
   }
@@ -64,14 +68,17 @@ const MyInfo = () => {
       $justifyContent="center"
       $alignItems="center"
     >
+      <SettingContainer onClick={onClickSetting}>
+        <Setting />
+      </SettingContainer>
       <MyInfoImg src={user.imageUrl} />
       <Space size={5} />
       <Box>
         <Flex $justifyContent="space-between" $alignItems="center">
           <Text color="black" $fontSize="medium" $fontWeight="bold">
             {user.nickName}
           </Text>
-          <Button variant="primary" onClick={onClickLogout}>
+          <Button variant="custom" onClick={onClickLogout}>
             로그아웃
           </Button>
         </Flex>
@@ -95,4 +102,11 @@ const MyInfoImg = styled.img`
   border-radius: 50%;
 `;
 
+const SettingContainer = styled.div`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+`;
+
 export default MyInfo;

frontend/src/components/common/Button/index.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import theme from '../../../themes';
 
-export type ButtonVariant = 'primary' | 'secondary';
+export type ButtonVariant = 'primary' | 'secondary' | 'custom';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -14,11 +14,19 @@ const variants = {
     color: `${theme.color.white}`,
     backgroundColor: `${theme.color.primary}`,
     border: `1px solid ${theme.color.primary}`,
+    padding: `${theme.spacing['2']} ${theme.spacing['3']}`,
   },
   secondary: {
     color: `${theme.color.primary}`,
     backgroundColor: 'transparent',
     border: `1px solid ${theme.color.primary}`,
+    padding: `${theme.spacing['2']} ${theme.spacing['3']}`,
+  },
+  custom: {
+    color: `${theme.color.white}`,
+    backgroundColor: `${theme.color.primary}`,
+    border: `1px solid ${theme.color.primary}`,
+    padding: `${theme.spacing['0']} ${theme.spacing['2']}`,
   },
 };
 
@@ -31,7 +39,8 @@ const Button = styled.button<ButtonProps>`
   border: ${({ variant }) => variants[variant].border};
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   border-radius: ${({ theme }) => theme.radius.small};
-  padding: ${({ theme }) => `${theme.spacing['2']} ${theme.spacing['3']}`};
+  padding: ${({ variant }) =>
+    variants[variant].padding || `${theme.spacing['2']} ${theme.spacing['3']}`};
   font-size: ${({ theme }) => theme.fontSize.small};
 
   &:hover {

frontend/src/types/Profile.ts

@@ -1,4 +1,5 @@
 export interface ProfileProps {
   name: string;
   email: string;
+  image: string;
 }