Merge pull request #256 from Nexters/feat/cast-info-mobile

feat: 출연진 등록 모바일 대응 및 공연 등록 웹뷰 관련 이슈 수정
Nexters · Jan 1, 2025 · 687a5e3 · 687a5e3
2 parents e19579f + f1ec18e
commit 687a5e3
Show file tree

Hide file tree

Showing 25 changed files with 594 additions and 400 deletions.
diff --git a/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts b/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts
@@ -19,42 +19,70 @@ const Header = styled.div`
   align-items: center;
   border-radius: 8px 8px 0px 0px;
   border: 1px solid ${({ theme }) => theme.palette.grey.g20};
-  padding: 24px 28px;
+  padding: 16px 20px;
 
   &:last-child {
     border-radius: 8px;
   }
+
+  ${mq_lg} {
+    padding: 24px 28px;
+  }
 `;
 
 const HeaderNameWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 12px;
-`
+`;
 
 const Handle = styled.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: ${({ theme }) => theme.palette.grey.g40};
-  cursor: grab;
-  user-select: none;
-  user-zoom: none;
-`
+  display: none;
+
+  ${mq_lg} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: ${({ theme }) => theme.palette.grey.g40};
+    cursor: grab;
+    user-select: none;
+    user-zoom: none;
+  }
+`;
 
 const Name = styled.span`
   color: ${({ theme }) => theme.palette.grey.g90};
-  ${({ theme }) => theme.typo.sh2};
+  ${({ theme }) => theme.typo.sh1};
+
+  ${mq_lg} {
+    ${({ theme }) => theme.typo.sh2};
+  }
 `;
 
-const EditButtonWrapper = styled.div`
-  span {
+const MobileEditButton = styled.button`
+  width: 24px;
+  height: 24px;
+
+  & > svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  ${mq_lg} {
     display: none;
-    margin-left: 8px;
   }
+`;
+
+const EditButtonWrapper = styled.div`
+  display: none;
 
   ${mq_lg} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     span {
+      margin-left: 8px;
       display: inline;
     }
   }
@@ -78,16 +106,25 @@ const CastItem = styled.div`
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  padding: 14px 28px;
-  flex: 1 0 50%;
-  max-width: 50%;
+  padding: 8px 20px;
+  flex: 1 0 auto;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 
-  &:first-of-type,
-  &:nth-of-type(2) {
-    padding-top: 18px;
+  &:first-of-type {
+    padding-top: 12px;
+  }
+
+  ${mq_lg} {
+    flex: 1 0 50%;
+    max-width: 50%;
+    padding: 14px 28px;
+
+    &:first-of-type,
+    &:nth-of-type(2) {
+      padding-top: 18px;
+    }
   }
 `;
 
@@ -106,22 +143,30 @@ const UserImage = styled.div`
 
 const Username = styled.span`
   color: ${({ theme }) => theme.palette.grey.g90};
-  ${({ theme }) => theme.typo.b3};
+  ${({ theme }) => theme.typo.b1};
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   flex: 0 1 auto;
+
+  ${mq_lg} {
+    ${({ theme }) => theme.typo.b3};
+  }
 `;
 
 const Rolename = styled.span`
   color: ${({ theme }) => theme.palette.grey.g50};
-  ${({ theme }) => theme.typo.b3};
+  ${({ theme }) => theme.typo.b1};
   margin-left: 4px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   flex: 0 1 auto;
   max-width: 100px;
+
+  ${mq_lg} {
+    ${({ theme }) => theme.typo.b3};
+  }
 `;
 
 const CollapseButton = styled.button`
@@ -132,13 +177,18 @@ const CollapseButton = styled.button`
   border-radius: 0px 0px 8px 8px;
   border: 1px solid ${({ theme }) => theme.palette.grey.g20};
   border-top: none;
-  ${({ theme }) => theme.typo.sh1};
+  ${({ theme }) => theme.typo.b1};
   color: ${({ theme }) => theme.palette.grey.g70};
-  padding: 19px 32px;
+  padding: 12px 32px;
 
   & > svg {
     margin-left: 8px;
   }
+
+  ${mq_lg} {
+    ${({ theme }) => theme.typo.sh1};
+    padding: 19px 32px;
+  }
 `;
 
 export default {
@@ -154,4 +204,5 @@ export default {
   UserImage,
   Username,
   Rolename,
+  MobileEditButton,
 };
diff --git a/apps/admin/src/components/ShowCastInfo/index.tsx b/apps/admin/src/components/ShowCastInfo/index.tsx
@@ -21,14 +21,9 @@ const ShowCastInfo = ({ showCastInfo, onSave, onDelete }: Props) => {
   const dialog = useDialog();
   const [isOpen, setIsOpen] = useState(false);
 
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = useSortable({ id: showCastInfo.id });
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: showCastInfo.id,
+  });
 
   const style = {
     transform: CSS.Translate.toString(transform),
@@ -38,54 +33,53 @@ const ShowCastInfo = ({ showCastInfo, onSave, onDelete }: Props) => {
     zIndex: isDragging ? 100 : 99,
     cursor: isDragging ? 'grabbing' : undefined,
   };
-  
+
   const toggle = () => setIsOpen((prev) => !prev);
 
+  const onClickEdit: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+    dialog.open({
+      title: '출연진 정보 편집',
+      isAuto: true,
+      content: (
+        <ShowCastInfoFormDialogContent
+          onSave={async (castInfo) => {
+            try {
+              await onSave(castInfo);
+              dialog.close();
+            } catch {
+              return new Promise((_, reject) => reject('저장 중 오류가 발생하였습니다.'));
+            }
+          }}
+          prevShowCastInfo={showCastInfo}
+          onDelete={async () => {
+            try {
+              await onDelete?.();
+              dialog.close();
+            } catch {
+              return new Promise((_, reject) => reject('삭제 중 오류가 발생하였습니다.'));
+            }
+          }}
+        />
+      ),
+    });
+  };
+
   return (
     <Styled.Container ref={setNodeRef} style={style}>
       <Styled.Header>
         <Styled.HeaderNameWrapper>
           <Styled.Handle type="button" {...attributes} {...listeners}>
             <MenuIcon />
           </Styled.Handle>
-          <Styled.Name>
-            {showCastInfo.name}
-          </Styled.Name>
+          <Styled.Name>{showCastInfo.name}</Styled.Name>
         </Styled.HeaderNameWrapper>
+
+        <Styled.MobileEditButton type="button" onClick={onClickEdit}>
+          <EditIcon />
+        </Styled.MobileEditButton>
         <Styled.EditButtonWrapper>
-          <TextButton
-            type="button"
-            colorTheme="netural"
-            size="regular"
-            onClick={(e) => {
-              e.preventDefault();
-              dialog.open({
-                title: '출연진 정보 편집',
-                isAuto: true,
-                content: (
-                  <ShowCastInfoFormDialogContent
-                    onSave={async (castInfo) => {
-                      try {
-                        await onSave(castInfo);
-                        dialog.close();
-                      } catch {
-                        return new Promise((_, reject) => reject('저장 중 오류가 발생하였습니다.'));
-                      }
-                    }}
-                    prevShowCastInfo={showCastInfo}
-                    onDelete={async () => {
-                      try {
-                        await onDelete?.();
-                        dialog.close();
-                      } catch {
-                        return new Promise((_, reject) => reject('삭제 중 오류가 발생하였습니다.'));
-                      }
-                    }}
-                  />
-                ),
-              });
-            }}
-          >
+          <TextButton type="button" colorTheme="netural" size="regular" onClick={onClickEdit}>
             <EditIcon />
             <span>정보 편집</span>
           </TextButton>
@@ -125,7 +119,7 @@ const ShowCastInfo = ({ showCastInfo, onSave, onDelete }: Props) => {
           </Styled.CollapseButton>
         </>
       )}
-    </Styled.Container >
+    </Styled.Container>
   );
 };
 

diff --git a/apps/admin/src/components/ShowCastInfoFormDialogContent/DraggableShowCastInfoMemberRow.tsx b/apps/admin/src/components/ShowCastInfoFormDialogContent/DraggableShowCastInfoMemberRow.tsx
@@ -1,30 +1,31 @@
-import { useSortable } from "@dnd-kit/sortable";
+import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import ShowCastInfoMemberRow, { ShowCastInfoMemberRowProps } from "./ShowCastInfoMemberRow";
+import ShowCastInfoMemberRow, { ShowCastInfoMemberRowProps } from './ShowCastInfoMemberRow';
 
 interface DraggableShowCastInfoMemberRowProps extends ShowCastInfoMemberRowProps {
-  id: string
+  id: string;
 }
 
 const DraggableShowCastInfoMemberRow = ({ id, ...props }: DraggableShowCastInfoMemberRowProps) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = useSortable({ id });
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  });
 
   const style = {
     transform: CSS.Translate.toString(transform),
     transition,
-    opacity: isDragging ? 0 : 1
+    opacity: isDragging ? 0 : 1,
   };
-  
+
   return (
-    <ShowCastInfoMemberRow {...props} ref={setNodeRef} draggingStyle={style} {...attributes} {...listeners} />
-  )
-}
+    <ShowCastInfoMemberRow
+      {...props}
+      ref={setNodeRef}
+      draggingStyle={style}
+      {...attributes}
+      {...listeners}
+    />
+  );
+};
 
-export default DraggableShowCastInfoMemberRow
+export default DraggableShowCastInfoMemberRow;