Merge pull request #282 from 2023-Winter-Bootcamp-Team-N/FE/feat/#220

[feat] 드롭다운 알러트(모달창) 구현

frontend/src/pages/sidepanel/Modal.css

@@ -0,0 +1,38 @@
+.modal-backdrop {
+  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; /* 높은 z-index 값 적용 */
+}
+
+.modal-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  z-index: 1001; /* modal-backdrop보다 더 높은 값 */
+}
+
+.modal-content button {
+  background-color: #d5cde4; /* 새로운 배경 색상 */
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  margin-top: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  display: block; /* 블록 요소로 변경 */
+  margin-left: auto;
+  margin-right: auto; /* 자동 마진으로 가운데 정렬 */
+}
+
+.modal-content button:hover {
+  background-color: #c9ccea; /* 호버 상태의 배경 색상 변경 */
+}

frontend/src/pages/sidepanel/SidePanel.tsx

@@ -7,6 +7,7 @@ import '@pages/sidepanel/SidePanel.css';
 import withSuspense from '@src/shared/hoc/withSuspense';
 import withErrorBoundary from '@src/shared/hoc/withErrorBoundary';
 import './Dropdown.css';
+import './Modal.css';
 import dropdownButton from '@assets/img/dropdownButton.svg';
 import dropdownButtonDark from '@assets/img/dropdownButtonDark.svg';
 import axios from 'axios';
@@ -15,6 +16,20 @@ import copybutton from '@assets/img/copybutton.svg';
 import categorybutton from '@assets/img/categorybutton.svg';
 import savebutton from '@assets/img/savebutton.svg';
 
+// eslint-disable-next-line react/prop-types
+const Modal = ({ isOpen, onClose, message }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-backdrop">
+      <div className="modal-content">
+        <p>{message}</p>
+        <button onClick={onClose}>확인</button>
+      </div>
+    </div>
+  );
+};
+
 const SidePanel = () => {
   const [currentUrl, setCurrentUrl] = useState('');
   const [summary, setSummary] = useState('');
@@ -23,6 +38,18 @@ const SidePanel = () => {
   //구독이 이미 돼있는지 자체 확인
   const [subscribedChannels, setSubscribedChannels] = useState(new Set());
 
+
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalMessage, setModalMessage] = useState('');
+  const closeModal = () => setIsModalOpen(false);
+
+  // 모달을 열기 위한 함수
+  const openModal = message => {
+    setModalMessage(message);
+    setIsModalOpen(true);
+  };
+
   //dropdown
   const [view, setView] = useState(false);
 
@@ -153,6 +180,8 @@ const SidePanel = () => {
       try {
         const response = await axios.post('http://localhost:8000/api/v1/summary/', savedData);
         console.log('저장 요청 성공:', response.data);
+        // 저장 성공 메시지를 모달로 표시
+        openModal('요약본이 저장되었습니다.');
       } catch (error) {
         console.error('저장 요청 실패:', error);
       }
@@ -166,6 +195,7 @@ const SidePanel = () => {
       .writeText(text)
       .then(() => {
         console.log('텍스트가 복사 되었습니다.');
+        openModal('클립보드에 요약본이 복사되었습니다.');
       })
       .catch(err => console.error('텍스트 복사 실패: ', err));
   };
@@ -191,6 +221,7 @@ const SidePanel = () => {
         console.log('구독에 성공했습니다.');
         setSubscribedChannels(prev => new Set(prev.add(currentUrl)));
         setIsSubscribed(true);
+        openModal('구독이 완료되었습니다.');
 
         console.log(subscribedChannels);
       } catch (error) {
@@ -297,6 +328,7 @@ const SidePanel = () => {
             )}
           </ul>
         </div>
+        <Modal isOpen={isModalOpen} onClose={closeModal} message={modalMessage} />
       </div>
       <hr className="stroke" />
       <div className="relative">