Merge pull request #343 from JayJayleee/feature/#279-admin-feedback

관리자 공지사항 조회, 생성, 삭제, 수정기능 추가했습니다.

src/components/pages/adminPage/adminMainPage.tsx

@@ -5,6 +5,7 @@ import AdminSideTap from '../../ui/adminSelection/adminSideTap';
 import FeedbackSelection from '../../ui/adminSelection/feedbackSelection';
 import MemberSelection from '../../ui/adminSelection/memberSelection';
 import ContactSelection from '../../ui/adminSelection/contactSelection';
+import NoticeSelection from '../../ui/adminSelection/noticeSelection';
 
 function AdminPage() {
   const [currentSection, setCurrentSection] = useState<string>('users');
@@ -19,7 +20,7 @@ function AdminPage() {
       <div className="section">
         {currentSection === 'users' && <MemberSelection />}
         {currentSection === 'company' && <CompanySelection />}
-
+        {currentSection === 'notification' && <NoticeSelection/>}
         {currentSection === 'questions' && <div>질문관리 섹션</div>}
         {currentSection === 'answers' && <div>답변관리 섹션</div>}
         {currentSection === 'comments' && <div>댓글관리 섹션</div>}

src/components/ui/adminSelection/companySelection.scss

@@ -210,11 +210,6 @@
   height: 80%;
 }
 
-.ad-feedback-result {
-  border: 1px solid gray;
-  height: fit-content;
-  min-height: 73%;
-}
 .ad-feedback-content {
   width: 50%;
   min-height: 5rem;

src/components/ui/adminSelection/noticeCreate.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { fetchAPI } from '../../global/utils/apiUtil';
+import { showSuccessToast } from '../toast/toast';
+
+interface NoticeCreateProps {
+    onBack: () => void;
+  }
+
+export default function NoticeCreate({ onBack }: NoticeCreateProps) {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+
+  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(e.target.value);
+  };
+
+  const handleSave = async () => {
+    const body = {
+      title,
+      content,
+    };
+    try {
+      await fetchAPI('/api/notice/admin', 'POST', body);
+      showSuccessToast('공지사항이 성공적으로 작성되었습니다.');
+      onBack(); 
+    } catch (error) {
+      console.error('Error:', error);
+      showSuccessToast('공지사항 작성에 실패했습니다. 다시 시도해 주세요.');
+    }
+  };
+
+  return (
+    <div className="ad-notice-detail-container">
+      <div className="ad-notice-cnt notice-length">공지 작성</div>
+      <input
+        type="text"
+        name="title"
+        value={title}
+        onChange={handleTitleChange}
+        className='ad-notice-detail-title'
+        placeholder="제목을 입력하세요"
+        style={{backgroundColor:"white"}}
+      />
+      <textarea
+        name="content"
+        value={content}
+        onChange={handleContentChange}
+        className='ad-notice-detail-content notice-textarea'
+        placeholder="내용을 입력하세요"
+      />
+      <div className='notice-button-container'>
+        <button className='orange-white-btn' onClick={handleSave}>저장하기</button>
+        <button className='white-orange-btn' onClick={onBack}>취소</button>
+      </div>
+    </div>
+  );
+}

src/components/ui/adminSelection/noticeDetail.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { fetchAPI } from '../../global/utils/apiUtil';
+import { showSuccessToast } from '../toast/toast';
+interface Feedback {
+  noticeId: number;
+  noticeTitle: string;
+  noticeContent: string;
+  noticeViews: string;
+  noticeStatus: boolean;
+  createdAt: string;
+}
+
+interface NoticeDetailProps {
+  feedback: Feedback;
+  onBack: () => void;
+  onSave: (updatedFeedback: Feedback) => void;
+}
+
+export default function NoticeDetail({ feedback, onBack, onSave }: NoticeDetailProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedFeedback, setEditedFeedback] = useState<Feedback>(feedback);
+
+  useEffect(() => {
+    setEditedFeedback(feedback);
+  }, [feedback]);
+
+  const handleEditChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setEditedFeedback(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSave = async () => {
+    const body = {
+      title: editedFeedback.noticeTitle,
+      content: editedFeedback.noticeContent,
+      noticeStatus: editedFeedback.noticeStatus,
+    };
+    try {
+      await fetchAPI(`/api/notice/admin/${editedFeedback.noticeId}`, 'PATCH', body);
+      onSave(editedFeedback);
+      setIsEditing(false);
+    } catch (error) {
+      console.error('Error:', error);
+      showSuccessToast('수정에 실패했습니다. 다시 시도해 주세요.');
+    }
+  };
+
+  return (
+    <div className="ad-notice-detail-container">
+      <div className="ad-notice-cnt notice-length">공지 상세</div>
+      {isEditing ? (
+        <>
+
+            <input  className='ad-notice-detail-title'
+              type="text"
+              name="noticeTitle"
+              value={editedFeedback.noticeTitle}
+              onChange={handleEditChange}
+              style={{backgroundColor:"white"}}
+            />
+
+          <textarea
+            name="noticeContent"
+            value={editedFeedback.noticeContent}
+            onChange={handleEditChange}
+            className='ad-notice-detail-content notice-textarea'
+
+          />
+          <div className='notice-button-container'>
+            <button className='orange-white-btn' onClick={handleSave}>저장하기</button>
+            <button className='white-orange-btn' onClick={() => setIsEditing(false)}>취소</button>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className='ad-notice-detail-title'>
+            <div>{feedback.noticeTitle}</div>
+            <div>{feedback.createdAt}</div>
+          </div>
+          <div className='ad-notice-detail-content'>{feedback.noticeContent}</div>
+          <div className='notice-button-container'>
+            <button className='orange-white-btn' onClick={onBack}>뒤로가기</button>
+            <button className='white-orange-btn' onClick={() => setIsEditing(true)}>수정하기</button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/components/ui/adminSelection/noticeSelection.scss

@@ -0,0 +1,129 @@
+.ad-notice-detail-container{
+  width: 100%;
+  height: 100%;
+  margin-top: 27rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.ad-notice-cnt {
+  font-size : 2.5rem;
+  letter-spacing: -1.5px;
+  font-family: Pretendard-ExtraBold;
+  color : #000000;
+}
+.notice-length{
+  width: 90%;
+  margin: 2rem;
+}
+.notice-button-container{
+    width: 90%;
+    display: flex;
+    // flex-direction: column;
+    justify-content: flex-end;
+  }
+
+.ad-notice-button-container{
+    margin-top: 1rem;
+    margin-right: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.ad-notice-cnt-num {
+  color: #FF8D1D;
+}
+
+.ad-notice-result {
+  border: 1px solid gray;
+
+  height: fit-content;
+  min-height: 73%;
+  }
+
+.ad-notice-searchResult-header,
+.ad-notice-searchResult-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  border-bottom: 1px solid #ccc;
+  height: 4.76rem;
+  span {
+    flex: 1;
+    text-align: center;
+    font-size: 1.5rem;
+  }
+}
+
+.ad-notice-detail-title{
+    padding: 2rem;
+    width: 90%;
+    min-height: 5rem;
+    background-color: #F4F3F3;
+    font-size: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+}
+.ad-notice-header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 2rem;
+}
+
+.ad-notice-detail-content{
+    padding: 3rem 2rem;
+    width: 90%;
+    background-color: #F4F3F3;
+    font-size: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    word-break: keep-all;
+    white-space : pre-wrap;
+}
+
+.notice-textarea{
+    background-color: white;
+    resize: none;
+    height: 40% ;
+}
+
+.orange-white-btn{
+    width: 157px;
+    height: 52px;
+    border-radius: 0;
+    background-color: #FF8D1D !important;
+    font-size : 2rem;
+    letter-spacing: -1.5px;
+    font-family: Pretendard-ExtraBold;
+    color : #FFFFFF;
+}
+
+.white-orange-btn{
+    width: 157px;
+    height: 52px;
+    border-radius: 0;
+    background-color: #FFFFFF !important;
+    font-size : 2rem;
+    letter-spacing: -1.5px;
+    font-family: Pretendard-ExtraBold;
+    color :#FF8D1D !important;
+    border : 1px solid #FF8D1D;
+}
+.white-orange-border-btn{
+    width: 157px;
+    height: 52px;
+    border-radius: 0;
+    background-color: #FFFFFF !important;
+    font-size : 2rem;
+    letter-spacing: -1.5px;
+    font-family: Pretendard-ExtraBold;
+    color :#FF8D1D !important;
+    border : 1px solid #FF8D1D;
+    margin:0;
+}