|
| 1 | +<script setup> |
| 2 | +import {useFaqStore} from '@/stores/faq'; |
| 3 | +import { useRouter } from 'vue-router'; |
| 4 | +
|
| 5 | +const router = useRouter(); |
| 6 | +const faqStore = useFaqStore(); |
| 7 | +
|
| 8 | +faqStore.fetchFaqs(); |
| 9 | +
|
| 10 | +const goToDetail = (faqId) => { |
| 11 | + router.push(`/notice/faqDetail/${faqId}`); |
| 12 | +} |
| 13 | +
|
| 14 | +
|
| 15 | +</script> |
| 16 | + |
1 | 17 | <template> |
2 | 18 | <div class="p-6 bg-gray-100 min-h-screen"> |
3 | | - <!-- 공지사항 제목 및 더보기 --> |
| 19 | + <!-- 제목 및 검색 --> |
4 | 20 | <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> |
| 21 | + <h2 class="text-xl font-bold text-gray-800">자주 묻는 질문</h2> |
7 | 22 | </div> |
8 | 23 |
|
9 | 24 | <!-- 공지사항 리스트 --> |
10 | 25 | <ul class="space-y-6"> |
11 | 26 | <li |
12 | | - v-for="notice in paginatedNotices" |
13 | | - :key="notice.id" |
| 27 | + v-for="faq in faqStore.faqs" |
| 28 | + :key="faq.faqId" |
14 | 29 | class="neumorphic-card p-4 rounded-lg transition-all duration-300 hover:shadow-lg" |
| 30 | + @click="goToDetail(faq.faqId)" |
15 | 31 | > |
16 | 32 | <div> |
17 | 33 | <!-- 공지사항 제목 --> |
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> |
| 34 | + <p class="text-lg font-bold text-gray-900">{{ faq.question }}</p> |
| 35 | + <!-- 작성일 및 조회수 --> |
26 | 36 | </div> |
27 | 37 | </li> |
28 | 38 | </ul> |
29 | 39 |
|
30 | 40 | <!-- 페이지네이션 --> |
31 | 41 | <div class="flex justify-center mt-8 space-x-4"> |
32 | 42 | <button |
33 | | - v-for="page in totalPages" |
| 43 | + v-for="page in faqStore.pagination.totalPages" |
34 | 44 | :key="page" |
35 | | - @click="currentPage = page" |
| 45 | + @click="faqStore.setPage(page)" |
36 | 46 | :class="{ |
37 | | - 'neumorphic-button-active': currentPage === page, |
38 | | - 'neumorphic-button': currentPage !== page, |
| 47 | + 'neumorphic-button-active': faqStore.pagination.currentPage === page, |
| 48 | + 'neumorphic-button': faqStore.pagination.currentPage !== page, |
39 | 49 | }" |
40 | 50 | class="px-4 py-2 rounded-lg text-sm font-bold transition-all duration-300 hover:shadow-lg active:shadow-inner" |
41 | 51 | > |
|
45 | 55 | </div> |
46 | 56 | </template> |
47 | 57 |
|
48 | | -<script setup> |
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)); |
110 | | -
|
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 | | -}); |
117 | | -</script> |
118 | 58 |
|
119 | 59 | <style scoped> |
120 | 60 | /* 뉴모피즘 카드 스타일 */ |
|
0 commit comments