diff --git a/README.md b/README.md index 0f8ecec..9771f63 100644 --- a/README.md +++ b/README.md @@ -28,9 +28,9 @@ ## πŸ”— Backend Repository -ν”„λ‘œμ νŠΈμ˜ λ°±μ—”λ“œ μ½”λ“œμ™€ API μ„œλ²„λŠ” μ•„λž˜ λ ˆν¬μ§€ν† λ¦¬μ—μ„œ ν™•μΈν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€: +⬇️ ν”„λ‘œμ νŠΈμ˜ λ°±μ—”λ“œ λ ˆν¬μ§€ν† λ¦¬λŠ” μ•„λž˜μ—μ„œ ν™•μΈν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€ ⬇️ -[![Backend Repository](https://img.shields.io/badge/Backend-Repository-orange?style=for-the-badge&logo=github)](https://github.com/saokiritoni/2024-2-OSSProj-Osori-BE-01/tree/main) +[![Backend Repository](https://img.shields.io/badge/Backend-Repository-orange?style=for-the-badge&logo=github)](https://github.com/CSID-DGU/2024-2-OSSProj-Osori-BE-01)
diff --git a/src/assets/images/trash.svg b/src/assets/images/trash.svg new file mode 100644 index 0000000..c25798b --- /dev/null +++ b/src/assets/images/trash.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/views/akopolio/Edit/akopolioEdit.vue b/src/views/akopolio/Edit/akopolioEdit.vue index fd3d193..3bbea85 100644 --- a/src/views/akopolio/Edit/akopolioEdit.vue +++ b/src/views/akopolio/Edit/akopolioEdit.vue @@ -64,10 +64,29 @@ - - - - +
+

ν™œλ™ 이미지 μ—…λ‘œλ“œ

+

μ΅œλŒ€ 5μž₯κΉŒμ§€ κ°€λŠ₯ν•΄μš”!  {{ images.length }} / 5

+ + + +
+
+
+ + +
+
+
+
+ +
+ +
+ + @@ -78,14 +97,16 @@ max-width: 500px; margin: 4rem auto; padding: 20px; - background-color: #ffe8d1; + background-color: #fae8da; min-height: calc(100vh - 120px); /* 헀더와 ν‘Έν„°λ₯Ό κ³ λ €ν•œ νŽ˜μ΄μ§€ 높이 μ‘°μ • */ + font-family: 'NanumSquareRound', sans-serif; } .header { text-align: center; } +.image-upload-container, .activity-info, .category-box, .experience-container, @@ -95,6 +116,7 @@ .activity-name-container { margin-bottom: 20px; + } @@ -104,25 +126,24 @@ textarea { width: 100%; padding: 10px; margin-top: 5px; - background-color: #fff3e6; + background-color: white; border-radius: 5px; resize: none; font-size: 13px; } +.image-upload-container, .star-box, .pmi-box { - background-color: #fff3e6; + background-color: white; padding: 20px; border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .activity-info{ - background-color: #fff3e6; + background-color: white; padding: 20px; border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } @@ -137,23 +158,22 @@ textarea { button { display: inline-block; margin: 3px; - padding: 8px; + padding: 5px 10px; border-radius: 40px; background-color: white; transition: background-color 0.3s; + border: 1px solid #eec092; } button.active { - background-color: #F6B87A; - color: white; + background-color: #f6b87a; } /* λΆ„μ•Ό μ„€μ • λ°•μŠ€ */ .category-box { - background-color: #fff3e6; + background-color: white; padding: 15px; border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .category-label { @@ -164,53 +184,146 @@ button.active { .tag-badge { display: inline-block; margin-left: 10px; - background-color: #F6B87A; - color: white; + background-color: #f6b87a; + color: black; padding: 5px 10px; border-radius: 20px; font-size: 13px; } -/* μ €μž₯ λ²„νŠΌ */ +.button-container { + display: flex; + justify-content: center; +} + .save-button { - width: 100%; - padding: 15px; + width: 160px; + margin-top: 20px; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; background-color: #F6B87A; - color: white; - border: none; - border-radius: 10px; - font-size: 16px; - cursor: pointer; - ; + color: black; + font-size: 0.875rem; + font-weight: 500; + border-radius: 9999px; + transition: background-color 0.3s ease; + margin-bottom: 20px; } .save-button:hover { - background-color: #f4c08c; + background-color: #e5a769; } -h3 { - font-size: 15px; - color: #FF7F00; +.experience-container h3, +.pmi-container h3 { + font-size: 15px; + color: #ff7f00; + margin-bottom: 10px; margin-top: 10px; + white-space: nowrap; + padding: 0; +} + +h3{ + font-size: 15px; + color: #ff7f00; + margin: 0; + white-space: nowrap; + padding: 0; + font-family: 'NanumSquareRound', sans-serif; } h2 { + font-size: 16px; + color: #ff7f00; + margin-bottom: 10px; + padding: 0; + font-family: 'NanumSquareRound', sans-serif; +} + +.category-box h2{ margin: 0; - font-size: 15px; } +p { + margin:0; + font-size: 14px; + word-break: break-word; + padding: 0; +} + +.experience-container p, +.pmi-container p { + margin-bottom: 15px; +} + + label { font-size: 15px; } -.tooltip { +.delete-image-btn { position: absolute; - background-color: rgba(51, 51, 51, 0.9); - color: white; - padding: 8px; - border-radius: 5px; - z-index: 1000; - white-space: nowrap; + top: 5px; + right: 5px; + color: black; + border: none; + background: none; /* 배경색 제거 */ + font-size: 16px; /* X μ•„μ΄μ½˜μ΄ 더 잘 보이도둝 크기 μ‘°μ • */ + cursor: pointer; + transition: color 0.3s; /* 색상 μ „ν™˜ μ• λ‹ˆλ©”μ΄μ…˜ μΆ”κ°€ */ +} + + +.delete-image-btn:hover { + color: white; +} + + +.image-preview-container { + display: flex; + flex-wrap: wrap; + gap: 10px; + width: 100%; } + +.image-preview-card { + width: 100%; + max-width: 312px; + position: relative; + overflow: hidden; +} + +.image-preview { + width: 100%; + height: 100%; + object-fit: contain; /* 이미지가 μ»¨ν…Œμ΄λ„ˆ λ‚΄μ—μ„œ λΉ„μœ¨μ„ μœ μ§€ν•˜λ©΄μ„œ 크기 μ‘°μ • */ +} + +/* κΈ°λ³Έ input[type="file"] 숨기기 */ +input[type="file"] { + display: none; +} + +/* μ»€μŠ€ν…€ λ²„νŠΌ μŠ€νƒ€μΌ */ +.custom-file-upload { + background-color: #faf5f0; + color: #f3ab62; + padding: 10px 128px; + font-size: 13px; + border-radius: 5px; + cursor: pointer; + margin-top: 10px; + transition: background-color 0.3s ease; + margin-bottom: 10px; +} + +.custom-file-upload:hover { + background-color: #f5eadf; +} + + diff --git a/src/views/akopolio/Edit/edit.js b/src/views/akopolio/Edit/edit.js index 0300e12..308ebb3 100644 --- a/src/views/akopolio/Edit/edit.js +++ b/src/views/akopolio/Edit/edit.js @@ -1,6 +1,8 @@ import MainHeader from '../../../components/layout/Header.vue'; import MainFooter from '../../../components/layout/Footer.vue'; -import { ref, computed } from 'vue'; +import { ref, computed, onMounted } from 'vue'; +import { useRoute } from 'vue-router'; +import axios from 'axios'; export default { components: { @@ -8,22 +10,38 @@ export default { MainFooter }, setup() { - const activityName = ref('μœ΅ν•©ν”„λ‘œκ·Έλž˜λ°'); - const activityDate = ref('2024-11-01'); - const selectedTags = ref(['전곡']); + const route = useRoute(); + const portfolioId = route.params.id; + const activityName = ref(''); + const activityDate = ref(''); + const selectedTags = ref([]); const tags = ref([ '전곡', 'ꡐ양', 'ꡐ내동아리', 'ꡐ외동아리', 'ν•™νšŒ', 'λ΄‰μ‚¬ν™œλ™', '인턴', 'μ•„λ₯΄λ°”μ΄νŠΈ', 'λŒ€μ™Έν™œλ™', 'μ„œν¬ν„°μ¦ˆ', 'κΈ°μžλ‹¨', 'κ°•μ—°/행사', 'μŠ€ν„°λ””', 'λΆ€νŠΈμΊ ν”„', 'ν”„λ‘œμ νŠΈ', - '연ꡬ', 'ν•™μƒνšŒ', '기타' + '연ꡬ', 'ν•™μƒνšŒ', '기타', ]); - const star = ref({ situation: 'ν™œλ™μ„ μ‹œμž‘ν•œ μ΄μœ λŠ”...', task: 'μ°Έμ—¬ν•œ ν™œλ™μ€...', action: 'μ œκ°€ 맑은 역할은...', result: 'κ²°κ³ΌλŠ” μ΄λ ‡κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.' }); - const pmi = ref({ plus: '였늘의 쒋은 점은...', minus: 'μ•„μ‰¬μ› λ˜ 점은...', interesting: 'μž¬λ―Έμžˆμ—ˆλ˜ 점은...' }); + const images = ref([ + { previewUrl: "https://via.placeholder.com/150" } // μ˜ˆμ‹œ 이미지 + ]); + const star = ref({ + situation: '', + task: '', + action: '', + result: '', + }); + const pmi = ref({ + plus: '', + minus: '', + interesting: '', + }); const isDropdownOpen = ref(false); + // λ“œλ‘­λ‹€μš΄ ν† κΈ€ const toggleDropdown = () => { isDropdownOpen.value = !isDropdownOpen.value; }; + // νƒœκ·Έ 선택/ν•΄μ œ const toggleTag = (tag) => { const index = selectedTags.value.indexOf(tag); if (index > -1) { @@ -33,26 +51,158 @@ export default { } }; + // ν…μŠ€νŠΈ μ˜μ—­ μžλ™ 크기 μ‘°μ • const autoResize = (event) => { const textarea = event.target; textarea.style.height = 'auto'; textarea.style.height = `${textarea.scrollHeight}px`; }; - const saveData = () => { + // 포트폴리였 데이터 κ°€μ Έμ˜€κΈ° + const fetchPortfolioById = async () => { + try { + const response = await fetch( + `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}` + ); + + if (!response.ok) { + throw new Error(`Failed to fetch portfolio: ${response.statusText}`); + } + + const data = await response.json(); + activityName.value = data.activityName || ''; + activityDate.value = data.activityDate || ''; + selectedTags.value = data.selectedTags || []; + star.value = data.star || { situation: '', task: '', action: '', result: '' }; + pmi.value = data.pmi || { plus: '', minus: '', interesting: '' }; + images.value = data.images || []; + } catch (error) { + console.error('Error fetching portfolio:', error); + alert('포트폴리였λ₯Ό λΆˆλŸ¬μ˜€λŠ” 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.'); + } + }; + + const handleFileChange = (event) => { + const selectedFiles = Array.from(event.target.files); + if (images.value.length + selectedFiles.length > 5) { + alert('μ΅œλŒ€ 5개의 μ΄λ―Έμ§€λ§Œ μ—…λ‘œλ“œν•  수 μžˆμŠ΅λ‹ˆλ‹€.'); + return; + } + + const newImagesPromises = selectedFiles.map((file) => { + const previewUrl = URL.createObjectURL(file); + const imageElement = new Image(); + imageElement.src = previewUrl; + + return new Promise((resolve) => { + imageElement.onload = () => { + const aspectRatio = imageElement.width / imageElement.height; + let containerWidth, containerHeight; + + if (aspectRatio > 1) { + containerWidth = '300px'; + containerHeight = `${300 / aspectRatio}px`; + } else { + containerWidth = `${300 * aspectRatio}px`; + containerHeight = '300px'; + } + + resolve({ + file, + name: file.name, + size: file.size, + previewUrl, + containerWidth, + containerHeight, + }); + }; + }); + }); + + Promise.all(newImagesPromises).then((newImages) => { + const uniqueNewImages = newImages.filter( + (newImage) => + !images.value.some( + (existingImage) => existingImage.previewUrl === newImage.previewUrl + ) + ); + + if (uniqueNewImages.length === 0) { + alert('이미 μ„ νƒλœ μ΄λ―Έμ§€μž…λ‹ˆλ‹€.'); + return; + } + + images.value = [...images.value, ...uniqueNewImages]; + }); + }; + + const removeImage = (index) => { + URL.revokeObjectURL(images.value[index].previewUrl); + images.value.splice(index, 1); + }; + + const uploadImages = async () => { + const uploadedUrls = []; + for (const image of images.value) { + try { + const { data } = await axios.post( + `${process.env.VUE_APP_BE_API_URL}/api/get-presigned-url`, + { + fileName: image.name, + fileType: image.file.type, + } + ); + + await axios.put(data.url, image.file, { + headers: { 'Content-Type': image.file.type }, + }); + + const uploadedUrl = data.url.split('?')[0]; + uploadedUrls.push(uploadedUrl); + } catch (error) { + console.error('Error uploading image:', error); + alert('이미지 μ—…λ‘œλ“œ 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.'); + } + } + }; + + + // μ €μž₯ λ²„νŠΌ 클릭 μ‹œ μ„œλ²„μ— 반영 + const saveData = async () => { if (!isFormComplete.value) { alert('λͺ¨λ“  ν•„λ“œλ₯Ό μž…λ ₯ν•΄μ£Όμ„Έμš”.'); return; } - // μ €μž₯ 둜직 - console.log('μ €μž₯된 데이터:', { - activityName: activityName.value, - activityDate: activityDate.value, - selectedTags: selectedTags.value, - star: star.value, - pmi: pmi.value - }); + try { + // μˆ˜μ •λœ 포트폴리였 데이터와 이미지 URL을 μ„œλ²„μ— 전솑 + const response = await fetch( + `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}`, + { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + activityName: activityName.value, + activityDate: activityDate.value, + selectedTags: selectedTags.value, + star: star.value, + pmi: pmi.value, + images: images.value.map(image => image.name), // μ„œλ²„μ— 전달할 이미지 파일 μ΄λ¦„λ§Œ 전달 + }), + } + ); + + if (!response.ok) { + throw new Error(`Failed to save data: ${response.statusText}`); + } + + alert('데이터가 μ„±κ³΅μ μœΌλ‘œ μ €μž₯λ˜μ—ˆμŠ΅λ‹ˆλ‹€.'); + } catch (error) { + console.error('Error saving data:', error); + alert('데이터 μ €μž₯ 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.'); + } }; const isFormComplete = computed(() => { @@ -65,6 +215,11 @@ export default { ); }); + // μ»΄ν¬λ„ŒνŠΈ 마운트 μ‹œ 데이터 κ°€μ Έμ˜€κΈ° + onMounted(() => { + fetchPortfolioById(); + }); + return { activityName, activityDate, @@ -73,9 +228,13 @@ export default { isDropdownOpen, star, pmi, + images, toggleDropdown, toggleTag, autoResize, + handleFileChange, + removeImage, + uploadImages, saveData, isFormComplete }; diff --git a/src/views/akopolio/create/akopolioCreate.vue b/src/views/akopolio/create/akopolioCreate.vue index 39a1925..29ddaee 100644 --- a/src/views/akopolio/create/akopolioCreate.vue +++ b/src/views/akopolio/create/akopolioCreate.vue @@ -109,13 +109,13 @@ - - - - - - - + + +
+ +
+ + @@ -126,8 +126,9 @@ max-width: 500px; margin: 4rem auto; padding: 20px; - background-color: #ffe8d1; + background-color: #fae8da; min-height: calc(100vh - 120px); /* 헀더와 ν‘Έν„°λ₯Ό κ³ λ €ν•œ νŽ˜μ΄μ§€ 높이 μ‘°μ • */ + font-family: 'NanumSquareRound', sans-serif; } .header { @@ -153,7 +154,7 @@ textarea { width: 100%; padding: 10px; margin-top: 5px; - background-color: #fff3e6; + background-color: white; border-radius: 5px; resize: none; font-size: 13px; @@ -162,17 +163,15 @@ textarea { .image-upload-container, .star-box, .pmi-box { - background-color: #fff3e6; + background-color: white; padding: 20px; border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .activity-info{ - background-color: #fff3e6; + background-color: white; padding: 20px; border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } @@ -187,23 +186,22 @@ textarea { button { display: inline-block; margin: 3px; - padding: 8px; + padding: 5px 10px; border-radius: 40px; background-color: white; transition: background-color 0.3s; + border: 1px solid #eec092; } button.active { - background-color: #F6B87A; - color: white; + background-color: #f6b87a; } /* λΆ„μ•Ό μ„€μ • λ°•μŠ€ */ .category-box { - background-color: #fff3e6; + background-color: white; padding: 15px; border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .category-label { @@ -214,42 +212,55 @@ button.active { .tag-badge { display: inline-block; margin-left: 10px; - background-color: #F6B87A; - color: white; + background-color: #f6b87a; + color: black; padding: 5px 10px; border-radius: 20px; font-size: 13px; } +.button-container { + display: flex; + justify-content: center; +} + .save-button { - width: 100%; - padding: 15px; + width: 160px; + margin-top: 20px; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; background-color: #F6B87A; - color: white; - border: none; - border-radius: 10px; - font-size: 16px; - cursor: pointer; - ; + color: black; + font-size: 0.875rem; + font-weight: 500; + border-radius: 9999px; + transition: background-color 0.3s ease; + margin-bottom: 20px; } .save-button:hover { - background-color: #f4c08c; + background-color: #e5a769; } h3 { font-size: 15px; color: #FF7F00; margin-top: 10px; + font-family: 'NanumSquareRound', sans-serif; } h2 { margin: 0; - font-size: 15px; + color: #FF7F00; + font-size: 16px; + font-family: 'NanumSquareRound', sans-serif; } label { font-size: 15px; + font-family: 'NanumSquareRound', sans-serif; } .image-preview-container { @@ -289,9 +300,6 @@ label { color: white; } - - - /* κΈ°λ³Έ input[type="file"] 숨기기 */ input[type="file"] { display: none; @@ -299,18 +307,19 @@ input[type="file"] { /* μ»€μŠ€ν…€ λ²„νŠΌ μŠ€νƒ€μΌ */ .custom-file-upload { - background-color: white; /* 배경색 */ - color: #f3ab62; /* κΈ€μžμƒ‰ */ - padding: 10px 128px; /* λ²„νŠΌ 크기 */ - font-size: 13px; /* κΈ€μž 크기 */ + background-color: #faf5f0; + color: #f3ab62; + padding: 10px 128px; + font-size: 13px; border-radius: 5px; cursor: pointer; + margin-top: 10px; + transition: background-color 0.3s ease; margin-bottom: 10px; - transition: background-color 0.3s ease; /* 마우슀 μ˜€λ²„ μ‹œ λΆ€λ“œλŸ½κ²Œ 색상 λ³€ν™” */ } .custom-file-upload:hover { - background-color: #f6e3d2; /* 마우슀λ₯Ό μ˜¬λ Έμ„ λ•Œ 배경색 λ³€κ²½ */ + background-color: #f5eadf; } \ No newline at end of file diff --git a/src/views/akopolio/create/create.js b/src/views/akopolio/create/create.js index 12f53bf..53b8618 100644 --- a/src/views/akopolio/create/create.js +++ b/src/views/akopolio/create/create.js @@ -124,33 +124,33 @@ export default { for (const image of this.images) { try { // 1. ν”„λ¦¬μ‚¬μΈλ“œ URL μš”μ²­ - /* - const { data } = await axios.post('/api/get-presigned-url', { - fileName: image.name, - fileType: image.type - }); - */ + + const { data } = await axios.post( + `${process.env.VUE_APP_BE_API_URL}/api/get-presigned-url`, + { + fileName: image.name, + fileType: image.type, + } + ); // 2. ν”„λ¦¬μ‚¬μΈλ“œ URL을 μ΄μš©ν•΄ 이미지 μ—…λ‘œλ“œ - /* - await axios.put(data.url, image, { - headers: { 'Content-Type': image.type } + + await axios.put(data.url, image.file, { + headers: { 'Content-Type': image.file.type }, }); - */ + // 3. μ—…λ‘œλ“œλœ μ΄λ―Έμ§€μ˜ URL을 μ €μž₯ (ν”„λ¦¬μ‚¬μΈλ“œ URLμ—μ„œ 파일 URL을 μΆ”μΆœ) - /* + const uploadedUrl = data.url.split('?')[0]; uploadedUrls.push(uploadedUrl); - */ - - console.log('Image ready to upload:', image.name); + } catch (error) { console.error('Error uploading image:', error); alert('이미지 μ—…λ‘œλ“œ 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.'); } } - + this.uploadedImageUrls = uploadedUrls; }, @@ -176,22 +176,21 @@ export default { }; try { - // 이 λΆ€λΆ„μ—μ„œ μ‹€μ œ λ°±μ—”λ“œλ‘œ 데이터λ₯Ό 전솑할 μ˜ˆμ • - // await axios.post('/api/portfolios', newPortfolio); - - // ν˜„μž¬λŠ” λ°±μ—”λ“œ 연동 뢀뢄을 주석 μ²˜λ¦¬ν•΄λ‘μ—ˆμœΌλ―€λ‘œ, μž„μ‹œ λ©”μ‹œμ§€λ§Œ ν‘œμ‹œ - console.log('μ €μž₯ν•  데이터:', newPortfolio); // μ½˜μ†”μ— 데이터 확인 - alert('(ν…ŒμŠ€νŠΈ) ν™œλ™μ΄ μ €μž₯λ˜μ—ˆμŠ΅λ‹ˆλ‹€!'); // μž„μ‹œ μ•Œλ¦Ό λ©”μ‹œμ§€ + await axios.post( + `${process.env.VUE_APP_BE_API_URL}/api/portfolios`, + newPortfolio + ); - // μ‹€μ œ λ°±μ—”λ“œμ™€ 연동 μ‹œ, μ €μž₯ ν›„ λ¦¬λ””λ ‰μ…˜ μ„€μ • - // this.$router.push('/akopolio/main'); + alert('ν™œλ™μ΄ μ„±κ³΅μ μœΌλ‘œ μ €μž₯λ˜μ—ˆμŠ΅λ‹ˆλ‹€!'); - this.resetForm(); // 데이터 μ €μž₯ ν›„ μž…λ ₯ 폼 μ΄ˆκΈ°ν™” + // μ €μž₯ ν›„ νŽ˜μ΄μ§€ 이동 (예: 메인 νŽ˜μ΄μ§€) + this.$router.push('/akopolio/main'); } catch (error) { console.error('Error saving portfolio:', error); alert('μ €μž₯ 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.'); } }, + resetForm() { this.activityName = ''; this.activityDate = ''; diff --git a/src/views/akopolio/detail/akopolioDetail.vue b/src/views/akopolio/detail/akopolioDetail.vue index 6993992..e7613fa 100644 --- a/src/views/akopolio/detail/akopolioDetail.vue +++ b/src/views/akopolio/detail/akopolioDetail.vue @@ -5,23 +5,26 @@
- +
-
-

ν™œλ™λͺ…

+
+

ν™œλ™λͺ…

{{ portfolio ? portfolio.title : '' }}

-
-

ν™œλ™μΌ

-

{{ portfolio ? portfolio.createdDate : '' }}

-
-
-

λΆ„μ•Ό μ„€μ •

+
+

ν™œλ™μΌ

+

{{ portfolio ? portfolio.createdDate : '' }}

+
+
+

λΆ„μ•Ό μ„€μ •

{{ tag }} @@ -67,11 +70,13 @@

{{ portfolio && portfolio.pmi ? portfolio.pmi.interesting : 'λ‚΄μš©μ΄ μ—†μŠ΅λ‹ˆλ‹€.' }}

-
+

ν™œλ™ 이미지

-
-
- +
+
+
+ +
@@ -84,13 +89,14 @@