💄 design: Add landing section 1

.eslintrc.cjs

@@ -8,8 +8,8 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
+    ecmaVersion: 'latest',
+    sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
     },
@@ -19,66 +19,73 @@ module.exports = {
     commonjs: true,
     es6: true,
   },
-  ignorePatterns: ["!**/.server", "!**/.client"],
+  ignorePatterns: ['!**/.server', '!**/.client'],
 
   // Base config
-  extends: ["eslint:recommended"],
+  extends: ['eslint:recommended', 'plugin:prettier/recommended', 'prettier'],
 
   overrides: [
     // React
     {
-      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ["react", "jsx-a11y"],
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      plugins: ['react', 'jsx-a11y'],
       extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:react-hooks/recommended",
-        "plugin:jsx-a11y/recommended",
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended',
+        'plugin:tailwindcss/recommended',
       ],
       settings: {
         react: {
-          version: "detect",
+          version: 'detect',
         },
-        formComponents: ["Form"],
+        formComponents: ['Form'],
         linkComponents: [
-          { name: "Link", linkAttribute: "to" },
-          { name: "NavLink", linkAttribute: "to" },
+          { name: 'Link', linkAttribute: 'to' },
+          { name: 'NavLink', linkAttribute: 'to' },
         ],
-        "import/resolver": {
+        'import/resolver': {
           typescript: {},
         },
+        'tailwindcss/classnames-order': [
+          'warn',
+          {
+            officialSorting: true,
+          },
+        ],
       },
     },
 
     // Typescript
     {
-      files: ["**/*.{ts,tsx}"],
-      plugins: ["@typescript-eslint", "import"],
-      parser: "@typescript-eslint/parser",
+      files: ['**/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint', 'import'],
+      parser: '@typescript-eslint/parser',
       settings: {
-        "import/internal-regex": "^~/",
-        "import/resolver": {
+        'import/internal-regex': '^~/',
+        'import/resolver': {
           node: {
-            extensions: [".ts", ".tsx"],
+            extensions: ['.ts', '.tsx'],
           },
           typescript: {
             alwaysTryTypes: true,
           },
         },
       },
       extends: [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/recommended',
+        'plugin:import/typescript',
       ],
     },
 
     // Node
     {
-      files: [".eslintrc.cjs"],
+      files: ['.eslintrc.cjs'],
       env: {
         node: true,
       },
     },
   ],
-};
+}

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all"
+}

app/components/Button.tsx

@@ -0,0 +1,34 @@
+interface IProps
+  extends React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  icon?: React.ReactNode
+  title: string
+
+  color: string
+  textColor: string
+}
+
+export default function Button(props: IProps) {
+  return (
+    <button
+      className="inline-flex items-center gap-2.5 rounded-full px-7 py-4 shadow-[0_0_6px_0_rgba(0,0,0,0.08)]"
+      style={{
+        backgroundColor: props.color,
+      }}
+      {...props}
+    >
+      {props.icon}
+
+      <span
+        className="font-bold leading-6 md:text-lg"
+        style={{
+          color: props.textColor,
+        }}
+      >
+        {props.title}
+      </span>
+    </button>
+  )
+}

app/components/ChannelIO.tsx

@@ -0,0 +1,25 @@
+import { useLocation } from '@remix-run/react'
+import { FC, useEffect } from 'react'
+
+import * as ChannelService from '@channel.io/channel-web-sdk-loader'
+
+const ChannelIO: FC = () => {
+  const location = useLocation()
+
+  useEffect(() => {
+    ChannelService.loadScript()
+    ChannelService.boot({
+      pluginKey: 'c97bc164-c44c-40d2-a557-d960bb2fecf6',
+    })
+  }, [])
+
+  // https://developers.channel.io/reference/web-faq-kr#spa-환경에서-서포트봇과-마케팅-기능을-활용하고-싶어요
+  useEffect(() => {
+    window.ChannelIO('setPage', location.pathname)
+    window.ChannelIO('track', 'PageView')
+  }, [location.pathname])
+
+  return null
+}
+
+export default ChannelIO