Merge pull request #530 from Mile-Writings/fix/#527/groupManageQa

[ Fix/#527 ] Group create page / Group Info Edit page QA반영
Mile-Writings · Jan 7, 2025 · 27c74dd · 27c74dd
2 parents ab9031a + 48e23a2
commit 27c74dd
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 53 deletions.
diff --git a/src/assets/svgs/groupImageRemove.svg b/src/assets/svgs/groupImageRemove.svg
diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx
@@ -62,6 +62,7 @@ export { default as adminEmptyMemberIc } from './adminEmptyMember.svg?react';
 export { default as AdminHomeIc } from './adminHomeIcn.svg?react';
 export { default as adminProfileIc } from './adminProfileIc.svg?react';
 export { default as CreateGroupImageUpload } from './createGroupImageUpload.svg?react';
+export { default as CreateCroupImageRemove } from './groupImageRemove.svg?react';
 export { default as CreateGroupInfoIc } from './createGroupInfoIc.svg?react';
 export { default as EditorCatIc } from './editorCatSvg.svg?react';
 export { default as faviconMileIc } from './faviconMile.svg?react';

diff --git a/src/pages/admin/components/EditGroupInfo.tsx b/src/pages/admin/components/EditGroupInfo.tsx
@@ -1,14 +1,18 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import useModal from '../../../hooks/useModal';
+import { DefaultModal, DefaultModalBtn } from '../../../components/commons/modal/DefaultModal';
 import {
   CreateGroupImageUpload,
   CreateGroupImageUploadedIc,
   CreateGroupInfoIc,
   CreateGroupRadioCheckedIc,
   CreateGroupRadioUncheckedIc,
+  CreateCroupImageRemove,
 } from '../../../assets/svgs';
 import { DEFAULT_IMG_URL } from '../../../constants/defaultImgUrl';
+
 import useImageUpload from '../../../hooks/useImageUpload';
 import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery';
 import { FileType } from '../../../types/imageUploadType';
@@ -37,6 +41,7 @@ const EditGroupInfo = () => {
   const [imageFile, setImageFile] = useState<FileType>(null);
 
   const { onImageUpload } = useImageUpload({ setPreviewImgUrl, setImageFile });
+  const { isModalOpen, handleShowModal, handleCloseModal } = useModal();
   const [passDuplicate, setPassDuplicate] = useState(false);
   const [editBtnAcitve, setEditBtnActive] = useState(false);
 
@@ -117,7 +122,12 @@ const EditGroupInfo = () => {
       }
     }
   };
-
+  const handleRemoveImage = () => {
+    setPreviewImgUrl('');
+    setImageFile(null);
+    handleCloseModal();
+    setEditBtnActive(true);
+  };
   useEffect(() => {
     if (isSuccess) {
       if (groupNameValidationData === true) {
@@ -195,30 +205,42 @@ const EditGroupInfo = () => {
         <WhiteInputWrapper isValid={true}>
           <GroupInputWrapper>
             <InputTitleText>글 모임 사진</InputTitleText>
-            <GroupImageLabel htmlFor="file">
+
+            {previewImgUrl !== DEFAULT_IMG_URL && previewImgUrl !== '' ? (
               <GroupImageWrapper>
                 <GroupImagePreviewWrapper>
-                  {previewImgUrl !== DEFAULT_IMG_URL ? (
-                    <>
-                      <GroupImagePreview src={previewImgUrl} />
-                      <CreateGroupImageUploadedIcon className="group-image-preview" />
-                    </>
-                  ) : (
-                    <CreateGroupImageUploadIcon className="group-image-preview" />
-                  )}
+                  <GroupImagePreview src={previewImgUrl} isImagePreview={!!previewImgUrl} />
+
+                  <IconWrapper>
+                    <GroupImageLabel htmlFor="file">
+                      <CreateGroupImageUploadedIcon />
+                      <GroupImageInput
+                        type="file"
+                        name="file"
+                        id="file"
+                        accept="image/*"
+                        onChange={handleGroupImage}
+                      />
+                    </GroupImageLabel>
+                    <CreateGroupImageRemoveIcon onClick={handleShowModal} />
+                  </IconWrapper>
                 </GroupImagePreviewWrapper>
+              </GroupImageWrapper>
+            ) : (
+              <GroupImageLabel htmlFor="file">
+                <GroupImageWrapper>
+                  <CreateGroupImageUploadIcon className="group-image-preview" />
+                </GroupImageWrapper>
+
                 <GroupImageInput
                   type="file"
                   name="file"
                   id="file"
                   accept="image/*"
-                  onChange={(e) => {
-                    handleGroupImage(e);
-                  }}
+                  onChange={handleGroupImage}
                 />
-              </GroupImageWrapper>
-            </GroupImageLabel>
-
+              </GroupImageLabel>
+            )}
             <GroupInputDesc>
               *글모임 페이지 상단에 노출될 대표 이미지입니다. 1366*306px사이즈를 권장합니다.
             </GroupInputDesc>
@@ -276,12 +298,33 @@ const EditGroupInfo = () => {
           수정하기
         </EditGroupBtn>
       </CreateGroupLayout>
+      {/* 글모임 이미지 삭제 모달 */}
+      <DefaultModal
+        isModalOpen={isModalOpen}
+        onClickBg={handleCloseModal}
+        content={'등록한 이미지를 삭제하시겠습니까?'}
+        sizeType="LARGE"
+      >
+        <DefaultModalBtn
+          btnText={['예', '아니요']}
+          onClickLeft={handleRemoveImage}
+          onClickRight={handleCloseModal}
+        />
+      </DefaultModal>
     </>
   );
 };
 
 export default EditGroupInfo;
+const IconWrapper = styled.div`
+  position: absolute;
+  display: flex;
+  gap: 1.6rem;
+  justify-content: center;
+  width: 100%;
 
+  cursor: auto;
+`;
 const GroupPublicDescResponsiveBox = styled.div`
   display: flex;
   justify-content: flex-end;
@@ -293,8 +336,19 @@ const GroupPublicDescResponsiveBox = styled.div`
     width: 100%;
   }
 `;
+
+const CreateGroupImageRemoveIcon = styled(CreateCroupImageRemove)`
+  z-index: 1;
+
+  cursor: pointer;
+
+  &:hover {
+    path {
+      fill: #6139d1;
+    }
+  }
+`;
 const CreateGroupImageUploadIcon = styled(CreateGroupImageUpload)`
-  position: absolute;
   z-index: 1;
 
   cursor: pointer;
@@ -309,8 +363,6 @@ const CreateGroupImageUploadIcon = styled(CreateGroupImageUpload)`
 `;
 
 const CreateGroupImageUploadedIcon = styled(CreateGroupImageUploadedIc)`
-  position: absolute;
-
   cursor: pointer;
 
   &:hover {
@@ -322,12 +374,13 @@ const CreateGroupImageUploadedIcon = styled(CreateGroupImageUploadedIc)`
   }
 `;
 const GroupImagePreviewWrapper = styled.div`
+  position: relative;
   display: flex;
+  gap: 1.6rem;
   align-items: center;
   justify-content: center;
   width: 100%;
 `;
-
 const GroupNameInputWrapper = styled.div`
   position: relative;
   width: 100%;
@@ -461,18 +514,19 @@ const GroupInputDesc = styled.p`
     ${({ theme }) => theme.fonts.mSubtitle1};
   }
 `;
-const GroupImagePreview = styled.img`
+const GroupImagePreview = styled.img<{ isImagePreview: boolean }>`
+  position: absolute;
+
   width: 100%;
   height: 20rem;
   object-fit: cover;
 
-  cursor: pointer;
+  cursor: ${({ isImagePreview }) => (isImagePreview ? 'default' : 'pointer')};
   border-radius: 8px;
 `;
 
 const GroupImageLabel = styled.label`
   display: block;
-  width: 100%;
 `;
 const GroupImageInput = styled.input`
   display: none;

diff --git a/src/pages/admin/constants/modal.ts b/src/pages/admin/constants/modal.ts
@@ -6,4 +6,5 @@ export const MODAL = {
   DELETE_TOPIC:
     '삭제 시, 해당 글감으로 작성된 글도 함께 삭제되며, 삭제된 글감은 복구할 수 없습니다. 계속 하시겠습니까?',
   PAGE_EXIT_WARN: `입력 중인 내용이 있습니다. \n페이지를 나가시겠습니까?`,
+  GROUP_IMAGE_DELETE: '등록한 이미지를 삭제하시겠습니까?',
 };