add : 주차셀렉터 추가(#29)

src/apis/trackWeek.ts

@@ -17,6 +17,7 @@ interface updateTrackWeekProps {
 // 모든 주차 가져오기
 export const getTrackWeeks = async (trackId: number) => {
   try {
+    console.log(trackId);
     const response = await axios.get(
       `${process.env.NEXT_PUBLIC_SERVER_URL}/tracks/${trackId}/weeks`,
       {

src/app/admin/teambuilding/page.tsx

@@ -13,6 +13,7 @@ import StudentInfo from '@/components/admin/student/StudentInfo';
 import Team from '@/components/admin/teambuilding/Team';
 import { Button } from '@nextui-org/react';
 import TrackSelector from '@/components/admin/TrackSelector';
+import WeekSelector from '@/components/admin/WeekSelector';
 
 type TItemStatus = 'todo' | 'doing';
 
@@ -121,7 +122,7 @@ export default function TeamBuildingPage() {
 
   return (
     <>
-      <TrackSelector />
+      <WeekSelector />
       <Button>조회</Button>
       <Button>팀추가</Button>
       <Button>저장</Button>

src/components/admin/WeekSelector.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { getTrackWeeks } from '@/apis/trackWeek';
+import { tracksWeekInfo } from '@/types/types';
+import useStore from '@/zustand/store';
+import { Select, SelectItem } from '@nextui-org/react';
+import { useQuery } from '@tanstack/react-query';
+import React, { useState } from 'react';
+
+const WeekSelector = () => {
+  const { setTrackWeek, selectedTrackWeek } = useStore((state) => state);
+
+  const { selectedTrack } = useStore((state) => state);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['allTrackWeeks'],
+    queryFn: () => getTrackWeeks(selectedTrack?.trackId!),
+  });
+
+  console.log(data);
+
+  if (isLoading) {
+    return <p>로딩중...</p>;
+  }
+
+  return (
+    <Select
+      placeholder='주차선택'
+      aria-label='week-selector'
+      onChange={(e) => {
+        console.log('여기', e.target.value);
+        let targetName = e.target.value;
+        const result = data.payload.find(
+          (trackWeek: tracksWeekInfo) => trackWeek.weekName === targetName,
+        );
+        console.log(result);
+
+        setTrackWeek(result);
+      }}
+      selectedKeys={[selectedTrackWeek!]}
+    >
+      {data.payload.map((trackWeek: tracksWeekInfo) => (
+        <SelectItem key={trackWeek.weekName}>{trackWeek.weekName}</SelectItem>
+      ))}
+    </Select>
+  );
+};
+
+export default WeekSelector;

src/zustand/store.ts

@@ -6,15 +6,19 @@ interface Store {
     trackId: number;
     trackName: string;
   } | null;
+  selectedTrackWeek: number | null; // 새로운 속성 추가
   setTrack: (track: { trackId: number; trackName: string }) => void;
+  setTrackWeek: (week: number) => void; // 새로운 액션 추가
 }
 
 const useStore = create<Store>()(
   devtools(
     persist(
       (set) => ({
         selectedTrack: { trackId: 99, trackName: 'placeholder track' },
+        selectedTrackWeek: 9999, // 초기값 설정
         setTrack: (track) => set({ selectedTrack: track }),
+        setTrackWeek: (week) => set({ selectedTrackWeek: week }), // 액션 구현
       }),
       // localStorage key 이름
       { name: 'selectedTrack' },