diff --git "a/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-12.pdf" "b/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-12.pdf" new file mode 100644 index 0000000..e3a6ba2 Binary files /dev/null and "b/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-12.pdf" differ diff --git "a/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-2.pdf" "b/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-2.pdf" new file mode 100644 index 0000000..b694059 Binary files /dev/null and "b/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-2.pdf" differ diff --git "a/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-3.pdf" "b/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-3.pdf" new file mode 100644 index 0000000..4b4f48f Binary files /dev/null and "b/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-3.pdf" differ diff --git "a/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-5.pdf" "b/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-5.pdf" new file mode 100644 index 0000000..9d1a485 Binary files /dev/null and "b/docs/[OSSP-2] \354\230\244\355\224\210\354\206\214\354\212\244SW\355\224\204\353\241\234\354\240\235\355\212\270 \354\265\234\354\242\205\353\263\264\352\263\240\354\204\234_1\355\214\200_\354\230\244\354\206\214\353\246\254_\353\260\234\355\221\234\354\236\220\353\243\214-5.pdf" differ diff --git a/src/assets/images/cal.svg b/src/assets/images/cal.svg new file mode 100644 index 0000000..ce8fdc2 --- /dev/null +++ b/src/assets/images/cal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/detailarr.svg b/src/assets/images/detailarr.svg new file mode 100644 index 0000000..e695dc1 --- /dev/null +++ b/src/assets/images/detailarr.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/downarr.svg b/src/assets/images/downarr.svg new file mode 100644 index 0000000..90f412f --- /dev/null +++ b/src/assets/images/downarr.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/imgup.svg b/src/assets/images/imgup.svg new file mode 100644 index 0000000..88eeb28 --- /dev/null +++ b/src/assets/images/imgup.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/views/akopolio/Edit/akopolioEdit.vue b/src/views/akopolio/Edit/akopolioEdit.vue index a67d47f..5b14bc4 100644 --- a/src/views/akopolio/Edit/akopolioEdit.vue +++ b/src/views/akopolio/Edit/akopolioEdit.vue @@ -23,19 +23,25 @@

분야 설정

- {{ tag }} + #{{ tag }} + down arrow
-
- {{ tag }} + #{{ tag }}
@@ -65,28 +71,26 @@
-

활동 이미지 업로드

-

최대 5장까지 가능해요!  {{ images.length }} / 5

- - +
+

활동 관련 이미지

+

최대 5장까지 가능해요!  {{ images.length }} / 5

+
+
- +
X
- + + +
저장하기 @@ -100,12 +104,14 @@ - + \ No newline at end of file diff --git a/src/views/akopolio/Edit/edit.js b/src/views/akopolio/Edit/edit.js index 0d9a9b5..7433cb2 100644 --- a/src/views/akopolio/Edit/edit.js +++ b/src/views/akopolio/Edit/edit.js @@ -49,9 +49,10 @@ export default { const activityDate = ref(''); const selectedTags = ref([]); // 초기값 배열로 설정 const tags = ref([ - '전공', '교양', '교내동아리', '교외동아리', '학회', '봉사활동', '인턴', '아르바이트', - '대외활동', '서포터즈', '기자단', '강연/행사', '스터디', '부트캠프', '프로젝트', - '연구', '학생회', '기타', + '전공', '교양', '교내동아리', '교외동아리', '학회', '봉사활동', + '인턴', '아르바이트', '대외활동', '서포터즈', '기자단', '기타', + '강연/행사', '스터디', '부트캠프', '프로젝트', '연구', + '학생회' ]); const images = ref([]); // 초기값 배열로 설정 const star = ref({ diff --git a/src/views/akopolio/create/akopolioCreate.vue b/src/views/akopolio/create/akopolioCreate.vue index 5cca151..5c88253 100644 --- a/src/views/akopolio/create/akopolioCreate.vue +++ b/src/views/akopolio/create/akopolioCreate.vue @@ -23,9 +23,14 @@

분야 설정

- {{ tag }} + #{{ tag }} + down arrow
@@ -36,7 +41,7 @@ :class="{ active: selectedTags.includes(tag) }" class="tag-item" > - {{ tag }} + #{{ tag }}
@@ -85,21 +90,16 @@

Interesting

- +
-

활동 이미지 업로드

-

최대 5장까지 가능해요!  {{ images.length }} / 5

- - - +
+

활동 관련 이미지

+

최대 5장까지 가능해요!  {{ images.length }} / 5

+
@@ -111,6 +111,11 @@
+ + +
저장하기
@@ -123,12 +128,14 @@ \ No newline at end of file diff --git a/src/views/akopolio/create/create.js b/src/views/akopolio/create/create.js index a9e47ac..3223bff 100644 --- a/src/views/akopolio/create/create.js +++ b/src/views/akopolio/create/create.js @@ -13,9 +13,10 @@ export default { activityName: '', activityDate: '', tags: [ - '전공', '교양', '교내동아리', '교외동아리', '학회', '봉사활동', '인턴', '아르바이트', - '대외활동', '서포터즈', '기자단', '강연/행사', '스터디', '부트캠프', '프로젝트', - '연구', '학생회', '기타' + '전공', '교양', '교내동아리', '교외동아리', '학회', '봉사활동', + '인턴', '아르바이트', '대외활동', '서포터즈', '기자단', '기타', + '강연/행사', '스터디', '부트캠프', '프로젝트', '연구', + '학생회' ], selectedTags: ['기타'], isDropdownOpen: false, diff --git a/src/views/akopolio/detail/akopolioDetail.vue b/src/views/akopolio/detail/akopolioDetail.vue index 3720fc6..7597f51 100644 --- a/src/views/akopolio/detail/akopolioDetail.vue +++ b/src/views/akopolio/detail/akopolioDetail.vue @@ -14,24 +14,29 @@
-
-
+

활동명

{{ portfolio ? portfolio.name : '' }}

-
+

활동일

+ calendar

{{ portfolio ? portfolio.startDate : '' }}

-
+

분야 설정

- {{ tag }} + #{{ tag }}
+ down arrow
-
+
@@ -89,13 +94,14 @@ diff --git a/src/views/akopolio/main/akopolioMain.vue b/src/views/akopolio/main/akopolioMain.vue index 74b2264..bdfa257 100644 --- a/src/views/akopolio/main/akopolioMain.vue +++ b/src/views/akopolio/main/akopolioMain.vue @@ -1,6 +1,7 @@ diff --git a/src/views/akopolio/main/main.js b/src/views/akopolio/main/main.js index cbecde1..7f76f14 100644 --- a/src/views/akopolio/main/main.js +++ b/src/views/akopolio/main/main.js @@ -2,8 +2,7 @@ import axios from 'axios'; import PaginationNav from '../paginationNav.vue'; import MainHeader from '../../../components/layout/Header.vue'; import MainFooter from '../../../components/layout/Footer.vue'; -import { ref, computed, onMounted } from 'vue' - +import { ref, computed, onMounted } from 'vue'; export default { components: { @@ -17,36 +16,23 @@ export default { startDate: '', endDate: '', currentPage: 1, - itemsPerPage: 8, + itemsPerPage: 7, selectedTags: [], tags: [ '전공', '교양', '교내동아리', '교외동아리', '학회', '봉사활동', - '인턴', '아르바이트', '대외활동', '서포터즈', '기자단', + '인턴', '아르바이트', '대외활동', '서포터즈', '기자단', '기타', '강연/행사', '스터디', '부트캠프', '프로젝트', '연구', - '학생회', '기타' + '학생회', ], isDropdownOpen: false, portfolioList: [], // 초기 포트폴리오는 빈 배열로 설정 - defaultPortfolioList: [ - { - id: 1, - title: '예시 포트폴리오 1', - createdDate: '2023-01-01', - tags: ['전공', '프로젝트'], - }, - { - id: 2, - title: '예시 포트폴리오 2', - createdDate: '2023-02-15', - tags: ['스터디', '연구'], - }, - // 추가 예시 데이터 - ], }; }, computed: { - filteredPortfolioList() { + if (!this.portfolioList || this.portfolioList.length === 0) { + return []; // 데이터가 없을 때 빈 배열 반환 + } let filteredList = this.portfolioList; // 검색 필터 적용 @@ -70,7 +56,7 @@ export default { const itemDate = new Date(item.startDate); // startDate를 Date 객체로 변환 const start = this.startDate ? new Date(this.startDate) : null; const end = this.endDate ? new Date(this.endDate) : null; - + if (start && !end) { return itemDate >= start; } else if (!start && end) { @@ -91,6 +77,24 @@ export default { totalPages() { return Math.ceil(this.portfolioList.length / this.itemsPerPage); }, + + groupedPortfolioList() { + if (this.filteredPortfolioList.length === 0) { + return []; // 필터링 결과가 없으면 빈 배열 반환 + } + const grouped = {}; + this.filteredPortfolioList.forEach(item => { + if (!grouped[item.startDate]) { + grouped[item.startDate] = []; + } + grouped[item.startDate].push(item); + }); + + // 객체를 배열로 변환하고 날짜를 오래된 순으로 정렬 + return Object.entries(grouped) + .sort((a, b) => new Date(a[0]) - new Date(b[0])) + .map(([date, items]) => ({ date, items })); + }, }, methods: { async fetchUserData() { @@ -102,9 +106,9 @@ export default { credentials: 'include', } ); - + console.log('서버 응답 상태:', response.status, response.statusText); - + if (response.ok) { const data = await response.json(); this.nickname = data.nickname; // nickname을 data 안으로 변경 @@ -124,18 +128,16 @@ export default { } }, - toggleDropdown() { - this.isDropdownOpen = !this.isDropdownOpen; - }, - toggleTag(tag) { const index = this.selectedTags.indexOf(tag); if (index > -1) { + // 이미 선택된 태그라면 배열에서 제거 this.selectedTags.splice(index, 1); } else { + // 선택되지 않은 태그라면 배열에 추가 this.selectedTags.push(tag); } - this.applyFilters(); + this.applyFilters(); // 필터 적용 }, applyFilters() { @@ -150,14 +152,6 @@ export default { this.$router.push('/akopolio/create'); }, - resetFilters() { - this.searchQuery = ''; - this.startDate = ''; - this.endDate = ''; - this.selectedTags = []; - this.currentPage = 1; - }, - goToDetailPage(id) { this.$router.push(`/akopolio/detail/${id}`); }, @@ -165,26 +159,26 @@ export default { async fetchPortfolios() { try { const response = await axios.get(`${process.env.VUE_APP_BE_API_URL}/api/portfolios`); - + // API 응답에 따라 포트폴리오 리스트 업데이트 - this.portfolioList = response.data.length + this.portfolioList = response.data.length ? response.data.map(portfolio => ({ id: portfolio.portfolioId, // 포트폴리오 ID name: portfolio.name, // 포트폴리오 이름 updatedAt: portfolio.updatedAt, // 마지막 업데이트 시간 startDate: portfolio.startDate, // 시작일 tags: portfolio.tags // 태그 리스트 - })) - : this.defaultPortfolioList; // 데이터가 없으면 기본 리스트 사용 + })) + : []; // 데이터가 없으면 빈 배열 사용 } catch (error) { console.error('Error fetching portfolios:', error); - this.portfolioList = this.defaultPortfolioList; // 오류 시 기본 데이터 사용 + this.portfolioList = []; // 오류 시 빈 데이터 사용 } - }, + }, }, mounted() { this.fetchUserData(); // 사용자 정보 로드 this.fetchPortfolios(); - } + }, };