Skip to content

Commit 032e1a8

Browse files
gomminjaegomminjae
committed
Feat: Notice
1 parent d5ff3e2 commit 032e1a8

File tree

4 files changed

+432
-69
lines changed

4 files changed

+432
-69
lines changed

‎src/Component/Notice/FAQList.vue

Lines changed: 145 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,157 @@
11
<template>
2-
<div>
3-
<h2 class="text-lg font-bold mb-4">자주 묻는 질문 TOP 5</h2>
4-
<ul class="space-y-4">
2+
<div class="p-6 bg-gray-100 min-h-screen">
3+
<!-- 공지사항 제목 및 더보기 -->
4+
<div class="flex justify-between items-center mb-6">
5+
<h2 class="text-xl font-bold text-gray-800">최신뉴스</h2>
6+
<a href="#" class="text-sm text-blue-500 hover:underline">더보기</a>
7+
</div>
8+
9+
<!-- 공지사항 리스트 -->
10+
<ul class="space-y-6">
511
<li
6-
v-for="faq in faqs"
7-
:key="faq.id"
8-
class="border-b pb-2"
12+
v-for="notice in paginatedNotices"
13+
:key="notice.id"
14+
class="neumorphic-card p-4 rounded-lg transition-all duration-300 hover:shadow-lg"
915
>
10-
<!-- 질문 -->
11-
<p class="text-base font-medium text-gray-900">{{ faq.question }}</p>
12-
<!-- 답변 -->
13-
<p class="text-sm text-gray-500">{{ faq.answer }}</p>
16+
<div>
17+
<!-- 공지사항 제목 -->
18+
<p class="text-lg font-bold text-gray-900">{{ notice.title }}</p>
19+
<!-- 카테고리 및 날짜 -->
20+
<div class="flex justify-between text-sm text-gray-500 mt-2">
21+
<span>{{ notice.category }}</span>
22+
<span>{{ notice.date }}</span>
23+
</div>
24+
<!-- 공지사항 내용 -->
25+
<p class="text-sm text-gray-700 mt-3">{{ notice.description }}</p>
26+
</div>
1427
</li>
1528
</ul>
29+
30+
<!-- 페이지네이션 -->
31+
<div class="flex justify-center mt-8 space-x-4">
32+
<button
33+
v-for="page in totalPages"
34+
:key="page"
35+
@click="currentPage = page"
36+
:class="{
37+
'neumorphic-button-active': currentPage === page,
38+
'neumorphic-button': currentPage !== page,
39+
}"
40+
class="px-4 py-2 rounded-lg text-sm font-bold transition-all duration-300 hover:shadow-lg active:shadow-inner"
41+
>
42+
{{ page }}
43+
</button>
44+
</div>
1645
</div>
1746
</template>
1847

1948
<script setup>
20-
import { useNoticeStore } from "@/stores/notice";
49+
import { ref, computed } from "vue";
50+
51+
// 공지사항 더미 데이터
52+
const notices = ref([
53+
{
54+
id: 1,
55+
title: "서비스 점검 안내",
56+
category: "시스템 점검",
57+
date: "2024-11-21",
58+
description: "11월 23일 오전 2시부터 6시까지 시스템 점검이 예정되어 있습니다.",
59+
},
60+
{
61+
id: 2,
62+
title: "신규 기능 업데이트",
63+
category: "공지",
64+
date: "2024-11-20",
65+
description: "새로운 대시보드 기능이 추가되었습니다. 많은 이용 부탁드립니다.",
66+
},
67+
{
68+
id: 3,
69+
title: "이용약관 변경 안내",
70+
category: "법적 안내",
71+
date: "2024-11-15",
72+
description: "12월 1일부터 적용되는 새로운 이용약관을 확인해주세요.",
73+
},
74+
{
75+
id: 4,
76+
title: "회원 가입 이벤트",
77+
category: "이벤트",
78+
date: "2024-11-10",
79+
description: "회원 가입 이벤트가 진행 중입니다. 지금 가입하고 특별한 혜택을 받아보세요!",
80+
},
81+
{
82+
id: 5,
83+
title: "긴급 공지: 서비스 장애 복구",
84+
category: "긴급 공지",
85+
date: "2024-11-05",
86+
description: "서버 장애로 인해 불편을 끼쳐드려 죄송합니다. 현재 복구 작업이 완료되었습니다.",
87+
},
88+
{
89+
id: 6,
90+
title: "신규 서버 배포",
91+
category: "시스템 점검",
92+
date: "2024-11-03",
93+
description: "신규 서버가 성공적으로 배포되었습니다. 성능이 향상되었습니다.",
94+
},
95+
{
96+
id: 7,
97+
title: "보안 업데이트",
98+
category: "보안",
99+
date: "2024-10-28",
100+
description: "중요 보안 패치가 적용되었습니다. 최신 버전을 확인해주세요.",
101+
},
102+
]);
103+
104+
// 페이지네이션 상태
105+
const currentPage = ref(1); // 현재 페이지
106+
const itemsPerPage = ref(3); // 페이지당 항목 수
107+
108+
// 페이지네이션 계산
109+
const totalPages = computed(() => Math.ceil(notices.value.length / itemsPerPage.value));
21110
22-
const store = useNoticeStore();
23-
const { faqs } = store;
111+
// 현재 페이지에 해당하는 공지사항만 필터링
112+
const paginatedNotices = computed(() => {
113+
const start = (currentPage.value - 1) * itemsPerPage.value;
114+
const end = start + itemsPerPage.value;
115+
return notices.value.slice(start, end);
116+
});
24117
</script>
25118

119+
<style scoped>
120+
/* 뉴모피즘 카드 스타일 */
121+
.neumorphic-card {
122+
background: #ffffff;
123+
border-radius: 12px;
124+
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.8);
125+
transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
126+
}
127+
128+
.neumorphic-card:hover {
129+
box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.2), -15px -15px 30px rgba(255, 255, 255, 0.9);
130+
transform: scale(1.02);
131+
}
132+
133+
/* 뉴모피즘 버튼 스타일 */
134+
.neumorphic-button {
135+
background: #ffffff;
136+
border-radius: 12px;
137+
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(255, 255, 255, 0.8);
138+
color: #333;
139+
transition: all 0.3s ease-in-out;
140+
}
141+
142+
.neumorphic-button:hover {
143+
box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.1), inset -6px -6px 12px rgba(255, 255, 255, 0.9);
144+
transform: translateY(-2px);
145+
}
146+
147+
.neumorphic-button-active {
148+
background: #5995ed;
149+
color: white;
150+
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), -4px -4px 8px rgba(255, 255, 255, 0.8);
151+
}
152+
153+
.neumorphic-button:active {
154+
box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
155+
transform: scale(0.98);
156+
}
157+
</style>

‎src/Component/Notice/MainInfo.vue

Lines changed: 143 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,156 @@
11
<template>
2-
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
3-
<!-- 최신 공지사항 및 뉴스 -->
4-
<div>
5-
<div class="flex justify-between items-center mb-4">
6-
<h2 class="text-lg font-bold">최신 공지사항 및 뉴스</h2>
7-
<a href="#" class="text-sm text-blue-500 hover:underline">더보기</a>
8-
</div>
9-
<ul class="space-y-4">
10-
<li
11-
v-for="notice in notices"
12-
:key="notice.id"
13-
class="flex justify-between items-start border-b pb-2"
14-
>
15-
<div>
16-
<p class="text-sm font-bold text-gray-700">{{ notice.category }}</p>
17-
<p class="text-base font-medium text-gray-900">{{ notice.title }}</p>
18-
</div>
19-
<span class="text-sm text-gray-500">{{ notice.date }}</span>
20-
</li>
21-
</ul>
2+
<div class="p-6 bg-gray-100 min-h-screen">
3+
<!-- 공지사항 제목 및 더보기 -->
4+
<div class="flex justify-between items-center mb-6">
5+
<h2 class="text-xl font-bold text-gray-800">공지사항</h2>
226
</div>
237

24-
<!-- 자주 묻는 질문 -->
25-
<div>
26-
<div class="flex justify-between items-center mb-4">
27-
<h2 class="text-lg font-bold">자주 묻는 질문 TOP 5</h2>
28-
<a href="#" class="text-sm text-blue-500 hover:underline">더보기</a>
29-
</div>
30-
<ul class="space-y-4">
31-
<li
32-
v-for="faq in faqs"
33-
:key="faq.id"
34-
class="border-b pb-2"
35-
>
36-
<p class="text-base font-medium text-gray-900">{{ faq.question }}</p>
37-
<p class="text-sm text-gray-500">{{ faq.answer }}</p>
38-
</li>
39-
</ul>
8+
<!-- 공지사항 리스트 -->
9+
<ul class="space-y-6">
10+
<li
11+
v-for="notice in paginatedNotices"
12+
:key="notice.id"
13+
class="neumorphic-card p-4 rounded-lg transition-all duration-300 hover:shadow-lg"
14+
>
15+
<div>
16+
<!-- 공지사항 제목 -->
17+
<p class="text-lg font-bold text-gray-900">{{ notice.title }}</p>
18+
<!-- 카테고리 및 날짜 -->
19+
<div class="flex justify-between text-sm text-gray-500 mt-2">
20+
<span>{{ notice.category }}</span>
21+
<span>{{ notice.date }}</span>
22+
</div>
23+
<!-- 공지사항 내용 -->
24+
<p class="text-sm text-gray-700 mt-3">{{ notice.description }}</p>
25+
</div>
26+
</li>
27+
</ul>
28+
29+
<!-- 페이지네이션 -->
30+
<div class="flex justify-center mt-8 space-x-4">
31+
<button
32+
v-for="page in totalPages"
33+
:key="page"
34+
@click="currentPage = page"
35+
:class="{
36+
'neumorphic-button-active': currentPage === page,
37+
'neumorphic-button': currentPage !== page,
38+
}"
39+
class="px-4 py-2 rounded-lg text-sm font-bold transition-all duration-300 hover:shadow-lg active:shadow-inner"
40+
>
41+
{{ page }}
42+
</button>
4043
</div>
4144
</div>
4245
</template>
4346

4447
<script setup>
45-
import { useNoticeStore } from "@/stores/notice";
48+
import { ref, computed } from "vue";
49+
50+
// 공지사항 더미 데이터
51+
const notices = ref([
52+
{
53+
id: 1,
54+
title: "서비스 점검 안내",
55+
category: "시스템 점검",
56+
date: "2024-11-21",
57+
description: "11월 23일 오전 2시부터 6시까지 시스템 점검이 예정되어 있습니다.",
58+
},
59+
{
60+
id: 2,
61+
title: "신규 기능 업데이트",
62+
category: "공지",
63+
date: "2024-11-20",
64+
description: "새로운 대시보드 기능이 추가되었습니다. 많은 이용 부탁드립니다.",
65+
},
66+
{
67+
id: 3,
68+
title: "이용약관 변경 안내",
69+
category: "법적 안내",
70+
date: "2024-11-15",
71+
description: "12월 1일부터 적용되는 새로운 이용약관을 확인해주세요.",
72+
},
73+
{
74+
id: 4,
75+
title: "회원 가입 이벤트",
76+
category: "이벤트",
77+
date: "2024-11-10",
78+
description: "회원 가입 이벤트가 진행 중입니다. 지금 가입하고 특별한 혜택을 받아보세요!",
79+
},
80+
{
81+
id: 5,
82+
title: "긴급 공지: 서비스 장애 복구",
83+
category: "긴급 공지",
84+
date: "2024-11-05",
85+
description: "서버 장애로 인해 불편을 끼쳐드려 죄송합니다. 현재 복구 작업이 완료되었습니다.",
86+
},
87+
{
88+
id: 6,
89+
title: "신규 서버 배포",
90+
category: "시스템 점검",
91+
date: "2024-11-03",
92+
description: "신규 서버가 성공적으로 배포되었습니다. 성능이 향상되었습니다.",
93+
},
94+
{
95+
id: 7,
96+
title: "보안 업데이트",
97+
category: "보안",
98+
date: "2024-10-28",
99+
description: "중요 보안 패치가 적용되었습니다. 최신 버전을 확인해주세요.",
100+
},
101+
]);
102+
103+
// 페이지네이션 상태
104+
const currentPage = ref(1); // 현재 페이지
105+
const itemsPerPage = ref(3); // 페이지당 항목 수
106+
107+
// 페이지네이션 계산
108+
const totalPages = computed(() => Math.ceil(notices.value.length / itemsPerPage.value));
46109
47-
const store = useNoticeStore();
48-
const { notices, faqs } = store;
110+
// 현재 페이지에 해당하는 공지사항만 필터링
111+
const paginatedNotices = computed(() => {
112+
const start = (currentPage.value - 1) * itemsPerPage.value;
113+
const end = start + itemsPerPage.value;
114+
return notices.value.slice(start, end);
115+
});
49116
</script>
50117

51118
<style scoped>
52-
/* 추가 스타일은 필요에 따라 정의하세요 */
119+
/* 뉴모피즘 카드 스타일 */
120+
.neumorphic-card {
121+
background: #ffffff;
122+
border-radius: 12px;
123+
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.8);
124+
transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
125+
}
126+
127+
.neumorphic-card:hover {
128+
box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.2), -15px -15px 30px rgba(255, 255, 255, 0.9);
129+
transform: scale(1.02);
130+
}
131+
132+
/* 뉴모피즘 버튼 스타일 */
133+
.neumorphic-button {
134+
background: #ffffff;
135+
border-radius: 12px;
136+
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(255, 255, 255, 0.8);
137+
color: #333;
138+
transition: all 0.3s ease-in-out;
139+
}
140+
141+
.neumorphic-button:hover {
142+
box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.1), inset -6px -6px 12px rgba(255, 255, 255, 0.9);
143+
transform: translateY(-2px);
144+
}
145+
146+
.neumorphic-button-active {
147+
background: #5995ed;
148+
color: white;
149+
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), -4px -4px 8px rgba(255, 255, 255, 0.8);
150+
}
151+
152+
.neumorphic-button:active {
153+
box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
154+
transform: scale(0.98);
155+
}
53156
</style>

0 commit comments

Comments
 (0)