refactor: literalobj

src/components/subjects/literalobj/TogglesLiteral.tsx

@@ -0,0 +1,72 @@
+import { css } from '@emotion/react'
+import { Layout } from '../../subject/Layout'
+import { RENDER_COUNT } from './data'
+
+const literalCss = css`
+  display: inline-flex;
+
+  & input[type='checkbox'] {
+    cursor: pointer;
+    position: relative;
+    appearance: none;
+    width: 48px;
+    height: 28px;
+    background-color: lightgray;
+    border-radius: 16px;
+    transition: background-color 0.2s ease-in-out;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      background-color: gray;
+      border-radius: 50%;
+      left: 4px;
+      top: 4px;
+      margin-block: auto;
+      transition: transform 0.2s ease;
+      box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.35);
+    }
+
+    /* hover, active content */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: transparent;
+      transition: background-color 0.2s ease-in-out;
+    }
+
+    &:active {
+      &::after {
+        background-color: white;
+      }
+    }
+  }
+
+  & input[type='checkbox']:checked {
+    background-color: pink;
+
+    &::before {
+      background-color: white;
+      transform: translateX(100%);
+    }
+  }
+`
+
+export function TogglesLiteral() {
+  return (
+    <Layout>
+      {Array.from({ length: RENDER_COUNT }).map((_, idx) => (
+        <label css={literalCss} key={idx}>
+          <input type='checkbox' />
+        </label>
+      ))}
+    </Layout>
+  )
+}

src/components/subjects/literalobj/TogglesObj.tsx

@@ -0,0 +1,71 @@
+import { css } from '@emotion/react'
+import { Layout } from '../../subject/Layout'
+import { RENDER_COUNT } from './data'
+
+const objCss = css({
+  display: 'inline-flex',
+
+  "& input[type='checkbox']": {
+    cursor: 'pointer',
+    position: 'relative',
+    appearance: 'none',
+    width: '48px',
+    height: '28px',
+    backgroundColor: 'lightgray',
+    borderRadius: '16px',
+    transition: 'background-color 0.2s ease-in-out',
+    overflow: 'hidden',
+
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      width: '20px',
+      height: '20px',
+      backgroundColor: 'gray',
+      borderRadius: '50%',
+      left: '4px',
+      top: '4px',
+      marginBlock: 'auto',
+      transition: 'transform 0.2s ease',
+      boxShadow: '-2px 2px 10px 0px rgba(0, 0, 0, 0.35)',
+    },
+
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      top: '0',
+      right: '0',
+      bottom: '0',
+      left: '0',
+      backgroundColor: 'transparent',
+      transition: 'background-color 0.2s ease-in-out',
+    },
+
+    '&:active': {
+      '&::after': {
+        backgroundColor: 'white',
+      },
+    },
+  },
+
+  "& input[type='checkbox']:checked": {
+    backgroundColor: 'pink',
+
+    '&::before': {
+      backgroundColor: 'white',
+      transform: 'translateX(100%)',
+    },
+  },
+})
+
+export function TogglesObj() {
+  return (
+    <Layout>
+      {Array.from({ length: RENDER_COUNT }).map((_, idx) => (
+        <label css={objCss} key={idx}>
+          <input type='checkbox' />
+        </label>
+      ))}
+    </Layout>
+  )
+}

src/components/subjects/literalobj/data.ts

@@ -0,0 +1 @@
+export const RENDER_COUNT = 12

src/routes/literalobj.lazy.tsx

@@ -1,6 +1,7 @@
 import { createLazyFileRoute } from '@tanstack/react-router'
 import PageLayout from '../components/PageLayout'
-import { ToggleLiteral, ToggleObj } from '../components/subject/ObjectLiteral'
+import { TogglesLiteral } from '../components/subjects/literalobj/TogglesLiteral'
+import { TogglesObj } from '../components/subjects/literalobj/TogglesObj'
 
 export const Route = createLazyFileRoute('/literalobj')({
   component: Component,
@@ -11,9 +12,9 @@ function Component() {
     <PageLayout
       title='Object vs Literal (CssProp)'
       description='CssProp으로 적용하는 상황에서 Object와 Template Literal 형식의 스타일링 성능을 비교합니다.'
-      compA={<ToggleLiteral />}
+      compA={<TogglesLiteral />}
       compAName='Literal'
-      compB={<ToggleObj />}
+      compB={<TogglesObj />}
       compBName='Object'
     />
   )