first

safekiso_admin/base/components/BaseBoardView1.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+        <div
+            class="px-4 py-5 sm:px-6 flex justify-between items-center flex-wrap sm:flex-nowrap"
+        >
+            <div>
+                <h3 class="text-lg leading-6 font-medium text-gray-900">
+                    {{ title }}
+                </h3>
+            </div>
+            <div>
+                <div class="flex items-start">
+                    <div
+                        class="flex-shrink-0 inline-flex rounded-full border-2 border-white"
+                    >
+                        <BaseAvater1
+                            :image-size="2"
+                            :image-url="profileUrl"
+                            :image-alt="name + '의 프로필 사진'"
+                        />
+                    </div>
+                    <div class="ml-4">
+                        <div class="text-base font-medium">{{ name }}</div>
+                        <div class="text-base text-xs">{{ created }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="border-t border-gray-200 px-4 py-5 sm:px-6 min-h-[15rem]">
+            <div
+                ref="myCoolDiv"
+                class="prose mt-3 space-y-0 max-w-none"
+                v-html="content"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+    name: { type: String, required: true },
+    profileUrl: { type: String, required: true },
+    title: { type: String, required: true },
+    content: { type: String, required: true },
+    flags: { type: Array<string>, default: [] },
+    attachments: { type: Array<string>, default: [] },
+    hitCount: { type: Number, required: true },
+    likeCount: { type: Number, required: true },
+    dislikeCount: { type: Number, required: true },
+    commentCount: { type: Number, required: true },
+    reportCount: { type: Number, required: true },
+    status: { type: Number, required: true },
+    updated: { type: String, required: true },
+    created: { type: String, required: true },
+});
+
+const myCoolDiv = ref(null);
+
+watch(myCoolDiv, () => {
+    if (myCoolDiv.value.childNodes[0].tagName == 'IFRAME') {
+        myCoolDiv.value.childNodes[0].classList.add('xl:w-[1243px]');
+        myCoolDiv.value.childNodes[0].classList.add('xl:h-[621.5px]');
+        myCoolDiv.value.childNodes[0].classList.add('lg:w-[1243px]');
+        myCoolDiv.value.childNodes[0].classList.add('lg:h-[621.5px]');
+        myCoolDiv.value.childNodes[0].classList.add('md:w-[900px]');
+        myCoolDiv.value.childNodes[0].classList.add('md:h-[400px]');
+        myCoolDiv.value.childNodes[0].classList.add('w-[310px]');
+        myCoolDiv.value.childNodes[0].classList.add('h-[250px]');
+    }
+});
+</script>