[FE][Feature] RetroList 회고 수정 모달 창 생성

src/App.tsx

@@ -10,6 +10,7 @@ import AuthPage from '@/pages/AuthPage';
 import CreateRetroPage from '@/pages/CreateRetroPage';
 import HomePage from '@/pages/HomePage';
 import MyPage from '@/pages/MyPage';
+import RetroListPage from '@/pages/RetroListPage';
 import SurveyPage from '@/pages/SurveyPage';
 import WriteRetroPersonalPage from '@/pages/WriteRetroPersonalPage';
 import WriteRetroRevisePage from '@/pages/WriteRetroRevisePage';

src/components/RetroList/ContentsList.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import BookmarkIcon_Y from '@/assets/BookmarkIcon_Y.png';
 import LinkIcon from '@/assets/Link.png';
 import MoreIcon from '@/assets/MoreIcon.png';
 import ProgressBefore from '@/assets/Progress_Before.png';
 import Thumbnail from '@/assets/Thumbnail.png';
+import Modal from '@/components/RetroList/Modal';
 import * as S from '@/styles/RetroList/ContentsList.styles';
 
 interface Content {
@@ -21,6 +22,16 @@ interface ContentListProps {
 }
 
 const ContentList: React.FC<ContentListProps> = ({ status, viewMode, searchData }) => {
+  const [openModalId, setOpenModalId] = useState<number | null>(null);
+
+  const openModalForItem = (itemId: number) => {
+    setOpenModalId(itemId);
+  };
+
+  const closeModalForItem = () => {
+    setOpenModalId(null);
+  };
+
   const data: Content[] = [
     { id: 1, title: '회고1', status: 'Teams', userId: null, teamId: 1 },
     { id: 2, title: '회고2', status: 'Teams', userId: null, teamId: 2 },
@@ -53,7 +64,8 @@ const ContentList: React.FC<ContentListProps> = ({ status, viewMode, searchData
               <hr />
               <S.InfoBox>
                 {item.title}
-                <S.MoreIcon src={MoreIcon} />
+                <S.MoreIcon src={MoreIcon} onClick={() => openModalForItem(item.id)} />
+                <Modal onClose={closeModalForItem} isOpen={openModalId === item.id} />
               </S.InfoBox>
             </S.Box>
           ))}

src/components/RetroList/Modal.tsx

@@ -0,0 +1,24 @@
+import ModalClose from '@/assets/modalClose.png';
+import * as S from '@/styles/RetroList/Modal.styles';
+
+interface ModalProps {
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+const Modal: React.FC<ModalProps> = ({ onClose, isOpen }) => {
+  return (
+    <S.ModalOverlay isOpen={isOpen}>
+      <S.ModalContent>
+        <div>
+          <S.CloseBox>
+            <S.CloseImg src={ModalClose} onClick={onClose} />
+          </S.CloseBox>
+          <S.Text>생성자가 아닌 참여자는 수정 권한이 없습니다.</S.Text>
+        </div>
+      </S.ModalContent>
+    </S.ModalOverlay>
+  );
+};
+
+export default Modal;

src/styles/RetroList/Modal.styles.ts

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+export const ModalOverlay = styled.div<{ isOpen: boolean }>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: ${props => (props.isOpen ? 'flex' : 'none')};
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ModalContent = styled.div`
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+`;
+export const CloseBox = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 1px solid #b5b5b5;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  margin-top: 0;
+`;
+
+export const CloseImg = styled.img`
+  width: 10px;
+  height: 10px;
+  cursor: pointer;
+`;
+
+export const Text = styled.span`
+  color: #111b47;
+`;