File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="project-container">
<div class="top-zone mb30">
<div class="search-zone" style="background-color: #dfe5f3;">
<input type="text" class="form-control sm" style="border: 0;" placeholder="제목을 입력해주세요">
</div>
<div class="layout center justify-end gap10">
<select name="" id="" class="form-select sm" style="border: 0; width: 200px;">
<option value="">최근 수정순</option>
</select>
<button class="btn sm" style="background-color: #f4d01e;border: #f4d01e;">폴더</button>
</div>
</div>
<div class="bottom-zone">
<!-- 새 카드 -->
<div class="card new-card">
<div class="new-symbol">
<img src="../../../resources/img/content/ico_digital_asset.svg" alt="">
</div>
<div class="new-text">새로운<br>디지털 자산 만들기</div>
<div class="new-icon"></div>
</div>
<!-- v-for 카드 반복 -->
<div class="card" v-for="(project, index) in projects" :key="index">
<div class="thumbnail">
<img :src="project.img" alt="" />
</div>
<div class="card-footer">
<div class="w_100 layout center space-between">
<p class="title">{{ project.name }}</p>
<div class="layout center">
<button @click="toggleFavorite(index)">
<img
:src="project.isFavorite
? require('../../../resources/img/content/ico_favorites.svg')
: require('../../../resources/img/content/ico_unFavorites.svg')"
/>
</button>
<button @click="toggleMenu(index)">
<img src="../../../resources/img/component/common/ico_bread_dot.svg"
alt=""
style="transform: rotate(90deg); width: 20px; height: 20px;" />
</button>
</div>
</div>
<p class="date">{{ project.date }}</p>
</div>
<!-- 드롭다운 메뉴 표시 -->
<div v-if="openMenuIndex === index" class="dropdown-menu" :class="dropdownDirection">
<button><img src="../../../resources/img/content/ico_subShare.svg" alt=""> 공유</button>
<button><img src="../../../resources/img/content/ico_subCopy.svg" alt=""> 복사</button>
<button><img src="../../../resources/img/content/ico_trashcan.svg" alt=""> 삭제</button>
<button><img src="../../../resources/img/content/ico_version.svg" alt=""> 버전기록</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
projects: [
{ name: '프로젝트A', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: false },
{ name: '프로젝트B', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: true },
{ name: '프로젝트C', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: false },
{ name: '프로젝트D', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: true },
{ name: '프로젝트E', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: false },
],
openMenuIndex: null,
dropdownDirection: 'right' // 또는 'left'
};
},
methods: {
toggleFavorite(index) {
this.projects[index].isFavorite = !this.projects[index].isFavorite;
},
toggleMenu(index) {
if (this.openMenuIndex === index) {
this.openMenuIndex = null;
return;
}
this.$nextTick(() => {
const card = this.$el.querySelectorAll('.card')[index + 1]; // 0번은 "새 카드"니까 +1
if (!card) return;
const rect = card.getBoundingClientRect();
const windowWidth = window.innerWidth;
// 카드가 오른쪽 200px 이내에 있으면 왼쪽으로 드롭다운
this.dropdownDirection = (windowWidth - rect.right < 200) ? 'left' : 'right';
this.openMenuIndex = index;
});
}
},
watch: {},
computed: {},
components: {},
created() {},
mounted() {},
beforeUnmount() {},
};
</script>