💄 Design: ProjectRetro 그룹 삭제 모달창 퍼블리싱

donga-it-club · Jul 13, 2024 · 64dd878 · 64dd878
1 parent 0e79ca9
commit 64dd878
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 12 deletions.
diff --git a/src/components/projectRetro/DeleteModal.tsx b/src/components/projectRetro/DeleteModal.tsx
@@ -0,0 +1,38 @@
+import { IoMdClose } from 'react-icons/io';
+import { RiFolder6Fill } from 'react-icons/ri';
+import * as S from '@/styles/projectRetro/DeleteModal.styles';
+
+interface DeleteModalProps {
+  isClose: () => void;
+  //   groupId: number;
+}
+
+const DeleteModal: React.FC<DeleteModalProps> = ({ isClose }) => {
+  return (
+    <S.Background>
+      <S.Container>
+        <S.Modal>
+          <S.Top>
+            <S.Title>회고 프로젝트 삭제</S.Title>
+            <IoMdClose
+              onClick={isClose}
+              size={20}
+              style={{ color: '#6c6c6c', marginLeft: 'auto', cursor: 'pointer' }}
+            />
+          </S.Top>
+          <hr />
+          <S.Bottom>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <RiFolder6Fill size={25} style={{ color: '#FFE500', padding: 0 }} />
+              <S.ProjectName>프로젝트1</S.ProjectName> {/* 프로젝트 이름 */}
+              <S.Text>를 삭제하시겠습니까?</S.Text>
+            </div>
+            <S.Button>Delete</S.Button>
+          </S.Bottom>
+        </S.Modal>
+      </S.Container>
+    </S.Background>
+  );
+};
+
+export default DeleteModal;
diff --git a/src/components/projectRetro/GroupList.tsx b/src/components/projectRetro/GroupList.tsx
@@ -22,6 +22,7 @@ const GroupList: React.FC<GroupListProps> = ({ groups }) => {
 
   return (
     <>
+      {isModalOpen && <Modal isClose={() => setIsModalOpen(false)} type="edit" groupId={6} />}
       <S.Container>
         {groups.map(group => (
           <div key={group.id}>
@@ -31,7 +32,6 @@ const GroupList: React.FC<GroupListProps> = ({ groups }) => {
         ))}
         <MdOutlineMoreHoriz onClick={handleModal} style={{ cursor: 'pointer' }} />
       </S.Container>
-      {isModalOpen && <Modal isClose={() => setIsModalOpen(false)} type="edit" groupId={6} />}
     </>
   );
 };

diff --git a/src/components/projectRetro/Modal.tsx b/src/components/projectRetro/Modal.tsx
@@ -13,6 +13,7 @@ import postImageToS3 from '@/api/imageApi/postImageToS3';
 import { GetRetrospectiveGroup } from '@/api/retroGroupsApi/getGroup';
 import postGroup from '@/api/retroGroupsApi/postGroup';
 import ImageUpload from '@/components/createRetro/modal/ImageUpload';
+import DeleteModal from '@/components/projectRetro/DeleteModal';
 import DescriptionInput from '@/components/projectRetro/DescriptionInput';
 import TitleInput from '@/components/projectRetro/TitleInput';
 import { useCustomToast } from '@/hooks/useCustomToast';
@@ -31,6 +32,11 @@ const Modal: React.FC<ModalProps> = ({ isClose, type, groupId }) => {
   const statusList = ['ING', 'DONE'];
   const statusObj: { [key: string]: string } = { ING: 'IN_PROGRESS', DONE: 'COMPLETED' };
   const availableOption = statusList.filter(statusList => statusList !== statusOption);
+  const [deleteModal, setDeleteModal] = useState<boolean>(false);
+
+  const handleDeleteModal = () => {
+    setDeleteModal(true);
+  };
 
   const [requestData, setRequestData] = useState<PostRetrospectivesGroupRequest>({
     title: '',
@@ -199,12 +205,16 @@ const Modal: React.FC<ModalProps> = ({ isClose, type, groupId }) => {
               </div>
             )}
           </S.StatusBox>
-          <S.SubmitButton onClick={type === 'create' ? handleCreateGroup : handleEditGroup}>
-            {type === 'create' && 'Create'}
-            {type === 'edit' && 'Edit'}
-          </S.SubmitButton>
+          <S.ButtonContainer>
+            <S.SubmitButton onClick={type === 'create' ? handleCreateGroup : handleEditGroup}>
+              {type === 'create' && 'Create'}
+              {type === 'edit' && 'Edit'}
+            </S.SubmitButton>
+            {type === 'edit' && <S.DeleteButton onClick={handleDeleteModal}>Delete</S.DeleteButton>}
+          </S.ButtonContainer>
         </S.Modal>
       </S.Container>
+      {deleteModal && <DeleteModal isClose={() => setDeleteModal(false)} />}
     </S.Background>
   );
 };

diff --git a/src/pages/ProjectRetroPage.tsx b/src/pages/ProjectRetroPage.tsx
@@ -83,12 +83,10 @@ const ProjectRetro = () => {
         <S.DescriptionText>사용법</S.DescriptionText>
       </S.DescriptionBox>
       <StatusFilter onSelectedFilter={handleStatusFilter} />
-      <div>
-        <S.CreateBox>
-          <FiPlusCircle size={40} style={{ color: '#a9a9a9', cursor: 'pointer' }} onClick={handleModal} />
-        </S.CreateBox>
-        <GroupList groups={filteredGroups} />
-      </div>
+      <S.CreateBox>
+        <FiPlusCircle size={40} style={{ color: '#a9a9a9', cursor: 'pointer' }} onClick={handleModal} />
+      </S.CreateBox>
+      <GroupList groups={filteredGroups} />
       {isDescriptionOpen ? <DescriptionModal isClose={() => setIsDescriptionOpen(false)} /> : null}
       {isModalOpen && <Modal isClose={() => setIsModalOpen(false)} type="create" />}
     </>

diff --git a/src/styles/projectRetro/DeleteModal.styles.ts b/src/styles/projectRetro/DeleteModal.styles.ts
@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+
+export const Background = styled.div`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.35);
+  z-index: 350;
+`;
+
+export const Container = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 400;
+`;
+
+export const Modal = styled.div`
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  border-radius: 5px;
+  width: 600px;
+  height: auto;
+`;
+
+export const Top = styled.div`
+  padding: 10px;
+  display: flex;
+  align-items: center;
+
+  justify-content: space-between;
+`;
+
+export const Title = styled.p`
+  color: #6c6c6c;
+`;
+
+export const Bottom = styled.div`
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const ProjectName = styled.span`
+  color: #111b47;
+  font-size: large;
+  margin: 0px 5px;
+  font-weight: bold;
+`;
+
+export const Text = styled.span`
+  color: #111b47;
+`;
+
+export const Button = styled.button`
+  color: white;
+  background-color: #111b47;
+  border-radius: 5px;
+  width: auto;
+  margin-left: auto;
+  padding: 3px 20px;
+`;
diff --git a/src/styles/projectRetro/Modal.styles.ts b/src/styles/projectRetro/Modal.styles.ts
@@ -116,8 +116,19 @@ export const DefaultText = styled.p`
   color: #8d8d8d;
 `;
 
+export const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row-reverse;
+`;
+
+export const DeleteButton = styled.button`
+  color: #ff0000;
+  border-radius: 5px;
+  border: 1px solid #ff0000;
+  padding: 3px 20px;
+`;
 export const SubmitButton = styled.button`
-  margin-left: auto;
+  margin-left: 20px;
   color: white;
   background-color: #4991e4;
   padding: 3px 20px;