Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] 회원컴포넌트 #9

Merged
merged 3 commits into from
Jul 25, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
[K5P-67] [feat] 회원 목록 조회, 회원 데이터 생성
  • Loading branch information
Koneweekk committed Jul 24, 2024
commit 3090ba3b2efdc02bfaad626ced5a65684b36dd2d
Binary file added src/assets/images/icon_excel.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/assets/scss/component/modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
left: $side-bar-width;
width: calc(100vw - $side-bar-width);
height: calc(100vh - $nav-bar-height);
background: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 999
}

.modal-content {
Expand Down
44 changes: 44 additions & 0 deletions src/assets/scss/component/select.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
@mixin select-btn {
border: $theme-color solid 2px;
border-radius: 20px;
width: 100%;
background-color: white;
padding: 7px 15px;
font-weight: bold;
transition: all 0.5s;
}

@mixin select-list {
z-index: 10;
position: absolute;
list-style: none;
width: 100%;
padding: 10px;
border-radius: 10px;
border: $theme-color solid 2px;
background-color: white;
li {
width: 100%;
padding: 5px 10px;
border-radius: 10px;
text-align: center;
font-weight: bold;
transition: all 0.3s;
cursor: pointer;
&:hover {
background-color: rgb(0, 0, 0, 0.1)
}
}
}

.fade-enter-from, .fade-leave-to {
opacity: 0;
}

.fade-enter-active, .fade-leave-active{
transition: all 0.2s;
}

.fade-enter-to, .fade-leave-from{
opacity: 1;
}
44 changes: 44 additions & 0 deletions src/assets/scss/component/table.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,47 @@
@mixin base-table() {
width: 100%;
}

.table-box {
@include flex-box(column, space-between, 0px);
position:relative;
box-shadow: $base-shadow;
background: white;
width: 100%;
flex-grow: 1;
overflow:auto;
border-radius: 5px;
}

.table-row {
transition: all 0.5s;
cursor: pointer;
border-bottom: 1px solid #ccc;

&:hover {
background-color: $back-color;
opacity: 0.5;
}

.table-column {
font-weight: bold;
padding: 10px 20px;
}
}



/* 웹킷 브라우저의 스크롤바 숨기기 */
.table-box::-webkit-scrollbar {
display: none;
}

/* 파이어폭스의 스크롤바 숨기기 */
.table-box {
scrollbar-width: none; /* Firefox */
}

/* Edge, IE 10+, 및 최신 브라우저의 스크롤바 숨기기 */
.table-box {
-ms-overflow-style: none; /* IE 10+ */
}
6 changes: 5 additions & 1 deletion src/components/common/PaginationBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
<PageChoiceVue :store="store"/>
<SizeChoice :store="store"/>
</div>

</template>

<script>
Expand Down Expand Up @@ -36,9 +35,14 @@ export default {

<style lang="scss" scoped>
.pagination-bar {
position: sticky;
bottom: 0;
background: white;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
width: 100%;
padding: 15px 30px;
z-index: 1;
}
</style>
29 changes: 29 additions & 0 deletions src/components/common/btn/ExcelBtn.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<template>
<button class="excel-btn" @click="func">
<span>{{ title }}</span>
<img src="@/assets/images/icon_excel.png" alt="excel_icon">
</button>
</template>

<script>
export default {
name: 'ExcelBtnVue',
props: {
title: String,
func: Function
}
}
</script>

<style lang="scss" scoped>
.excel-btn {
@include flex-box(row, center, 10px);
@include base-button();
padding: 7px 15px;
border: $theme-color solid 3px;
background-color: white;
img {
width: 30px;
}
}
</style>
79 changes: 29 additions & 50 deletions src/components/common/pagination/SizeChoice.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
<template>
<div class="size-choice">
<span>항목수</span>
<div class="size-box" @click="activateDropdown">
<span>{{ store.size }}</span>
<i class="bi bi-caret-up-fill"></i>
<div class="dropdown-box">
<div class="size-box" @click="activateDropdown">
<span>{{ store.size }}</span>
<i class="bi bi-caret-up-fill"></i>
</div>
<transition name="fade">
<ul class="size-dropdown" v-if="activate">
<li @click="setSize(50)" class="size-item">50</li>
<li @click="setSize(20)" class="size-item">20</li>
<li @click="setSize(10)" class="size-item">10</li>
<li @click="setSize(5)" class="size-item">5</li>
</ul>
</transition>
</div>
<ul class="size-dropdown" v-if="activate">
<li @click="setSize(50)" class="size-item">50</li>
<li @click="setSize(20)" class="size-item">20</li>
<li @click="setSize(10)" class="size-item">10</li>
<li @click="setSize(5)" class="size-item">5</li>
</ul>
</div>
</template>

Expand All @@ -28,11 +32,11 @@ export default {
activate: false,
}
},
methods : {
methods: {
activateDropdown() {
this.activate = !this.activate;
},
setSize(size){
setSize(size) {
this.store.setSize(size);
this.activate = false;
},
Expand All @@ -48,62 +52,37 @@ export default {
unmounted() {
document.removeEventListener('click', this.handleClickOutside);
}

}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/component/select.scss';

.size-choice {
position: relative;
justify-self: end;
@include flex-box(row, center, 10px);
justify-self: end;

span {
font-size: 16px;
font-weight: bold;
}
}

.size-box {
@include flex-box(row, center, 5px);
padding: 3px 10px;
border-radius: 10px;
box-shadow: 0px 1px 5px 1px rgb(0, 0, 0, 0.3);
transition: all 0.5s;
cursor: pointer;
&:hover {
opacity: 0.5;
}
.dropdown-box {
position: relative;
}

span {
font-size: 18px;
font-weight: bold;
}

i {
font-size: 24px;
}
.size-box {
@include flex-box(row, center, 10px);
@include base-icon();
@include select-btn;
}

.size-dropdown{
position: absolute;
right: 0px;
bottom: calc(100% + 5px);
padding : 0px;
margin : 0px;
box-shadow: 0px 1px 5px 1px rgb(0, 0, 0, 0.3);
z-index: 10;
list-style: none;
li {
font-size: 18px;
font-weight: bold;
padding: 5px 20px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background-color:rgb(0, 0, 0, 0.1)
}
}
.size-dropdown {
@include flex-box(column, center, 10px);
@include select-list;
bottom: calc(100%);
}

</style>
71 changes: 71 additions & 0 deletions src/components/common/select/KeywordSelect.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<template>
<div class="theme-select">
<button class="select-btn" @click="opreateSelect">
<span>{{ keywordArr[selectedIdx].title }}</span>
<i class="bi bi-caret-down-fill"></i>
</button>
<transition name="fade">
<ul class="select-list" v-if="selectVisible">
<li v-for="(value, key) in keywordArr" :key="key" @click="() => selectKeyword(key)">{{value.title}}</li>
</ul>
</transition>
</div>
</template>

<script>
export default {
name: 'KeywordSelectVue',
props: {
selectedIdx: Number,
keywordArr : Array,
choiceFunc : Function,
},
data() {
return {
selectVisible: false,
}
},
methods: {
opreateSelect() {
this.selectVisible = !this.selectVisible;
},
selectKeyword(idx) {
this.choiceFunc(idx);
this.selectVisible = false;
},
handleClickOutside(event) {
if (!event.target.closest('.select-btn, .select-btn, .select-items')) {
this.selectVisible = false;
}
},
},
mounted() {
document.addEventListener('click', this.handleClickOutside);
},
unmounted() {
document.removeEventListener('click', this.handleClickOutside);
}
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/component/select.scss';

.theme-select {
position: relative;
min-width: 150px;
}

.select-btn {
@include flex-box(row, center, 10px);
@include base-icon();
@include select-btn;
}

.select-list {
@include flex-box(column, center, 10px);
@include select-list;
top: calc(100% + 10px);
}

</style>
Loading