Merge pull request #61 from prgrms-fe-devcourse/feat/UserList

[Feat/userList] 유저 리스트 모달창 토글 기능 및 유저 리스트 기능 추가

Author: NohYeonggwon

src/components/UserList.tsx

@@ -1,13 +1,27 @@
 import { ChevronDown } from "lucide-react";
 import UserListCard from "./UserListCard";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useUserStore } from "../stores/userListStore";
+import { useLocation } from "react-router";
 
 export default function UserList() {
 	const [isOpen, setIsOpen] = useState(false);
+	const location = useLocation();
+	const { userList, fetchUsers } = useUserStore();
+
+	// 페이지 이동 시 자동으로 닫기
+	useEffect(() => {
+		setIsOpen(false);
+	}, [location.pathname]);
+
+	useEffect(() => {
+		fetchUsers();
+	}, [fetchUsers]);
+
 	/* 필요한 정보 */
 	/* 프로필 이미지, 이름, 소속, 학년(전공 과목), auth_id */
 	return (
-		<div className="absolute left-10 bottom-0 w-80 bg-white rounded-t-xl flex flex-col">
+		<div className="absolute left-10 bottom-0 w-90 bg-white rounded-t-xl flex flex-col">
 			{/* 헤더 */}
 			<div
 				className="cursor-pointer flex flex-row justify-between items-center px-5 py-3 w-full bg-violet-500 rounded-t-xl"
@@ -25,21 +39,14 @@ export default function UserList() {
 
 			{/* 슬라이딩 리스트 */}
 			<div
-				className={`pt-2 overflow-hidden transition-all duration-500 ease-in-out ${
-					isOpen ? "max-h-160" : "max-h-0"
+				className={` transition-all duration-500 ease-in-out pb-4 ${
+					isOpen ? "h-160 overflow-y-auto" : "h-0 overflow-y-hidden"
 				}`}
 			>
 				<div className="flex flex-col">
-					<UserListCard />
-					<UserListCard />
-					<UserListCard />
-					<UserListCard />
-					<UserListCard />
-					<UserListCard />
-					<UserListCard />
-					<UserListCard />
-					<UserListCard />
-					<UserListCard />
+					{userList.map((user) => (
+						<UserListCard key={user.auth_id} user={user} />
+					))}
 				</div>
 			</div>
 		</div>

src/components/UserListCard.tsx

@@ -1,9 +1,20 @@
 import { Link } from "react-router";
+import { getAge } from "../utils/getAge";
+import { getGrade } from "../utils/getGrade";
+
+export default function UserListCard({ user }: { user: User }) {
+	const age = user.birth_date ? getAge(user.birth_date) : 0;
+	const grade = user.role === "student" && getGrade(age);
+
+	const roleMap: Record<string, string> = {
+		student: "학생",
+		teacher: "선생님",
+		parent: "학부모",
+	};
 
-export default function UserListCard() {
 	return (
 		<>
-			<Link to={`/profile/해당 프로필 유저 Id`}>
+			<Link to={`/profile/${user.auth_id}`}>
 				<div className="flex flex-row justify-between items-center py-4 px-5 hover:bg-[#F1F3F5]">
 					{/* left */}
 					<div className="flex flex-row items-center gap-2.5">
@@ -17,9 +28,13 @@ export default function UserListCard() {
 						{/* 정보 */}
 						<div className="flex flex-col gap-1 text-sm">
 							{/* 이름 */}
-							<div>홍길동</div>
+							<div className="line-clamp-1">{user.nickname}</div>
 							{/* 소속, 학년 (선생님은 전공) */}
-							<div>학생, 3학년</div>
+							<div>
+								{roleMap[user.role] || "알 수 없음"}
+								{user.role === "student" && `, ${grade}`}{" "}
+								{user.role === "teacher" && `, ${user.major}`}
+							</div>
 						</div>
 					</div>
 					{/* right */}

src/stores/userListStore.ts

@@ -0,0 +1,28 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+import supabase from "../utils/supabase";
+
+type UserListState = {
+	userList: User[];
+	// fetchUsers: 전체 유저 리스트 가져오기
+	fetchUsers: () => Promise<void>;
+};
+
+export const useUserStore = create<UserListState>()(
+	immer((set) => ({
+		userList: [],
+		// 전체 유저 리스트 가져오기
+		fetchUsers: async () => {
+			try {
+				const { data, error } = await supabase
+					.from("users")
+					.select("*");
+				if (error) throw error;
+
+				set({ userList: data || [] });
+			} catch (err) {
+				console.error("유저 목록 로딩 오류:", err);
+			}
+		},
+	})),
+);

src/types/user.d.ts

@@ -0,0 +1,8 @@
+type User = {
+	auth_id: string;
+	nickname: string;
+	online?: string;
+	role: string;
+	birth_date?: Date;
+	major?: string;
+};