Skip to content

Commit

Permalink
Merge pull request CSID-DGU#80 from yebin-jeong/main
Browse files Browse the repository at this point in the history 
[Feature] CSID-DGU#26 - 상세, μˆ˜μ • νŽ˜μ΄μ§€ λ°±μ—”λ“œ 둜직 κ΅¬ν˜„
  • Loading branch information
@yebin-jeong
yebin-jeong authored Dec 4, 2024
2 parents 7f22ba7 + 676038b commit 482d495
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 26 deletions.
7 changes: 6 additions & 1 deletion src/views/akopolio/Edit/akopolioEdit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,12 @@
<div class="image-preview-container" v-if="images.length">
<div class="image-card" v-for="(image, index) in images" :key="index">
<div class="image-preview-card">
<img :src="image.previewUrl" :alt="`Uploaded Image ${index + 1}`" class="image-preview" />
<img
v-if="image.previewUrl"
:src="image.previewUrl"
:alt="`Uploaded Image ${index + 1}`"
class="image-preview"
/>
<button @click="removeImage(index)" class="delete-image-btn">X</button>
</div>
</div>
Expand Down
42 changes: 33 additions & 9 deletions src/views/akopolio/Edit/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,17 @@ export default {
textarea.style.height = `${textarea.scrollHeight}px`;
};

const fetchPortfolioById = async (id) => {
// 포트폴리였 데이터 κ°€μ Έμ˜€κΈ°
const fetchPortfolioById = async (portfolioId) => {
try {
const apiUrl = `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${id}`;
console.log('Fetching portfolio from URL:', apiUrl);
const apiUrl = `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}`;
console.log('Fetching portfolio from URL:', apiUrl); // API URL 좜λ ₯

const response = await fetch(apiUrl);
console.log('Response status:', response.status);
const response = await fetch(apiUrl, {
method: 'GET',
credentials: 'include',
});
console.log('Response status:', response.status); // μƒνƒœ μ½”λ“œ 확인

if (!response.ok) {
console.error(`Response status: ${response.status}, ${response.statusText}`);
Expand All @@ -100,14 +104,30 @@ export default {
const data = await response.json();
console.log('Received portfolio data:', data);

// 포트폴리였 데이터 ν• λ‹Ή
portfolio.value = {
baseInfo: data.baseInfo || {},
experience: data.experience || { situation: '', task: '', action: '', result: '' },
pmi: data.pmi || { plus: '', minus: '', interesting: '' },
photoUrls: data.photoUrls || [],
};

images.value = portfolio.value.photoUrls || [];
// 각 λ³€μˆ˜μ— 포트폴리였 데이터 ν• λ‹Ή
activityName.value = portfolio.value.baseInfo.name || ''; // ν™œλ™λͺ…
activityDate.value = portfolio.value.baseInfo.startDate || ''; // ν™œλ™μΌ (startDate둜 λ³€κ²½)
star.value = portfolio.value.experience || { situation: '', task: '', action: '', result: '' }; // STAR λͺ¨λΈ
pmi.value = portfolio.value.pmi || { plus: '', minus: '', interesting: '' }; // PMI λͺ¨λΈ
images.value = portfolio.value.photoUrls.map((imageUrl) => {
return {
previewUrl: imageUrl, // μ„œλ²„μ—μ„œ μ œκ³΅ν•˜λŠ” URL을 미리보기 URL둜 μ‚¬μš©
name: imageUrl.split('/').pop(), // 파일 이름을 μΆ”μΆœ
size: 0, // κΈ°μ‘΄ μ΄λ―Έμ§€λŠ” 파일 크기 ν•„μš” μ—†μŒ
containerWidth: '300px', // κΈ°λ³Έ 크기 μ„€μ •
containerHeight: '300px', // κΈ°λ³Έ 크기 μ„€μ •
};
});
selectedTags.value = portfolio.value.baseInfo.tags || [];

} catch (error) {
console.error('Error fetching portfolio:', error);
alert('포트폴리였λ₯Ό κ°€μ Έμ˜€λŠ” 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.');
Expand All @@ -124,7 +144,7 @@ export default {
}

const newImagesPromises = selectedFiles.map((file) => {
const previewUrl = URL.createObjectURL(file);
const previewUrl = URL.createObjectURL(file); // μƒˆλ‘œ μΆ”κ°€λœ μ΄λ―Έμ§€λŠ” 미리보기 URL 생성
const imageElement = new Image();
imageElement.src = previewUrl;

Expand Down Expand Up @@ -171,7 +191,9 @@ export default {
};

const removeImage = (index) => {
URL.revokeObjectURL(images.value[index].previewUrl);
if (images.value[index].previewUrl) {
URL.revokeObjectURL(images.value[index].previewUrl); // μƒμ„±ν•œ URL을 ν•΄μ œ
}
images.value.splice(index, 1);
};

Expand Down Expand Up @@ -219,6 +241,7 @@ export default {
return;
}


try {
const response = await axios.put(
`${process.env.VUE_APP_BE_API_URL}/api/portfolios/${id}`,
Expand All @@ -237,7 +260,7 @@ export default {
minus: pmi.value.minus,
interesting: pmi.value.interesting,
},
photoUrls: images.value.map(image => image.name),
photoUrls: images.value.map(image => image.url),
},
{
headers: {
Expand Down Expand Up @@ -273,6 +296,7 @@ export default {
selectedTags.value = [];
await fetchUserData();
await fetchPortfolioById(portfolioId);

});

return {
Expand Down
14 changes: 7 additions & 7 deletions src/views/akopolio/detail/akopolioDetail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@
<div class="activity-info">
<div class="row activity-box">
<h2>ν™œλ™λͺ…</h2>
<p>{{ portfolio ? portfolio.title : '' }}</p>
<p>{{ portfolio ? portfolio.name : '' }}</p>
</div>
<div class="row activity-box activity-date">
<h2>ν™œλ™μΌ</h2>
<p>{{ portfolio ? portfolio.createdDate : '' }}</p>
<p>{{ portfolio ? portfolio.startDate : '' }}</p>
</div>
<div class="row activity-box">
<h2>λΆ„μ•Ό μ„€μ •</h2>
Expand All @@ -36,22 +36,22 @@
<!-- STAR λͺ¨λΈ 정보 ν‘œμ‹œ -->
<div class="experience-container">
<h2>κ²½ν—˜ (STAR)</h2>
<div v-if="portfolio && portfolio.star">
<div v-if="portfolio && portfolio.experience">
<div class="star-section">
<h3>Situation</h3>
<p>{{ portfolio.star.situation || '상황 정보가 μ—†μŠ΅λ‹ˆλ‹€.' }}</p>
<p>{{ portfolio.experience.situation || '상황 정보가 μ—†μŠ΅λ‹ˆλ‹€.' }}</p>
</div>
<div class="star-section">
<h3>Task</h3>
<p>{{ portfolio.star.task || 'λ‚΄μš©μ΄ μ—†μŠ΅λ‹ˆλ‹€.' }}</p>
<p>{{ portfolio.experience.task || 'λ‚΄μš©μ΄ μ—†μŠ΅λ‹ˆλ‹€.' }}</p>
</div>
<div class="star-section">
<h3>Action</h3>
<p>{{ portfolio.star.action || 'λ‚΄μš©μ΄ μ—†μŠ΅λ‹ˆλ‹€.' }}</p>
<p>{{ portfolio.experience.action || 'λ‚΄μš©μ΄ μ—†μŠ΅λ‹ˆλ‹€.' }}</p>
</div>
<div class="star-section">
<h3>Result</h3>
<p>{{ portfolio.star.result || 'λ‚΄μš©μ΄ μ—†μŠ΅λ‹ˆλ‹€.' }}</p>
<p>{{ portfolio.experience.result || 'λ‚΄μš©μ΄ μ—†μŠ΅λ‹ˆλ‹€.' }}</p>
</div>
</div>
<div v-else>
Expand Down
17 changes: 8 additions & 9 deletions src/views/akopolio/detail/detail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,21 +81,20 @@ export default {
// 응닡 데이터 확인
console.log('Received portfolio data:', data);

// 포트폴리였 데이터λ₯Ό ꡬ쑰에 맞게 μ €μž₯
portfolio.value = {
baseInfo: data.baseInfo || {}, // κΈ°λ³Έ 정보 μ €μž₯
experience: data.experience || {}, // κ²½ν—˜ 정보 μ €μž₯
pmi: data.pmi || {}, // PMI 정보 μ €μž₯
photoUrls: data.photoUrls || [], // 사진 URL λ°°μ—΄ μ €μž₯
name: data.baseInfo.name, // ν™œλ™λͺ…
startDate: data.baseInfo.startDate, // ν™œλ™μΌ
tags: data.baseInfo.tags || [], // νƒœκ·Έ
experience: data.experience || { situation: '', task: '', action: '', result: '' },
pmi: data.pmi || { plus: '', minus: '', interesting: '' },
photoUrls: data.photoUrls || [], // 이미지
};

// 이미지 데이터 λ”°λ‘œ μ €μž₯
images.value = portfolio.value.photoUrls;

images.value = data.photoUrls || [];
} catch (error) {
console.error('Error fetching portfolio:', error);
alert('포트폴리였λ₯Ό κ°€μ Έμ˜€λŠ” 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.');
portfolio.value = null; // 였λ₯˜ λ°œμƒ μ‹œ μ΄ˆκΈ°ν™”
portfolio.value = null;
images.value = [];
}
};
Expand Down

0 comments on commit 482d495

Please sign in to comment.