Merge pull request #102 from Team-Blitz-Steady/feat/#96/applicant

[Feat] - 신청자 목록 및 답변 열람 페이지 1차 구현

src/app/(steady)/steady/applicant/[id]/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Question } from "@/components/application";
+
+const Application = {
+  id: "2", // 신청서 ID
+  item: [
+    {
+      question: "당신의 이름은?",
+      answer: "지윤",
+    },
+    {
+      question: "당신의 나이는?",
+      answer: "14",
+    },
+    {
+      question: "당신의 성별은?",
+      answer: "여",
+    },
+  ],
+};
+
+const ApplicantPage = () => {
+  return (
+    <div className="flex w-full flex-col gap-10">
+      {Application.item.map((item, id) => (
+        <Question
+          key={id}
+          question={item.question}
+          index={id}
+        >
+          <div className="h-100 w-full border-1 border-st-gray-100">
+            {item.answer}
+          </div>
+        </Question>
+      ))}
+    </div>
+  );
+};
+
+export default ApplicantPage;

src/app/(steady)/steady/applicant/layout.tsx

@@ -0,0 +1,79 @@
+import { Separator } from "@radix-ui/themes";
+import Button, { buttonSize } from "@/components/_common/Button";
+import { AlertModal } from "@/components/_common/Modal";
+import SideBar from "@/components/_common/SideBar";
+
+const applicants = [
+  {
+    id: "1",
+    label: "신청자1",
+    href: "/steady/applicant/1",
+  },
+  {
+    id: "2",
+    label: "신청자2",
+    href: "/steady/applicant/1",
+  },
+  {
+    id: "3",
+    label: "신청자3",
+    href: "/steady/applicant/1",
+  },
+  {
+    id: "4",
+    label: "신청자1",
+    href: "/steady/applicant/1",
+  },
+];
+
+const ApplicantLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="flex w-full flex-col gap-30">
+      <div className="text-30 font-bold">신청자 목록</div>
+      <Separator className="h-5 w-auto bg-st-gray-400" />
+      <div className="flex w-full flex-row gap-30">
+        <div className="w-fit">
+          <SideBar
+            listType="applicant"
+            sidebarItems={applicants}
+            className="scrollbar-hide"
+          />
+        </div>
+        {children}
+      </div>
+      <Separator className="h-5 w-auto bg-st-gray-400" />
+      <div className="flex justify-end gap-10">
+        <AlertModal
+          trigger={
+            <Button className={`${buttonSize.sm} bg-st-red text-st-white`}>
+              거절
+            </Button>
+          }
+          actionButton={
+            <Button className={`${buttonSize.sm} bg-st-red text-st-white`}>
+              거절
+            </Button>
+          }
+        >
+          <div className="text-18 font-bold">거절 하시겠습니까?</div>
+        </AlertModal>
+        <AlertModal
+          trigger={
+            <Button className={`${buttonSize.sm} bg-st-green text-st-white`}>
+              승인
+            </Button>
+          }
+          actionButton={
+            <Button className={`${buttonSize.sm} bg-st-green text-st-white`}>
+              승인
+            </Button>
+          }
+        >
+          <div className="text-18 font-bold">승인 하시겠습니까?</div>
+        </AlertModal>
+      </div>
+    </div>
+  );
+};
+
+export default ApplicantLayout;

src/components/_common/SideBar/index.tsx

@@ -3,6 +3,7 @@
 import type { ReactNode } from "react";
 import { useState } from "react";
 import Link from "next/link";
+import { cn } from "@/lib/utils";
 import { Box } from "@radix-ui/themes";
 
 interface SideBarItem {
@@ -15,16 +16,25 @@ interface SideBarProps {
   children?: ReactNode;
   sidebarItems: SideBarItem[];
   listType?: string;
+  className?: string;
 }
 
-const SideBar = ({ children, sidebarItems, listType }: SideBarProps) => {
+const SideBar = ({
+  children,
+  sidebarItems,
+  listType,
+  className,
+}: SideBarProps) => {
   const [selectedItem, setSelectedItem] = useState(0);
 
   return (
     <Box
-      className={`${
-        listType === "mypage" ? "h-814 w-300" : "h-900 w-250"
-      } flex flex-col items-center gap-15 rounded-20 border-1 border-solid border-st-gray-100 p-20`}
+      className={cn(
+        `${
+          listType === "mypage" ? "h-814 w-300" : "h-900 w-250"
+        } flex flex-col items-center gap-15 overflow-y-auto overflow-x-hidden rounded-20 border-1 border-solid border-st-gray-100 p-20`,
+        className,
+      )}
     >
       {sidebarItems.map((item, id) => (
         <Link

src/components/application/Title.tsx

@@ -3,7 +3,7 @@ import { Separator } from "@radix-ui/themes";
 
 interface TitleProps {
   title: string;
-  pageType: string;
+  pageType?: string;
 }
 
 const Title = ({