From b099b46179245fa69f96b5bd6cbe836f0c77060c Mon Sep 17 00:00:00 2001
From: entrolEC <euichan1108@gmail.com>
Date: Wed, 13 Mar 2024 16:45:33 +0900
Subject: [PATCH] style: style with constant

---
 src/components/Sidebar/Pointer.tsx |  7 ++++---
 src/components/Sidebar/Sidebar.tsx | 17 ++++++++++++-----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/Sidebar/Pointer.tsx b/src/components/Sidebar/Pointer.tsx
index c0dc441..3d663a8 100644
--- a/src/components/Sidebar/Pointer.tsx
+++ b/src/components/Sidebar/Pointer.tsx
@@ -1,11 +1,12 @@
 "use client";
 import { motion } from "framer-motion";
+import { CSSProperties } from "react";
 
-const Pointer = ({ top }: { top: number }) => {
+const Pointer = ({ top, style }: { top: number; style?: CSSProperties }) => {
   return (
     <motion.div
-      className="absolute left-1 w-2 h-2 rounded-full bg-white"
-      style={{ top: top }}
+      className={"absolute left-1 w-2 h-2 rounded-full bg-white"}
+      style={{ ...style, top: top }}
       layout
       transition={{ type: "spring", stiffness: 700, damping: 30 }}
     />
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index d6f9f54..76b01de 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -7,15 +7,22 @@ import Pointer from "@/components/Sidebar/Pointer";
 type SidebarProps = {
   groups: (group & id)[];
 };
+
+const ASIDE_WIDTH = 80;
+const ASIDE_PADDING = 16;
+const GROUP_HEIGHT = ASIDE_WIDTH - ASIDE_PADDING * 2; // 48
+const GROUP_REDIUS = GROUP_HEIGHT / 2; // 24
+const POINTER_REDIUS = 4;
+
 const Sidebar = ({ groups }: SidebarProps) => {
   const [selectedIdx, setSelectedIdx] = useState(0);
-  const height = groups.length * 80 + 80;
-  const pointerY = selectedIdx * 64 + 24 - 4;
+  const height = groups.length * (GROUP_HEIGHT + ASIDE_PADDING) + 80;
+  const pointerY = selectedIdx * (GROUP_HEIGHT + ASIDE_PADDING) + GROUP_REDIUS - POINTER_REDIUS;
 
   return (
     <div className="flex h-screen">
-      <aside className={"flex items-center w-20 bg-[#383A57] rounded-l-3xl"} style={{ height: height }}>
-        <div className="relative flex flex-col items-center space-y-4 p-4">
+      <aside className="flex items-center  bg-[#383A57] rounded-l-3xl" style={{ height: height, width: ASIDE_WIDTH }}>
+        <div className="relative flex flex-col items-center space-y-4" style={{ padding: ASIDE_PADDING }}>
           {groups.map((group, idx) => {
             const onSelect: MouseEventHandler<HTMLAnchorElement> = () => {
               setSelectedIdx(idx);
@@ -31,7 +38,7 @@ const Sidebar = ({ groups }: SidebarProps) => {
             );
           })}
           <AddGroup href="." />
-          <Pointer top={pointerY} />
+          <Pointer top={pointerY} style={{ width: POINTER_REDIUS * 2, height: POINTER_REDIUS * 2 }} />
         </div>
       </aside>
     </div>