style: Category Detail 뷰 스타일 추가

 <% include ../includes/header.ejs %>
 <% include ../includes/header.ejs %>
     <div class="panel panel-default">
     <div class="panel panel-default">
         <div class="panel-heading">
         <div class="panel-heading">
-            　<%=product.title%>
-        </div>
-        <div style="padding-bottom: 10px">
-            <br>　　작성일 :
+            　<h2 style="padding-left: 30px;"><%=product.title%></h2>
+        <div style="padding-bottom: 10px;">　　
+            작성일 :
             <%=product.getDate.year%> -
             <%=product.getDate.year%> -
                 <%=product.getDate.month%> -
                 <%=product.getDate.month%> -
                     <%=product.getDate.day%>
                     <%=product.getDate.day%>
         </div>
         </div>
+        <div style="padding-left: 30px">
+            설명 : <%=product.description%>
+        </div>
+            <hr/>
+        </div>
+        
         <div>
         <div>
             <% var count=0; %>
             <% var count=0; %>
-            　　※ 보유중인 영상<br><br>
+            <% if (items.length != 0) { %>
+            <ul class="list-group" style="padding-left: 30px; padding-bottom: 30px;">
+                <li class="list-group-item list-group-item-info" aria-current="true">보유중인 영상</li>
                 <% for (var i in items[0]) { %>
                 <% for (var i in items[0]) { %>
-                    <div>
-                        　　<%=items[0][i]%>
-                    </div>
+                <li class="list-group-item"><%=items[0][i].title%> <a href="/categori/products/detail/delete/<%=items[0][i].id%>" style="position: absolute; right: 1%;" class="btn btn-danger btn-sm" onclick="return confirm('삭제하시겠습니까?')">삭제</a></li>
                 <%count++;};%>
                 <%count++;};%>
+            </ul>
+            <%};%>
         </div>
         </div>
-        <div>
-            <br>　　설명 : <%=product.description%><br><br>
-        </div>
+        <button style="margin-left: 30px; margin-bottom: 10px;" class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
+            aria-expanded="false" aria-controls="collapseExample">
+            영상 추가하기
+        </button>
+        <div class="collapse show" id="collapseExample" style="padding-left: 30px;">
+            <div class="card card-body">
             <form method="get" action="">
             <form method="get" action="">
-            <div class="input-group">
+                <div class="input-group" style="padding-left: 10px;">
                     <input type="text" class="form-control" placeholder="검색 키워드를 입력하세요!" name="keyword" autocomplete='off'>
                     <input type="text" class="form-control" placeholder="검색 키워드를 입력하세요!" name="keyword" autocomplete='off'>
                     <span class="input-group-btn">
                     <span class="input-group-btn">
                         <button class="btn btn-secondary" type="submit">찾기</button>
                         <button class="btn btn-secondary" type="submit">찾기</button>
@@ -40,13 +50,16 @@
                                     margin-left: 5px;
                                     margin-left: 5px;
                                     z-index: 4;
                                     z-index: 4;
                                     zoom:3.0;
                                     zoom:3.0;
-                        " value="<%=videos[i].id + '///' + videos[i].title +'///'+ videos[i].categori +'///'+ videos[i].video_id +'///'+ videos[i].urls%>"/>
+                                    "
+                            value="<%=videos[i].id + '///' + videos[i].title +'///'+ videos[i].categori +'///'+ videos[i].video_id +'///'+ videos[i].urls%>" />
                         <div id="<%=videos[i].id%>" vid="<%=videos[i].video_id%>">
                         <div id="<%=videos[i].id%>" vid="<%=videos[i].video_id%>">
                         </div>
                         </div>
                     </div>
                     </div>
                     <%};%>
                     <%};%>
-                <button class="btn btn-primary" style="margin-top: 10px; margin-left: 15px;" >영상담기</button>
+                        <button class="btn btn-primary" style="margin-top: 10px; margin-left: 10px;">영상담기</button>
             </form>
             </form>
+            </div>
+        </div>
         <div class="panel-body">
         <div class="panel-body">
             <div>   
             <div>   
             <hr />
             <hr />
@@ -54,11 +67,15 @@
         </div>
         </div>
     </div>
     </div>
     
     
-    <a href="/categori/products" class="btn btn-default">목록으로</a>
+    <div style="padding-bottom: 30px;">
+        <a href="/categori/products" class="btn btn-dark">목록으로</a>
         <a href="/categori/products/edit/<%=product._id%>" class="btn btn-primary">수정</a>
         <a href="/categori/products/edit/<%=product._id%>" class="btn btn-primary">수정</a>
+    </div>
 <% include ../includes/footer.ejs %>
 <% include ../includes/footer.ejs %>
+
 <script>
 <script>
 (function(){
 (function(){
+    // 영상 메모 구현 파트(아직 미구현)
     $(document).ready(function() {
     $(document).ready(function() {
         $('#commentForm').submit(function(){
         $('#commentForm').submit(function(){
             var $contentVal = $(this).children('textarea[name=content]').val();
             var $contentVal = $(this).children('textarea[name=content]').val();
@@ -88,6 +105,7 @@
     });
     });
 })();
 })();
 </script>
 </script>
+
 <script>
 <script>
 $(document).on('click' , '.comment_delete' , function(){
 $(document).on('click' , '.comment_delete' , function(){
     if(confirm('삭제하시겠습니까?')){ //확인창 예 눌렀을 시만 진행
     if(confirm('삭제하시겠습니까?')){ //확인창 예 눌렀을 시만 진행
@@ -107,18 +125,7 @@ $(document).on('click' , '.comment_delete' , function(){
     }
     }
 });
 });
 </script>
 </script>
-<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
-<script type="text/javascript"
-    src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
-<script type="text/javascript">
-    var $masonry_container = $('#masonry_container');
-    $masonry_container.imagesLoaded(function () {
-        $masonry_container.masonry({
-            itemSelector: '.masonry-grid',
-            columnWidth: 270
-        });
-    });
-</script>
+
 <script>
 <script>
     var tag = document.createElement('script');
     var tag = document.createElement('script');
 
 
@@ -137,8 +144,8 @@ $(document).on('click' , '.comment_delete' , function(){
     function onYouTubeIframeAPIReady() {
     function onYouTubeIframeAPIReady() {
         for (var i = 0; i < videoIds.length; i++) {
         for (var i = 0; i < videoIds.length; i++) {
             player = new YT.Player(players[i], {
             player = new YT.Player(players[i], {
-                height: '300',
-                width: '500',
+                height: '360',
+                width: '640',
                 videoId: videoIds[i],
                 videoId: videoIds[i],
                 events: {
                 events: {
                     // 'onReady': onPlayerReady,
                     // 'onReady': onPlayerReady,