Feat/#48 admin 관련 메인 페이지 및 등록 조회 상세 페이지 UI 작업

apps/admin/package.json

@@ -14,7 +14,11 @@
     "react": "catalog:",
     "react-dom": "catalog:",
     "next": "catalog:",
-    "@repo/ui": "workspace:*"
+    "@heroui/react": "catalog:",
+    "@heroui/system": "catalog:",
+    "@heroui/theme": "catalog:",
+    "@repo/ui": "workspace:*",
+    "react-naver-maps": "catalog:"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "catalog:",
@@ -26,6 +30,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@tailwindcss/postcss": "catalog:",
+    "@types/navermaps": "catalog:",
     "postcss": "catalog:",
     "tailwindcss":"catalog:",
     "autoprefixer": "catalog:",

apps/admin/src/app/NaverMapProvider.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { NavermapsProvider } from 'react-naver-maps'
+import { ReactNode } from 'react'
+
+export const NaverMapProvider = ({ children }: { children: ReactNode }) => {
+  const ncpKeyId = process.env.NEXT_PUBLIC_NAVER_MAP_ID || ''
+
+  return <NavermapsProvider ncpKeyId={ncpKeyId}>{children}</NavermapsProvider>
+}

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

@@ -0,0 +1,8 @@
+import type { IconType } from '@repo/ui/components/Icon'
+
+export type Request = {
+  placeId: string
+  placeName: string
+  icon: IconType
+  requestDate: string
+}

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

@@ -0,0 +1,31 @@
+import { Column, Flex } from '@repo/ui/components/Layout'
+import { cn } from '@repo/ui/utils/cn'
+import { Text } from '@repo/ui/components/Text'
+import { Icon } from '@repo/ui/components/Icon'
+import { CLIENT_PATH } from '@/consts/path'
+import { Request } from '@/app/_api/types'
+
+export const RequestListItem = ({
+  placeId,
+  placeName,
+  icon,
+  requestDate,
+}: Request) => (
+  <li>
+    <Column
+      as={'a'}
+      href={CLIENT_PATH.REQUEST_DETAIL(placeId)}
+      className={cn('gap-1', 'py-3.5', 'border-b-1 border-gray-50')}
+    >
+      <Flex className={'gap-1'}>
+        <Text as={'span'} variant={'title2'}>
+          {placeName}
+        </Text>
+        <Icon type={icon} size={18} />
+      </Flex>
+      <Text variant={'caption2'} className={'text-gray-200'}>
+        등록 신청 일자: {requestDate}
+      </Text>
+    </Column>
+  </li>
+)

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

@@ -0,0 +1 @@
+export { RequestListItem } from './RequestListItem'

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

@@ -0,0 +1,23 @@
+import { Column } from '@repo/ui/components/Layout'
+import { Text } from '@repo/ui/components/Text'
+import { CAMPUS, type CampusType } from '@/consts/campus'
+import { RequestListItem } from '@/app/_components/RequestListItem'
+import { Request } from '@/app/_api/types'
+
+type Props = {
+  campus: CampusType
+  requestList: Request[]
+}
+
+export const RequestsByCampus = ({ campus, requestList }: Props) => (
+  <Column as={'section'} className={'gap-1'}>
+    <Text variant={'heading2'} className={'text-main'}>
+      {CAMPUS[campus]}캠
+    </Text>
+    <ul>
+      {requestList.map((request) => (
+        <RequestListItem key={request.placeName} {...request} />
+      ))}
+    </ul>
+  </Column>
+)

apps/admin/src/app/_components/RequestsByCampus/index.tsx

@@ -0,0 +1 @@
+export { RequestsByCampus } from './RequestsByCampus'

apps/admin/src/app/globals.css

@@ -1,2 +1,4 @@
 @import "tailwindcss";
-@import "@repo/tailwind-config";
+@import "@repo/tailwind-config";
+@plugin './hero.ts';
+@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';

apps/admin/src/app/hero.ts

@@ -0,0 +1,4 @@
+import { heroui } from '@heroui/theme'
+import type { Config } from 'tailwindcss'
+
+export default heroui() as Config

apps/admin/src/app/layout.tsx

@@ -1,34 +1,39 @@
 import './globals.css'
 import '@repo/ui/styles.css'
 import type { Metadata } from 'next'
-import { Geist, Geist_Mono } from 'next/font/google'
-
-const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
-})
-
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
-})
+import localFont from 'next/font/local'
+import { HeroUIProvider } from '@heroui/system'
+import { Column } from '@repo/ui/components/Layout'
+import { NaverMapProvider } from '@/app/NaverMapProvider'
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 }
 
+const pretendard = localFont({
+  src: '../../public/fonts/PretendardVariable.woff2',
+  display: 'swap',
+  weight: '45 920',
+})
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
   return (
-    <html lang='en'>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang='ko' suppressHydrationWarning={true}>
+      <body className={pretendard.className}>
+        <HeroUIProvider>
+          <NaverMapProvider>
+            <div className={'flex h-svh justify-center bg-[#FEFCF9]'}>
+              <Column className={'relative w-full max-w-[450px] bg-white'}>
+                {children}
+              </Column>
+            </div>
+          </NaverMapProvider>
+        </HeroUIProvider>
       </body>
     </html>
   )

apps/admin/src/app/page.tsx

@@ -1,12 +1,38 @@
-import { Column } from '@repo/ui/components/Layout'
-import { Text } from '@repo/ui/components/Text'
-import { Button } from '@repo/ui/components/Button'
+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'
+
+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 function Home() {
   return (
-    <Column>
-      <Text variant={'heading1'}>Hello World!</Text>
-      <Button size={'medium'}>버튼</Button>
-    </Column>
+    <>
+      <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} />
+      </VerticalScrollArea>
+    </>
   )
 }

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

@@ -0,0 +1,82 @@
+'use client'
+
+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 { Location } from './_components/Location/Location'
+import { Menus } from './_components/Menus/Menus'
+import { Description } from './_components/Description'
+import { ActionButtonGroup } from './_components/ActionButtonGroup'
+import { useDisclosure } from '@heroui/react'
+import { RejectModal } from '@/app/request/[id]/_components/RejectModal'
+import { useRouter } from 'next/navigation'
+
+export const RequestDetailPage = () => {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure()
+  const { back } = useRouter()
+
+  return (
+    <>
+      <Header
+        left={
+          <button onClick={back}>
+            <Icon type={'arrowLeft'} />
+          </button>
+        }
+        center={<Text variant={'heading2'}>우돈탄 다산본점</Text>}
+      />
+      <VerticalScrollArea className={'flex-1 py-5'}>
+        <Banner contents={[]} />
+        <Column className={'flex-1 justify-around gap-4 px-5'}>
+          <Location />
+          <Menus
+            menus={[
+              {
+                name: '짬뽕',
+                price: 20000,
+                isRecommended: false,
+              },
+              {
+                name: '짬뽕',
+                price: 20000,
+                isRecommended: false,
+              },
+              {
+                name: '짬뽕',
+                price: 20000,
+                isRecommended: false,
+              },
+              {
+                name: '짬뽕',
+                price: 20000,
+                isRecommended: false,
+              },
+              {
+                name: '짬뽕',
+                price: 20000,
+                isRecommended: false,
+              },
+              {
+                name: '짬뽕',
+                price: 20000,
+                isRecommended: false,
+              },
+            ]}
+          />
+          <Description
+            description={
+              '직원이 엄청 친절해요! 👍🏻\n' +
+              '근데 화장실에 좁고 냄새나요 ㅠㅠ\n' +
+              '그래도 짬뽕 양도 많고 불맛 나서 괜춘'
+            }
+          />
+          <ActionButtonGroup onOpen={onOpen} />
+        </Column>
+      </VerticalScrollArea>
+      <RejectModal isOpen={isOpen} onOpenChange={onOpenChange} />
+    </>
+  )
+}

apps/admin/src/app/request/[id]/_api/types.ts

@@ -0,0 +1,31 @@
+import type { IconType } from '@repo/ui/components/Icon'
+import { Coord } from '../_utils/toLatLng'
+
+type Photo = { photoId: string; photoUrl: string; displayOrder: number }
+
+type Menu = { name: string; price: number; isRecommended: boolean }
+
+type Category = {
+  id: string
+  name: string
+  iconKey: IconType
+}
+
+type Tag = {
+  id: string
+  name: string
+  iconKey: IconType
+}
+
+export type RequestDetail = {
+  placeId: string
+  placeName: string
+  requestDate: string
+  photos: Photo[]
+  address: string
+  location: Coord
+  description: string
+  menus: Menu[]
+  categories: Category[]
+  tags: Tag[]
+}

apps/admin/src/app/request/[id]/_components/ActionButtonGroup/ActionButtonGroup.tsx

@@ -0,0 +1,35 @@
+import { Flex } from '@repo/ui/components/Layout'
+import { cn } from '@repo/ui/utils/cn'
+import { COLOR_VARIANTS } from '@repo/ui/consts/colorVariant'
+
+type Props = {
+  onOpen: VoidFunction
+}
+
+export const ActionButtonGroup = ({ onOpen }: Props) => (
+  <Flex className={'gap-10'}>
+    <button
+      onClick={onOpen}
+      className={cn(
+        'w-full',
+        'rounded-lg',
+        'py-2',
+        COLOR_VARIANTS.red.text,
+        COLOR_VARIANTS.red.background,
+      )}
+    >
+      거절
+    </button>
+    <button
+      className={cn(
+        'w-full',
+        'rounded-lg',
+        'py-2',
+        COLOR_VARIANTS.blue.text,
+        COLOR_VARIANTS.blue.background,
+      )}
+    >
+      등록
+    </button>
+  </Flex>
+)

apps/admin/src/app/request/[id]/_components/ActionButtonGroup/index.tsx

@@ -0,0 +1 @@
+export { ActionButtonGroup } from './ActionButtonGroup'

apps/admin/src/app/request/[id]/_components/Description/Description.tsx

@@ -0,0 +1,22 @@
+import { Column } from '@repo/ui/components/Layout'
+import { Chip } from '@repo/ui/components/Chip'
+import { Text } from '@repo/ui/components/Text'
+import { RequestDetail } from '../../_api/types'
+
+type Props = {
+  description: RequestDetail['description']
+}
+
+export const Description = ({ description }: Props) => {
+  return (
+    <Column className={'gap-1.5'}>
+      <Text>소개</Text>
+      <Text variant={'body2'} className={'whitespace-pre-wrap'}>
+        {description}
+      </Text>
+      <div>
+        <Chip icon={'calculator'} label={'가성비 좋은'} />
+      </div>
+    </Column>
+  )
+}

apps/admin/src/app/request/[id]/_components/Description/index.tsx

@@ -0,0 +1 @@
+export { Description } from './Description'