Merge pull request #114 from sseooh/walletList/weekly/11

fix: cardList 프론트 수정
kakao-tech-campus-2nd-step3 · Nov 15, 2024 · 2cbef8d · 2cbef8d
2 parents e1c058d + 164cd0a
commit 2cbef8d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 56 deletions.
diff --git a/src/main/resources/static/css/card/card-list.css b/src/main/resources/static/css/card/card-list.css
@@ -36,22 +36,6 @@ body, html {
     font-size: 1.2rem;
 }
 
-/* 카드 스타일 */
-.card {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: black;
-    color: white;
-    border-radius: 15px;
-    padding: 20px;
-    margin: 10px 0;
-    width: 90%;
-    max-width: 500px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    position: relative; /* 삭제 버튼 위치를 카드 내부로 제한하기 위해 relative 사용 */
-}
-
 /* 삭제 버튼 */
 .delete-button {
     display: none;
@@ -72,27 +56,3 @@ body, html {
 .card:hover .delete-button {
     display: block;
 }
-
-.card-content {
-    flex: 1;
-}
-
-.card-content h3 {
-    font-size: 1.5rem;
-    margin-bottom: 10px;
-}
-
-.card-content p {
-    margin-bottom: 8px;
-}
-
-.card-content a {
-    color: #00bfff;
-    text-decoration: none;
-}
-
-.card-image img {
-    width: 100px;
-    height: auto;
-    border-radius: 8px;
-}
diff --git a/src/main/resources/templates/card-list.html b/src/main/resources/templates/card-list.html
@@ -8,10 +8,12 @@
     <!-- CSS -->
     <link rel="stylesheet" th:href="@{/css/global.css}">
     <link rel="stylesheet" th:href="@{/css/card/card-list.css}">
+    <link rel="stylesheet" th:href="@{/css/card/card.css}">
 
     <!-- JS -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <script th:src="@{/js/script.js}"></script>
+    <script th:src="@{/js/card/card.js}"></script>
     <script th:src="@{/js/card/card-list-delete.js}"></script>
 </head>
 <body>
@@ -22,22 +24,10 @@ <h2 class="title">Wallet</h2>
 
     <div class="card-list">
         <!-- 카드 목록을 동적으로 생성 -->
-        <div class="card" th:each="card : ${cards}">
-            <a th:href="@{/cards/{id}/view(id=${card.id})}">
-                <div class="card-content">
-                    <h3 th:text="${card.name}">Card Name</h3>
-                    <p th:text="${card.position}">Position</p>
-                    <p th:text="${card.company}">Company</p>
-                    <p>📧: <span th:text="${card.email}">Email</span></p>
-                    <p>📱: <span th:text="${card.phone}">Phone</span></p>
-                    <p>💻: GitHub: <a th:href="${'https://github.com/' + card.githubId}" target="_blank" th:text="${card.githubId}">GitHub</a></p>
-                    <p th:text="${card.bio}">Bio</p>
-                </div>
-                <div class="card-image">
-                    <img th:src="@{${card.profileImg}}" alt="Profile Picture">
-                </div>
-            </a>
-            <button class="delete-button" th:attr="card-id=${card.id}" onclick="deleteCardFromGroup(this)">삭제</button>
+        <div th:each="card : ${cards}">
+            <div th:replace="card :: cardSection(${card.id})">
+                <button class="delete-button" th:attr="card-id=${card.id}" onclick="deleteCardFromGroup(this)">삭제</button>
+            </div>
         </div>
     </div>
 </div>