Feat/#58 admin api 연동

apps/admin/next.config.ts

@@ -1,7 +1,32 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
   /* config options here */
-};
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*.pstatic.net',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 't1.daumcdn.net',
+        pathname: '/**',
+      },
+      {
+        protocol: 'http',
+        hostname: 't1.daumcdn.net',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'blog.kakaocdn.net',
+        pathname: '/**',
+      },
+    ],
+  },
+}
 
-export default nextConfig;
+export default nextConfig

apps/admin/src/app/_api/services/request.ts

@@ -0,0 +1,8 @@
+import { API_PATH, BASE_URL } from '@/consts/path'
+import { Request } from '@/app/_api/types'
+
+export const getRequests = async (): Promise<Request[]> => {
+  const response = await fetch(BASE_URL + API_PATH.REQUEST.GET.LIST)
+  const { data: res } = await response.json()
+  return res
+}

apps/admin/src/app/_api/types.ts

@@ -1,8 +1,23 @@
 import type { IconType } from '@repo/ui/components/Icon'
+import { CampusType } from '@/consts/campus'
+
+export type Category = {
+  id: string
+  name: string
+  iconKey: IconType
+}
+
+export type Tag = {
+  id: string
+  name: string
+  iconKey: IconType
+}
 
 export type Request = {
   placeId: string
   placeName: string
-  icon: IconType
   requestDate: string
+  campus: CampusType
+  categories: Category[]
+  tags: Tag[]
 }

apps/admin/src/app/_components/RequestListItem/RequestListItem.tsx

@@ -8,7 +8,7 @@ import { Request } from '@/app/_api/types'
 export const RequestListItem = ({
   placeId,
   placeName,
-  icon,
+  categories,
   requestDate,
 }: Request) => (
   <li>
@@ -21,7 +21,7 @@ export const RequestListItem = ({
         <Text as={'span'} variant={'title2'}>
           {placeName}
         </Text>
-        <Icon type={icon} size={18} />
+        <Icon type={categories[0]?.iconKey || 'logo'} size={18} />
       </Flex>
       <Text variant={'caption2'} className={'text-gray-200'}>
         등록 신청 일자: {requestDate}

apps/admin/src/app/page.tsx

@@ -1,37 +1,36 @@
 import { VerticalScrollArea } from '@repo/ui/components/Layout'
 import { RequestsByCampus } from './_components/RequestsByCampus'
 import { OnlyLeftHeader } from '@repo/ui/components/Header'
-import type { Request } from './_api/types'
+import { getRequests } from '@/app/_api/services/request'
+import type { Request } from '@/app/_api/types'
 
-const MOCK_DATA: Request[] = [
-  {
-    placeId: '1',
-    placeName: '짬뽕집',
-    icon: 'chinese',
-    requestDate: '2025-10-29',
-  },
-  {
-    placeId: '2',
-    placeName: '짬뽕집',
-    icon: 'chinese',
-    requestDate: '2025-10-29',
-  },
-  {
-    placeId: '3',
-    placeName: '짬뽕집',
-    icon: 'chinese',
-    requestDate: '2025-10-29',
-  },
-]
+export default async function Home() {
+  const data = (await getRequests()) || []
+  const singwan: Request[] = []
+  const cheonan: Request[] = []
+  const yesan: Request[] = []
+
+  for (const request of data) {
+    switch (request.campus) {
+      case 'SINGWAN':
+        singwan.push(request)
+        break
+      case 'CHEONAN':
+        cheonan.push(request)
+        break
+      case 'YESAN':
+        yesan.push(request)
+        break
+    }
+  }
 
-export default function Home() {
   return (
     <>
       <OnlyLeftHeader icon={'logo'} name={'대기중'} />
       <VerticalScrollArea className={'gap-10 p-5'}>
-        <RequestsByCampus campus={'SINGWAN'} requestList={MOCK_DATA} />
-        <RequestsByCampus campus={'CHEANAN'} requestList={MOCK_DATA} />
-        <RequestsByCampus campus={'YESAN'} requestList={MOCK_DATA} />
+        <RequestsByCampus campus={'SINGWAN'} requestList={singwan} />
+        <RequestsByCampus campus={'CHEONAN'} requestList={cheonan} />
+        <RequestsByCampus campus={'YESAN'} requestList={yesan} />
       </VerticalScrollArea>
     </>
   )

apps/admin/src/app/requests/[id]/RequestDetailPage.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import { useDisclosure } from '@heroui/react'
+
+import { Header } from '@repo/ui/components/Header'
+import { Icon } from '@repo/ui/components/Icon'
+import { Text } from '@repo/ui/components/Text'
+import { Column, VerticalScrollArea } from '@repo/ui/components/Layout'
+import { Banner } from '@repo/ui/components/Banner'
+
+import type { RequestDetail } from './_api/types'
+import { CLIENT_PATH } from '@/consts/path'
+import { requestReview } from './_api/services/request'
+import { Location } from './_components/Location/Location'
+import { Menus } from './_components/Menus/Menus'
+import { Description } from './_components/Description'
+import { ActionButtonGroup } from './_components/ActionButtonGroup'
+import { RejectModal } from './_components/RejectModal'
+
+type Props = {
+  data: RequestDetail
+}
+
+export const RequestDetailPage = ({ data }: Props) => {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure()
+  const { back, replace } = useRouter()
+  const { placeId, placeName, menus, description, tags, photos, location } =
+    data
+
+  const handleReview = async (rejectedReason?: string) => {
+    const status = rejectedReason ? 'REJECTED' : 'APPROVED'
+    const reason = rejectedReason ?? null // rejectedReason이 있으면 그 값을, 없으면 null을 사용
+
+    await requestReview(placeId, {
+      status,
+      rejectedReason: reason,
+    })
+
+    alert('완료했슈~')
+    replace(CLIENT_PATH.MAIN)
+  }
+
+  return (
+    <>
+      <Header
+        left={
+          <button onClick={back}>
+            <Icon type={'arrowLeft'} />
+          </button>
+        }
+        center={<Text variant={'heading2'}>{placeName}</Text>}
+      />
+      <VerticalScrollArea className={'flex-1 py-5'}>
+        {photos.length > 0 && (
+          <Banner
+            contents={photos.map((photo) => (
+              <Image
+                key={photo.displayOrder}
+                src={photo.photoUrl}
+                alt='place-photo'
+                width={450}
+                height={180}
+                className={'max-h-[180px] object-contain'}
+              />
+            ))}
+            minHeight={180}
+            showIndicator={true}
+          />
+        )}
+        <Column className={'flex-1 justify-around gap-4 px-5'}>
+          <Location location={location} />
+          <Menus menus={menus} />
+          <Description description={description} tags={tags} />
+          <ActionButtonGroup onOpen={onOpen} handleReview={handleReview} />
+        </Column>
+      </VerticalScrollArea>
+      <RejectModal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        handleReview={handleReview}
+      />
+    </>
+  )
+}