feat: theme 적용 (color theme 은 추후 추가 필요)

yourssu · Jul 19, 2024 · aec1d68 · aec1d68
1 parent bf3f598
commit aec1d68
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 17 deletions.
diff --git a/src/components/Checkbox/Checkbox.mdx b/src/components/Checkbox/Checkbox.mdx
@@ -24,7 +24,7 @@ const Component = () => {
 };
 ```
 
-<Checkbox>기본 체크박스</Checkbox>
+<Canvas of={CheckboxStories.Default} withSource="none" />
 
 <br />
 <br />
@@ -51,13 +51,7 @@ const Component = () => {
 };
 ```
 
-<Checkbox
-  onChange={(e) => {
-    alert('상태가 변경되었습니다: ' + e.target.checked);
-  }}
->
-  상태 관리 체크박스
-</Checkbox>
+<Canvas of={CheckboxStories.StateChange} withSource="none" />
 
 <br />
 <br />
@@ -70,6 +64,8 @@ const Component = () => {
 
 폰트 사이즈 및 갭 크기는 동일합니다.
 
+<Canvas of={CheckboxStories.Sizes} withSource="none" />
+
 <br />
 <br />
 

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -43,5 +43,37 @@ const Primary: StoryObj = {
   render: CheckboxStory,
 };
 
+const Default: StoryObj = {
+  render: () => <Checkbox>기본 체크박스</Checkbox>,
+};
+
+const StateChange: StoryObj = {
+  render: () => (
+    <Checkbox
+      onChange={(e) => {
+        alert('상태가 변경되었습니다: ' + e.target.checked);
+      }}
+    >
+      상태 관리 체크박스
+    </Checkbox>
+  ),
+};
+
+const Sizes: StoryObj = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Checkbox size="small" selected>
+        small
+      </Checkbox>
+      <Checkbox size="medium" selected>
+        medium
+      </Checkbox>
+      <Checkbox size="large" selected>
+        large
+      </Checkbox>
+    </div>
+  ),
+};
+
 export default meta;
-export { Primary };
+export { Primary, Default, StateChange, Sizes };
diff --git a/src/components/Checkbox/Checkbox.style.ts b/src/components/Checkbox/Checkbox.style.ts
@@ -21,12 +21,15 @@ export const StyledCheckboxContainer = styled.div`
 
   display: flex;
   align-items: center;
+
+  ${({ theme }) => theme.typo.B1_Rg_16};
+  color: #25262c; // TODO: primitive theme 적용 필요
 `;
 
 export const StyledCheckboxLabel = styled.label`
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 8px; // TODO: semantic theme 적용 필요
 
   cursor: pointer;
 
@@ -45,30 +48,30 @@ export const StyledCheckboxChecker = styled.div<{ $size: CheckboxSizeType }>`
   justify-content: center;
   align-items: center;
 
-  border: 1px solid #e3e4e8;
+  border: 1px solid #e3e4e8; // TODO: semantic theme 적용 필요
   border-radius: 50%;
 
-  background-color: white;
+  background-color: white; // TODO: semantic theme 적용 필요
 
   svg {
-    fill: #e3e4e8;
+    fill: #e3e4e8; // TODO: semantic theme 적용 필요
   }
 
   &:has(+ input[type='checkbox']:checked) {
     border: none;
-    background-color: #6b5cff;
+    background-color: #6b5cff; // TODO: semantic theme 적용 필요
 
     svg {
-      fill: white;
+      fill: white; // TODO: semantic theme 적용 필요
     }
   }
 
   &:has(+ input[type='checkbox']:disabled) {
     border: none;
-    background-color: #e3e4e8;
+    background-color: #e3e4e8; // TODO: semantic theme 적용 필요
 
     svg {
-      fill: white;
+      fill: white; // TODO: semantic theme 적용 필요
     }
   }
 `;