From 8daf6ba265d91274271f63931a31962a22c2809e Mon Sep 17 00:00:00 2001
From: yena <rladpsk1117@gmail.com>
Date: Tue, 9 Apr 2024 15:39:43 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20Feat:=20RetroList=20=ED=9A=8C?=
 =?UTF-8?q?=EA=B3=A0=20=EC=88=98=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20=EC=B0=BD?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

RetroList App.tsx 파일 경로 추가
---
 src/App.tsx                               |   9 ++++++
 src/assets/ModalClose.png                 | Bin 0 -> 1329 bytes
 src/components/RetroList/ContentsList.tsx |  16 ++++++++--
 src/components/RetroList/Modal.tsx        |  24 ++++++++++++++
 src/styles/RetroList/Modal.styles.ts      |  37 ++++++++++++++++++++++
 5 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/ModalClose.png
 create mode 100644 src/components/RetroList/Modal.tsx
 create mode 100644 src/styles/RetroList/Modal.styles.ts

diff --git a/src/App.tsx b/src/App.tsx
index bb03f0e..7fd26a0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,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 WriteRetroRevisePersonalPage from '@/pages/WriteRetroRevisePersonalPage';
@@ -156,6 +157,14 @@ const App = () => {
                   </PrivateRoute>
                 }
               ></Route>
+              <Route
+                path="/RetroListPage"
+                element={
+                  <PrivateRoute>
+                    <RetroListPage />
+                  </PrivateRoute>
+                }
+              ></Route>
             </Route>
             <Route element={<MainLayout />}>
               <Route path="/" element={<HomePage />}></Route>
diff --git a/src/assets/ModalClose.png b/src/assets/ModalClose.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5a7c19583ef9c218054cc87c6449aa5cd09c2b7
GIT binary patch
literal 1329
zcmV-11<v}3P)<h;3K|Lk000e1NJLTq002$^002%11^@s6j;bIX00009a7bBm001mY
z001mY0i`{bsQ>@~0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1jb23K~#7F?VP(#
z8$lF?kG-abNAM%KO@|90>Btjco`6{5A}UNpxJY)obeJa~WrPbzM;E6{>AV3cpy8JD
zqaDdMws+55cQ<?z8nZh)(tJAOncbaZqBq{~Nhxi`cDr4De0*$2QMBG{HgBllaDNx>
z@9$6N=H|G&&B6Hja>_=k4-XHQ&(F`RD5>B;8v0o(m0tRb{*Tv56sM%|$7+12c6@w%
zN(Dtp<BzrYP<4{LQbHr+(uV17ZEdYnftVm|m_emdsjFdIp3%rGX`oTG$m8#D^rtrE
zG<=*xF8-Mqak2TIG+o*-g^0X32pTD>_7Qon#3h95G;%FZAWhMKHB>oV7fB`!<aXF<
zNCVYq{K&<{#qXu1r9YU8Nk)yYqh7D~gK~nVG~#91yJ*r0?tEWI9@k&Yi#!8q>)YGg
z-=k?2iY)Ks<YbSFPb4Ik*2U*&R>dO9gESV<A|b=lK$LU=<Sj2R|K*SGNkA6m*^&kl
z#R2a8HOs@&WswAANuEt<AeA`4oxjSfJloPhYH=Ws@^qy=Jw5I3?Cf-=ofnA%d6H)+
ztu?ETSRBZMJeSgdmN<}Qd9I}aZE+xr@_a}GM&f{pyp@%e0pA<{B1`y^28_i4U3tu^
zEqOkr0W0D_NO>%6jiq&@*Xc?F*2IAj@?vRS5@I3^SQQ6+$_ph8q<$eSg*(;ZPHm77
zo-`Vpo114z^+HMm&cp$JSlH!ajpWq%9mdtPlcA*nr{aL7yc-r%=Ns()_=&^A!_{)R
zd`?1aN(0Wt0bBC;4P1?1CSCIJ1xZ6({|mPxe&Ra|FXDiyJY8wb84vpgS;m_<pev6j
z3`9#OE7E{hall~0km5`lNVUz&CY4GB(bFflIF$yxM;y@HW|0=>(m)V#z>z#J(t!7&
zs=#(w?D`=~!<HwG{_X9p)g{L)f<>IdM&v=--Q8Wi)oOX$n;cvmFp(ER8VEL2$5@E}
z#PAw#VSavI>sk}CFjSMa%%)*vf36RLinAn5;Z<J9<%msb3UBg4Er4A}Q+Sc*U7TZS
z3g_~?it{8*;Z&Zt<w(3%!;{;p<T_rb4Y;VsrG$}$4%>JUr@O#~EPi<T^8Nv(hP+yw
zhh<%!^Py@gZFhHfppG3J98{wyLRMduWc1@<YwhmBsW_X`6j_nyOq>g8iY&-;BF?2W
zMQC|WCI^<*CWq1h>KRNJ;`g%SSQn?0>LZn=i0gmkKWX$VnkMa89jZR14RdsKRO2Cw
zuLkL|Lpxp6nz&HX6u#wI5vQ4nH+6rAE<WWMi_3~Mg)ezVlS7=o*dQ6sqye;x_DMcr
zh_bx3#c6I<b}CH~xBrpkG&o}S(p1#i%9>?qie9fbaG7f>7MBNU3YUq>B5}I81k4AP
zc1;0rB`>u&!<^4=6c88kQi*esDC-;B@)E@rL7Kv*yqV&PBu!!K#~G%IE21=ojUQ*2
zc*|8}X~XcHLW_%33*KSi=2gV8v<*J-nS>-I|7Q`CT-y<GajMT(5@I`R#V5M*M($Nv
zfcR-io~0@HsYr{9eaST=5f{%msqGg*nnD_Rk!}M;lBSUKJ<@5Qh|&~k`yNRfD6%v~
nn!YFfe%wd{|ARC|Qs4gp3&`MX&GDnk00000NkvXXu0mjfccgW+

literal 0
HcmV?d00001

diff --git a/src/components/RetroList/ContentsList.tsx b/src/components/RetroList/ContentsList.tsx
index dfea9c3..9539174 100644
--- a/src/components/RetroList/ContentsList.tsx
+++ b/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>
           ))}
diff --git a/src/components/RetroList/Modal.tsx b/src/components/RetroList/Modal.tsx
new file mode 100644
index 0000000..d6f5878
--- /dev/null
+++ b/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;
diff --git a/src/styles/RetroList/Modal.styles.ts b/src/styles/RetroList/Modal.styles.ts
new file mode 100644
index 0000000..3388ebd
--- /dev/null
+++ b/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;
+`;