Merge pull request #9 from hw-coconote/feat/HC-135

[Feat] HC-135 쓰레드 날짜 구현, 쓰레드 사진 다중 업로드 구현

src/components/thread/ThreadComponent.vue

@@ -1,39 +1,48 @@
 <template>
-  <v-app>
-    <div>
-      <h2>{{ room.name }}</h2>
-    </div>
+  <div class="container">
     <ul class="list-group" ref="messageList" id="list-group">
       <li
         class="list-group-item"
-        v-for="message in messages.slice().reverse()"
+        v-for="(message,index) in messages.slice().reverse()"
         :key="message.id"
       >
+      <div v-if="index > 0 && this.isDifferentDay(message.createdTime,  messages.slice().reverse()[index-1].createdTime)">
+        <div style="display: flex; align-content: center; text-align: center; margin: auto;">
+            <hr style="width: 27%; margin:auto;"><span style="margin:auto;">{{this.getDay(message.createdTime)}}</span><hr style="width: 27%; margin:auto;">
+        </div>
+    </div>
         <ThreadLineComponent
           :id="message.id"
           :image="message.image"
           :nickName="message.memberName"
-          :createdTime="message.createdTime"
+          :createdTime="this.getTime(message.createdTime)"
           :content="message.content"
           :files="message.files"
         />
       </li>
     </ul>
+
     <div class="input-group">
-      <div class="input-group-prepend">
-        <label class="input-group-text">내용</label>
+      <div class="image-group">
+        <div v-for="(file, index) in fileList" :key="index">
+          <img :src="file.imageUrl" alt="image" style="height: 120px; width: 120px; object-fit: cover;">
+        </div>
       </div>
-      <input
-        type="text"
-        class="form-control"
-        v-model="message"
-        v-on:keypress.enter="sendMessage"
-      />
-      <div class="input-group-append">
-        <button class="btn btn-primary" type="button" @click="sendMessage">보내기</button>
+
+      <div class="text-group">
+        <v-file-input v-model="files" @change="fileUpdate" multiple hide-input></v-file-input>
+        <input
+          type="text"
+          class="form-control"
+          v-model="message"
+          v-on:keypress.enter="sendMessage"
+        />
+        <div class="input-group-append">
+          <button class="btn btn-primary" type="button" @click="sendMessage" :disabled="!message">보내기</button>
+        </div>
       </div>
     </div>
-  </v-app>
+  </div>
 </template>
 
 <script>
@@ -68,6 +77,9 @@ export default {
       currentPage: 0,
       isLoading: false,
       isLastPage: false,
+      files: null,
+      fileList: [],
+      reqFiles: [],
     };
   },
   created() {
@@ -88,6 +100,13 @@ export default {
   },
   computed: {},
   methods: {
+    fileUpdate(){
+        this.files.forEach(file => this.fileList.push({...file, imageUrl: URL.createObjectURL(file)}));
+        console.log("files: ", this.fileList);
+        this.fileList.forEach(file => this.reqFiles.push({fileName:file.name, fileSize:file.size}))
+        console.log("reqFiles: ", this.reqFiles);
+        
+    },
     async getMessageList() {
       try {
         let params = {
@@ -211,29 +230,75 @@ export default {
         }
       );
     },
+    getTime(createdAt) {
+            const createdTime = new Date(createdAt);
+            let hour = createdTime.getHours();
+            let minute = createdTime.getMinutes();
+            let ampm;
+            if(hour < 12) {
+                ampm = '오전'
+            } else {
+                ampm = '오후'
+                hour -= 12;
+            }
+            if(hour < 10) {
+                hour = '0'+hour;
+            }
+
+            if(minute < 10) {
+                minute = '0'+minute;
+            }
+
+            return ampm + ' ' + hour + ':' + minute;
+        },
+        isDifferentDay(d1, d2) {
+            const day1 = new Date(d1);
+            const day2 = new Date(d2);
+
+
+            if(day1.getFullYear() == day2.getFullYear()
+            && day1.getMonth() == day2.getMonth()
+            && day1.getDay() == day2.getDay()) return false;
+
+            return true;
+        },
+        getDay(createdAt) {
+            const createdTime = new Date(createdAt);
+
+            return `${createdTime.getFullYear()}년 ${createdTime.getMonth() + 1}월 ${createdTime.getDate()}일`; 
+        }
   },
 };
 </script>
 
 <style scoped>
-.v-app {
-  display: flex;
-  flex-direction: column;
-  height: 100vh; /* 화면 전체 높이 사용 */
+.container {
+  padding: 0 0 0 24px;
 }
 
 .list-group {
   flex-grow: 1; /* 리스트가 가능한 공간을 모두 차지 */
   overflow-y: auto; /* 세로 스크롤 가능 */
-  max-height: calc(100vh - 120px);
+  max-height: calc(100vh - 240px);
 }
 
 .input-group {
-  height: 50px;
   position: sticky;
   bottom: 0; /* 하단에 고정 */
   background-color: white; /* 배경색 설정 */
-  padding: 10px; /* 여백 추가 */
   z-index: 1; /* 리스트 위에 표시되도록 */
+  border: 1px solid;
+  margin-right: 24px;
+}
+.image-group {
+  display: flex;
+  flex-direction: row;
+}
+.text-group {
+  display: flex;
+  flex-direction: row;
+}
+.form-control {
+    width: 100%;
 }
 </style>

src/views/thread/ThreadView.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="channelInsideContainer">
     <ChannelCommonMenu />
-    <div class="channelInsideContentWrap">
-      <ThreadComponent :id="this.id"/>
-    </div>
+    <ThreadComponent :id="this.id"/>
   </div>
 </template>