#12 Add editInterests api

apis/myPage.ts

@@ -41,7 +41,6 @@ interface GetFollowListResponse {
   name: string;
 }
 
-
 export const getUserInfo = async (userId: number) => {
   const res = await request.get<GetUserInfoResponse>(
     `${uri.userInfo}/${userId}`,
@@ -129,8 +128,16 @@ export const getFollowingList = async () => {
   return res.data;
 };
 
-export const WithdrawalMember = async () => {
+export const withdrawalMember = async () => {
   const res = await request.delete(`${uri.withdrawal}`);
 
   return res;
 };
+
+export const updateInterests = async (interestCategories: number[]) => {
+  const res = await request.post(`${uri.editInterest}`, {
+    interest_categories: interestCategories,
+  });
+
+  return res;
+};

constants/interestCategory.ts

@@ -12,38 +12,47 @@ import {
 
 const INTERESTS_CATEGORIES = [
   {
+    id: 1,
     name: "패션",
     img: Fashion,
   },
   {
+    id: 2,
     name: "헬스",
     img: Health,
   },
   {
+    id: 3,
     name: "동물",
     img: Animal,
   },
   {
+    id: 4,
     name: "뷰티",
     img: Beauty,
   },
   {
+    id: 5,
     name: "요리",
     img: Cook,
   },
   {
+    id: 6,
     name: "상담",
     img: Consulting,
   },
   {
+    id: 7,
     name: "게임",
     img: Game,
   },
   {
+    id: 8,
     name: "스포츠",
     img: Sports,
   },
   {
+    id: 9,
     name: "음악",
     img: Music,
   },

constants/queryKey.ts

@@ -5,7 +5,6 @@ const enum queryKey {
   myAnswer = "my-answer",
   followerList = "follower-list",
   followingList = "following-list",
-  withdrawal = "withdrawal-member",
 }
 
 export default queryKey;

constants/uri.ts

@@ -6,7 +6,8 @@ const enum uri {
   answerVideos = "/user/answer/video",
   follwerList = "/follower",
   followingList = "/following",
-  withdrawal = "/user"
+  withdrawal = "/user",
+  editInterest = "/interests",
 }
 
 export default uri;

pages/editInterests.tsx

@@ -4,13 +4,18 @@ import { useState } from "react";
 
 const EditInterestsContainer = () => {
   const [buttonActive, setButtonActive] = useState<boolean>(false);
+  const [names, setNames] = useState<string[]>([]);
 
   return (
     <Container>
       <P1>관심있는 컨텐츠를 선택해보세요</P1>
       <P2>최대 3개까지 선택할 수 있어요</P2>
-      <ContentsLayout setButtonActive={setButtonActive} />
-      <CompleteButton buttonActive={buttonActive} />
+      <ContentsLayout
+        names={names}
+        setNames={setNames}
+        setButtonActive={setButtonActive}
+      />
+      <CompleteButton buttonActive={buttonActive} names={names} />
     </Container>
   );
 };

pages/myPage/setUp.tsx

@@ -5,10 +5,11 @@ import { useTheme } from "@emotion/react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { useMutation } from "react-query";
-import queryKey from "@constants/queryKey";
-import { WithdrawalMember } from "@apis/myPage";
+import { withdrawalMember } from "@apis/myPage";
 
 const SetUpContainer: FC = () => {
+  const useWithdrawalMember = useMutation(() => withdrawalMember());
+
   const theme = useTheme();
   const router = useRouter();
 
@@ -19,11 +20,7 @@ const SetUpContainer: FC = () => {
   const onContact = () => { };
   const onLogout = () => { }; // 토큰 지우고 메인으로.;
   const onWithdrawal = () => {
-    const { isLoading, isError } = useMutation(
-      [queryKey.withdrawal],
-      WithdrawalMember,
-    );
-    // 모달이 떠야할거같은디?
+    useWithdrawalMember.mutate();
   };
 
   return (

views/editInterests/CompleteButton.tsx

@@ -1,18 +1,48 @@
+import { updateInterests } from "@apis/myPage";
 import styled from "@emotion/styled";
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
+import { useMutation } from "react-query";
+import INTERESTS_CATEGORIES from "@constants/interestCategory";
 
 interface PropsType {
   buttonActive: boolean;
+  names: string[];
 }
 
-const CompleteButton: FC<PropsType> = ({ buttonActive }) => {
-  const 
-
+const CompleteButton: FC<PropsType> = ({ buttonActive, names }) => {
+  const useEditInterests = useMutation((interestsId: number[]) =>
+    updateInterests(interestsId));
+
+  const [interestsId, setInterestsId] = useState<number[]>([]);
+
+  useEffect(() => {
+    const a = INTERESTS_CATEGORIES.map((v) => {
+      if (names.includes(v.name)) {
+        return v.id;
+      }
+      return "";
+    });
+
+    setInterestsId(a.filter((v) => v !== ""));
+  }, [names]);
+
+  const onClick = () => {
+    useEditInterests.mutate(interestsId);
+  };
+
+  if (useEditInterests.isSuccess) {
+    alert("변경완료.");
+  }
+
   return (
-    <Container buttonActive={buttonActive} disabled={!buttonActive}>
+    <Container
+      buttonActive={buttonActive}
+      disabled={!buttonActive}
+      onClick={onClick}
+    >
       <Text>버튼</Text>
     </Container>
-  )
+  );
 };
 
 export default CompleteButton;

views/editInterests/ContentsLayout.tsx

@@ -1,19 +1,23 @@
 import styled from "@emotion/styled";
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect } from "react";
 import { ContentsItem } from "@views/editInterests";
 import INTERESTS_CATEGORIES from "@constants/interestCategory";
 
 interface PropsType {
   setButtonActive: React.Dispatch<React.SetStateAction<boolean>>;
+  names: string[];
+  setNames: React.Dispatch<React.SetStateAction<string[]>>;
 }
 
-const ContentsLayout: FC<PropsType> = ({ setButtonActive }) => {
-  const [names, setNames] = useState<string[]>([]);
-
+const ContentsLayout: FC<PropsType> = ({
+  setButtonActive,
+  names,
+  setNames,
+}) => {
   useEffect(() => {
     if (names.length >= 1) { setButtonActive(true); }
     else { setButtonActive(false); }
-  }, [names])
+  }, [names, setButtonActive]);
 
   const onClick = (index: number) => {
     const { name } = INTERESTS_CATEGORIES[index];