Merge pull request #19 from SkyLightQP/develop

fix: enhance ux in AdminPage
SkyLightQP · Aug 30, 2024 · b8f75f2 · b8f75f2
2 parents 53c298e + 0c9ed1d
commit b8f75f2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/src/components/Dialogs/UpdateModal.tsx b/src/components/Dialogs/UpdateModal.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useRef } from 'react';
 import {
   Button,
   ComponentWithAs,
@@ -35,17 +35,29 @@ interface UpdateModalProps {
 const UpdateModal: React.FC<UpdateModalProps> = ({ modalController, fields, defaultValue, onUpdateClick }) => {
   const { isOpen, onClose } = modalController;
   const { register, handleSubmit, setValue } = useForm<Record<string, string>>();
+  const isFirstOpen = useRef(false);
 
   useEffect(() => {
-    fields
-      .map(({ id }) => id)
-      .forEach((i, index) => {
-        setValue(i, defaultValue[index]);
-      });
-  }, [setValue, fields, defaultValue]);
+    if (isOpen && !isFirstOpen.current) {
+      fields
+        .map(({ id }) => id)
+        .forEach((i, index) => {
+          setValue(i, defaultValue[index]);
+        });
+      isFirstOpen.current = true;
+    }
+  }, [isFirstOpen, setValue, fields, defaultValue]);
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+    <Modal
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        isFirstOpen.current = false;
+      }}
+      isCentered
+      size="2xl"
+    >
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>수정하기</ModalHeader>
@@ -68,7 +80,13 @@ const UpdateModal: React.FC<UpdateModalProps> = ({ modalController, fields, defa
           <Button colorScheme="blue" mr={3} fontWeight="normal" onClick={handleSubmit(onUpdateClick)}>
             수정
           </Button>
-          <Button fontWeight="normal" onClick={onClose}>
+          <Button
+            fontWeight="normal"
+            onClick={() => {
+              onClose();
+              isFirstOpen.current = false;
+            }}
+          >
             취소
           </Button>
         </ModalFooter>

diff --git a/src/layouts/AdminLayout/index.tsx b/src/layouts/AdminLayout/index.tsx
@@ -8,7 +8,7 @@ import { Space } from '../../components/Space';
 const Container = styled.div`
   color: ${Colors.PRIMARY};
 
-  max-width: 960px;
+  max-width: 1200px;
   margin: 0 auto;
 
   @media screen and (max-width: 420px) {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -105,7 +105,7 @@ const Index: React.FC<ServerSideProps> = ({
                         <DescriptionView description={content.description} />
                         {/* <Space y={6} /> */}
                         {/* <ImageView urls={[]} /> */}
-                        {content.links.length > 0 && <Space y={6} />}
+                        {/* <Space y={6} /> */}
                         <ExternalLinkView links={content.links} />
                         {content.hasMargin && <Space y={26} />}
                       </div>