[FE] feature/#282 내 정보 관련 컴포넌트 구현 및 getApi 타입 지정

frontend/src/components/MyInfo/UpdateMyInfo.tsx

@@ -0,0 +1,89 @@
+import { styled } from 'styled-components';
+import Flex from '../common/Flex';
+import InfoDefalutImg from '../../assets/InfoDefalutImg.svg';
+import ModifyMyInfoIcon from '../../assets/ModifyMyInfoIcon.svg';
+import Box from '../common/Box';
+import Text from '../common/Text';
+import Space from '../common/Space';
+import { useEffect, useState } from 'react';
+import { MyInfoType } from '../../types/MyInfo';
+import Button from '../common/Button';
+
+interface UpdateMyInfoProps {
+  isThereImg: boolean;
+  myInfoNameAndEmail: MyInfoType;
+  setIsModifyMyInfo: React.Dispatch<React.SetStateAction<boolean>>;
+  setMyInfoNameAndEmail: React.Dispatch<React.SetStateAction<MyInfoType>>;
+}
+
+const UpdateMyInfo = ({
+  isThereImg,
+  myInfoNameAndEmail,
+  setIsModifyMyInfo,
+  setMyInfoNameAndEmail,
+}: UpdateMyInfoProps) => {
+  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 });
+  };
+
+  const onClickModifyButton = () => {
+    setIsModifyMyInfo(false);
+  };
+
+  return (
+    <MyInfoContainer
+      width="440px"
+      height="140px"
+      $borderRadius="medium"
+      $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" />
+      ) : (
+        <InfoDefalutImg />
+      )}
+      <Space size={7} />
+      <Box>
+        <MyInfoInput
+          value={myInfoNameAndEmail.name}
+          onChange={onChangeMyInfoName}
+        />
+        <Space size={0} />
+        <MyInfoInput
+          value={myInfoNameAndEmail.email}
+          onChange={onChangeMyInfoEmail}
+        />
+      </Box>
+      <Space size={3} />
+      <Button variant="primary" onClick={onClickModifyButton}>
+        확인
+      </Button>
+    </MyInfoContainer>
+  );
+};
+
+const MyInfoContainer = styled(Flex)`
+  border: 1px solid ${({ theme }) => theme.color.lightGray};
+`;
+
+const MyInfoImg = styled.img`
+  width: 80px;
+  height: 80px;
+
+  border-radius: 50%;
+`;
+
+const MyInfoInput = styled.input`
+  width: 150px;
+  height: 35px;
+  font-size: ${({ theme }) => theme.fontSize.default};
+`;
+
+export default UpdateMyInfo;

frontend/src/components/MyInfo/index.tsx

@@ -0,0 +1,85 @@
+import { styled } from 'styled-components';
+import Flex from '../common/Flex';
+import InfoDefalutImg from '../../assets/InfoDefalutImg.svg';
+import ModifyMyInfoIcon from '../../assets/ModifyMyInfoIcon.svg';
+import Box from '../common/Box';
+import Text from '../common/Text';
+import Space from '../common/Space';
+import { useEffect, useState } from 'react';
+import UpdateMyInfo from './updateMyInfo';
+import { MyInfoType } from '../../types/MyInfo';
+
+const MyInfo = () => {
+  const [isThereImg, setisThereImg] = useState<boolean>(true);
+  const [isModifyMyInfo, setIsModifyMyInfo] = useState<boolean>(false);
+  const [myInfoNameAndEmail, setMyInfoNameAndEmail] = useState<MyInfoType>({
+    name: 'Patrick',
+    email: '[email protected]',
+  });
+
+  //   useEffect(()=>{
+  //     setMyInfoName()
+  //   }, [])
+
+  const onModifyInfo = () => {
+    setIsModifyMyInfo(true);
+  };
+
+  if (isModifyMyInfo) {
+    return (
+      <UpdateMyInfo
+        isThereImg={isThereImg}
+        myInfoNameAndEmail={myInfoNameAndEmail}
+        setIsModifyMyInfo={setIsModifyMyInfo}
+        setMyInfoNameAndEmail={setMyInfoNameAndEmail}
+      />
+    );
+  }
+
+  return (
+    <MyInfoContainer
+      width="440px"
+      height="140px"
+      $borderRadius="medium"
+      $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" />
+      ) : (
+        <InfoDefalutImg />
+      )}
+      <Space size={7} />
+      <Box>
+        <Text color="black" $fontSize="default" $fontWeight="normal">
+          {myInfoNameAndEmail.name}
+        </Text>
+        <Text color="black" $fontSize="small" $fontWeight="normal">
+          {myInfoNameAndEmail.email}
+        </Text>
+      </Box>
+      <MyInfoModifyIcon>
+        <ModifyMyInfoIcon onClick={onModifyInfo} />
+      </MyInfoModifyIcon>
+    </MyInfoContainer>
+  );
+};
+
+const MyInfoContainer = styled(Flex)`
+  border: 1px solid ${({ theme }) => theme.color.lightGray};
+`;
+
+const MyInfoImg = styled.img`
+  width: 80px;
+  height: 80px;
+
+  border-radius: 50%;
+`;
+
+const MyInfoModifyIcon = styled(Box)`
+  position: absolute;
+  right: 32px;
+  top: 32px;
+`;
+
+export default MyInfo;

frontend/src/components/SeeAllCardList/index.tsx

@@ -12,7 +12,7 @@ const SeeAllCardList = ({ url }: SeeAllCardListProps) => {
   const [topics, setTopics] = useState<TopicType[]>([]);
 
   const getAndSetDataFromServer = async () => {
-    const topics = await getApi('default', url);
+    const topics = await getApi<TopicType[]>('default', url);
     setTopics(topics);
   };
 

frontend/src/components/TopicCardList/index.tsx

@@ -13,8 +13,8 @@ const TopicCardList = () => {
 
   const getAndSetDataFromServer = async () => {
     const topics = url
-      ? await getApi('default', url)
-      : await getApi('default', '/topics');
+      ? await getApi<TopicType[]>('default', url)
+      : await getApi<TopicType[]>('default', '/topics');
     setTopics(topics);
   };
 

frontend/src/hooks/useFormValues.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { validateCurse, validatePolitically } from '../validations';
 
-const initErrorMessages = <T extends Record<keyof T, string>>(
+const initErrorMessages = <T extends Record<keyof T, string | string[]>>(
   initValues: T,
 ) => {
   const initKeys = Object.keys(initValues) as (keyof T)[];

frontend/src/pages/NewPin.tsx

@@ -115,7 +115,7 @@ const NewPin = () => {
         const addr = data.roadAddress; // 주소 변수
 
         //data를 통해 받아온 값을 Tmap api를 통해 위도와 경도를 구한다.
-        const { ConvertAdd } = await getApi(
+        const { ConvertAdd } = await getApi<any>(
           'tMap',
           `https://apis.openapi.sk.com/tmap/geo/convertAddress?version=1&format=json&callback=result&searchTypCd=NtoO&appKey=P2MX6F1aaf428AbAyahIl9L8GsIlES04aXS9hgxo&coordType=WGS84GEO&reqAdd=${addr}`,
         );

frontend/src/pages/PinDetail.tsx

@@ -43,11 +43,11 @@ const PinDetail = ({
 
   useEffect(() => {
     const getPinData = async () => {
-      const pinData = await getApi<any>('default', `/pins/${pinId}`);
+      const pinData = await getApi<PinType>('default', `/pins/${pinId}`);
       setPin(pinData);
       setFormValues({
         name: pinData.name,
-        images: pinData.image,
+        images: pinData.images,
         description: pinData.description,
       });
     };

frontend/src/pages/SelectedTopic.tsx

@@ -32,7 +32,7 @@ const SelectedTopic = () => {
   const { navbarHighlights: __ } = useSetNavbarHighlight('');
 
   const getAndSetDataFromServer = async () => {
-    const data = await getApi<any>(
+    const data = await getApi<TopicInfoType[]>(
       'default',
       `/topics/ids?ids=${topicId?.split(',').join('&ids=')}`,
     );

frontend/src/types/MyInfo.ts

@@ -0,0 +1,4 @@
+export interface MyInfoType {
+  name: string;
+  email: string;
+}

frontend/src/types/Pin.ts

@@ -6,4 +6,5 @@ export interface PinType {
   latitude: string;
   longitude: string;
   updatedAt: string;
+  images: string[];
 }