Merge pull request #141 from Team-INSERT/refactor/scroll-button

refactor : scroll button
Team-INSERT · Apr 11, 2024 · 1b207ce · 1b207ce
2 parents 270d224 + 000616b
commit 1b207ce
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/components/Editor/DocsExample.tsx b/components/Editor/DocsExample.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { toast } from "react-toastify";
 import { ArrowIcon } from "@/assets";
+import { theme } from "@/styles";
 import { documentCompiler } from "@/utils";
 import Toastify from "../Toastify";
 import * as styles from "./DocsExample.css";
@@ -23,7 +24,7 @@ const DocsExample = () => {
         <span className={styles.wikiTitle}>부마위키 문법 예제 보기</span>
         <ArrowIcon
           direction={arrowDirection}
-          fill="white"
+          fill={theme.white}
           width={16}
           height={16}
           viewBox="0 0 30 16"
@@ -83,4 +84,5 @@ const wikiExampleList = [
     },
   ],
 ];
+
 export default DocsExample;
diff --git a/components/ScrollButton/index.tsx b/components/ScrollButton/index.tsx
@@ -1,34 +1,43 @@
 "use client";
 
 import { ArrowIcon } from "@/assets";
+import { theme } from "@/styles";
 import * as styles from "./style.css";
 
 const ScrollButton = () => {
-  const scrollToTop = () => window.scroll({ top: 0, behavior: "smooth" });
-  const scrollToBottom = () =>
-    window.scroll({
-      top: document.documentElement.scrollHeight,
-      behavior: "smooth",
-    });
+  const scrollToTop = () => {
+    window.scroll({ top: 0, behavior: "smooth" });
+  };
+  const scrollToBottom = () => {
+    const { scrollHeight } = document.documentElement;
+    window.scroll({ top: scrollHeight, behavior: "smooth" });
+  };
 
   return (
-    <div className={styles.scrollButtonWrap}>
+    <figure className={styles.container}>
       <button
         className={styles.scrollButton}
         onClick={scrollToTop}
         aria-label="최상단으로 올라가기"
       >
-        <ArrowIcon direction="up" width={25} height={11} viewBox="0 0 28 18" fill="white" />
+        <ArrowIcon direction="up" {...config} />
       </button>
       <button
         className={styles.scrollButton}
         onClick={scrollToBottom}
         aria-label="최하단으로 내려가기"
       >
-        <ArrowIcon direction="down" width={25} height={11} viewBox="0 0 28 18" fill="white" />
+        <ArrowIcon direction="down" {...config} />
       </button>
-    </div>
+    </figure>
   );
 };
 
+const config = {
+  width: 25,
+  height: 11,
+  viewBox: "0 0 28 18",
+  fill: theme.white,
+};
+
 export default ScrollButton;
diff --git a/components/ScrollButton/style.css.ts b/components/ScrollButton/style.css.ts
@@ -1,7 +1,7 @@
 import { style } from "@vanilla-extract/css";
 import { flex, theme } from "@/styles";
 
-export const scrollButtonWrap = style({
+export const container = style({
   position: "fixed",
   left: "2%",
   bottom: "3%",
@@ -10,16 +10,15 @@ export const scrollButtonWrap = style({
 });
 
 export const scrollButton = style({
-  selectors: {
-    "&:first-child": {
-      borderRight: "none",
-    },
-  },
   width: "40px",
   height: "40px",
   background: theme.primary,
   color: theme.white,
   border: `2px solid ${theme.gray}`,
   cursor: "pointer",
   ...flex.CENTER,
+
+  ":first-child": {
+    borderRight: "none",
+  },
 });