Merge pull request #63 from pirogramming/feature/nyc

ZinYan · web-flow · commit 29bc2da6a27d · 2025-08-16T17:35:33.000+09:00
Feature/nyc
diff --git a/static/css/main/main.css b/static/css/main/main.css
@@ -154,8 +154,8 @@ a.model-card {
 }
 
 .ranking-section .section-header p {
-    color: #666;
-    font-size: 1.1em;
+    color: mediumpurple;
+    font-size: 1em;
 }
 
 .ranking-preview {
@@ -179,8 +179,8 @@ a.model-card {
     flex-direction: column;
     align-items: center;
     text-align: center;
-    width: 250px;
-    max-width: 300px;
+    width: 215px;
+    max-width: 240px;
 }
 
 .ranking-item:hover {
diff --git a/static/css/products/crawled_detail.css b/static/css/products/crawled_detail.css
@@ -1,6 +1,6 @@
 
   .crawled-product-detail-container {
-    max-width: 1200px;
+    max-width: 860px;
     margin: 0 auto;
     padding: 40px 20px;
   }
@@ -219,3 +219,8 @@
       font-size: 1.5em;
     }
   }
+
+.image-box.image-preview {
+  width: 22%;
+  height: 150px;
+}
diff --git a/static/css/products/rating.css b/static/css/products/rating.css
@@ -1,6 +1,6 @@
 /* 별점 섹션 스타일 */
 .rating-section {
-  max-width: 1300px;
+  max-width: 860px;
   margin: 0 auto;
   padding: 20px;
   background-color: #f8f9fa;
@@ -117,7 +117,7 @@
 
 /* 별점 목록 섹션 */
 .ratings-list-section {
-  max-width: 1300px;
+  max-width: 860px;
   margin-top: 30px;
   padding: 20px;
   background-color: #fff;
@@ -213,10 +213,11 @@
     gap: 8px;
     margin-top: 10px;
     flex-wrap: wrap;
+    justify-content: start;
   }
 
   .image-box {
-    width: 80px;
+    width: 95%;
     height: 80px;
     border: 2px dashed #ccc;
     display: flex;
@@ -226,6 +227,7 @@
     position: relative;
     overflow: hidden;
     border-radius: 8px;
+    margin: 0 auto;
   }
 
   .image-box img {
@@ -235,8 +237,16 @@
   }
 
   .add-image .plus-icon {
+    display: flex;
+    background-color: rgb(255, 255, 255);
+    border-radius: 50%;
+    margin: 0 auto;
+    width: 45px;
+    height: 45px;
     font-size: 28px;
-    color: #aaa;
+    justify-content: center;
+    align-items: center;
+    color: mediumpurple;
   }
 
   /* 이미지 4개 이상 -> 업로드 불가(disabled) 상태 버튼 */
@@ -262,8 +272,11 @@
     height: 20px;
     font-size: 14px;
     cursor: pointer;
-    line-height: 18px;
     padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
   }
 
   .delete-image-btn:hover {
@@ -362,15 +375,16 @@
 
   .rating-actions {
     display: flex;
-    justify-content: space-between;
+    justify-content: end;
     align-items: center;
+    gap: 10px;
   }
   .delete-rating-btn {
     background-color: #e74c3c;
     color: white;
     border: none;
     padding: 10px 15px;
-    border-radius: 5px;
+    border-radius: 10px;
     cursor: pointer;
   }
 
diff --git a/static/css/recommendation/color_matrix_style.css b/static/css/recommendation/color_matrix_style.css
@@ -534,6 +534,10 @@ main {
     pointer-events: none;
     white-space: nowrap;
     opacity: 0.6;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .resizer {
diff --git a/static/css/style.css b/static/css/style.css
@@ -2,9 +2,11 @@ body {
     font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
     margin: 0;
     padding: 0;
+    color: mediumpurple;
     background-color: #f4f7f6;
     color: #333;
     line-height: 1.6;
+    cursor: url("{% static 'images/purple_cursor.svg' %}"), auto;
 }
 
 header {
diff --git a/static/images/purple_cursor.svg b/static/images/purple_cursor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#9370DB"><path d="M551-80 406-392 240-160v-720l560 440H516l144 309-109 51Z"/></svg>
diff --git a/static/images/purple_hand.svg b/static/images/purple_hand.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#B197FC" d="M135.652 0c23.625 0 43.826 20.65 43.826 44.8v99.851c17.048-16.34 49.766-18.346 70.944 6.299 22.829-14.288 53.017-2.147 62.315 16.45C361.878 158.426 384 189.346 384 240c0 2.746-.203 13.276-.195 16 .168 61.971-31.065 76.894-38.315 123.731C343.683 391.404 333.599 400 321.786 400H150.261l-.001-.002c-18.366-.011-35.889-10.607-43.845-28.464C93.421 342.648 57.377 276.122 29.092 264 10.897 256.203.008 242.616 0 224c-.014-34.222 35.098-57.752 66.908-44.119 8.359 3.583 16.67 8.312 24.918 14.153V44.8c0-23.45 20.543-44.8 43.826-44.8zM136 416h192c13.255 0 24 10.745 24 24v48c0 13.255-10.745 24-24 24H136c-13.255 0-24-10.745-24-24v-48c0-13.255 10.745-24 24-24zm168 28c-11.046 0-20 8.954-20 20s8.954 20 20 20 20-8.954 20-20-8.954-20-20-20z"/></svg>
diff --git a/static/js/products/like_button.js b/static/js/products/like_button.js
@@ -424,20 +424,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
         return observer;
     }
-    // 랭킹페이지에서 제품 디테일 페이지로 이동하는거
-    const rankingGrid = document.querySelector('.ranking-grid');
-    if (rankingGrid) {
-        rankingGrid.addEventListener('click', function (e) {
-            const rankingCard = e.target.closest('.ranking-card');
-
-            if (rankingCard) {
-                const productId = rankingCard.dataset.productId;
-                if (productId) {
-                    window.open(`/products/detail/${productId}/`, '_blank');
-                }
-            }
-        });
-    }
+    
 
     // CSS 애니메이션 추가
     const style = document.createElement('style');
diff --git a/templates/base.html b/templates/base.html
@@ -1,38 +1,42 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="ko">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Moodico"</title>
-    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
-    {% block extra_head %}{% endblock %}
-  </head>
-  <body>
-    <header>
-      <nav>
-        <a href="{% url 'main' %}" class="logo" style="text-decoration: none"
-          >Moodico"</a
-        >
-        <div class="nav-links">
-          <a
-            href="{% url 'liked_products' %}"
-            class="nav-link liked-products-link"
-          >
-            💖 찜한 아이템
-          </a>
-          <a href="{% url 'login' %}" class="login-icon">👤 마이페이지 </a>
-        </div>
-      </nav>
-    </header>
 
-    <main>{% block content %} {% endblock %}</main>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Moodico"</title>
+  <link rel="stylesheet" href="{% static 'css/style.css' %}" />
+  <style>
+    body {
+      cursor: url("{% static 'images/purple_cursor.svg' %}"),
+      auto;
+    }
+  </style>
+  {% block extra_head %}{% endblock %}
+</head>
 
-    <footer>
-      <p>&copy; 2025 Moodico" All rights reserved.</p>
-    </footer>
-    <script src="{% static 'js/main/main.js' %}"></script>
-    <script src="{% static 'js/products/like_button.js' %}"></script>
-    {% block extra_js %}{% endblock %}
-  </body>
-</html>
+<body>
+  <header>
+    <nav>
+      <a href="{% url 'main' %}" class="logo" style="text-decoration: none">Moodico"</a>
+      <div class="nav-links">
+        <a href="{% url 'liked_products' %}" class="nav-link liked-products-link">
+          💖 찜한 아이템
+        </a>
+        <a href="{% url 'login' %}" class="login-icon">👤 마이페이지 </a>
+      </div>
+    </nav>
+  </header>
+
+  <main>{% block content %} {% endblock %}</main>
+
+  <footer>
+    <p>&copy; 2025 Moodico" All rights reserved.</p>
+  </footer>
+  <script src="{% static 'js/main/main.js' %}"></script>
+  <script src="{% static 'js/products/like_button.js' %}"></script>
+  {% block extra_js %}{% endblock %}
+</body>
+
+</html>
diff --git a/templates/products/crawled_detail.html b/templates/products/crawled_detail.html
@@ -123,7 +123,7 @@ <h3>제품 색상</h3>
   </div>
 
   <div class="user-rating">
-    <h3>내 리뷰</h3>
+    <h3>리뷰 작성하기</h3>
     {% if user_review %}
     <!-- 기존 리뷰가 있는 경우 -->
     <div class="existing-review">
diff --git a/templates/products/product_ranking.html b/templates/products/product_ranking.html
@@ -63,5 +63,21 @@ <h2>아직 랭킹이 없어요</h2>
   {% endif %}
 </div>
 {% endblock %} {% block extra_js %}
+<script>
+  // 랭킹페이지에서 제품 디테일 페이지로 이동하는거
+    const rankingGrid = document.querySelector('.ranking-grid');
+    if (rankingGrid) {
+        rankingGrid.addEventListener('click', function (e) {
+            const rankingCard = e.target.closest('.ranking-card');
+
+            if (rankingCard) {
+                const productId = rankingCard.dataset.productId;
+                if (productId) {
+                    window.open(`/products/detail/${productId}/`, '_blank');
+                }
+            }
+        });
+    }
+</script>
 <script src="{% static 'js/products/like_button.js' %}"></script>
 {% endblock %}

Original file line number	Diff line number	Diff line change
`@@ -154,8 +154,8 @@ a.model-card {`
`154`	`154`	`}`
`155`	`155`
`156`	`156`	`.ranking-section .section-header p {`
`157`		`- color: #666;`
`158`		`- font-size: 1.1em;`
	`157`	`+ color: mediumpurple;`
	`158`	`+ font-size: 1em;`
`159`	`159`	`}`
`160`	`160`
`161`	`161`	`.ranking-preview {`
`@@ -179,8 +179,8 @@ a.model-card {`
`179`	`179`	`flex-direction: column;`
`180`	`180`	`align-items: center;`
`181`	`181`	`text-align: center;`
`182`		`- width: 250px;`
`183`		`- max-width: 300px;`
	`182`	`+ width: 215px;`
	`183`	`+ max-width: 240px;`
`184`	`184`	`}`
`185`	`185`
`186`	`186`	`.ranking-item:hover {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`
`2`	`2`	`.crawled-product-detail-container {`
`3`		`- max-width: 1200px;`
	`3`	`+ max-width: 860px;`
`4`	`4`	`margin: 0 auto;`
`5`	`5`	`padding: 40px 20px;`
`6`	`6`	`}`
`@@ -219,3 +219,8 @@`
`219`	`219`	`font-size: 1.5em;`
`220`	`220`	`}`
`221`	`221`	`}`
	`222`	`+`
	`223`	`+.image-box.image-preview {`
	`224`	`+ width: 22%;`
	`225`	`+ height: 150px;`
	`226`	`+}`