[style] button div로 수정

Minn-Choi · Dec 4, 2024 · 7603f50 · 7603f50
1 parent 482d495
commit 7603f50
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 66 deletions.
diff --git a/src/views/akopolio/Edit/akopolioEdit.vue b/src/views/akopolio/Edit/akopolioEdit.vue
@@ -29,14 +29,14 @@
         </label>
 
         <div v-show="isDropdownOpen" class="tag-container">
-          <button
-            v-for="tag in tags"
-            :key="tag"
-            @click="toggleTag(tag)"
-            :class="{ active: selectedTags.includes(tag) }"
-          >
-            {{ tag }}
-          </button>
+          <div 
+              v-for="tag in tags" 
+              :key="tag" 
+              @click="toggleTag(tag)" 
+              :class="{ active: selectedTags.includes(tag), 'tag-div': true }"
+            >
+              {{ tag }}
+            </div>
         </div>
       </div>
     </div>
@@ -81,15 +81,15 @@
               :alt="`Uploaded Image ${index + 1}`" 
               class="image-preview"
             />
-            <button @click="removeImage(index)" class="delete-image-btn">X</button>
+            <div @click="removeImage(index)" class="delete-image-btn">X</div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="button-container">
-        <button @click="saveData" class="save-button">저장하기</button>
-      </div>
+      <div @click="saveData" class="save-button">저장하기</div>
+    </div>
       <MainFooter />
    </div> 
 </template>
@@ -160,7 +160,7 @@ textarea {
   font-size: 12px;
 }
 
-button {
+.tag-div {
   display: inline-block;
   margin: 3px;
   padding: 5px 10px;
@@ -170,8 +170,13 @@ button {
   border: 1px solid #eec092;
 }
 
-button.active {
-  background-color: #f6b87a;
+.tag-div.active {
+  background-color: #f7c088;
+}
+
+.tag-div:hover {
+  background-color: #f7c088;
+  cursor: pointer;
 }
 
 /* 분야 설정 박스 */
@@ -213,12 +218,14 @@ button.active {
   font-size: 0.875rem;  
   font-weight: 500;  
   border-radius: 9999px; 
+  text-align: center;
   transition: background-color 0.3s ease;
   margin-bottom: 20px;
 }
 
 .save-button:hover {
   background-color: #e5a769;
+  cursor: pointer;
 }
 
 .experience-container h3,
@@ -274,16 +281,15 @@ label {
   top: 5px;
   right: 5px;
   color: black;
-  border: none;
-  background: none; /* 배경색 제거 */
-  font-size: 16px; /* X 아이콘이 더 잘 보이도록 크기 조정 */
+  background: none; 
+  font-size: 15px; 
   cursor: pointer;
-  transition: color 0.3s; /* 색상 전환 애니메이션 추가 */
+  transition: color 0.3s;
 }
 
 
 .delete-image-btn:hover {
-  color: white; 
+  color:#d9d9d9;  
 }
 
 
@@ -307,12 +313,10 @@ label {
   object-fit: contain; /* 이미지가 컨테이너 내에서 비율을 유지하면서 크기 조정 */
 }
 
-/* 기본 input[type="file"] 숨기기 */
 input[type="file"] {
   display: none;
 }
 
-/* 커스텀 버튼 스타일 */
 .custom-file-upload {
   background-color: #faf5f0; 
   color: #f3ab62;

diff --git a/src/views/akopolio/create/akopolioCreate.vue b/src/views/akopolio/create/akopolioCreate.vue
@@ -29,14 +29,15 @@
         </label>
 
         <div v-show="isDropdownOpen" class="tag-container">
-          <button
-            v-for="tag in tags"
-            :key="tag"
-            @click="toggleTag(tag)"
-            :class="{ active: selectedTags.includes(tag) }"
-          >
-            {{ tag }}
-          </button>
+          <div
+              v-for="tag in tags"
+              :key="tag"
+              @click="toggleTag(tag)"
+              :class="{ active: selectedTags.includes(tag) }"
+              class="tag-item"
+            >
+              {{ tag }}
+            </div>
         </div>
       </div>
     </div>
@@ -105,14 +106,14 @@
         <div class="image-card" v-for="(image, index) in images" :key="index">
           <div class="image-preview-card">
             <img :src="image.previewUrl" :alt="image.name" class="image-preview" />
-            <button @click="removeImage(index)" class="delete-image-btn">X</button>
+            <div @click="removeImage(index)" class="delete-image-btn">X</div>
           </div>
         </div>
       </div>
     </div>  
 
     <div class="button-container">
-        <button @click="saveData" class="save-button">저장하기</button>
+      <div @click="saveData" class="save-button">저장하기</div>
       </div>
       <MainFooter />
    </div> 
@@ -183,20 +184,26 @@ textarea {
   font-size: 12px;
 }
 
-button {
+.tag-item {
   display: inline-block;
   margin: 3px;
   padding: 5px 10px;
   border-radius: 40px;
   background-color: white;
   transition: background-color 0.3s;
   border: 1px solid #eec092;
+  cursor: pointer;
 }
 
-button.active {
+.tag-item.active {
   background-color: #f6b87a;
 }
 
+.tag-item:hover {
+  background-color: #f6b87a; 
+  cursor: pointer;
+}
+
 /* 분야 설정 박스 */
 .category-box {
   background-color: white;
@@ -236,12 +243,14 @@ button.active {
   font-size: 0.875rem;  
   font-weight: 500;  
   border-radius: 9999px; 
+  text-align: center;
   transition: background-color 0.3s ease;
   margin-bottom: 20px;
 }
 
 .save-button:hover {
   background-color: #e5a769;
+  cursor: pointer;
 }
 
 h3 {

diff --git a/src/views/akopolio/detail/akopolioDetail.vue b/src/views/akopolio/detail/akopolioDetail.vue
@@ -4,11 +4,11 @@
     <div class="detail-header">
       <div class="header-content">
         <div class="action-buttons">
-          <button class="edit-button" @click="editPortfolio">수정하기</button>
-          <button class="delete-button" @click="handleDeletePortfolio">
+          <div class="edit-button" @click="editPortfolio">수정하기</div>
+          <div class="delete-button" @click="handleDeletePortfolio">
             삭제하기
             <img src="@/assets/images/trash.svg" alt="Delete File" class="delete-file-icon" />
-          </button>
+          </div>
         </div>
       </div>
     </div>
@@ -122,24 +122,29 @@
 .edit-button,
 .delete-button {
   display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 5px 10px;
   border-radius: 10px;
-  border: none;
   cursor: pointer;
   font-size: 10px;
   gap: 4px;
+  background-color: white; 
 }
 
 .edit-button {
-  background-color: white;
   color: black;
 }
 
 .delete-button {
-  background-color: white;
   color: red;
 }
 
+.edit-button:hover,
+.delete-button:hover {
+  background-color: #f2eeee;
+}
+
 .image-upload-container,
 .experience-container,
 .pmi-container {

diff --git a/src/views/akopolio/main/akopolioMain.vue b/src/views/akopolio/main/akopolioMain.vue
@@ -10,7 +10,7 @@
             @input="applyFilters" 
             placeholder="활동명을 입력하세요 (두 글자 이상)"
           />
-          <button class="reset-btn" @click="resetFilters">초기화</button>
+          <div class="reset-btn" @click="resetFilters">초기화</div>
         </div>
         <div class="date-picker">
           <input type="date" v-model="startDate" @input="applyFilters" />
@@ -33,14 +33,14 @@
         </label>
 
         <div v-show="isDropdownOpen" class="tag-container">
-          <button
+          <div
             v-for="tag in tags"
             :key="tag"
             @click="toggleTag(tag)"
             :class="{ active: selectedTags.includes(tag) }"
           >
             {{ tag }}
-          </button>
+          </div>
         </div>
       </div>
     </div>
@@ -75,13 +75,13 @@
       @change-page="handlePageChanged"
     />
 
-    <button class="floating-btn" @click="goToCreatePage">
+    <div class="floating-btn" @click="goToCreatePage">
       <img
         class="logo"
         :src="require('@/assets/images/AddFile.svg')"
         alt="Akoming Logo"
       />
-    </button>
+    </div>
 
 
     <MainFooter />
@@ -153,20 +153,26 @@ input[type='date'] {
   font-size: 12px;
 }
 
-button {
+.tag-container div {
   display: inline-block;
   margin: 3px;
   padding: 5px 10px;
   border-radius: 40px;
   background-color: white;
   transition: background-color 0.3s;
   border: 1px solid #eec092;
+  cursor: pointer;
 }
 
-button.active {
+.tag-container div.active {
   background-color: #f6b87a;
 }
 
+.tag-container div:hover {
+  background-color: #f6b87a; 
+  cursor: pointer;
+}
+
 .filter-container {
   background-color: white;
   padding: 15px;
@@ -284,12 +290,11 @@ button.active {
   margin-left: 10px; /* 오른쪽 여백 */
   background-color: #f4b28c;
   color: black;
-  border: none;
   padding: 6px 11px;
   border-radius: 5px;
   cursor: pointer;
   font-size: 13px;
-  border-radius: 8px;
+  text-align: center;
 }
 
 .reset-btn:hover {