From a7068e5ebf2e569e57ab08b651f8a282b2a99c01 Mon Sep 17 00:00:00 2001
From: "Ichiro.S" <sey323@users.noreply.github.com>
Date: Sun, 5 Nov 2023 22:47:33 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=93=E3=83=B3=E3=82=B4=E3=81=AE=E5=85=AC?=
 =?UTF-8?q?=E9=96=8B=E8=A8=AD=E5=AE=9A=E3=81=AE=E5=A4=89=E6=9B=B4=E3=81=A8?=
 =?UTF-8?q?=E3=82=BB=E3=83=AB=E3=81=AB=E6=8A=95=E7=A8=BF=E8=80=85=E3=81=97?=
 =?UTF-8?q?=E3=81=9F=E3=83=A6=E3=83=BC=E3=82=B6=E3=82=92=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=20(#84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BingoCardCarousel.vue             | 21 ++++-
 components/BingoCardDetailModal.vue          | 26 ++++++-
 components/BingoCardView.vue                 | 21 +++--
 components/CreateUserBadge.vue               | 59 +++++++++-----
 pages/create.vue                             | 16 +++-
 pages/index.vue                              | 20 ++++-
 pages/mypage.vue                             | 18 +++++
 server/api/bingoCard/index.post.ts           |  1 +
 server/api/bingoCell/[bingoCardId].get.ts    | 23 ++++++
 server/api/user/index.put.ts                 | 28 +++++++
 server/facades/repositories/bingoContents.ts | 81 +++++++++++++++++++-
 server/facades/repositories/users.ts         | 12 +++
 server/models/bingo/dto.ts                   |  9 ++-
 server/models/bingo/request.ts               |  1 +
 server/models/bingo/response.ts              | 10 ++-
 server/models/user/dto.ts                    |  2 +
 server/models/user/request.ts                |  5 ++
 17 files changed, 315 insertions(+), 38 deletions(-)
 create mode 100644 server/api/bingoCell/[bingoCardId].get.ts
 create mode 100644 server/api/user/index.put.ts

diff --git a/components/BingoCardCarousel.vue b/components/BingoCardCarousel.vue
index f5b03ec..91a0a2a 100644
--- a/components/BingoCardCarousel.vue
+++ b/components/BingoCardCarousel.vue
@@ -57,6 +57,7 @@
           <BingoCardView
             @openBingoCardDetailModal="openBingoCardDetailModal"
             :bingoCard="bingoCard"
+            :currentUserUid="props.currentUserUid"
           />
         </div>
       </div>
@@ -88,18 +89,24 @@
       @postBingoCellRequest="postBingoCellRequest"
       @postCheckFollowingSubject="postCheckFollowingSubject"
       @openNextBingoCardDetailModal="openNextBingoCardDetailModal"
+      :currentUserUid="props.currentUserUid"
       :selectedBingoCell="selectedBingoCardCell"
       :isFollowingSubject="isFollowingSubject"
       :selectedBingoCardCellNo="selectedBingoCardCellNo"
+      :answeredUserDetail="props.selectedBingoCellDetail?.answeredUserDetail"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { BingoCardDetail } from "@/server/models/bingo/dto";
+import { BingoCardDetail, BingoCellDetail } from "@/server/models/bingo/dto";
 import { IsFollowingSubjectResponse } from "@/server/models/facades/visionai/imageDescription";
 
 const props = defineProps({
+  currentUserUid: {
+    type: Object as PropType<String | undefined>,
+    required: true,
+  },
   bingoCards: {
     default: [],
     type: Array as PropType<BingoCardDetail[]>,
@@ -109,12 +116,18 @@ const props = defineProps({
     type: Object as PropType<IsFollowingSubjectResponse | null>,
     required: true,
   },
+  selectedBingoCellDetail: {
+    // モーダルで選択中のセルの詳細
+    type: Object as PropType<BingoCellDetail | null>,
+    required: false,
+  },
 });
 
 const emits = defineEmits([
   "postBingoCellRequest",
   "postCheckFollowingSubject",
   "clearIsFollowingSubject",
+  "getBingoCellDetail",
 ]);
 
 const bingoCellId = ref("");
@@ -212,6 +225,12 @@ const openNextBingoCardDetailModal = (index: number) => {
   openBingoCardDetailModal(selectedBingoCard.value.bingoCells[index].id);
 };
 const openBingoCardDetailModal = async (bingoCellIdByChild: string) => {
+  // ビンゴセルの詳細情報を取得する
+  await emits(
+    "getBingoCellDetail",
+    selectedBingoCardId.value,
+    bingoCellIdByChild
+  );
   bingoCellId.value = bingoCellIdByChild;
   modalIsOpen.value = true;
 };
diff --git a/components/BingoCardDetailModal.vue b/components/BingoCardDetailModal.vue
index 1706227..2772d75 100644
--- a/components/BingoCardDetailModal.vue
+++ b/components/BingoCardDetailModal.vue
@@ -47,7 +47,7 @@
           <div v-if="registered">
             <div class="mt-8">
               <label class="block mb-2 text-sm font-medium text-gray-700"
-                >あなたが投稿した画像</label
+                >投稿された画像</label
               >
               <img :src="selectedBingoCell.imageUrl!" alt="" />
             </div>
@@ -55,7 +55,7 @@
               <label
                 for="message"
                 class="block mb-2 text-sm font-medium text-gray-700"
-                >あなたが投稿したコメント</label
+                >投稿されたコメント</label
               >
               <textarea
                 id="message"
@@ -65,6 +65,19 @@
                 disabled
               ></textarea>
             </div>
+
+            <div class="mt-8">
+              <label
+                for="message"
+                class="block mb-2 text-sm font-medium text-gray-700"
+                >投稿した人</label
+              >
+              <CreateUserBadge
+                :currentUserUid="currentUserUid"
+                :createdUid="answeredUserDetail?.uid"
+                :createdUserDetail="answeredUserDetail"
+              />
+            </div>
           </div>
           <!-- 投稿済みでない場合 -->
           <div v-else>
@@ -219,6 +232,10 @@ import { BingoCell } from "@/server/models/bingo/dto";
 import { IsFollowingSubjectResponse } from "@/server/models/facades/visionai/imageDescription";
 
 const props = defineProps({
+  currentUserUid: {
+    type: Object as PropType<String | undefined>,
+    required: true,
+  },
   selectedBingoCell: {
     type: Object as PropType<BingoCell>,
     required: true,
@@ -231,8 +248,11 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  answeredUserDetail: {
+    type: Object as PropType<UserInfo | undefined>,
+    required: true,
+  },
 });
-
 const currentPosition = ref(props.selectedBingoCardCellNo); // 現在の位置、初期値はセンターのセル
 
 const canMove = (direction, index) => {
diff --git a/components/BingoCardView.vue b/components/BingoCardView.vue
index 04231bf..5678381 100644
--- a/components/BingoCardView.vue
+++ b/components/BingoCardView.vue
@@ -29,11 +29,16 @@
     </div>
     <div class="pt-4 color text-sm flex justify-between">
       <span class="flex items-center">
-        <span class="text-xs">CREATED BY</span>
-        <CreateUserBadge :isAnonymousCard="isAnonymousCard" class="pl-2" />
+        <CreateUserBadge
+          :currentUserUid="props.currentUserUid"
+          :createdUid="bingoCard.createdUid"
+          :createdUserDetail="bingoCard.createdUserDetail"
+          class="pl-2"
+        />
+        <span class="text-xs">のビンゴカード</span>
       </span>
 
-      {{ CreatedAt }}
+      {{ createdAt }}
     </div>
   </div>
 </template>
@@ -48,6 +53,10 @@ const props = defineProps({
     type: Object as PropType<BingoCardDetail>,
     required: true,
   },
+  currentUserUid: {
+    type: Object as PropType<String | undefined>,
+    required: true,
+  },
 });
 
 const emits = defineEmits(["openBingoCardDetailModal"]);
@@ -55,15 +64,11 @@ const openBingoCardDetailModal = async (bingoCellId: string) => {
   await emits("openBingoCardDetailModal", bingoCellId);
 };
 // computed プロパティを作成
-const CreatedAt = computed(() => {
+const createdAt = computed(() => {
   const timestamp = props.bingoCard.createdAt.getTime as any;
   return dayjs(timestamp).locale("ja").format("YYYY/M/D HH:mm");
 });
 
-const isAnonymousCard = computed(() => {
-  return props.bingoCard.createdUid === "";
-});
-
 const isReach = (index: number) => {
   let cells = props.bingoCard.bingoCells;
   // 各行のビンゴマスのcompletedステータスをチェックし、すべてがtrueの場合にtrueを返す
diff --git a/components/CreateUserBadge.vue b/components/CreateUserBadge.vue
index 81a637c..11b3afc 100644
--- a/components/CreateUserBadge.vue
+++ b/components/CreateUserBadge.vue
@@ -2,42 +2,65 @@
   <div
     class="bingo-owner-badge-object font-bold"
     :class="
-      props.isAnonymousCard
-        ? 'bingo-owner-badge-anonymous'
-        : 'bingo-owner-badge-own'
+      isAnonymousCard ? 'bingo-owner-badge-anonymous' : 'bingo-owner-badge-own'
     "
   >
-    <img
-      v-if="!props.isAnonymousCard && currentUser"
-      :src="currentUser.photoURL"
-      alt="プロフィールアイコン"
-      class="rounded-full w-7"
-    />
-    <span v-if="!props.isAnonymousCard && !currentUser">{{ message }}</span>
-    <svg v-if="props.isAnonymousCard" fill="currentColor" class="w-6 h-6">
+    <!-- 自分のカードの場合「あなた」と表示 -->
+    <span>{{ message }}</span>
+
+    <!-- ログインしないユーザが作成したビンゴカードの場合は、匿名ユーザとして表示する。 -->
+    <svg
+      v-if="isAnonymousCard || !hasPhotoURL"
+      fill="currentColor"
+      class="w-6 h-6"
+    >
       <path
         fill-rule="evenodd"
         d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
         clip-rule="evenodd"
       />
     </svg>
+    <img
+      v-else-if="!isAnonymousCard"
+      :src="props.createdUserDetail!.photoURL"
+      alt=""
+      class="rounded-full w-7"
+    />
+  </div>
+  <div class="hidden group-hover:block absolute bg-white p-5 shadow-lg rounded">
+    Detail Information Here.
   </div>
 </template>
 
 <script setup lang="ts">
-import { BingoCardDetail } from "~/server/models/bingo/dto";
-import { useCurrentUser } from "vuefire";
-const currentUser = useCurrentUser();
-
 const props = defineProps({
-  isAnonymousCard: {
-    type: Boolean,
+  currentUserUid: {
+    type: Object as PropType<String | undefined>,
+    required: true,
+  },
+  createdUid: {
+    type: Object as PropType<String | undefined>,
     required: true,
   },
+  createdUserDetail: {
+    type: Object as PropType<UserInfo>,
+    required: false,
+  },
 });
 
 const message = computed(() => {
-  return props.isAnonymousCard ? "だれか" : "あなた";
+  if (props.createdUid === "") return "匿名";
+  if (props.createdUid !== "" && props.createdUid === props.currentUserUid)
+    return "あなた";
+  return "誰か";
+});
+
+const hasPhotoURL = computed(() => {
+  return props.createdUserDetail;
+});
+
+const isAnonymousCard = computed(() => {
+  return props.createdUid === "";
 });
 </script>
 
diff --git a/pages/create.vue b/pages/create.vue
index d218234..3bf1d36 100644
--- a/pages/create.vue
+++ b/pages/create.vue
@@ -94,6 +94,18 @@
           </div>
         </fieldset>
       </div> -->
+
+      <!-- 公開ビンゴカードとするか -->
+      <label class="relative inline-flex items-center cursor-pointer mb-3 m">
+        <input type="checkbox" v-model="form.isPublic" class="sr-only peer" />
+        <div
+          class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+        ></div>
+        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+          >ビンゴカードを公開する</span
+        >
+      </label>
+
       <div class="flex justify-between">
         <router-link
           class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2"
@@ -127,6 +139,7 @@ const form = ref({
   title: "",
   theme: "",
   imageColor: "#6B8CFF",
+  isPublic: false,
 });
 
 const router = useRouter();
@@ -142,9 +155,8 @@ const createBingoCard = async () => {
       Authorization: `Bearer ${await currentUser.value?.getIdToken()}`,
     },
     body: JSON.stringify({
+      ...form.value,
       title: form.value.title == "" ? "タイトルなし" : form.value.title,
-      theme: form.value.theme,
-      imageColor: form.value.imageColor,
     } as BongoCreateRequest),
   });
   const data = (await res.json()) as { message: string; bingoCardId: string };
diff --git a/pages/index.vue b/pages/index.vue
index 6dc2179..874f7d5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,8 +3,11 @@
     @clearIsFollowingSubject="clearIsFollowingSubject"
     @postBingoCellRequest="postBingoCellRequest"
     @postCheckFollowingSubject="postCheckFollowingSubject"
+    @getBingoCellDetail="getBingoCellDetail"
     :bingoCards="bingoCardDetails"
     :isFollowingSubject="isFollowingSubject"
+    :currentUserUid="currentUser?.uid"
+    :selectedBingoCellDetail="bingoCellDetail"
   />
   <congratulations-complete
     v-if="congratulationsCompleteViewIsOpen"
@@ -18,9 +21,10 @@
 </template>
 
 <script setup lang="ts">
-import { BingoCardDetail } from "@/server/models/bingo/dto";
+import { BingoCardDetail, BingoCellDetail } from "@/server/models/bingo/dto";
 import {
   BingoCardsGetAllResponse,
+  BingoCellGetResponse,
   BingoCellPutResponse,
 } from "@/server/models/bingo/response";
 import { IsFollowingSubjectResponse } from "@/server/models/facades/visionai/imageDescription";
@@ -28,6 +32,7 @@ import { useCurrentUser } from "vuefire";
 
 const currentUser = useCurrentUser(); // TODO: 画面をリロードすると全てのビンゴカードが表示される不具合あり
 const bingoCardDetails = ref([] as BingoCardDetail[]);
+const bingoCellDetail = ref(null as BingoCellDetail | null);
 const isFollowingSubject = ref(null as IsFollowingSubjectResponse | null);
 const congratulationsCompleteViewIsOpen = ref(false);
 const congratulationsBingoViewIsOpen = ref(false);
@@ -117,6 +122,19 @@ const postBingoCellRequest = async (
   await getAllBingoCard();
 };
 
+// ビンゴセルの詳細情報を取得する
+const getBingoCellDetail = async (bingoCardId: string, bingoCellId: string) => {
+  const res = await fetch(
+    `/api/bingoCell/${bingoCardId}?bingoCellId=${bingoCellId}`,
+    {
+      headers: {},
+    }
+  );
+  const data = (await res.json()) as BingoCellGetResponse;
+  console.log(data);
+  bingoCellDetail.value = data.bingoCellDetail;
+};
+
 // ビンゴカードをコンプリートしたときのお祝い画面をひらく
 const openCongratulationsCompleteView = async () => {
   congratulationsCompleteViewIsOpen.value = true;
diff --git a/pages/mypage.vue b/pages/mypage.vue
index fac817d..4b732d9 100644
--- a/pages/mypage.vue
+++ b/pages/mypage.vue
@@ -74,6 +74,7 @@ onBeforeMount(async () => {
     router.push(`/login`);
   } else {
     await getUser();
+    updateUser(); // バックグラウンドで実行するため、awaitしない
   }
 });
 
@@ -90,6 +91,23 @@ const getUser = async () => {
   userInfo.value = data;
 };
 
+// ユーザ情報を更新
+const updateUser = async () => {
+  const res = await fetch("/api/user", {
+    method: "PUT",
+    headers: {
+      Authorization: `Bearer ${await currentUser.value?.getIdToken()}`,
+      ContentType: "application/json",
+    },
+    body: JSON.stringify({
+      displayName: currentUser.value?.displayName,
+      photoURL: currentUser.value?.photoURL,
+    } as UserPutRequest),
+  });
+  const data = await res.json();
+  userInfo.value = data;
+};
+
 // サインアウトボタン
 const logout = async () => {
   const auth = getAuth();
diff --git a/server/api/bingoCard/index.post.ts b/server/api/bingoCard/index.post.ts
index d6b7eba..6d2f031 100644
--- a/server/api/bingoCard/index.post.ts
+++ b/server/api/bingoCard/index.post.ts
@@ -65,6 +65,7 @@ function createBingoCard(
     name: body.title,
     theme: body.theme,
     imageColor: body.imageColor,
+    isPublic: body.isPublic,
     bingoCells: [],
     countOfBingoLine: 0, // ビンゴラインの数
     completed: false, // ビンゴカードが完成したかどうか
diff --git a/server/api/bingoCell/[bingoCardId].get.ts b/server/api/bingoCell/[bingoCardId].get.ts
new file mode 100644
index 0000000..cf2de7e
--- /dev/null
+++ b/server/api/bingoCell/[bingoCardId].get.ts
@@ -0,0 +1,23 @@
+import { getBingoCellDetail } from "~/server/facades/repositories/bingoContents";
+import { BingoCellGetResponse } from "~/server/models/bingo/response";
+
+export default defineEventHandler(async (event) => {
+  try {
+    const bingoCardId: string | undefined = event.context.params?.bingoCardId;
+    // クエリパラメータがからbingoCellIdを取得
+    const query = getQuery(event);
+    const bingoCellId = query["bingoCellId"] as string;
+
+    const bingoCellDetail = await getBingoCellDetail(bingoCardId!, bingoCellId);
+
+    return {
+      bingoCellDetail: bingoCellDetail,
+    } as unknown as BingoCellGetResponse;
+  } catch (e) {
+    console.error(e);
+    return {
+      status: 500,
+      message: "Internal Server Error",
+    };
+  }
+});
diff --git a/server/api/user/index.put.ts b/server/api/user/index.put.ts
new file mode 100644
index 0000000..2f94e50
--- /dev/null
+++ b/server/api/user/index.put.ts
@@ -0,0 +1,28 @@
+import { idAuthentication } from "~/server/facades/auth/idAuthentication";
+import { updateUserInfo } from "~/server/facades/repositories/users";
+
+/**
+ * ユーザ情報を更新する
+ */
+export default defineEventHandler(async (event) => {
+  try {
+    const token = await getHeaders(event)["authorization"];
+    const uid = await idAuthentication(token);
+
+    const body = (await readBody(event).then((b) =>
+      JSON.parse(b)
+    )) as UserPutRequest;
+
+    await updateUserInfo(uid, body);
+
+    return {
+      message: "OK",
+    };
+  } catch (error) {
+    console.error(error);
+    return {
+      status: 500,
+      message: "Internal Server Error",
+    };
+  }
+});
diff --git a/server/facades/repositories/bingoContents.ts b/server/facades/repositories/bingoContents.ts
index 32cc0da..3de6c1b 100644
--- a/server/facades/repositories/bingoContents.ts
+++ b/server/facades/repositories/bingoContents.ts
@@ -2,9 +2,13 @@ import {
   BingoCard,
   BingoCell,
   AppearBingoCompleteDto,
+  BingoCardDetail,
+  BingoCellDetail,
 } from "@/server/models/bingo/dto";
 import { firestore } from "../firebase";
 import { checkBingoOrReachLines } from "~/server/utils/bingoCheck";
+import { Filter } from "firebase-admin/firestore";
+import { user } from "firebase-functions/v1/auth";
 
 /**
  * ビンゴカードの内容を取得する
@@ -22,6 +26,42 @@ export const getBingoCard = async (bingoCardId: string) => {
   }
 };
 
+/**
+ * ビンゴセルの詳細を取得する
+ */
+export const getBingoCellDetail = async (
+  bingoCardId: string,
+  bingoCellId: string
+): Promise<BingoCellDetail> => {
+  try {
+    const docRef = await firestore
+      .collection("bingoCard")
+      .doc(bingoCardId)
+      .get();
+    const bingoCard = docRef.data() as BingoCard;
+    const bingoCell = bingoCard.bingoCells.find(
+      (cell) => cell.id === bingoCellId
+    );
+
+    const bingoCardDetail = { ...bingoCell } as BingoCellDetail;
+
+    if (bingoCell?.completed) {
+      // ユーザの情報を付与する
+      const userDocRef = await firestore
+        .collection("users")
+        .doc(bingoCell?.answered_user!)
+        .get();
+      const userInfo = userDocRef.data() as UserInfo;
+      bingoCardDetail.answeredUserDetail = userInfo;
+    }
+
+    return bingoCardDetail;
+  } catch (e) {
+    console.error("[getBingoCellDetail]", e);
+    throw e;
+  }
+};
+
 /**
  * Uidでフィルタして全件取得
  */
@@ -34,7 +74,7 @@ export const getAllBingoCardByUid = async (uid: string) => {
       .orderBy("updatedAt", "desc")
       .get();
     const bingoCard = querySnapshot.docs.map((doc) => doc.data() as BingoCard);
-    return bingoCard;
+    return addBingoCreateUser(bingoCard);
   } catch (e) {
     console.error("[getAllBingoCardByUid] uid: ", uid, e);
     return [];
@@ -49,17 +89,52 @@ export const getAnonymousBingoCard = async () => {
     // createdUidのカラムが存在しないものを取得する
     const querySnapshot = await firestore
       .collection("bingoCard")
-      .where("createdUid", "==", "")
+      // uidがないものを取得するか、isPublicがtrueのものを取得する
+      .where(
+        Filter.or(
+          Filter.where("createdUid", "==", ""),
+          Filter.where("isPublic", "==", true)
+        )
+      )
       .orderBy("updatedAt", "desc")
       .get();
     const bingoCard = querySnapshot.docs.map((doc) => doc.data() as BingoCard);
-    return bingoCard;
+    return addBingoCreateUser(bingoCard);
   } catch (e) {
     console.error("[getAllBingoCard]", e);
     return [];
   }
 };
 
+/**
+ * ビンゴカードに作成したユーザの情報を追加してBingoCardDetail型を返す
+ */
+async function addBingoCreateUser(
+  bingoCards: BingoCard[]
+): Promise<BingoCardDetail[]> {
+  // bingoCardsに含まれるUidを取得する
+  const uids = bingoCards.map((bingoCard) => bingoCard.createdUid);
+
+  // uidsのユーザ情報を取得する
+  const querySnapshot = await firestore
+    .collection("users")
+    .where("uid", "in", uids)
+    .get();
+
+  // bingoCardsのそれぞれのセルにユーザ情報を追加する
+  const bingoCardDetails = bingoCards.map((bingoCard) => {
+    const user = querySnapshot.docs
+      .map((doc) => doc.data())
+      .find((user) => user.uid === bingoCard.createdUid);
+    const bingoCardDetail = {
+      ...bingoCard,
+      createdUserDetail: user,
+    } as BingoCardDetail;
+    return bingoCardDetail;
+  });
+  return bingoCardDetails;
+}
+
 /**
  * ビンゴカードを新規作成する
  */
diff --git a/server/facades/repositories/users.ts b/server/facades/repositories/users.ts
index d06fc9a..e585efc 100644
--- a/server/facades/repositories/users.ts
+++ b/server/facades/repositories/users.ts
@@ -35,6 +35,18 @@ export const addUserInfo = async (uid: string) => {
   }
 };
 
+/**
+ * ユーザ情報を更新する
+ */
+export const updateUserInfo = async (uid: string, userInfo: UserPutRequest) => {
+  try {
+    const docRef = await firestore.collection("users").doc(uid);
+    await docRef.update({ ...userInfo }); // 既に存在する場合は更新
+  } catch (e) {
+    console.error("[updateUserInfo]", e);
+  }
+};
+
 /**
  * ユーザアカウントにウォレットを紐づける
  */
diff --git a/server/models/bingo/dto.ts b/server/models/bingo/dto.ts
index 813d662..cab94ac 100644
--- a/server/models/bingo/dto.ts
+++ b/server/models/bingo/dto.ts
@@ -9,17 +9,22 @@ export interface BingoCell {
   // ユーザの回答に関する情報
   imageUrl: string | null; // ビンゴの画像のURL
   comments: string | null; // 投稿した画像に対するコメント(オプション)
-  answered_user: number | null; // 回答したユーザのID
+  answered_user: string | null; // 回答したユーザのID
   answered_at: Date | null; // 回答した日時
   geo_location: string | null; // 回答した場所の緯度経度
   completed: boolean; // 完了したかどうか
 }
 
+export interface BingoCellDetail extends BingoCell {
+  answeredUserDetail: UserInfo; // 回答したユーザの情報
+}
+
 export interface BingoCard {
   id: string;
   name: string;
   theme: string;
   imageColor: string;
+  isPublic: boolean;
   bingoCells: BingoCell[];
 
   countOfBingoLine?: number; // ビンゴラインの数
@@ -31,6 +36,8 @@ export interface BingoCard {
 }
 
 export interface BingoCardDetail extends BingoCard {
+  createdUserDetail: UserInfo; // ビンゴカードを作成したユーザの情報
+
   completeBingoLines: CompleteBingoLine[]; // ビンゴが成立したセルの行と列を格納する
   reachLines: ReachLine[]; // リーチの成立したセルの行と列を格納する
   // completeBingoLinesとreachLinesの例
diff --git a/server/models/bingo/request.ts b/server/models/bingo/request.ts
index 8025028..a34dccf 100644
--- a/server/models/bingo/request.ts
+++ b/server/models/bingo/request.ts
@@ -2,6 +2,7 @@ interface BongoCreateRequest {
   title: string; // ビンゴのタイトル
   theme: string; // ビンゴのテーマ
   imageColor: string; // ビンゴの画像の色
+  isPublic: boolean; // ビンゴの公開設定
 }
 
 /**
diff --git a/server/models/bingo/response.ts b/server/models/bingo/response.ts
index 077d76c..08547e6 100644
--- a/server/models/bingo/response.ts
+++ b/server/models/bingo/response.ts
@@ -1,7 +1,15 @@
-import { BingoCardDetail, AppearBingoCompleteDto } from "./dto";
+import {
+  BingoCardDetail,
+  AppearBingoCompleteDto,
+  BingoCellDetail,
+} from "./dto";
 
 export interface BingoCardsGetAllResponse {
   bingoCardDetails: BingoCardDetail[];
 }
 
+export interface BingoCellGetResponse {
+  bingoCellDetail: BingoCellDetail;
+}
+
 export interface BingoCellPutResponse extends AppearBingoCompleteDto {}
diff --git a/server/models/user/dto.ts b/server/models/user/dto.ts
index 18410e7..7cd6731 100644
--- a/server/models/user/dto.ts
+++ b/server/models/user/dto.ts
@@ -5,6 +5,8 @@ interface UserInfo {
   walletAddress: string;
   createdAt: Date;
   updatedAt: Date;
+  displayName: string;
+  photoURL: string;
 
   // ユーザの各種アクション
   bingoCreationCount?: number; // ビンゴカードを作成した数
diff --git a/server/models/user/request.ts b/server/models/user/request.ts
index 7811397..f86652c 100644
--- a/server/models/user/request.ts
+++ b/server/models/user/request.ts
@@ -3,3 +3,8 @@ interface UserWalletPutDto extends UserWalletPutRequest {}
 interface UserWalletPutRequest {
   walletAddress: string;
 }
+
+interface UserPutRequest {
+  displayName: string;
+  photoURL: string;
+}