refactor: 동적 스타일링에 css 대신 styled 스타일 적용

woowacourse-teams · Aug 1, 2024 · 795c110 · 795c110
1 parent 4f7dc25
commit 795c110
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/frontend/src/pages/LandingPage/components/FormBody/index.tsx b/frontend/src/pages/LandingPage/components/FormBody/index.tsx
@@ -10,7 +10,7 @@ interface FormBodyProps {
 }
 
 const FormBody: React.FC<EssentialPropsWithChildren<FormBodyProps>> = ({ direction, children }) => {
-  return <div css={S.FormBody(direction)}>{children}</div>;
+  return <S.FormBody direction={direction}>{children}</S.FormBody>;
 };
 
 export default FormBody;
diff --git a/frontend/src/pages/LandingPage/styles.ts b/frontend/src/pages/LandingPage/styles.ts
@@ -1,4 +1,3 @@
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { FormDirection } from './components/FormLayout';
@@ -38,9 +37,9 @@ export const ReviewAccessFormBody = styled.div`
   width: 100%;
 `;
 
-export const FormBody = (direction: FormDirection) => css`
+export const FormBody = styled.div<{ direction: FormDirection }>`
   display: flex;
-  flex-direction: ${direction === 'col' ? 'column' : 'row'};
+  flex-direction: ${({ direction }) => (direction === 'col' ? 'column' : 'row')};
   gap: 1.6em;
 `;