refactor(front): emotion > tailwind 마이그레이션

- emotion-js/emotion#2928 - emotion이 next app router 계속 미지원이라서 변경
will-kim-querypie · Aug 15, 2024 · e550574 · e550574
1 parent d7782cb
commit e550574
Show file tree

Hide file tree

Showing 71 changed files with 3,156 additions and 3,148 deletions.
diff --git a/packages/blueone-front/package-lock.json b/packages/blueone-front/package-lock.json
diff --git a/packages/blueone-front/package.json b/packages/blueone-front/package.json
@@ -8,15 +8,14 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.4.0",
-    "@emotion/react": "^11.13.0",
-    "@emotion/styled": "^11.13.0",
     "@svgr/webpack": "^6.1.2",
     "@tanstack/react-query": "^5.51.23",
     "@tanstack/react-query-devtools": "^5.51.23",
     "@tanstack/react-query-next-experimental": "^5.51.23",
     "antd": "^5.20.0",
     "axios": "^1.7.4",
     "chart.js": "^4.4.3",
+    "clsx": "^2.1.1",
     "dayjs": "^1.10.7",
     "linkify-react": "^3.0.4",
     "linkifyjs": "^3.0.5",
@@ -32,10 +31,13 @@
     "swr": "^2.2.5"
   },
   "devDependencies": {
-    "@emotion/eslint-plugin": "^11.5.0",
     "@types/node": "18.19.44",
     "@types/qs": "^6.9.7",
     "@types/react": "18.3.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "postcss-nesting": "^13.0.0",
+    "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4"
   }
 }
diff --git a/packages/blueone-front/postcss.config.js b/packages/blueone-front/postcss.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': 'postcss-nesting',
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/blueone-front/src/app/(auth)/create-contractor/page.tsx b/packages/blueone-front/src/app/(auth)/create-contractor/page.tsx
@@ -2,7 +2,6 @@
 import { App, Button, Form, Input } from 'antd';
 import httpClient from '@/shared/api/axios';
 import { EndPoint } from '@/shared/api/types';
-import styled from '@emotion/styled';
 
 type Request = EndPoint['POST /users/contractor']['requestBody'];
 
@@ -30,18 +29,11 @@ export default function CreateContractorPage() {
         <Input.Password autoComplete="new-password" />
       </Form.Item>
 
-      <ButtonGroup>
+      <div className="w-full flex justify-end">
         <Button type="primary" htmlType="submit">
           Contractor 등록
         </Button>
-      </ButtonGroup>
+      </div>
     </Form>
   );
 }
-
-const ButtonGroup = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: flex-end;
-  flex-direction: column;
-`;
diff --git a/packages/blueone-front/src/app/(auth)/layout.tsx b/packages/blueone-front/src/app/(auth)/layout.tsx
@@ -3,9 +3,6 @@ import { RedirectType } from 'next/dist/client/components/redirect';
 import Image from 'next/image';
 import { redirect } from 'next/navigation';
 import { getMyServiceEntry } from '@/entities/me/api/get-my-service-entry';
-import media from '@/shared/ui/foundation/media';
-import theme from '@/shared/ui/foundation/theme';
-import styled from '@emotion/styled';
 
 export default async function LoginLayout({ children }: { children: ReactNode }) {
   try {
@@ -17,49 +14,13 @@ export default async function LoginLayout({ children }: { children: ReactNode })
   }
 
   return (
-    <CenterLayout>
-      <Box>
-        <BoxHeader>
-          <Image src="/logo_fill.svg" alt="로고" width={180} height={30} />
-        </BoxHeader>
+    <div className="w-full h-screen flexColCenter">
+      <div className="w-full p-6 sm:border sm:border-solid sm:border-gray-300 sm:rounded-lg sm:w-[27rem]">
+        <header className="flexRowCenter mb-4 gap-4 sm:mb-6">
+          <Image src="/logo_fill.svg" alt="로고" width={150} height={30} />
+        </header>
         {children}
-      </Box>
-    </CenterLayout>
+      </div>
+    </div>
   );
 }
-
-const CenterLayout = styled.section`
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const Box = styled.section`
-  width: 100%;
-  padding: 1.33rem;
-
-  ${media.sm} {
-    border: 1px solid #ddd;
-    border-radius: ${theme.borderRadius};
-    width: 27rem;
-  }
-`;
-
-const BoxHeader = styled.header`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 0.66rem;
-  padding: 0.33rem 0;
-  gap: 1rem;
-
-  h1 {
-    font-size: 1.1rem;
-  }
-
-  ${media.sm} {
-    margin-bottom: 1.33rem;
-  }
-`;
diff --git a/packages/blueone-front/src/app/(auth)/page.tsx b/packages/blueone-front/src/app/(auth)/page.tsx
@@ -1,18 +1,15 @@
 'use client';
-import { useState } from 'react';
-import { Input, Form, Button, FormProps } from 'antd';
+import { Input, Form, Button } from 'antd';
 import { ColProps } from 'antd/lib/grid/col';
 import { useRouter } from 'next/navigation';
 import httpClient from '@/shared/api/axios';
 import type { EndPoint } from '@/shared/api/types';
-import styled from '@emotion/styled';
 
 type Request = EndPoint['POST /user/sign-in']['requestBody'];
 type User = EndPoint['POST /user/sign-in']['responses']['200'];
 
 export default function LoginPage() {
   const router = useRouter();
-  const [validateTrigger, setValidateTrigger] = useState<FormProps['validateTrigger']>('onFinish');
 
   const onFinish = async (values: Request) => {
     try {
@@ -32,63 +29,45 @@ export default function LoginPage() {
     }
   };
 
-  const onFinishFailed = () => {
-    setValidateTrigger(['onFinish', 'onChange']);
-  };
-
   return (
-    <Form
-      name="sign-in-form"
-      initialValues={{ remember: true }}
-      onFinish={onFinish}
-      onFinishFailed={onFinishFailed}
-      validateTrigger={validateTrigger}
-      autoComplete="off"
-      {...layout}
-    >
-      <InputFormItem
+    <Form initialValues={{ remember: true }} onFinish={onFinish} autoComplete="off" {...layout}>
+      <Form.Item
         label="전화번호"
         name="phoneNumber"
-        rules={[{ required: true, message: '전화번호를 입력해주세요' }]}
+        rules={[
+          {
+            required: true,
+            message: '전화번호를 입력해주세요',
+          },
+          {
+            pattern: /\d+/,
+            message: '숫자만 입력해주세요',
+          },
+        ]}
       >
-        <NumericInput type="number" autoComplete="off" size="large" />
-      </InputFormItem>
+        <Input autoComplete="off" size="large" />
+      </Form.Item>
 
-      <InputFormItem label="비밀번호" name="password" rules={[{ required: true, message: '비밀번호를 입력해주세요' }]}>
+      <Form.Item
+        label="비밀번호"
+        name="password"
+        rules={[
+          {
+            required: true,
+            message: '비밀번호를 입력해주세요',
+          },
+        ]}
+      >
         <Input.Password autoComplete="off" size="large" />
-      </InputFormItem>
+      </Form.Item>
 
-      <ButtonFormItem>
-        <Button type="primary" htmlType="submit" size="large" block>
-          로그인
-        </Button>
-      </ButtonFormItem>
+      <Button type="primary" htmlType="submit" size="large" block>
+        로그인
+      </Button>
     </Form>
   );
 }
 
 const layout: { [ColName: string]: ColProps } = {
   labelCol: { span: 5 },
-  wrapperCol: { flex: 'auto' },
 };
-
-const InputFormItem = styled(Form.Item)`
-  margin-bottom: 0.66rem;
-
-  .ant-form-item-label {
-    padding: 0;
-  }
-`;
-
-const ButtonFormItem = styled(Form.Item)`
-  margin-top: 2rem;
-  margin-bottom: 0;
-`;
-
-const NumericInput = styled(Input)`
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`;
diff --git a/packages/blueone-front/src/app/_providers/antd-config.provider.tsx b/packages/blueone-front/src/app/_providers/antd-config.provider.tsx
@@ -12,24 +12,26 @@ export default function AntdConfigProvider({ children }: { children: ReactNode }
 }
 
 const antdTheme: ThemeConfig = {
+  hashed: false,
   token: {
-    colorPrimary: theme.primaryColor,
-    borderRadius: theme.borderRadius,
+    colorPrimary: theme.colors.primary,
+    borderRadius: 4,
+    fontSize: 15,
   },
   components: {
     Alert: {
       /**
        * `banner: true`일 때의 스타일 또한 덮어씌우기 위해 important 사용
        */
-      colorInfoBorder: `${theme.primaryColor} !important`,
+      colorInfoBorder: `${theme.colors.primary} !important`,
       colorInfoBg: 'none !important',
       colorInfoText: '#fff !important',
     },
     Tabs: {
       itemColor: '#fff',
-      itemSelectedColor: theme.primaryColor,
-      itemHoverColor: theme.primaryColor,
-      inkBarColor: theme.primaryColor,
+      itemSelectedColor: theme.colors.primary,
+      itemHoverColor: theme.colors.primary,
+      inkBarColor: theme.colors.primary,
     },
   },
 };
diff --git a/packages/blueone-front/src/app/_providers/index.tsx b/packages/blueone-front/src/app/_providers/index.tsx
@@ -2,8 +2,6 @@
 import { ReactNode } from 'react';
 import { SWRConfig } from 'swr';
 import AntdConfigProvider from '@/app/_providers/antd-config.provider';
-import globalStyles from '@/shared/ui/foundation/global-styles';
-import { Global } from '@emotion/react';
 import ReactQueryProvider from './react-query.provider';
 
 export default function Providers({ children }: { children: ReactNode }) {
@@ -17,7 +15,6 @@ export default function Providers({ children }: { children: ReactNode }) {
     >
       <AntdConfigProvider>
         <ReactQueryProvider>{children}</ReactQueryProvider>
-        <Global styles={globalStyles} />
       </AntdConfigProvider>
     </SWRConfig>
   );