[feat] #14 프로젝트 data 필터링해서 assignee 배열 받아오기

src/components/issue/InfoBox.tsx

@@ -4,27 +4,61 @@ import { useRecoilState } from 'recoil';
 import { modalState } from '@/recoil/state';
 import SelectAssignee from '../modal/SelectAssignee';
 import  usePatch from '@/hooks/usePatch';
-import { UpdateIssueInfo } from '@/types/type';
+import { UpdateIssueInfo, ProjectInfo } from '@/types/type';
+import { projectState } from '@/recoil/projectState';
+import { contributerId } from '../../recoil/state';
+import useFetchProject from '@/hooks/useFetchProject';
 interface InputProps {
     infoType: string;
     data: string;
     patchData: UpdateIssueInfo;
     isAssigned: number;
 }
 
+const fetchProjectData = (data:any):ProjectInfo=>({
+    projectId: data.projectId,
+    title: data.title,
+    adminName: data.adminName,
+    contributorNames: data.contributorNames
+
+})
+
 const InfoBox: React.FC<InputProps> = ({infoType, data, patchData, isAssigned}) => {
     const [isVisible, setVisiable] = useRecoilState(modalState);
     const [issueId, setIssueId] = useState<string|null>(null);
+    const [projectId, setProjectId] = useState<string|null>(null);
+    const [userId, setUserId] = useState<string|null>(null);
+
     const patchStatus = usePatch('issues/status', issueId ? Number(issueId) : 0)
 
+    const [projects, setProjects] = useRecoilState<ProjectInfo[]>(projectState);
+
+    const endpointP = '/projects';
+    const {dataP, loadingP, errorP, refetch} = useFetchProject<ProjectInfo>(endpointP, fetchProjectData, Number(userId));
+
     useEffect(() => {
         if (typeof window!== 'undefined'){
             setIssueId(localStorage.getItem('issueId'));
+            setProjectId(localStorage.getItem('projectId'));
+            setUserId(localStorage.getItem('userId'));
         }
-    }, [setIssueId]);
 
+        if (dataP) {
+            setProjects(dataP);
+        }
+
+    }, [dataP, setProjects, setIssueId, setProjectId]);
 
 
+    const contributerPerPj =  projects
+    ? (projects as ProjectInfo[])
+    .filter((item:ProjectInfo) => item.projectId===Number(projectId))
+    .map((item:ProjectInfo) => item.contributorNames) 
+    :[0, 1];
+
+    console.log(contributerPerPj);
+
+
     const handleAssignee = ()=>{
         setVisiable(true);
     }

src/hooks/useFetchProject.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { userIdState } from '@/recoil/userState';
 import { useRecoilState } from 'recoil';
+import { projectState } from '@/recoil/projectState';
 
 interface FetchResult<T>{
     dataP: T[] | null;
@@ -14,19 +15,22 @@ const [dataP, setData] = useState<T[] | null>(null);
 const [loadingP, setLoading] = useState<boolean>(false);
 const [errorP, setError] = useState<string | null>(null);
 const [userIdT, setUserId] = useRecoilState<number>(userIdState);
+const [projectData, setProjectData] = useRecoilState(projectState);
 
     const fetchData = useCallback(async () => {
         setLoading(true);
         try {
             const id = localStorage.getItem('userId');
             const url = new URL(`${process.env.NEXT_PUBLIC_API_BASE_URL}${endpoint}?userId=${id}`);
-
             const response = await fetch(url.toString());
+
+
         if (!response.ok) {
             throw new Error('Network response was not ok');
         }
         const result = await response.json();
         setData(result);
+        setProjectData(result);
         setError(null);
         console.log(result);
 

src/pages/project/index.tsx

@@ -2,8 +2,8 @@ import React, {useEffect, useState} from 'react';
 import styled from 'styled-components';
 import {useRouter} from 'next/router';
 import NewProject from '@/components/modal/NewProject';
-import { useRecoilState} from 'recoil';
-import { modalState } from '@/recoil/state';
+import { useRecoilState } from 'recoil';
+import { modalState, contributerName } from '@/recoil/state';
 import useFetchData from '@/hooks/useFetchData';
 import useFetchProject from '@/hooks/useFetchProject';
 import { User, ProjectInfo } from '@/types/type';
@@ -37,7 +37,6 @@ const Projects = () => {
 
 
 
-
     const handleModal = ()=>{
         setVisiable(true);
     }

src/recoil/projectState.ts

@@ -0,0 +1,7 @@
+import { atom, useRecoilState } from 'recoil';
+import { ProjectInfo } from '@/types/type';
+
+export const projectState = atom({
+    key: 'projectState',
+    default: [] as ProjectInfo[],
+});

src/recoil/state.ts

@@ -31,6 +31,11 @@ export const contributerName = atom<string[]>({
     default: []
 });
 
+export const contributerNamePerPj = atom<string[]>({
+    key: 'contributerNamePerPj',
+    default: []
+});
+
 export const contributerId = atom<number[]>({
     key: 'contributerId',
     default: []