3 files changed, 225 insertions, 0 deletions
diff --git a/app/[lng]/evcp/(evcp)/budgetary-ship/[id]/layout.tsx b/app/[lng]/evcp/(evcp)/budgetary-ship/[id]/layout.tsx
new file mode 100644
index 00000000..f2b2fa53
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/budgetary-ship/[id]/layout.tsx
@@ -0,0 +1,82 @@
+import { Metadata } from "next"
+import Link from "next/link"
+import { ArrowLeft } from "lucide-react"
+import { Separator } from "@/components/ui/separator"
+import { SidebarNav } from "@/components/layout/sidebar-nav"
+import { RfqViewWithItems } from "@/db/schema/rfq"
+import { findRfqById } from "@/lib/rfqs-ship/service"
+import { formatDate } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+export const metadata: Metadata = {
+  title: "Vendor Detail",
+}
+
+export default async function RfqLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: { lng: string, id: string }
+}) {
+  
+  // 1) URL 파라미터에서 id 추출, Number로 변환
+  const resolvedParams = await params
+  const lng = resolvedParams.lng
+  const id = resolvedParams.id
+  
+  const idAsNumber = Number(id)
+  // 2) DB에서 해당 협력업체 정보 조회
+  const rfq: RfqViewWithItems | null = await findRfqById(idAsNumber)
+  
+  // 3) 사이드바 메뉴
+  const sidebarNavItems = [
+    {
+      title: "Vendors & CBE",
+      href: `/${lng}/evcp/budgetary/${id}`,
+    },
+  ]
+  
+  return (
+    <>
+      <div className="container py-6">
+        <section className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
+          <div className="hidden space-y-6 p-10 pb-16 md:block">
+            {/* RFQ 목록으로 돌아가는 링크 추가 */}
+            <div className="flex items-center justify-end mb-4">
+              <Link href={`/${lng}/evcp/budgetary`} passHref>
+                <Button variant="ghost" className="flex items-center text-primary hover:text-primary/80 transition-colors p-0 h-auto">
+                  <ArrowLeft className="mr-1 h-4 w-4" />
+                  <span>Budgetary Quote 목록으로 돌아가기</span>
+                </Button>
+              </Link>
+            </div>
+            
+            <div className="space-y-0.5">
+              {/* 4) 협력업체 정보가 있으면 코드 + 이름 + "상세 정보" 표기 */}
+              <h2 className="text-2xl font-bold tracking-tight">
+                {rfq
+                  ? `${rfq.projectCode ?? ""} ${rfq.rfqCode ?? ""} 관리`
+                  : "Loading RFQ..."}
+              </h2>
+              
+              <p className="text-muted-foreground">
+                {rfq
+                  ? `${rfq.description ?? ""} ${rfq.lines.map(line => line.itemCode).join(", ")}`
+                  : ""}
+              </p>
+              <h3>Due Date:{rfq && rfq?.dueDate && <strong>{formatDate(rfq?.dueDate)}</strong>}</h3>
+            </div>
+            <Separator className="my-6" />
+            <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
+              <aside className="lg:w-64 flex-shrink-0">
+                <SidebarNav items={sidebarNavItems} />
+              </aside>
+              <div className="lg:w-[calc(100%-16rem)] overflow-auto">{children}</div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </>
+  )
+}
+\ No newline at end of file
diff --git a/app/[lng]/evcp/(evcp)/budgetary-ship/[id]/page.tsx b/app/[lng]/evcp/(evcp)/budgetary-ship/[id]/page.tsx
new file mode 100644
index 00000000..0dfc578e
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/budgetary-ship/[id]/page.tsx
@@ -0,0 +1,57 @@
+import { Separator } from "@/components/ui/separator"
+import { type SearchParams } from "@/types/table"
+import { getValidFilters } from "@/lib/data-table"
+import { getMatchedVendors } from "@/lib/rfqs-ship/service"
+import { searchParamsMatchedVCache } from "@/lib/rfqs-ship/validations"
+import { MatchedVendorsTable } from "@/lib/rfqs-ship/vendor-table/vendors-table"
+import { RfqType } from "@/lib/rfqs-ship/validations"
+
+interface IndexPageProps {
+  // Next.js 13 App Router에서 기본으로 주어지는 객체들
+  params: {
+    lng: string
+    id: string
+  }
+  searchParams: Promise<SearchParams>
+  rfqType: RfqType
+}
+
+export default async function RfqPage(props: IndexPageProps) {
+  const resolvedParams = await props.params
+  const id = resolvedParams.id
+  const rfqType = props.rfqType ?? RfqType.BUDGETARY  // rfqType이 없으면 BUDGETARY로 설정
+
+  const idAsNumber = Number(id)
+
+  // 2) SearchParams 파싱 (Zod)
+  const searchParams = await props.searchParams
+  const search = searchParamsMatchedVCache.parse(searchParams)
+  const validFilters = getValidFilters(search.filters)
+
+  const promises = Promise.all([
+    getMatchedVendors({
+      ...search,
+      filters: validFilters,
+    },
+    idAsNumber)
+  ])
+
+  // 4) 렌더링
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium">
+          Vendors & CBE
+        </h3>
+        <p className="text-sm text-muted-foreground">
+          등록된 협력업체 중에서 이 RFQ 아이템에 매칭되는 업체를 선택하고 바로 CBE(상업적 견적) 요청을 발송할 수 있습니다. <br/>
+          벤더를 선택한 후 &quot;CBE 요청&quot; 버튼을 클릭하면 첨부파일과 함께 CBE 요청이 해당 업체에 바로 발송됩니다.
+        </p>
+      </div>
+      <Separator />
+      <div>
+        <MatchedVendorsTable promises={promises} rfqId={idAsNumber} rfqType={rfqType}/>
+      </div>
+    </div>
+  )
+}
+\ No newline at end of file
diff --git a/app/[lng]/evcp/(evcp)/budgetary-ship/page.tsx b/app/[lng]/evcp/(evcp)/budgetary-ship/page.tsx
new file mode 100644
index 00000000..baa2bdf9
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/budgetary-ship/page.tsx
@@ -0,0 +1,86 @@
+import * as React from "react"
+import { type SearchParams } from "@/types/table"
+
+import { getValidFilters } from "@/lib/data-table"
+import { Skeleton } from "@/components/ui/skeleton"
+import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"
+import { Shell } from "@/components/shell"
+
+import { searchParamsCache } from "@/lib/rfqs-ship/validations"
+import { getRfqs, getRfqStatusCounts } from "@/lib/rfqs-ship/service"
+import { RfqsTable } from "@/lib/rfqs-ship/table/rfqs-table"
+import { getAllItems } from "@/lib/items/service"
+import { RfqType } from "@/lib/rfqs-ship/validations"
+import { Ellipsis } from "lucide-react"
+
+interface RfqPageProps {
+  searchParams: Promise<SearchParams>;
+  rfqType: RfqType;
+  title: string;
+  description: string;
+}
+
+export default async function RfqPage({ 
+  searchParams, 
+  rfqType = RfqType.BUDGETARY, 
+  title = "Budgetary Quote", 
+  description = "Budgetary Quote를 등록하여 요청 및 응답을 관리할 수 있습니다."
+}: RfqPageProps) {
+  const search = searchParamsCache.parse(await searchParams)
+  
+  const validFilters = getValidFilters(search.filters)
+  
+  const promises = Promise.all([
+    getRfqs({
+      ...search,
+      filters: validFilters,
+      rfqType // 전달받은 rfqType 사용
+    }),
+    getRfqStatusCounts(rfqType), // rfqType 전달
+    getAllItems()
+  ])
+  
+  return (
+    <Shell className="gap-2">
+      <div className="flex items-center justify-between space-y-2">
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <h2 className="text-2xl font-bold tracking-tight">
+              {title}
+            </h2>
+            <p className="text-muted-foreground">
+              {description}
+              기본적인 정보와 RFQ를 위한 아이템 등록 및 첨부를 한 후, 
+              <span className="inline-flex items-center whitespace-nowrap">
+                <Ellipsis className="size-3" />
+                <span className="ml-1">버튼</span>
+              </span> 을 클릭하면 "Proceed"를 통해 상세화면으로 이동하여 진행할 수 있습니다. 
+            </p>
+          </div>
+        </div>
+      </div>
+      
+      <React.Suspense fallback={<Skeleton className="h-7 w-52" />}>
+        {/* <DateRangePicker
+            triggerSize="sm"
+            triggerClassName="ml-auto w-56 sm:w-60"
+            align="end"
+            shallow={false}
+          /> */}
+      </React.Suspense>
+      <React.Suspense
+        fallback={
+          <DataTableSkeleton
+            columnCount={6}
+            searchableColumnCount={1}
+            filterableColumnCount={2}
+            cellWidths={["10rem", "40rem", "12rem", "12rem", "8rem", "8rem"]}
+            shrinkZero
+          />
+        }
+      >
+        <RfqsTable promises={promises} rfqType={rfqType} />
+      </React.Suspense>
+    </Shell>
+  )
+}
+\ No newline at end of file