[base -> develop] 8차 MVP

apps/admin/src/App.tsx

@@ -38,6 +38,7 @@ import {
 } from './pages';
 import ShowAddPage from './pages/ShowAddPage';
 import { Suspense } from 'react';
+import { domAnimation, LazyMotion } from 'framer-motion';
 
 setDefaultOptions({ locale: ko });
 
@@ -142,7 +143,9 @@ const routes: RouteObject[] = [
     element: (
       <QueryClientProvider>
         <BooltiUIProvider>
-          <Outlet />
+          <LazyMotion features={domAnimation}>
+            <Outlet />
+          </LazyMotion>
         </BooltiUIProvider>
       </QueryClientProvider>
     ),

apps/admin/src/components/LinkFormDialogContent/LinkFormDialogContent.styles.ts

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
-import { mq_lg } from '@boolti/ui'
+import styled from '@emotion/styled';
+import { mq_lg } from '@boolti/ui';
 
 interface LabelProps {
   required?: boolean;
@@ -17,15 +17,15 @@ const LinkForm = styled.form`
   ${mq_lg} {
     padding: 0;
   }
-`
+`;
 
 const LinkFormControl = styled.div`
   margin-bottom: 28px;
 
   & > div {
     width: 100%;
   }
-`
+`;
 
 const LinkFormButtonWrapper = styled.div<LinkFormButtonWrapperProps>`
   display: flex;
@@ -35,15 +35,15 @@ const LinkFormButtonWrapper = styled.div<LinkFormButtonWrapperProps>`
   margin-top: 4px;
 
   button {
-    width: ${({ isEditMode }) => isEditMode ? 'auto' : '100%'};
+    width: ${({ isEditMode }) => (isEditMode ? 'auto' : '100%')};
   }
 
   ${mq_lg} {
     button {
       width: auto;
     }
   }
-`
+`;
 
 const Label = styled.label<LabelProps>`
   ${({ theme }) => theme.typo.b3};
@@ -53,7 +53,7 @@ const Label = styled.label<LabelProps>`
   position: relative;
 
   &::after {
-    content: ${({ required }) => (required ? "'*'" : "none")};
+    content: ${({ required }) => (required ? "'*'" : 'none')};
     color: ${({ theme }) => theme.palette.status.error};
     ${({ theme }) => theme.typo.b1};
     line-height: 22px;
@@ -66,12 +66,12 @@ const LinkDeleteButton = styled.button`
   line-height: 22px;
   text-decoration: underline;
   cursor: pointer;
-`
+`;
 
 export default {
   LinkForm,
   LinkFormControl,
   LinkFormButtonWrapper,
   Label,
-  LinkDeleteButton
-}
+  LinkDeleteButton,
+};

apps/admin/src/components/LinkFormDialogContent/index.tsx

@@ -1,19 +1,23 @@
 import { useForm } from 'react-hook-form';
 import Styled from './LinkFormDialogContent.styles';
 import { Button, TextField } from '@boolti/ui';
-import { UserProfileLink } from '@boolti/api';
+import { UserLink } from '@boolti/api';
 
-export type LinkFormInputs = UserProfileLink;
+export type LinkFormInputs = UserLink;
 
 interface LinkFormDialogContentProps {
   defaultValues?: LinkFormInputs;
   onSubmit: (data: LinkFormInputs) => void;
   onDelete?: () => void;
 }
 
-const LinkFormDialogContent = ({ defaultValues, onSubmit, onDelete }: LinkFormDialogContentProps) => {
+const LinkFormDialogContent = ({
+  defaultValues,
+  onSubmit,
+  onDelete,
+}: LinkFormDialogContentProps) => {
   const linkForm = useForm<LinkFormInputs>({
-    defaultValues
+    defaultValues,
   });
 
   const isEditMode = !!defaultValues;
@@ -23,7 +27,7 @@ const LinkFormDialogContent = ({ defaultValues, onSubmit, onDelete }: LinkFormDi
       title: data.title.trim(),
       link: data.link.trim(),
     });
-  }
+  };
 
   return (
     <Styled.LinkForm onSubmit={linkForm.handleSubmit(submitHandler)}>
@@ -47,7 +51,12 @@ const LinkFormDialogContent = ({ defaultValues, onSubmit, onDelete }: LinkFormDi
         />
       </Styled.LinkFormControl>
       <Styled.LinkFormButtonWrapper isEditMode={isEditMode}>
-        <Button size="bold" colorTheme="primary" type="submit" disabled={!linkForm.formState.isValid}>
+        <Button
+          size="bold"
+          colorTheme="primary"
+          type="submit"
+          disabled={!linkForm.formState.isValid}
+        >
           저장하기
         </Button>
         {isEditMode && onDelete && (
@@ -57,7 +66,7 @@ const LinkFormDialogContent = ({ defaultValues, onSubmit, onDelete }: LinkFormDi
         )}
       </Styled.LinkFormButtonWrapper>
     </Styled.LinkForm>
-  )
-}
+  );
+};
 
 export default LinkFormDialogContent;