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>
-                    <%count++;};%>
+                <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++;};%>
+            </ul>
+            <%};%>
         </div>
         </div>
-        <div>
-            <br>　　설명 : <%=product.description%><br><br>
-        </div>
-        <form method="get" action="">
-            <div class="input-group">
-                <input type="text" class="form-control" placeholder="검색 키워드를 입력하세요!" name="keyword" autocomplete='off'>
-                <span class="input-group-btn">
-                    <button class="btn btn-secondary" type="submit">찾기</button>
-                </span>
-            </div>
-        </form>
-        <form method="post" action="">
-            <% for (var i in videos) { %>
-                <div style="float:left;
-                             padding: 15px;
-                            ">
-                    <input type="checkbox" name="videoNum" style="
-                        position: absolute;
-                        margin-top: 5px;
-                        margin-left: 5px;
-                        z-index: 4;
-                        zoom:3.0;
-                        " 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>
+        <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="">
+                <div class="input-group" style="padding-left: 10px;">
+                    <input type="text" class="form-control" placeholder="검색 키워드를 입력하세요!" name="keyword" autocomplete='off'>
+                    <span class="input-group-btn">
+                        <button class="btn btn-secondary" type="submit">찾기</button>
+                    </span>
                 </div>
                 </div>
-                <%};%>
-                <button class="btn btn-primary" style="margin-top: 10px; margin-left: 15px;" >영상담기</button>
-        </form>
+            </form>
+            <form method="post" action="">
+                <% for (var i in videos) { %>
+                    <div style="float:left;
+                                         padding: 15px;
+                                        ">
+                        <input type="checkbox" name="videoNum" style="
+                                    position: absolute;
+                                    margin-top: 5px;
+                                    margin-left: 5px;
+                                    z-index: 4;
+                                    zoom:3.0;
+                                    "
+                            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>
+                    </div>
+                    <%};%>
+                        <button class="btn btn-primary" style="margin-top: 10px; margin-left: 10px;">영상담기</button>
+            </form>
+            </div>
+        </div>
         <div class="panel-body">
         <div class="panel-body">
             <div>   
             <div>   
             <hr />
             <hr />
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
- 
-    <a href="/categori/products" class="btn btn-default">목록으로</a>
-    <a href="/categori/products/edit/<%=product._id%>" class="btn btn-primary">수정</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>
+    </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,