Merge pull request #94 from softeerbootcamp4th/feat/#91/AdminEditEvent

Feat/#91/adminEditEvent

.github/workflows/service-cicd.yml

@@ -30,6 +30,7 @@ jobs:
         with:
           args: --acl public-read --delete
         env:
+          VITE_API_URL: ${{ secrets.API_URL }}
           AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

service/src/components/buttons/BlackButton.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function BlackButton({ onClickFunc }) {
+  return (
+    <button
+      onClick={onClickFunc}
+      className={`font-bold text-white rounded py-200 px-1000 bg-neutral-700 hover:bg-neutral-black`}
+    >
+      수정하기
+    </button>
+  );
+}
+
+BlackButton.propTypes = {
+  onClickFunc: PropTypes.func.isRequired,
+};
+
+//memo를 이용하여 rerender 방지
+export default React.memo(BlackButton);

service/src/pages/admin/adminEditEvent/AdminEditEvent.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import AdminEditMiniQuiz from './adminEditMiniQuiz/AdminEditMiniQuiz';
+import AdminEditMiniQuizAnswer from './adminEditMiniQuizAnswer/AdminEditMiniQuizAnswer';
+
+function AdminEditEvent() {
+  return (
+    <div className="w-[90%] flex flex-col items-center gap-1000">
+      <AdminEditMiniQuiz />
+      <AdminEditMiniQuizAnswer />
+    </div>
+  );
+}
+
+export default AdminEditEvent;

service/src/pages/admin/adminEditEvent/AdminEditHeader.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import NextDayArrow from '@/assets/icons/nextDayArrow.svg';
+import PreviousDayArrow from '@/assets/icons/previousDayArrow.svg';
+
+function AdminEditMiniQuizHeader({ info, date, setDate }) {
+  const [isPreviousDayDisabled, setIsPreviousDayDisabled] = useState(
+    date === 1,
+  );
+  const handlePrev = () => {
+    if (isPreviousDayDisabled) {
+      return;
+    }
+    setDate(prev => prev - 1);
+    setIsPreviousDayDisabled(date < 3);
+  };
+  const handleNext = () => {
+    setDate(prev => prev + 1);
+    setIsPreviousDayDisabled(false);
+  };
+  return (
+    <div className="h-[80px] flex justify-center items-center bg-[#F2F2F2] rounded-t-[10px] relative">
+      <span className="text-neutral-black text-body-3-bold absolute left-[3%]">
+        {info}
+      </span>
+      <div className="flex gap-200">
+        <img
+          src={PreviousDayArrow}
+          alt="PreviousDayArrow"
+          className={`w-[35px] h-auto ${isPreviousDayDisabled ? 'cursor-default opacity-50' : 'cursor-pointer hover:scale-110 transition-transform duration-200'}`}
+          onClick={handlePrev}
+        />
+        <span className="text-[#5B5B5B] text-body-3-bold">Day {date}</span>
+        <img
+          src={NextDayArrow}
+          alt="NextDayArrow"
+          className="w-[35px] h-auto cursor-pointer hover:scale-110 transition-transform duration-200"
+          onClick={handleNext}
+        />
+      </div>
+    </div>
+  );
+}
+
+AdminEditMiniQuizHeader.propTypes = {
+  info: PropTypes.string.isRequired,
+  date: PropTypes.number,
+  setDate: PropTypes.func,
+};
+
+export default AdminEditMiniQuizHeader;

service/src/pages/admin/adminEditEvent/adminEditMiniQuiz/AdminEditMiniQuiz.jsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import AdminEditHeader from '../AdminEditHeader';
+import AdminEditMiniQuizContent from './AdminEditMiniQuizContent';
+import BlackButton from '@/components/buttons/BlackButton';
+
+function AdminEditMiniQuiz() {
+  const [date, setDate] = useState(1);
+  const [quizData, setQuizData] = useState({
+    id: 1,
+    quiz_date: '2024-08-14',
+    quiz_description: '오늘의 퀴즈는?? 두둥탁!!',
+    quiz_question_1: '참맛참맛참맛',
+    quiz_question_2: '보쌈보쌈보쌈',
+    quiz_question_3: '하이하이하이하이',
+    quiz_question_4: '이승섭은 롤을 잘해!',
+  });
+
+  const handleChange = (field, value) => {
+    setQuizData(prevState => ({
+      ...prevState,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = async () => {
+    // try {
+    //   const response = await axios.put(`/api/quiz/${quizData.id}`, quizData);
+    //   console.log('수정된 데이터가 서버에 저장되었습니다.', response.data);
+    // } catch (error) {
+    //   console.error('수정 요청 중 오류가 발생했습니다.', error);
+    // }
+    console.log('ddd');
+  };
+
+  return (
+    <div className="w-[100%] mt-1000">
+      <AdminEditHeader
+        info="미니퀴즈 질문 수정"
+        date={date}
+        setDate={setDate}
+      />
+      <div className="flex-col w-[100%] set-center bg-neutral-white rounded-b-[10px] py-1000">
+        <AdminEditMiniQuizContent response={quizData} onChange={handleChange} />
+        <BlackButton onClickFunc={handleSubmit} />
+      </div>
+    </div>
+  );
+}
+
+export default AdminEditMiniQuiz;

service/src/pages/admin/adminEditEvent/adminEditMiniQuiz/AdminEditMiniQuizContent.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function AdminEditMiniQuizContent({ response, onChange }) {
+  return (
+    <>
+      <div className="flex mb-1000 w-[90%] gap-500">
+        <label
+          htmlFor="question"
+          className="w-[15%] text-detail-1-bold text-neutral-800 set-center"
+        >
+          퀴즈 질문 *
+        </label>
+        <input
+          id="question"
+          className="w-[85%] px-400 py-200 text-detail-2-medium text-neutral-black placeholder:text-detail-2-medium placeholder:neutral-500 border-solid border-neutral-black focus:border-primary-blue border-[2px] rounded-[10px]"
+          placeholder={response.quiz_description}
+          value={response.quiz_description}
+          onChange={e => onChange('quiz_description', e.target.value)}
+        />
+      </div>
+
+      {[1, 2, 3, 4].map(num => (
+        <div className="flex mb-1000 w-[90%] gap-500" key={num}>
+          <label
+            htmlFor={`quizSelect_${num}`}
+            className="w-[15%] text-detail-2-bold text-neutral-800 set-center"
+          >
+            선택지{num} *
+          </label>
+          <input
+            id={`quizSelect_${num}`}
+            className="w-[85%] px-400 py-200 text-detail-2-medium text-neutral-black placeholder:text-detail-2-medium placeholder:neutral-500 border-solid border-neutral-black focus:border-primary-blue border-[2px] rounded-[10px]"
+            placeholder={response[`quiz_question_${num}`]}
+            value={response[`quiz_question_${num}`]}
+            onChange={e => onChange(`quiz_question_${num}`, e.target.value)}
+          />
+        </div>
+      ))}
+    </>
+  );
+}
+
+AdminEditMiniQuizContent.propTypes = {
+  response: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default AdminEditMiniQuizContent;

service/src/pages/admin/adminEditEvent/adminEditMiniQuizAnswer/AdminEditMiniQuizAnswer.jsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import AdminEditHeader from '../AdminEditHeader';
+import AdminEditMiniQuizAnswerContent from './AdminEditMiniQuizAnswerContent';
+import BlackButton from '@/components/buttons/BlackButton';
+
+function AdminEditMiniQuizAnswer() {
+  const [date, setDate] = useState(1);
+  const [quizAnswerData, setAnswerData] = useState({
+    id: 1,
+    answer_num: 1,
+    quiz_image:
+      'https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/%E1%84%8C%E1%85%A1%E1%84%8C%E1%85%A5%E1%86%AB%E1%84%80%E1%85%A5.svg',
+  });
+
+  const handleChange = (field, value) => {
+    setAnswerData(prevState => ({
+      ...prevState,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = async () => {
+    // try {
+    //   const response = await axios.put(`/api/quiz/${quizAnswerData.id}`, quizAnswerData);
+    //   console.log('수정된 데이터가 서버에 저장되었습니다.', response.data);
+    // } catch (error) {
+    //   console.error('수정 요청 중 오류가 발생했습니다.', error);
+    // }
+    console.log('dddd');
+  };
+
+  return (
+    <div className="w-[100%] mt-1000">
+      <AdminEditHeader
+        info="미니퀴즈 답변 수정"
+        date={date}
+        setDate={setDate}
+      />
+      <div className="flex-col w-[100%] set-center bg-neutral-white rounded-b-[10px] mb-2000 py-1000">
+        <AdminEditMiniQuizAnswerContent
+          response={quizAnswerData}
+          onChange={handleChange}
+        />
+        <BlackButton onClickFunc={handleSubmit} />
+      </div>
+    </div>
+  );
+}
+
+export default AdminEditMiniQuizAnswer;

service/src/pages/admin/adminEditEvent/adminEditMiniQuizAnswer/AdminEditMiniQuizAnswerContent.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import ImageAddIcon from '@/assets/icons/imageAddIcon.svg';
+
+function AdminEditMiniQuizAnswerContent({ response, onChange }) {
+  const [imagePreview, setImagePreview] = useState(response.quiz_image || '');
+
+  const handleImageChange = e => {
+    const file = e.target.files[0];
+    if (
+      file &&
+      (file.type === 'image/png' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/jpeg')
+    ) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImagePreview(reader.result);
+        onChange('quiz_image', file); // 파일 자체를 상태로 보냅니다.
+      };
+      reader.readAsDataURL(file);
+    } else {
+      alert('PNG 또는 JPG 형식의 이미지만 업로드 가능합니다.');
+    }
+  };
+
+  return (
+    <>
+      <div className="flex mb-1000 w-[90%] gap-500">
+        <label
+          htmlFor="answer"
+          className="w-[15%] text-detail-1-bold text-neutral-800 set-center"
+        >
+          정답 *
+        </label>
+        <input
+          id="answer"
+          className="w-[85%] px-400 py-200 text-detail-2-medium text-neutral-black placeholder:text-detail-2-medium placeholder:neutral-500 border-solid border-neutral-black focus:border-primary-blue border-[2px] rounded-[10px]"
+          placeholder={response.answer_num}
+          value={response.answer_num}
+          onChange={e => onChange('answer_num', e.target.value)}
+        />
+      </div>
+      <div className="flex mb-1000 w-[90%] gap-500">
+        <div className="w-[15%]">
+          <label
+            htmlFor="answerImage"
+            className="flex justify-center text-detail-1-bold text-neutral-800"
+          >
+            정답 이미지 *
+          </label>
+          <p className="text-center text-detail-3-medium text-neutral-400">
+            포맷: jpg/ png/ jpeg
+          </p>
+        </div>
+        <div className="relative w-[85%] h-[200px] rounded-[10px] border-[2px] border-solid border-neutral-black">
+          {imagePreview && (
+            <img
+              src={imagePreview}
+              alt="Preview"
+              className="absolute max-w-full max-h-full transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
+            />
+          )}
+          <img
+            src={ImageAddIcon}
+            alt="ImageAddIcon"
+            className="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 w-[50px] h-auto"
+          />
+          <input
+            type="file"
+            className="w-full h-full opacity-0 cursor-pointer "
+            accept="image/png, image/jpg, image/jpeg"
+            onChange={handleImageChange}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+AdminEditMiniQuizAnswerContent.propTypes = {
+  response: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default AdminEditMiniQuizAnswerContent;

service/src/router.jsx

@@ -11,7 +11,7 @@ import MiniQuizResult from '@/pages/miniquiz/MiniQuizResult';
 import NoQuiz from '@/pages/miniquiz/NoQuiz';
 import Reward from '@/pages/joinEvent/Reward';
 import AdminIndex from '@/pages/admin/AdminIndex';
-import AdminEditEvent from '@/pages/admin/AdminEditEvent';
+import AdminEditEvent from '@/pages/admin/adminEditEvent/AdminEditEvent';
 
 const router = createBrowserRouter([
   {