From df1da882be3deea6015047705f78075fa2997445 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Wed, 18 Sep 2024 18:21:51 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E3=83=95=E3=82=A1=E3=82=A4?=
 =?UTF-8?q?=E3=83=AB=E3=81=AE=E8=A1=A8=E7=A4=BA=E9=83=A8=E5=88=86=E3=82=92?=
 =?UTF-8?q?=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requestDetail/RequestContent.vue          | 82 ++++++++++++++++++-
 src/pages/RequestDetailPage.vue               |  2 +-
 2 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/src/components/requestDetail/RequestContent.vue b/src/components/requestDetail/RequestContent.vue
index be8b81fa..5455dfaf 100644
--- a/src/components/requestDetail/RequestContent.vue
+++ b/src/components/requestDetail/RequestContent.vue
@@ -50,6 +50,41 @@ const handleUpdateContent = async () => {
   }
   isEditMode.value = false
 }
+
+const files = [
+  {
+    name: 'oisu-.png',
+    url: 'https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80',
+    alt: 'tailwind sample'
+  },
+  {
+    name: 'oisu-.png',
+    url: 'https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80',
+    alt: 'tailwind sample'
+  },
+  {
+    name: 'oisu-.png',
+    url: 'https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80',
+    alt: 'tailwind sample'
+  },
+  {
+    name: 'oisu-.png',
+    url: 'https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80',
+    alt: 'tailwind sample'
+  },
+  {
+    name: 'oisu-.png',
+    url: 'https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80',
+    alt: 'tailwind sample'
+  }
+]
+const handleFileUpload = async () => {
+  try {
+    toast.success('ファイルを追加しました')
+  } catch {
+    toast.error('ファイルの追加に失敗しました')
+  }
+}
 </script>
 
 <template>
@@ -69,10 +104,51 @@ const handleUpdateContent = async () => {
       </time>
     </div>
     <div class="ml-16 flex items-start gap-2">
-      <MarkdownIt
+      <div
         v-if="!isEditMode"
-        class="border border-surface-secondary px-4 py-3 rounded-lg flex-1"
-        :text="request.content" />
+        class="border border-surface-secondary px-4 py-3 rounded-lg flex-1 w-full">
+        <MarkdownIt :text="request.content" />
+        <div class="m-3 overflow-auto">
+          <div class="flex gap-3">
+            <div v-for="file in files" :key="file.name">
+              <div
+                class="bg-surface-secondary w-32 overflow-hidden rounded"
+                :model-value="file.name">
+                <img
+                  :alt="file.alt"
+                  class="object-cover h-36 w-full"
+                  :src="file.url" />
+              </div>
+              <p class="mt-2 text-center">{{ file.name }}</p>
+            </div>
+          </div>
+          <div class="flex gap-3 mt-3">
+            <div v-for="file in files" :key="file.name">
+              <div
+                class="bg-surface-secondary w-96 overflow-hidden rounded"
+                :model-value="file.name">
+                <img
+                  :alt="file.alt"
+                  class="object-cover h-60 w-full"
+                  :src="file.url" />
+              </div>
+              <p class="mt-2">{{ file.name }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-end">
+          <label
+            class="flex items-center rounded-md border py-2 px-4 hover:bg-hover-primary border-surface-secondary cursor-pointer"
+            for="file_upload">
+            添付ファイルを追加
+            <input
+              id="file_upload"
+              class="hidden"
+              type="file"
+              @change="handleFileUpload" />
+          </label>
+        </div>
+      </div>
       <MarkdownTextarea
         v-else
         v-model="editedContent"
diff --git a/src/pages/RequestDetailPage.vue b/src/pages/RequestDetailPage.vue
index dec8d123..1e23beb2 100644
--- a/src/pages/RequestDetailPage.vue
+++ b/src/pages/RequestDetailPage.vue
@@ -48,7 +48,7 @@ if (!isTagFetched.value) {
     <RequestHeader :request="request" />
     <div class="h-px bg-[#e5e7eb]" />
     <div class="flex justify-between gap-20">
-      <RequestLogs class="basis-2/3" :request="request" />
+      <RequestLogs class="basis-2/3 max-w-[75%]" :request="request" />
       <RequestSidebar class="basis-1/3" :request="request" />
     </div>
   </div>