Merge pull request #204 from Nexters/feature/cast-info

feat: 출연자 정보 등록
Nexters · Oct 6, 2024 · 47ff9dd · 47ff9dd
2 parents 57a9d7d + 3966ddc
commit 47ff9dd
Show file tree

Hide file tree

Showing 45 changed files with 1,431 additions and 275 deletions.
diff --git a/apps/admin/src/App.tsx b/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>
     ),

diff --git a/apps/admin/src/components/LinkFormDialogContent/LinkFormDialogContent.styles.ts b/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,
+};
diff --git a/apps/admin/src/components/LinkFormDialogContent/index.tsx b/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;
diff --git a/apps/admin/src/components/SettingDialogContent/SettingDialogContent.styles.ts b/apps/admin/src/components/SettingDialogContent/SettingDialogContent.styles.ts
@@ -116,7 +116,7 @@ const SettingContentHeader = styled.div`
     display: flex;
     justify-content: space-between;
   }
-`
+`;
 
 const SettingContentTitle = styled.h3`
   ${({ theme }) => theme.typo.h1};
@@ -134,7 +134,7 @@ const SettingContentSubmitWrapper = styled.div`
   ${mq_lg} {
     display: block;
   }
-`
+`;
 
 const SettingContentSubmitWrapperMobile = styled.div`
   position: fixed;
@@ -154,9 +154,9 @@ const SettingContentSubmitWrapperMobile = styled.div`
   ${mq_lg} {
     display: none;
   }
-`
+`;
 
-const SettingContentForm = styled.form``
+const SettingContentForm = styled.form``;
 
 const SettingContentFormControl = styled.div`
   margin-bottom: 24px;
@@ -173,14 +173,14 @@ const ProfileImageWrapper = styled.div`
     width: 100px;
     height: 100px;
   }
-`
+`;
 
 const ProfileImage = styled.img`
   width: 100px;
   height: 100px;
   border-radius: 100px;
   object-fit: cover;
-`
+`;
 
 const DefaultProfileImage = styled(DefaultUserProfileIcon)`
   border-radius: 100px;
@@ -200,7 +200,7 @@ const ProfileImageEditButton = styled.label`
   bottom: 0;
   left: calc(100px - 42px + 8px);
   cursor: pointer;
-`
+`;
 
 const Label = styled.label<LabelProps>`
   ${({ theme }) => theme.typo.b3};
@@ -210,7 +210,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;
@@ -231,27 +231,27 @@ const LinkItem = styled.div`
   align-items: center;
   gap: 16px;
   height: 56px;
-`
+`;
 
 const LinkInfo = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
-`
+`;
 
 const LinkTitle = styled.p`
   ${({ theme }) => theme.typo.sh1};
   color: ${({ theme }) => theme.palette.grey.g90};
-`
+`;
 
 const LinkDescription = styled.p`
   ${({ theme }) => theme.typo.b1};
   color: ${({ theme }) => theme.palette.grey.g50};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-`
+`;
 
 const LinkEditButton = styled.button`
   width: 24px;
@@ -260,7 +260,7 @@ const LinkEditButton = styled.button`
   justify-content: center;
   align-items: center;
   cursor: pointer;
-`
+`;
 
 const ConnectedServiceList = styled.div`
   display: flex;
@@ -314,12 +314,12 @@ const SettingDescriptionItem = styled.li``;
 const TextAreaWrapper = styled.div`
   position: relative;
   height: 122px;
-`
+`;
 
 const TextAreaBox = styled.div<TextAreaProps>`
   border: 1px solid
     ${({ theme, hasError }) =>
-    hasError ? `${theme.palette.status.error} !important` : theme.palette.grey.g20};
+      hasError ? `${theme.palette.status.error} !important` : theme.palette.grey.g20};
   border-radius: 4px;
   background-color: ${({ theme }) => theme.palette.grey.w};
   position: absolute;
@@ -341,13 +341,13 @@ const TextAreaBox = styled.div<TextAreaProps>`
     border: 1px solid ${({ theme }) => theme.palette.grey.g20};
     background: ${({ theme }) => theme.palette.grey.g10};
   }
-`
+`;
 
 const TextArea = styled.textarea`
   position: absolute;
   top: 0;
   left: 0;
-  width: calc(100% - 12px - 12px); 
+  width: calc(100% - 12px - 12px);
   height: 72px;
   margin: 12px 12px 38px;
   color: ${({ theme }) => theme.palette.grey.g90};
@@ -368,7 +368,7 @@ const TextAreaCount = styled.span`
   bottom: 12px;
   right: 12px;
   z-index: 3;
-`
+`;
 
 export default {
   SettingDialogContent,