[front] Implement admin room

next_app/src/app/admin/adminRoomPage.module.scss

@@ -0,0 +1,30 @@
+@import 'styles/variables';
+
+.main_container {
+  max-width: 400px;
+  margin: auto;
+}
+
+.info_panel {
+  padding: 16px;
+}
+
+.info_panel_name {
+  font-weight: 600;
+}
+
+.info_panel_desc {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: $color-muted-gray-text;
+}
+
+.info_panel_list {
+  border-radius: 4px;
+  border: solid 1px $color-border-darkgray;
+
+  div + div {
+    border-top: solid 1px $color-border-darkgray;
+  }
+}

next_app/src/app/admin/page.tsx

@@ -1,11 +1,85 @@
-import Header from 'features/header/Header'
+import { getDBConnection } from 'utils/sql'
 import css from './adminRoomPage.module.scss'
+import Header from 'features/header/Header'
+import { ContentsGridHeader } from 'components/ContentsGridHeader'
+import { RoomType } from 'features/rooms/types'
+import { convertRoomType } from 'features/rooms/utils'
+
+type RoomInfo = {
+  id: string
+  name: string
+  description: string
+  type: RoomType
+  accessKey: string
+  contentNum: number
+  tagNum: number
+}
+
+const getRoomInfo = async (roomId: string): Promise<RoomInfo> => {
+  const con = await getDBConnection()
+  let [rows, _] = await con.query(
+    `SELECT name, description, room_type, access_key, (SELECT COUNT(*) from contents WHERE room_id=rooms.id) as content_num, (SELECT COUNT(*) from tags WHERE room_id=rooms.id) as tag_num FROM rooms WHERE id=?`,
+    [roomId]
+  )
+  con.end()
+
+  const data = JSON.parse(JSON.stringify(rows))[0]
+
+  return {
+    id: data.id,
+    name: data.name,
+    description: data.description,
+    type: convertRoomType(data.room_type),
+    accessKey: data.access_key,
+    contentNum: data.content_num,
+    tagNum: data.tag_num,
+  }
+}
+
+const RoomInfoPanel = async ({ roomId }: { roomId: string }) => {
+  const info = await getRoomInfo(roomId)
+
+  const numbers =
+    info.type == RoomType.Admin ? null : (
+      <>
+        <p>コンテンツ数: {info.contentNum}</p>
+        <p>タグ数: {info.tagNum}</p>
+      </>
+    )
+
+  return (
+    <div className={css.info_panel}>
+      <p className={css.info_panel_name}>{info.name}</p>
+      <p className={css.info_panel_desc}>{info.description}</p>
+      <p>Type: {info.type}</p>
+      <p>Access Key: {info.accessKey}</p>
+      {numbers}
+    </div>
+  )
+}
+
+const RoomInfoPanelList = async () => {
+  const con = await getDBConnection()
+  let [rows, _] = await con.query(`SELECT id FROM rooms`)
+  con.end()
+
+  const data: any[] = JSON.parse(JSON.stringify(rows))
+
+  return data.map(v => {
+    return <RoomInfoPanel roomId={v.id} />
+  })
+}
 
 const AdminRoomPage = async () => {
   return (
     <div>
       <Header roomId="" />
-      <div className={css.main_container}>This ia admin page</div>
+      <div className={css.main_container}>
+        <ContentsGridHeader title="Room List" />
+        <div className={css.info_panel_list}>
+          <RoomInfoPanelList />
+        </div>
+      </div>
     </div>
   )
 }

next_app/src/styles/_variables.scss

@@ -2,6 +2,7 @@ $mobile-width-min: 480px;
 $mobile-width-max: 479px;
 
 $color-white-text: #f0f0f0;
+$color-muted-gray-text: #656d76;
 $color-primary-1: #0192a8; // main
 $color-primary-2: #4dbdce;
 $color-primary-3: #1ca1b6; //main hover