From e70d1b90dac566d08e1b4d52849fb8cbf3649e60 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 12 Jun 2024 21:33:14 +0900
Subject: [PATCH 1/8] =?UTF-8?q?feat(quiz):=20=ED=80=B4=EC=A6=88=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/quiz/CreateQuiz.vue | 230 +++++++++++++++++++++--------
 1 file changed, 172 insertions(+), 58 deletions(-)

diff --git a/src/components/quiz/CreateQuiz.vue b/src/components/quiz/CreateQuiz.vue
index 5ff5a3b..32c2736 100644
--- a/src/components/quiz/CreateQuiz.vue
+++ b/src/components/quiz/CreateQuiz.vue
@@ -1,80 +1,194 @@
 <template>
-  <div class="create-quiz">
-    <h2>Create Quiz</h2>
-    <form @submit.prevent="submitQuiz">
-      <div class="form-group">
-        <label for="questions">퀴즈</label>
-        <div v-for="(question, qIndex) in questions" :key="qIndex" class="question">
-          <input type="text" v-model="question.text" placeholder="문제를 입력하세요" required />
-          <input type="text" v-model="question.answer" placeholder="답안을 입력하세요" required />
-          <input type="text" v-model="question.reference" placeholder="참조 내용을 입력하세요" />
-          <label>
-            <input type="checkbox" v-model="question.active" /> 활성화
-          </label>
-        </div>
+  <div class="create-quiz-modal" v-if="isCreateQuizModalVisible">
+    <div class="create-quiz-modal-content">
+      <div class="create-quiz-header">
+        <h2>Create Quiz</h2>
+        <button @click="$emit('close-create-quiz')" class="close-btn">
+          <span class="material-icons">close</span>
+        </button>
       </div>
-      <button type="submit">퀴즈 생성</button>
-    </form>
+      <div class="create-quiz-body">
+        <form @submit.prevent="submitQuiz">
+          <div class="form-group">
+            <label for="questions" class="label-bold">퀴즈 문제</label>
+            <div v-for="(question, qIndex) in questions" :key="qIndex" class="question">
+              <div class="input-group">
+                <input
+                  type="text"
+                  v-model="question.text"
+                  placeholder="문제를 입력해주세요"
+                  required
+                  class="form-control"
+                />
+              </div>
+              <div class="input-group">
+                <input
+                  type="text"
+                  v-model="question.answer"
+                  placeholder="답안을 입력해주세요"
+                  required
+                  class="form-control"
+                />
+              </div>
+              <div class="input-group">
+                <input
+                  type="text"
+                  v-model="question.commentary"
+                  placeholder="해설을 입력해주세요"
+                  class="form-control"
+                />
+              </div>
+              <div class="input-group">
+                <label class="label-checkbox">
+                  <input type="checkbox" v-model="question.active" /> 활성화
+                </label>
+              </div>
+            </div>
+          </div>
+          <button type="submit" class="submit-btn">퀴즈 생성</button>
+        </form>
+      </div>
+    </div>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue';
 import axios from 'axios';
 
-export default {
-  props: {
-    quizId: {
-      type: Number,
-      required: true,
-    },
+const props = defineProps({
+  isCreateQuizModalVisible: {
+    type: Boolean,
+    required: true,
+  },
+  postId: {
+    type: Number,
+    required: true,
   },
-  data() {
-    return {
-      questions: [
-        {
-          text: '',
-          answer: '',
-          reference: '',
-          active: true,
-        },
-      ],
-    };
+  tabId: {
+    type: Number,
+    required: true,
   },
-  methods: {
-    async submitQuiz() {
-      const quizData = {
-        questions: this.questions,
-        // postId: this.quizId, // 퀴즈를 특정 게시글에 연결하려는 경우
-      };
-
-      try {
-        const response = await axios.post(`/quiz/regist`, quizData);
-        console.log('퀴즈 제출 성공:', response.data);
-        alert('퀴즈가 성공적으로 생성되었습니다.');
-      } catch (error) {
-        console.error('퀴즈 제출 실패:', error);
-        alert('퀴즈 생성 중 오류가 발생했습니다.');
-      }
-    }
+});
+
+const emit = defineEmits(['close-create-quiz']);
+
+const questions = ref([
+  {
+    text: '',
+    answer: '',
+    commentary: '',
+    active: true,
   },
+]);
+
+const submitQuiz = async () => {
+  const quizData = {
+    content: questions.value[0].text,
+    answer: questions.value[0].answer,
+    commentary: questions.value[0].commentary,
+    status: questions.value[0].active,
+    postId: props.postId,
+    tapId: props.tabId,
+    questionerId: 1, // questionerId를 1로 고정
+  };
+
+  try {
+    const response = await axios.post(`http://triumers-back.ap-northeast-2.elasticbeanstalk.com/quiz/regist`, quizData);
+    console.log('퀴즈 제출 성공:', response.data);
+    alert('퀴즈가 성공적으로 생성되었습니다.');
+    emit('close-create-quiz');
+  } catch (error) {
+    console.error('퀴즈 제출 실패:', error);
+    alert('퀴즈 생성 중 오류가 발생했습니다.');
+  }
 };
 </script>
 
 <style scoped>
-.create-quiz {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 20px;
-  background-color: #f9f9f9;
+.create-quiz-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.create-quiz-modal-content {
+  background-color: white;
+  width: 600px;
+  max-width: 90%;
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  padding: 20px;
+}
+
+.create-quiz-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 10px;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #042444;
+}
+
+.close-btn:hover {
+  color: #021a2f;
+}
+
+.create-quiz-body {
+  margin-top: 20px;
 }
 
 .question {
+  margin-bottom: 20px;
+}
+
+.input-group {
+  margin-bottom: 10px;
+}
+
+.form-control {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.label-bold {
+  font-weight: bold;
   margin-bottom: 10px;
 }
 
-button {
-  margin-top: 5px;
+.label-checkbox {
+  display: flex;
+  align-items: center;
+  margin-left: 5px;
+}
+
+.submit-btn {
+  padding: 10px 20px;
+  background-color: #042444;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.submit-btn:hover {
+  background-color: #021a2f;
 }
-</style>
+</style>
\ No newline at end of file

From ac586cfa792be9f06ba52f32a8e738c527d760ed Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 12 Jun 2024 21:40:29 +0900
Subject: [PATCH 2/8] =?UTF-8?q?feat(quiz):=20=ED=80=B4=EC=A6=88=20?=
 =?UTF-8?q?=ED=91=B8=EB=8A=94=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/quiz/TakeQuiz.vue | 104 +++++++++++++++----------------
 1 file changed, 49 insertions(+), 55 deletions(-)

diff --git a/src/components/quiz/TakeQuiz.vue b/src/components/quiz/TakeQuiz.vue
index 75f87e7..4040323 100644
--- a/src/components/quiz/TakeQuiz.vue
+++ b/src/components/quiz/TakeQuiz.vue
@@ -1,71 +1,66 @@
 <template>
-  <div>
-    <div v-if="isQuizModalVisible" class="quiz-modal">
-      <div class="quiz-modal-content">
-        <div class="quiz-header">
-          <h2>QUIZ</h2>
-          <button @click="closeQuiz" class="close-btn">&times;</button>
-        </div>
-        <div class="quiz-body">
-          <div class="quiz-question" v-if="quiz">
-            <p>{{ quiz.content }}</p>
-            <input type="text" v-model="answer" class="answer-input" placeholder="문제의 답을 입력해주세요." />
-            <button @click="submitQuestion" class="submit-btn">Submit</button>
-            <div v-if="showResult" class="quiz-results">
-              <p v-if="answer === quiz.answer">
-                정답 입니다!
-              </p>
-              <p v-else>
-                틀렸습니다..
-                (답: {{ quiz.answer }})
-              </p>
-            </div>
+  <div class="quiz-modal" v-if="isQuizModalVisible">
+    <div class="quiz-modal-content">
+      <div class="quiz-header">
+        <h2>QUIZ</h2>
+        <button @click="$emit('close-quiz')" class="close-btn">&times;</button>
+      </div>
+      <div class="quiz-body">
+        <div class="quiz-question" v-if="quiz">
+          <p>{{ quiz.content }}</p>
+          <input
+            type="text"
+            v-model="answer"
+            class="answer-input"
+            placeholder="문제의 답을 입력해주세요."
+            @keyup.enter="submitQuestion"
+          />
+          <button @click="submitQuestion" class="submit-btn">Submit</button>
+          <div v-if="showResult" class="quiz-results">
+            <p v-if="isCorrect" class="correct">정답입니다!</p>
+            <p v-else class="incorrect">틀렸습니다. 정답은 {{ quiz.answer }}입니다.</p>
           </div>
         </div>
       </div>
     </div>
-    <button @click="showQuizModal" class="open-quiz-btn">Show Quiz</button>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 import axios from 'axios';
-import { defineProps } from 'vue';
 
 const props = defineProps({
-  quizId: {
-    type: Number,
+  isQuizModalVisible: {
+    type: Boolean,
     required: true,
-  }
+  },
+  quiz: {
+    type: Object,
+    default: null,
+  },
 });
 
-const isQuizModalVisible = ref(false);
-const quiz = ref(null);
+const emit = defineEmits(['close-quiz']);
+
 const answer = ref('');
 const showResult = ref(false);
+const isCorrect = ref(false);
 
-const showQuizModal = async () => {
-  isQuizModalVisible.value = true;
+const submitQuestion = async () => {
   try {
-    const response = await axios.get(`/quiz/contents?id=${props.quizId}`);
-    if (response.status === 200) {
-      quiz.value = response.data;
-    } else {
-      console.error('Can not find quiz...');
-    }
+    const response = await axios.post('http://triumers-back.ap-northeast-2.elasticbeanstalk.com/answer/submit', {
+      quizId: props.quiz.id,
+      answer: answer.value,
+      employeeId: 1,
+    });
+
+    isCorrect.value = answer.value.trim().toLowerCase() === props.quiz.answer.trim().toLowerCase();
+    showResult.value = true;
   } catch (error) {
-    console.error('Failed to fetch quiz:', error);
+    console.error('답안 제출 실패:', error);
   }
 };
-
-const closeQuiz = () => {
-  isQuizModalVisible.value = false;
-};
-
-const submitQuestion = () => {
-  showResult.value = true;
-};
 </script>
 
 <style scoped>
@@ -78,6 +73,7 @@ const submitQuestion = () => {
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 1000;
 }
 
 .quiz-modal-content {
@@ -107,7 +103,7 @@ const submitQuestion = () => {
 
 .submit-btn {
   padding: 10px 20px;
-  background-color: #05172a;
+  background-color: #042444;
   color: white;
   border: none;
   border-radius: 4px;
@@ -138,13 +134,11 @@ const submitQuestion = () => {
   border-radius: 4px;
 }
 
-.open-quiz-btn {
-  padding: 10px 20px;
-  background-color: #05172a;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-top: 20px;
+.correct {
+  color: green;
+}
+
+.incorrect {
+  color: red;
 }
-</style>
+</style>
\ No newline at end of file

From c8399274b0e30dad3facf7841ce6a3eee8f61463 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 12 Jun 2024 21:42:44 +0900
Subject: [PATCH 3/8] =?UTF-8?q?feat(quiz):=20=ED=80=B4=EC=A6=88=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=B0=BD=20=EB=91=90=20=EA=B0=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/SelectedPostDetail.vue | 94 +++++++++++++++++++---
 1 file changed, 83 insertions(+), 11 deletions(-)

diff --git a/src/components/post/SelectedPostDetail.vue b/src/components/post/SelectedPostDetail.vue
index 5c2179c..a411ae1 100644
--- a/src/components/post/SelectedPostDetail.vue
+++ b/src/components/post/SelectedPostDetail.vue
@@ -92,9 +92,21 @@
     <span class="material-icons" id="top-btn" @click="scrollToTop()">assistant_navigation</span>
 
     <!-- 퀴즈 모달창 -->
-    <div v-if="isQuizAvailable" id="quiz-container">
-      <TakeQuiz :quizId="selectedQuizId" />
-    </div>
+    <div id="quiz-container">
+    <button v-if="isQuizAvailable" @click="showQuizModal" class="open-quiz-btn">Show Quiz</button>
+    <button v-else @click="openCreateQuizModal" class="create-quiz-btn">Create Quiz</button>
+    <TakeQuiz
+    :isQuizModalVisible="isQuizModalVisible"
+    :quiz="quiz"
+    @close-quiz="closeQuiz"
+  />
+  <CreateQuiz
+    :isCreateQuizModalVisible="isCreateQuizModalVisible"
+    :postId="Number(postId)"
+    :tabId="post.tabRelationId"
+    @close-create-quiz="closeCreateQuiz"
+  />
+  </div>
 
     <!-- 히스토리 모달창 -->
     <div class="modal fade" id="historyModal" aria-hidden="true" aria-labelledby="modalToggleLabel" tabindex="-1">
@@ -164,7 +176,8 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
+import { useStore } from 'vuex';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import html2pdf from 'html2pdf.js';
@@ -173,6 +186,7 @@ import { marked } from 'marked';
 import defaultProfileImg from '@/assets/images/profile_image.png';
 
 import TakeQuiz from '@/components/quiz/TakeQuiz.vue';
+import CreateQuiz from '@/components/quiz/CreateQuiz.vue';
 import CommentList from '@/components/comment/CommentList.vue'; // 댓글 목록 컴포넌트 임포트
 
 const router = useRouter();
@@ -180,10 +194,23 @@ const currentRoute = useRoute();
 const postId = currentRoute.params.id;
 const general = ref(currentRoute.path.includes("organization") ? true : false);
 
+const store = useStore();
+const currentUserId = computed(() => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    const tokenPayload = JSON.parse(atob(token.split('.')[1]));
+    return tokenPayload.userId;
+  }
+  return null;
+});
+
 const isAuthorized = ref(false);
 const historyPost = ref(null);
-const selectedQuizId = ref(null);
 const isQuizAvailable = ref(false);
+const selectedQuizId = ref(null);
+const quiz = ref(null);
+const isQuizModalVisible = ref(false);
+const isCreateQuizModalVisible = ref(false);
 
 const likeCnt = ref(0);
 
@@ -201,7 +228,7 @@ marked.setOptions({ renderer });
 
 onMounted(async () => {
   await getPostById();
-  await checkQuizVisibility();
+  await checkQuizAvailability();
   originalPost.value = { ...post.value }; 
 });
 
@@ -394,22 +421,51 @@ const generatePDF = () => {
   }
 };
 
-// Quiz Modal Visibility
-const checkQuizVisibility = async () => {
+const checkQuizAvailability = async () => {
   try {
-    const response = await axios.get(`/quiz/exist?postId=${postId}`);
-    if (response.status == 200) {
+    const response = await axios.get(`http://triumers-back.ap-northeast-2.elasticbeanstalk.com/quiz/exist?postId=${postId}`);
+    if (response.status === 200 && response.data) {
       isQuizAvailable.value = true;
       selectedQuizId.value = response.data.id;
     } else {
       isQuizAvailable.value = false;
     }
   } catch (error) {
-    console.error('Failed to fetch quiz visibility:', error);
+    console.error('Failed to check quiz availability:', error);
     isQuizAvailable.value = false;
   }
 };
 
+const showQuizModal = async () => {
+  try {
+    const response = await axios.get(`http://triumers-back.ap-northeast-2.elasticbeanstalk.com/quiz/contents?id=${selectedQuizId.value}`);
+    if (response.status === 200) {
+      quiz.value = response.data;
+      // 퀴즈 모달 표시
+      isQuizModalVisible.value = true;
+    } else {
+      console.error('퀴즈를 찾을 수 없습니다.');
+    }
+  } catch (error) {
+    console.error('퀴즈 불러오기 실패:', error);
+    if (error.response) {
+      console.error('응답 데이터:', error.response.data);
+    }
+  }
+};
+
+const closeQuiz = () => {
+  isQuizModalVisible.value = false;
+};
+
+const openCreateQuizModal = () => {
+  isCreateQuizModalVisible.value = true;
+};
+
+const closeCreateQuiz = () => {
+  isCreateQuizModalVisible.value = false;
+};
+
 function scrollToTop() {
   window.scrollTo({
     top: 0,
@@ -597,4 +653,20 @@ li {
   background-color: #042444;
   color: white;
 }
+
+.open-quiz-btn,
+.create-quiz-btn {
+  padding: 10px 20px;
+  background-color: #042444;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 20px;
+}
+
+.open-quiz-btn:hover,
+.create-quiz-btn:hover {
+  background-color: #021a2f;
+}
 </style>

From c672cb739098d14e94c1cf1bc6694e30195dfb42 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 12 Jun 2024 21:45:29 +0900
Subject: [PATCH 4/8] =?UTF-8?q?refactor(quiz):=20=ED=80=B4=EC=A6=88=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=8B=9C=20=ED=80=B4=EC=A6=88=20=ED=91=B8?=
 =?UTF-8?q?=EB=8A=94=20=EB=B2=84=ED=8A=BC=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EB=90=98=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/SelectedPostDetail.vue | 16 +++++++++++-----
 src/components/quiz/CreateQuiz.vue         |  3 ++-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/post/SelectedPostDetail.vue b/src/components/post/SelectedPostDetail.vue
index a411ae1..0c5139c 100644
--- a/src/components/post/SelectedPostDetail.vue
+++ b/src/components/post/SelectedPostDetail.vue
@@ -101,11 +101,12 @@
     @close-quiz="closeQuiz"
   />
   <CreateQuiz
-    :isCreateQuizModalVisible="isCreateQuizModalVisible"
-    :postId="Number(postId)"
-    :tabId="post.tabRelationId"
-    @close-create-quiz="closeCreateQuiz"
-  />
+  :isCreateQuizModalVisible="isCreateQuizModalVisible"
+  :postId="Number(postId)"
+  :tabId="post.tabRelationId"
+  @close-create-quiz="closeCreateQuiz"
+  @quizCreated="handleQuizCreated"
+/>
   </div>
 
     <!-- 히스토리 모달창 -->
@@ -248,6 +249,11 @@ const handleTranslation = async () => {
   }
 };
 
+const handleQuizCreated = (quizId) => {
+  isQuizAvailable.value = true;
+  selectedQuizId.value = quizId;
+};
+
 const exportLink = () => {
   const currentURL = window.location.href;
 
diff --git a/src/components/quiz/CreateQuiz.vue b/src/components/quiz/CreateQuiz.vue
index 32c2736..3481d43 100644
--- a/src/components/quiz/CreateQuiz.vue
+++ b/src/components/quiz/CreateQuiz.vue
@@ -71,7 +71,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['close-create-quiz']);
+const emit = defineEmits(['close-create-quiz', 'quizCreated']);
 
 const questions = ref([
   {
@@ -98,6 +98,7 @@ const submitQuiz = async () => {
     console.log('퀴즈 제출 성공:', response.data);
     alert('퀴즈가 성공적으로 생성되었습니다.');
     emit('close-create-quiz');
+    emit('quizCreated', response.data.id); 
   } catch (error) {
     console.error('퀴즈 제출 실패:', error);
     alert('퀴즈 생성 중 오류가 발생했습니다.');

From 2ba56086a5b21a98a00ce1d0f5ebbcf5200e4459 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Thu, 13 Jun 2024 08:48:50 +0900
Subject: [PATCH 5/8] =?UTF-8?q?feat(quiz):=20=ED=80=B4=EC=A6=88=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/SelectedPostDetail.vue |  31 ++-
 src/components/quiz/EditQuiz.vue           | 219 ++++++++++++++-------
 2 files changed, 177 insertions(+), 73 deletions(-)

diff --git a/src/components/post/SelectedPostDetail.vue b/src/components/post/SelectedPostDetail.vue
index 0c5139c..94387ad 100644
--- a/src/components/post/SelectedPostDetail.vue
+++ b/src/components/post/SelectedPostDetail.vue
@@ -93,8 +93,11 @@
 
     <!-- 퀴즈 모달창 -->
     <div id="quiz-container">
+      <div class="quiz-buttons">
     <button v-if="isQuizAvailable" @click="showQuizModal" class="open-quiz-btn">Show Quiz</button>
     <button v-else @click="openCreateQuizModal" class="create-quiz-btn">Create Quiz</button>
+    <button v-if="isQuizAvailable && isAuthorizedToEditQuiz" @click="openEditQuizModal" class="edit-quiz-btn">Edit Quiz</button>
+  </div>
     <TakeQuiz
     :isQuizModalVisible="isQuizModalVisible"
     :quiz="quiz"
@@ -107,6 +110,8 @@
   @close-create-quiz="closeCreateQuiz"
   @quizCreated="handleQuizCreated"
 />
+
+<EditQuiz :isEditQuizModalVisible="isEditQuizModalVisible" :quizId="selectedQuizId" @close-edit-quiz="closeEditQuiz" />
   </div>
 
     <!-- 히스토리 모달창 -->
@@ -188,6 +193,7 @@ import defaultProfileImg from '@/assets/images/profile_image.png';
 
 import TakeQuiz from '@/components/quiz/TakeQuiz.vue';
 import CreateQuiz from '@/components/quiz/CreateQuiz.vue';
+import EditQuiz from '@/components/quiz/EditQuiz.vue';
 import CommentList from '@/components/comment/CommentList.vue'; // 댓글 목록 컴포넌트 임포트
 
 const router = useRouter();
@@ -212,6 +218,7 @@ const selectedQuizId = ref(null);
 const quiz = ref(null);
 const isQuizModalVisible = ref(false);
 const isCreateQuizModalVisible = ref(false);
+const isEditQuizModalVisible = ref(false);
 
 const likeCnt = ref(0);
 
@@ -220,6 +227,19 @@ const post = ref(null);
 const selectedLanguage = ref('ko'); // 초기값은 한국어
 const originalPost = ref(null); // 원래 게시글 데이터 저장용
 
+const isAuthorizedToEditQuiz = computed(() => {
+  const userRole = localStorage.getItem('userRole');
+  return ['ROLE_ADMIN', 'ROLE_HR_MANAGER'].includes(userRole);
+});
+
+const openEditQuizModal = () => {
+  isEditQuizModalVisible.value = true;
+};
+
+const closeEditQuiz = () => {
+  isEditQuizModalVisible.value = false;
+};
+
 // 커스텀 렌더러 생성
 const renderer = new marked.Renderer();
 renderer.image = (href, title, text) => {
@@ -661,7 +681,8 @@ li {
 }
 
 .open-quiz-btn,
-.create-quiz-btn {
+.create-quiz-btn,
+.edit-quiz-btn {
   padding: 10px 20px;
   background-color: #042444;
   color: white;
@@ -672,7 +693,13 @@ li {
 }
 
 .open-quiz-btn:hover,
-.create-quiz-btn:hover {
+.create-quiz-btn:hover,
+.edit-quiz-btn:hover {
   background-color: #021a2f;
 }
+
+.quiz-buttons {
+  display: flex;
+  gap: 10px;
+}
 </style>
diff --git a/src/components/quiz/EditQuiz.vue b/src/components/quiz/EditQuiz.vue
index be4f314..618ec34 100644
--- a/src/components/quiz/EditQuiz.vue
+++ b/src/components/quiz/EditQuiz.vue
@@ -1,78 +1,155 @@
 <template>
-    <div class="edit-quiz">
-      <h2>퀴즈 수정</h2>
-      <form @submit.prevent="submitQuiz">
-        <div class="form-group">
-          <label for="quizTitle">퀴즈 제목</label>
-          <input type="text" id="quizTitle" v-model="quizTitle" required />
-        </div>
-        <div class="form-group">
-          <label for="questions">문제</label>
-          <div v-for="(question, qIndex) in questions" :key="qIndex" class="question">
-            <input type="text" v-model="question.text" placeholder="문제를 입력하세요" required />
-            <input type="text" v-model="question.answer" placeholder="답안을 입력하세요" required />
-            <input type="text" v-model="question.reference" placeholder="참조 내용을 입력하세요" />
+  <div class="quiz-modal" v-if="isEditQuizModalVisible">
+    <div class="quiz-modal-content">
+      <div class="quiz-header">
+        <h2>퀴즈 수정</h2>
+        <button @click="closeModal" class="close-btn">&times;</button>
+      </div>
+      <div class="quiz-body">
+        <form @submit.prevent="submitQuiz">
+          <div class="form-group">
+            <label for="quizContent">문제</label>
+            <input type="text" id="quizContent" v-model="quizData.content" placeholder="문제를 입력하세요" required />
+          </div>
+          <div class="form-group">
+            <label for="quizAnswer">답안</label>
+            <input type="text" id="quizAnswer" v-model="quizData.answer" placeholder="답안을 입력하세요" required />
+          </div>
+          <div class="form-group">
+            <label for="quizCommentary">참조 내용</label>
+            <input type="text" id="quizCommentary" v-model="quizData.commentary" placeholder="참조 내용을 입력하세요" />
+          </div>
+          <div class="form-group">
             <label>
-              <input type="checkbox" v-model="question.active" /> 활성화
+              <input type="checkbox" v-model="quizData.status" /> 활성화
             </label>
           </div>
-        </div>
-        <button type="submit">퀴즈 수정</button>
-      </form>
+          <button type="submit" class="submit-btn">퀴즈 수정</button>
+        </form>
+      </div>
     </div>
-  </template>
-  
-  <script>
-  export default {
-    data() {
-      return {
-        quizId: null,
-        quizTitle: '',
-        questions: []
-      };
-    },
-    created() {
-      this.quizId = this.$route.params.id;
-      // 여기에서 API 호출로 기존 퀴즈 데이터를 가져와서 설정합니다.
-      // 예시:
-      // axios.get(`/api/quiz/${this.quizId}`).then(response => {
-      //   this.quizTitle = response.data.title;
-      //   this.questions = response.data.questions;
-      // });
-    },
-    methods: {
-      submitQuiz() {
-        const quizData = {
-          title: this.quizTitle,
-          questions: this.questions
-        };
-        // API 호출로 수정된 퀴즈 데이터를 제출합니다.
-        console.log('퀴즈 수정 제출:', quizData);
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  .edit-quiz {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: #f9f9f9;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-  
-  .form-group {
-    margin-bottom: 20px;
-  }
-  
-  .question {
-    margin-bottom: 10px;
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import axios from 'axios';
+
+const props = defineProps({
+  quizId: {
+    type: Number,
+    required: true,
+  },
+  isEditQuizModalVisible: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['close-edit-quiz']);
+
+const quizData = ref({
+  content: '',
+  answer: '',
+  commentary: '',
+  status: true,
+});
+
+onMounted(() => {
+  fetchQuizData();
+});
+
+const closeModal = () => {
+  emit('close-edit-quiz');
+};
+
+const fetchQuizData = async () => {
+  try {
+    const response = await axios.get(`http://triumers-back.ap-northeast-2.elasticbeanstalk.com/quiz/contents?id=${props.quizId}`);
+    quizData.value = response.data;
+  } catch (error) {
+    console.error('퀴즈 데이터 가져오기 실패:', error);
   }
-  
-  button {
-    margin-top: 5px;
+};
+
+const submitQuiz = async () => {
+  try {
+    const response = await axios.put(`http://triumers-back.ap-northeast-2.elasticbeanstalk.com/quiz/edit`, quizData.value);
+    console.log('퀴즈 수정 완료:', response.data);
+    alert('퀴즈가 성공적으로 수정되었습니다.');
+    closeModal();
+  } catch (error) {
+    console.error('퀴즈 수정 실패:', error);
+    alert('퀴즈 수정 중 오류가 발생했습니다.');
   }
-  </style>
-  
\ No newline at end of file
+};
+</script>
+
+<style scoped>
+.quiz-modal {
+  position: fixed;
+  top: 15%;
+  left: 15%;
+  width: 70%;
+  height: 70%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.quiz-modal-content {
+  background: white;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.quiz-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 10px;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.submit-btn {
+  padding: 10px 20px;
+  background-color: #042444;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.quiz-body {
+  margin-top: 20px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input[type="text"] {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+</style>
\ No newline at end of file

From 4f7ad2e7292f794e0c6b1b42863f783153b55fbd Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Thu, 13 Jun 2024 08:50:00 +0900
Subject: [PATCH 6/8] =?UTF-8?q?refactor(quiz):=20=ED=80=B4=EC=A6=88=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EC=8B=9C=20=EC=9B=90=EB=9E=98=20=ED=80=B4?=
 =?UTF-8?q?=EC=A6=88=20=EB=82=B4=EC=9A=A9=EA=B9=8C=EC=A7=80=20=EB=9C=A8?=
 =?UTF-8?q?=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/quiz/EditQuiz.vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/quiz/EditQuiz.vue b/src/components/quiz/EditQuiz.vue
index 618ec34..ad225b9 100644
--- a/src/components/quiz/EditQuiz.vue
+++ b/src/components/quiz/EditQuiz.vue
@@ -6,6 +6,14 @@
         <button @click="closeModal" class="close-btn">&times;</button>
       </div>
       <div class="quiz-body">
+        <div class="original-quiz" v-if="originalQuizData">
+          <h3>원래 퀴즈</h3>
+          <p><strong>문제:</strong> {{ originalQuizData.content }}</p>
+          <p><strong>답안:</strong> {{ originalQuizData.answer }}</p>
+          <p><strong>참조 내용:</strong> {{ originalQuizData.commentary }}</p>
+          <p><strong>활성화:</strong> {{ originalQuizData.status ? '예' : '아니오' }}</p>
+        </div>
+        <hr>
         <form @submit.prevent="submitQuiz">
           <div class="form-group">
             <label for="quizContent">문제</label>
@@ -48,6 +56,7 @@ const props = defineProps({
 
 const emit = defineEmits(['close-edit-quiz']);
 
+const originalQuizData = ref(null);
 const quizData = ref({
   content: '',
   answer: '',
@@ -66,7 +75,8 @@ const closeModal = () => {
 const fetchQuizData = async () => {
   try {
     const response = await axios.get(`http://triumers-back.ap-northeast-2.elasticbeanstalk.com/quiz/contents?id=${props.quizId}`);
-    quizData.value = response.data;
+    originalQuizData.value = response.data;
+    quizData.value = { ...response.data };
   } catch (error) {
     console.error('퀴즈 데이터 가져오기 실패:', error);
   }
@@ -137,6 +147,10 @@ const submitQuiz = async () => {
   margin-top: 20px;
 }
 
+.original-quiz {
+  margin-bottom: 20px;
+}
+
 .form-group {
   margin-bottom: 20px;
 }

From 98ee32706cd75e748229e14d7053dd79764e6b63 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Thu, 13 Jun 2024 09:10:20 +0900
Subject: [PATCH 7/8] =?UTF-8?q?refactor(quiz):=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=ED=92=80=EA=B3=A0=20=EB=82=98=EC=84=9C=20=EB=8B=B5=EA=B3=BC=20?=
 =?UTF-8?q?=ED=95=A8=EA=BB=98=20=ED=95=B4=EC=84=A4=EA=B9=8C=EC=A7=80=20?=
 =?UTF-8?q?=EB=9C=A8=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/quiz/TakeQuiz.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/quiz/TakeQuiz.vue b/src/components/quiz/TakeQuiz.vue
index 4040323..7cb0135 100644
--- a/src/components/quiz/TakeQuiz.vue
+++ b/src/components/quiz/TakeQuiz.vue
@@ -18,7 +18,10 @@
           <button @click="submitQuestion" class="submit-btn">Submit</button>
           <div v-if="showResult" class="quiz-results">
             <p v-if="isCorrect" class="correct">정답입니다!</p>
-            <p v-else class="incorrect">틀렸습니다. 정답은 {{ quiz.answer }}입니다.</p>
+            <div v-else class="incorrect">
+              <p>틀렸습니다. 정답은 {{ quiz.answer }}입니다.</p>
+              <p v-if="quiz.commentary">해설: {{ quiz.commentary }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -54,7 +57,6 @@ const submitQuestion = async () => {
       answer: answer.value,
       employeeId: 1,
     });
-
     isCorrect.value = answer.value.trim().toLowerCase() === props.quiz.answer.trim().toLowerCase();
     showResult.value = true;
   } catch (error) {
@@ -141,4 +143,8 @@ const submitQuestion = async () => {
 .incorrect {
   color: red;
 }
+
+.incorrect p {
+  margin-bottom: 5px;
+}
 </style>
\ No newline at end of file

From b4cd9f1067fb2bfa375b75346c9be34f1908b3f7 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Thu, 13 Jun 2024 09:35:08 +0900
Subject: [PATCH 8/8] =?UTF-8?q?refactor(quiz):=20=ED=80=B4=EC=A6=88=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B2=84=ED=8A=BC=20=EC=9A=B0=EC=84=A0=20?=
 =?UTF-8?q?=EC=A3=BC=EC=84=9D=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/SelectedPostDetail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/post/SelectedPostDetail.vue b/src/components/post/SelectedPostDetail.vue
index 94387ad..b70a8aa 100644
--- a/src/components/post/SelectedPostDetail.vue
+++ b/src/components/post/SelectedPostDetail.vue
@@ -96,7 +96,7 @@
       <div class="quiz-buttons">
     <button v-if="isQuizAvailable" @click="showQuizModal" class="open-quiz-btn">Show Quiz</button>
     <button v-else @click="openCreateQuizModal" class="create-quiz-btn">Create Quiz</button>
-    <button v-if="isQuizAvailable && isAuthorizedToEditQuiz" @click="openEditQuizModal" class="edit-quiz-btn">Edit Quiz</button>
+    <!-- <button v-if="isQuizAvailable && isAuthorizedToEditQuiz" @click="openEditQuizModal" class="edit-quiz-btn">Edit Quiz</button> -->
   </div>
     <TakeQuiz
     :isQuizModalVisible="isQuizModalVisible"