From 8034f1fc371982942aa96db4b1e44e09011940b1 Mon Sep 17 00:00:00 2001
From: Dang <looks32@gmail.com>
Date: Mon, 16 Dec 2024 16:44:41 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment.vue | 29 ++++++++++++++++++------
 src/components/Profile.vue | 46 ++++++++++++++++++++++++++++++++------
 2 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 7cd40bb..bc58788 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -1,9 +1,21 @@
 <template>
-    <div>
-        <Profile/>
-        
-        <div>페이지네이션2</div>
-    </div>
+    <ul class="list-unstyled">
+        <li>
+            <Profile profileName=곤데리 :showDetail="false" />
+            <div>저도 궁금합니다.</div>
+            <ul class="list-unstyled twoDepth">
+                <li>
+                    <Profile profileName=곤데리2 :showDetail="false" />
+                    <div>저도 궁금합니다.</div>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <Profile profileName=곤데리 :showDetail="false" />
+            <div>저도 궁금합니다.</div>
+        </li>
+    </ul>
+    <div>페이지네이션2</div>
 </template>
 
 <script setup>
@@ -12,6 +24,9 @@ import Profile from './Profile.vue';
 
 </script>
 
-<style lang="scss" scoped>
-
+<style scoped>
+    .twoDepth {
+        margin-top: 20px;
+        padding-left: 20px;
+    }
 </style>
\ No newline at end of file
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index aa4bb51..b6c8170 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -1,29 +1,61 @@
 <template>
     <div class="d-flex align-items-center">
         <div class="d-flex align-items-center">
-            <div class="avatar me-2">
-                <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle">
+            <div class="avatar me-2" v-if="unknown">
+                <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
             </div>
             <div class="me-2">
-                <h6 class="mb-0">만드레</h6>
-                <small>2024.12.10 10:46</small>
+                <h6 class="mb-0">{{ profileName }}</h6>
+                <div class="profile-detail">
+                    <span>2024.12.10 10:46</span>
+                    <template  v-if="showDetail">
+                        <span>
+                            <i class="fa-regular fa-eye"></i> 1
+                        </span>
+                        <span>
+                            <i class="fa-regular fa-thumbs-up"></i> 1
+                        </span>
+                        <span>
+                            <i class="fa-regular fa-thumbs-down"></i> 1
+                        </span>
+                    </template>
+                </div>
             </div>
         </div>
         <div class="ms-auto">
             <button class="btn btn-label-primary btn-icon">
-                <i class="bx bx-user-check bx-md"></i>
+                <i class="fa-regular fa-thumbs-up"></i>
             </button>
             <button class="btn btn-label-primary btn-icon">
-                <i class="bx bx-user-check bx-md"></i>
+                <i class="fa-regular fa-thumbs-down"></i>
             </button>
         </div>
     </div>
 </template>
 
 <script setup>
-
+defineProps({
+    profileName : {
+        type: String,
+        required: true,
+    },
+    unknown : {
+        type: Boolean,
+        default: true,
+    },
+    showDetail : {
+        type: Boolean,
+        default: true,
+    },
+});
 </script>
 
 <style scoped>
+    .profile-detail span ~ span {
+        margin-left: 5px;
+    }
 
+    .ms-auto button + button {
+        margin-left: 5px;
+    } 
 </style>
\ No newline at end of file