Merge pull request #60 from prgrms-fe-devcourse/style/UserList

[style/UserList] 유저 리스트 퍼블리싱

Author: NohYeonggwon

src/components/UserList.tsx

@@ -0,0 +1,47 @@
+import { ChevronDown } from "lucide-react";
+import UserListCard from "./UserListCard";
+import { useState } from "react";
+
+export default function UserList() {
+	const [isOpen, setIsOpen] = useState(false);
+	/* 필요한 정보 */
+	/* 프로필 이미지, 이름, 소속, 학년(전공 과목), auth_id */
+	return (
+		<div className="absolute left-10 bottom-0 w-80 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"
+				onClick={() => setIsOpen(!isOpen)}
+			>
+				<h3 className="text-lg text-white font-bold">온라인 사용자</h3>
+				<ChevronDown
+					className={`text-white transition-transform duration-300 ${
+						isOpen ? "rotate-0" : "rotate-180"
+					}`}
+					size={28}
+					strokeWidth={3}
+				/>
+			</div>
+
+			{/* 슬라이딩 리스트 */}
+			<div
+				className={`pt-2 overflow-hidden transition-all duration-500 ease-in-out ${
+					isOpen ? "max-h-160" : "max-h-0"
+				}`}
+			>
+				<div className="flex flex-col">
+					<UserListCard />
+					<UserListCard />
+					<UserListCard />
+					<UserListCard />
+					<UserListCard />
+					<UserListCard />
+					<UserListCard />
+					<UserListCard />
+					<UserListCard />
+					<UserListCard />
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/UserListCard.tsx

@@ -0,0 +1,38 @@
+import { Link } from "react-router";
+
+export default function UserListCard() {
+	return (
+		<>
+			<Link to={`/profile/해당 프로필 유저 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">
+						{/* 이미지 */}
+						<div className="relative w-12 h-12 bg-amber-300 rounded-lg">
+							{/* 온라인 */}
+							<div className="absolute right-0 bottom-0 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></div>
+							{/* 오프라인 */}
+							{/* <div className="absolute right-0 bottom-0 w-4 h-4 bg-gray-400 rounded-full border-2 border-white"></div> */}
+						</div>
+						{/* 정보 */}
+						<div className="flex flex-col gap-1 text-sm">
+							{/* 이름 */}
+							<div>홍길동</div>
+							{/* 소속, 학년 (선생님은 전공) */}
+							<div>학생, 3학년</div>
+						</div>
+					</div>
+					{/* right */}
+					<div className="space-x-2 text-xs">
+						<button className="cursor-pointer px-2 py-1 bg-violet-500 text-white rounded hover:bg-violet-600">
+							팔로우
+						</button>
+						<button className="cursor-pointer px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">
+							메시지
+						</button>
+					</div>
+				</div>
+			</Link>
+		</>
+	);
+}

src/layouts/MainLayout.tsx

@@ -1,6 +1,7 @@
 import { Outlet } from "react-router";
 import Header from "../components/layout/Header";
 import Footer from "../components/layout/Footer";
+import UserList from "../components/UserList";
 
 export default function MainLayout() {
 	return (
@@ -11,13 +12,15 @@ export default function MainLayout() {
 				<Header />
 
 				{/* 스크롤 영역 */}
-				<main className="overflow-y-auto bg-[#F3F4F6] flex flex-col items-center h-[calc(100vh-70px)]">
+				<main className="relative overflow-y-auto bg-[#F3F4F6] flex flex-col items-center h-[calc(100vh-70px)]">
 					<div className="min-h-[calc(100%)]">
 						<div className="min-h-[calc(100%-90px)] pt-10">
 							<Outlet />
 						</div>
 						<Footer />
 					</div>
+					{/* 유저 리스트 모달 */}
+					<UserList />
 				</main>
 			</div>
 		</>