Skip to content

Commit

Permalink
Merge pull request #35 from yebin-jeong/main
Browse files Browse the repository at this point in the history
[Feature] #26 -์•„์ฝ”ํด๋ฆฌ์˜คEdit ํƒœ๊ทธ ๊ธฐ๋Šฅ ์ˆ˜์ •
  • Loading branch information
study2895 authored Nov 4, 2024
2 parents ea46744 + dcba4eb commit be81c55
Showing 1 changed file with 157 additions and 200 deletions.
357 changes: 157 additions & 200 deletions src/views/akopolio/akopolioEdit.vue
Original file line number Diff line number Diff line change
@@ -1,209 +1,166 @@
<template>
<div class="akopolio-edit">
<MainHeader />
<div class="edit-container">
<h2>ํฌํŠธํด๋ฆฌ์˜ค ์ˆ˜์ •ํ•˜๊ธฐ</h2>
<form @submit.prevent="savePortfolio">
<div class="form-group">
<label for="title">ํ™œ๋™๋ช…</label>
<input
type="text"
id="title"
v-model="portfolio.title"
required
/>
</div>

<div class="form-group">
<label for="createdDate">ํ™œ๋™์ผ</label>
<input
type="date"
id="createdDate"
v-model="portfolio.createdDate"
required
/>
</div>

<div class="form-group">
<label for="tags">๋ถ„์•ผ ์„ค์ •</label>
<input
type="text"
id="tags"
v-model="newTag"
placeholder="ํƒœ๊ทธ ์ž…๋ ฅ ํ›„ ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ์ฃผ์„ธ์š”"
/>
<button type="button" @click="addTag">์ถ”๊ฐ€</button>
<div class="tags">
<span v-for="(tag, index) in portfolio.tags" :key="index" class="tag-badge">
{{ tag }}
<button type="button" @click="removeTag(index)">x</button>
</span>
</div>
</div>

<div class="form-group">
<label>๊ฒฝํ—˜ (STAR)</label>
<div class="star-section">
<label>Situation</label>
<textarea v-model="portfolio.star.situation" />
</div>
<div class="star-section">
<label>Task</label>
<textarea v-model="portfolio.star.task" />
</div>
<div class="star-section">
<label>Action</label>
<textarea v-model="portfolio.star.action" />
</div>
<div class="star-section">
<label>Result</label>
<textarea v-model="portfolio.star.result" />
</div>
</div>

<div class="form-group">
<label>์˜ค๋Š˜์˜ PMI</label>
<label>Plus</label>
<textarea v-model="portfolio.pmi.plus" />
<label>Minus</label>
<textarea v-model="portfolio.pmi.minus" />
<label>Interesting</label>
<textarea v-model="portfolio.pmi.interesting" />
</div>

<button type="submit" class="save-button">์ €์žฅํ•˜๊ธฐ</button>
</form>
<div class="container">
<!-- ํ—ค๋” -->
<MainHeader />

<!-- ํ™œ๋™๋ช…๊ณผ ํ™œ๋™์ผ -->
<div class="activity-info">
<div class="activity-name-container">
<label for="activity-name"><h2>ํ™œ๋™๋ช…</h2></label>
<input type="text" id="activity-name" v-model="activityName" placeholder="ํ™œ๋™๋ช…์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”" />
</div>

<div class="activity-date-container">
<label for="activity-date"><h2>ํ™œ๋™์ผ</h2></label>
<input type="date" id="activity-date" v-model="activityDate" />
</div>
</div>

<!-- ๋ถ„์•ผ ์„ค์ • -->
<div class="category-box">
<div class="category">
<label @click="toggleDropdown" class="category-label">
<h2>๋ถ„์•ผ ์„ค์ •</h2>
<span v-if="selectedTags.length">
<span class="tag-badge" v-for="tag in selectedTags" :key="tag">
{{ tag }}
</span>
</span>
</label>

<div v-show="isDropdownOpen" class="tag-container">
<button
v-for="tag in tags"
:key="tag"
@click="toggleTag(tag)"
:class="{ active: selectedTags.includes(tag) }"
>
{{ tag }}
</button>
</div>
</div>
</div>

<!-- ๊ฒฝํ—˜ (STAR ๋ชจ๋ธ) -->
<div class="experience-container">
<div class="experience-box star-box">
<h2>๊ฒฝํ—˜</h2>
<div class="star-section" v-for="section in Object.keys(star)" :key="section">
<h3>{{ section.charAt(0).toUpperCase() + section.slice(1) }}</h3>
<textarea v-model="star[section]" :placeholder="`${section}๋ฅผ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”`" @input="autoResize($event)"></textarea>
</div>
</div>
<MainFooter />
</div>
</template>

<script>
import MainHeader from '../../components/layout/Header.vue';
import MainFooter from '../../components/layout/Footer.vue';
import { mapGetters } from 'vuex';
export default {
components: {
MainHeader,
MainFooter,

<!-- ์˜ค๋Š˜์˜ PMI -->
<div class="pmi-container">
<div class="pmi-box">
<h2>์˜ค๋Š˜์˜ PMI</h2>

<div class="pmi-section" v-for="section in Object.keys(pmi)" :key="section">
<h3>{{ section.charAt(0).toUpperCase() + section.slice(1) }}</h3>
<textarea v-model="pmi[section]" :placeholder="`${section}๋ฅผ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”`" @input="autoResize($event)"></textarea>
</div>
</div>
</div>

<!-- ์ €์žฅ ๋ฒ„ํŠผ -->
<button @click="saveData" class="save-button">์ €์žฅํ•˜๊ธฐ</button>
<MainFooter />
</div>
</template>

<script>
import MainHeader from '../../components/layout/Header.vue'
import MainFooter from '../../components/layout/Footer.vue'
export default {
components: {
MainHeader,
MainFooter
},
data() {
return {
portfolioId: this.$route.params.id, // ํ˜„์žฌ ํฌํŠธํด๋ฆฌ์˜ค ID
activityName: '',
activityDate: '',
tags: [
'์ „๊ณต', '๊ต์–‘', '๊ต๋‚ด๋™์•„๋ฆฌ', '๊ต์™ธ๋™์•„๋ฆฌ', 'ํ•™ํšŒ', '๋ด‰์‚ฌํ™œ๋™', '์ธํ„ด', '์•„๋ฅด๋ฐ”์ดํŠธ',
'๋Œ€์™ธํ™œ๋™', '์„œํฌํ„ฐ์ฆˆ', '๊ธฐ์ž๋‹จ', '๊ฐ•์—ฐ/ํ–‰์‚ฌ', '์Šคํ„ฐ๋””', '๋ถ€ํŠธ์บ ํ”„', 'ํ”„๋กœ์ ํŠธ',
'์—ฐ๊ตฌ', 'ํ•™์ƒํšŒ', '๊ธฐํƒ€'
],
selectedTags: [],
isDropdownOpen: false,
star: { situation: '', task: '', action: '', result: '' },
pmi: { plus: '', minus: '', interesting: '' },
tooltipVisible: false
};
},
computed: {
isFormComplete() {
return (
this.activityName &&
this.activityDate &&
this.selectedTags.length > 0 &&
Object.values(this.star).every((field) => field) &&
Object.values(this.pmi).every((field) => field)
);
}
},
methods: {
toggleDropdown() {
this.isDropdownOpen = !this.isDropdownOpen;
},
data() {
return {
portfolio: {
title: '',
createdDate: '',
tags: [],
star: { situation: '', task: '', action: '', result: '' },
pmi: { plus: '', minus: '', interesting: '' },
},
newTag: '',
};
toggleTag(tag) {
const index = this.selectedTags.indexOf(tag);
if (index > -1) {
this.selectedTags.splice(index, 1);
} else {
this.selectedTags.push(tag);
}
},
computed: {
...mapGetters(['getPortfolios']),
autoResize(event) {
const textarea = event.target;
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
},
created() {
const portfolioId = this.$route.params.id;
const existingPortfolio = this.getPortfolios.find((item) => item.id === portfolioId);
if (existingPortfolio) {
this.portfolio = JSON.parse(JSON.stringify(existingPortfolio));
saveData() {
if (!this.isFormComplete) {
alert('๋ชจ๋“  ํ•„๋“œ๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.');
return;
}
const updatedPortfolio = {
id: this.portfolioId,
title: this.activityName,
createdDate: this.activityDate,
tags: this.selectedTags,
star: { ...this.star },
pmi: { ...this.pmi }
};
this.$store.dispatch('updatePortfolio', updatedPortfolio).then(() => {
alert('ํ™œ๋™์ด ์ˆ˜์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค!');
this.$router.push('/akopolio/main');
});
},
methods: {
addTag() {
if (this.newTag && !this.portfolio.tags.includes(this.newTag)) {
this.portfolio.tags.push(this.newTag);
this.newTag = '';
}
},
removeTag(index) {
this.portfolio.tags.splice(index, 1);
},
savePortfolio() {
this.$store
.dispatch('updatePortfolio', this.portfolio)
.then(() => {
alert('ํฌํŠธํด๋ฆฌ์˜ค๊ฐ€ ์ €์žฅ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.');
this.$router.push('/akopolio/main');
});
},
},
};
</script>

<style scoped>
.akopolio-edit {
width: 375px;
margin: 4rem auto;
padding: 20px;
background-color: #ffe8d1;
min-height: calc(100vh - 120px);
display: flex;
flex-direction: column;
}
.edit-container {
background-color: #fff3e6;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-size: 16px;
color: #ff7f00;
margin-bottom: 5px;
display: block;
}
input,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
}
.save-button {
background-color: #f6b87a;
color: white;
padding: 10px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 10px;
}
.tag-badge {
background-color: #f6b87a;
color: white;
padding: 5px 10px;
border-radius: 20px;
font-size: 13px;
display: flex;
align-items: center;
}
.tag-badge button {
margin-left: 5px;
background: none;
border: none;
color: white;
font-size: 12px;
cursor: pointer;
loadPortfolioData() {
const portfolio = this.$store.getters.getPortfolios.find(port => port.id === this.portfolioId);
if (portfolio) {
this.activityName = portfolio.title;
this.activityDate = portfolio.createdDate;
this.selectedTags = portfolio.tags;
this.star = { ...portfolio.star };
this.pmi = { ...portfolio.pmi };
}
}
},
mounted() {
this.loadPortfolioData(); // ํฌํŠธํด๋ฆฌ์˜ค ๋ฐ์ดํ„ฐ ๋กœ๋“œ
}
</style>

};
</script>

<style scoped>
/* ์Šคํƒ€์ผ ์ •์˜๋Š” ๊ธฐ์กด๊ณผ ๋™์ผํ•˜๊ฒŒ ์œ ์ง€ */
</style>

0 comments on commit be81c55

Please sign in to comment.