Repository: Recruiting-Your-Club/ryc
Pull request #114: [FE] ScrollBar 컴포넌트 구현
Author: login: github-actions[bot]
Labels: name: ⭐️ feature
description: 기능 이슈
name: 🚀FE
description: 프론트 이슈
Created: 2025-03-08T05:51:28Z | Merged: 2025-03-13T04:08:01Z

## 📌 관련 이슈
`closed #113 `

## 🛠️ 작업 내용
PR에서 작업한 주요 내용을 적어주세요.
- [ ] ScrollBar 컴포넌트 구현
- [ ] ScrollBar 컴포넌트 수정
- [ ] stroybook 작성

## 🎯 리뷰 포인트

컴포넌트를 구성하는 파일은 ScrollBar.tsx와 ScrollBar.style.ts로 구분되어 있습니다.

현재 스크롤바 UI입니다.
<img width="337" alt="스크린샷 2025-03-11 오후 6 10 24" src="https://github.com/user-attachments/assets/8aaa7548-5f64-4fd2-994e-df9245e84fcf" />

스크롤바의 높이를 따로 설정하지 않고 부모 태그의 높이를 받아와서 동적으로 크기가 조절되는 로직을 작성하여 구현했습니다.
<img width="781" alt="스크린샷 2025-03-11 오후 6 14 19" src="https://github.com/user-attachments/assets/3643a797-f303-41ff-8634-d4e07d834fdd" />


- 리뷰 포인트
 아직 많이 부족하게 구현하였지만 코드 리뷰를 바탕으로 최선을 다해 수정하겠습니다.

## ⏳ 작업 시간
추정 시간:   12시간
실제 시간:   30시간
이유: 저의 코드가 협업에 어긋나지 않게  하기위한 코드 이해가 늦어져서 간단한 컴포넌트이지만 시간이 오래걸렸습니다.

Linked issue #113: [FE] ScrollBar 컴포넌트 구현
## 🔥 구현 기능
프론트애서 사용할 ScorllBar 컴포넌트를 구현하여 언제 어디서든 사용가능 하도록 추상화하는게 목표입니다.

## 🚧 작업목록
- [ ] ScrollBar 컴포넌트 구현

## 🥸 담당자
@aiminghee3 


## 🔗 관련 링크
기능과 관련해 참고할 링크가 있다면 적어주세요. 없다면 적지 않아도 됩니다.

Linked issue comments: user: login: github-actions[bot]
created_at: 2025-03-08T05:51:25Z
body: [FE] ScrollBar 컴포넌트 구현 이슈에 대한 feature/issue-113 브랜치가 생성 되었습니다.
author_association: CONTRIBUTOR

Diff:
diff --git a/client/src/components/ScrollBar/ScrollBar.stories.tsx b/client/src/components/ScrollBar/ScrollBar.stories.tsx
new file mode 100644
index 000000000..5a7399170
--- /dev/null
+++ b/client/src/components/ScrollBar/ScrollBar.stories.tsx
@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ScrollBar } from './ScrollBar';
+
+const meta: Meta<typeof ScrollBar> = {
+    title: '스크롤바 컴포넌트',
+    component: ScrollBar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '부모 요소의 크기를 자동 감지하여 동적으로 높이를 조절하는 커스텀 스크롤바 컴포넌트.',
+            },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollBar>;
+
+/**
+ * 기본 스크롤바 (부모 높이 자동 감지)
+ */
+export const Default = ({ height = '30rem' }: { height?: string }) => {
+    return (
+        <div
+            style={{
+                border: '0.1rem solid gray',
+                borderRadius: '1rem',
+                padding: '0.2rem',
+                height,
+                width: '30rem',
+                overflow: 'hidden',
+            }}
+        >
+            <ScrollBar>
+                <div style={{ height: '80rem', padding: '1rem' }}>
+                    {[...Array(50)].map((_, i) => (
+                        <p key={i}>스크롤 테스트 {i + 1}</p>
+                    ))}
+                </div>
+            </ScrollBar>
+        </div>
+    );
+};
+
+/**
+ * 부모 요소 높이를 동적으로 변경할 수 있는 테스트
+ */
+export const DynamicParent = ({ height = '30rem' }: { height?: string }) => {
+    const [parentHeight, setParentHeight] = useState(height);
+
+    return (
+        <div>
+            <button
+                onClick={() => setParentHeight(parentHeight === '30rem' ? '50rem' : '30rem')}
+                style={{
+                    marginBottom: '1rem',
+                    padding: '0.5rem 1rem',
+                    cursor: 'pointer',
+                }}
+            >
+                부모 높이 변경 (현재: {parentHeight})
+            </button>
+            <div
+                style={{
+                    border: '0.1rem solid gray',
+                    borderRadius: '0.1rem',
+                    padding: '0.2rem',
+                    height: parentHeight,
+                    width: '3rem',
+                    overflow: 'hidden',
+                    transition: 'height 0.3s ease-in-out',
+                }}
+            >
+                <ScrollBar>
+                    <div style={{ height: '100rem', padding: '1rem' }}>
+                        {[...Array(70)].map((_, i) => (
+                            <p key={i}>동적 높이 테스트 {i + 1}</p>
+                        ))}
+                    </div>
+                </ScrollBar>
+            </div>
+        </div>
+    );
+};
diff --git a/client/src/components/ScrollBar/ScrollBar.style.ts b/client/src/components/ScrollBar/ScrollBar.style.ts
new file mode 100644
index 000000000..dc19e563b
--- /dev/null
+++ b/client/src/components/ScrollBar/ScrollBar.style.ts
@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+import theme from '@styles/theme';
+
+export const scrollBarStyle = (height?: string) => css`
+    overflow-y: auto;
+
+    // Chrome, edge, safari에서 scrollbar를 적용하려면 -webkit-scrollbar로 적용시켜야한다.
+
+    // 전체 스크롤바
+    &::-webkit-scrollbar {
+        width: 0.8rem;
+        height: ${height ?? '100%'};
+    }
+
+    // 스크롤바에서 움직이는 부분을 제외한 나머지 부분
+    &::-webkit-scrollbar-track {
+        background: ${theme.colors.gray[200]};
+        border-radius: 1rem;
+    }
+
+    // 스크롤바에서 움직이는 부분
+    &::-webkit-scrollbar-thumb {
+        background: ${theme.colors.default};
+        border-radius: 1rem;
+        min-height: 10rem;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background: ${theme.colors.defaultHover};
+    }
+`;
diff --git a/client/src/components/ScrollBar/ScrollBar.tsx b/client/src/components/ScrollBar/ScrollBar.tsx
new file mode 100644
index 000000000..34666e73d
--- /dev/null
+++ b/client/src/components/ScrollBar/ScrollBar.tsx
@@ -0,0 +1,43 @@
+import React, { useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { scrollBarStyle } from './ScrollBar.style';
+
+interface ScrollBarProps {
+    children: ReactNode;
+}
+
+function ScrollBar({ children }: ScrollBarProps) {
+    // 스크롤바에 부착된 부모 태그의 높이 초기설정
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [parentHeight, setParentHeight] = useState<string | undefined>();
+    const parentElement = containerRef.current?.parentElement;
+
+    const updateHeight = () => {
+        setParentHeight(`${parentElement?.clientHeight}px`); // 높이 계산해서 업데이트
+    };
+
+    useEffect(() => {
+        if (parentElement) {
+            const observer = new ResizeObserver(updateHeight); // 크기가 변경되면 updateHeight 함수를 실행할수있게 observer 설정
+            observer.observe(parentElement); // 부모 요소가 변경되면 실행할 수 있게
+
+            return () => {
+                observer.disconnect(); // 언 마운트시 observer 중단
+            };
+        }
+    }, []);
+
+    return (
+        <div
+            ref={containerRef}
+            css={css`
+                ${scrollBarStyle(parentHeight)};
+            `}
+        >
+            {children}
+        </div>
+    );
+}
+
+export { ScrollBar };
diff --git a/client/src/components/ScrollBar/index.tsx b/client/src/components/ScrollBar/index.tsx
new file mode 100644
index 000000000..4d98117b7
--- /dev/null
+++ b/client/src/components/ScrollBar/index.tsx
@@ -0,0 +1 @@
+export * from './ScrollBar';
diff --git a/client/src/styles/global.ts b/client/src/styles/global.ts
index d7327eef5..4850cf4a8 100644
--- a/client/src/styles/global.ts
+++ b/client/src/styles/global.ts
@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { fontFaces } from './fonts';
+import theme from './theme';
 
 const globalStyles = css`
     ${fontFaces}
@@ -95,6 +96,7 @@ const globalStyles = css`
 
     html {
         font-size: 62.5%;
+        overflow-y: auto;
     }
 
     body {
@@ -108,6 +110,7 @@ const globalStyles = css`
         font-size: 1.6rem;
 
         background-color: #fff;
+        overflow-y: auto;
     }
 
     article,
@@ -125,14 +128,8 @@ const globalStyles = css`
     }
 
     * {
-        scrollbar-width: none;
         box-sizing: border-box;
-
         -ms-overflow-style: none;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
     }
 
     ol,
@@ -178,6 +175,26 @@ const globalStyles = css`
     a:hover {
         text-decoration: none; /* 호버 시에도 밑줄 제거 */
     }
+    /* 스크롤 바 부분 */
+
+    &::-webkit-scrollbar {
+        width: 0.8rem;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: ${theme.colors.gray[200]};
+        border-radius: 1rem;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: ${theme.colors.default};
+        border-radius: 1rem;
+        min-height: 10rem;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: ${theme.colors.defaultHover};
+    }
 `;
 
 export default globalStyles;


Reviews:
user: login: aiminghee3
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T11:12:38Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T05:13:32Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T05:14:08Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T05:16:01Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T05:16:19Z
user: login: aiminghee3
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T05:51:50Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T06:38:48Z
user: login: ohsung0722
body: 처음 컴포넌트 만드느라 힘드셨을텐데 너무 고생 많으셨습니다~~
global쪽만 수정해주시면 바로 머지 하셔도 될 것 같아요!
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-12T09:55:01Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T12:27:13Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T12:27:43Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T12:28:21Z
user: login: littleemm
body: 처음 컴포넌트 만드시느라 정말 고생하셨습니다!!

px -> rem 으로 바꾸실 때 확장 프로그램 아직 없으시면 px to rem 설치 추천드립니당..!!! 
다음 컴포넌트도 화이팅입니다~~!
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T12:57:06Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T03:40:05Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T03:40:07Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T03:40:18Z
user: login: Dochanii
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T03:41:07Z
user: login: littleemm
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T03:51:30Z

Review comments:
diff_hunk: @@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+import  theme  from '@styles/theme';
+
+export const scrollBarStyle = css`
+  
+  overflow-y : auto; 
+  
+
+  // Chrome, edge, safari에서 scrollbar를 적용하려면 -webkit-scrollbar로 적용시켜야한다.
+
+  // 전체 스크롤바
+ &::-webkit-scrollbar {
+  width: 8px;
+}
+
+  // 스크롤바에서 움직이는 부분을 제외한 나머지 부분
+ &::-webkit-scrollbar-track {
+  background: ${theme.colors.gray[200]};
+  border-radius: 10px;
+}
+
+  // 스크롤바에서 움직이는 부분
+ &::-webkit-scrollbar-thumb {
+  background:${theme.colors.default}; opacity : 0.2;
+  border-radius: 10px;
+  min-height: 100px;
+}
+ &::-webkit-scrollbar-thumb:hover{
+  background: ${theme.colors.defaultHover}; opacity : 0.8;
+}
path: client/src/components/ScrollBar/ScrollBar.style.ts
user: login: aiminghee3
body: 이 부분을 혹시 global.ts로 옮겨주실 수 있을까요??!!
그리고 특별한 이유가 없다면 고정값인 px보단 rem사용 부탁드려요!
created_at: 2025-03-11T10:48:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { scrollBarStyle } from './ScrollBar.style';
+
+interface ScrollBarProps {
+  children: ReactNode;
+  isMouseIn : boolean;
+}
+
+function ScrollBar({ children,isMouseIn }: ScrollBarProps) {
+  // 스크롤바에 부착된 부모 태그의 높이 초기설정
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [parentHeight, setParentHeight] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (containerRef.current?.parentElement) {
+      const updateHeight = () => {
+        setParentHeight(`${containerRef.current!.parentElement!.clientHeight}px`); // 높이 계산해서 업데이트
+      };
+
+      updateHeight(); 
+
+      const observer = new ResizeObserver(updateHeight); // 크기가 변경되면 updateHeight 함수를 실행할수있게 observer 설정
+      observer.observe(containerRef.current.parentElement); // 부모 요소가 변경되면 실행할 수 있게
+
+      return () => {
+        observer.disconnect(); // 언 마운트시 observer 중단
+      };
+    }
+  }, []);
path: client/src/components/ScrollBar/ScrollBar.tsx
user: login: aiminghee3
body: useEffect안에 함수를 선언한 특별한 이유가 없다면 위 코드를 다음과 같이 바꾸는건 어떤가요??
내부에 있는 updateHeight를 밖으로 빼고 containerRef.current.parentElement를 parentElement 변수에 할당하면 조금 더 가독성이 좋아질 것 같아요!

```
    const updateHeight = () => {
        setParentHeight(`${containerRef.current!.parentElement!.clientHeight}px`); // 높이 계산해서 업데이트
    };

    useEffect(() => {
        updateHeight();
        const parentElement = containerRef.current?.parentElement;
        if (parentElement) {
            const observer = new ResizeObserver(updateHeight); // 크기가 변경되면 updateHeight 함수를 실행할수있게 observer 설정
            observer.observe(parentElement); // 부모 요소가 변경되면 실행할 수 있게

            return () => {
                observer.disconnect(); // 언 마운트시 observer 중단
            };
        }
    }, []);
  ```
created_at: 2025-03-11T11:06:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { scrollBarStyle } from './ScrollBar.style';
+
+interface ScrollBarProps {
+  children: ReactNode;
+  isMouseIn : boolean;
+}
+
+function ScrollBar({ children,isMouseIn }: ScrollBarProps) {
path: client/src/components/ScrollBar/ScrollBar.tsx
user: login: aiminghee3
body: 지금 이 파일에서 isMouseIn을 사용하지 않는데, 
이러면 props로 boolean값을 내려줘도 사용하는 부분이 없어서 의미가 없는 것 같아요
마우스 이벤트가 있을 때 스크롤바를 보여주기 위해 있는 boolean값 같은데,
저도 찾아보지 못해 잘은 모르지만 
1. true일 때 scrollbar가 보이게 할 수 있는 방법도 있을 것 같고(아닌거같긴함)
2. 이벤트리스너를 감지하는 방법?
그 외 다른 방법도 있을 것 같아서 한 번 찾아보시는 것도 괜찮을거같아요!

created_at: 2025-03-11T11:10:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { scrollBarStyle } from './ScrollBar.style';
+
+interface ScrollBarProps {
+  children: ReactNode;
+  isMouseIn : boolean;
+}
+
+function ScrollBar({ children,isMouseIn }: ScrollBarProps) {
+  // 스크롤바에 부착된 부모 태그의 높이 초기설정
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [parentHeight, setParentHeight] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (containerRef.current?.parentElement) {
+      const updateHeight = () => {
+        setParentHeight(`${containerRef.current!.parentElement!.clientHeight}px`); // 높이 계산해서 업데이트
+      };
+
+      updateHeight(); 
+
+      const observer = new ResizeObserver(updateHeight); // 크기가 변경되면 updateHeight 함수를 실행할수있게 observer 설정
+      observer.observe(containerRef.current.parentElement); // 부모 요소가 변경되면 실행할 수 있게
+
+      return () => {
+        observer.disconnect(); // 언 마운트시 observer 중단
+      };
+    }
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      css={css`
+        ${scrollBarStyle};
+        height: ${parentHeight ?? "100%"}; 
+      `}
+    >
path: client/src/components/ScrollBar/ScrollBar.tsx
user: login: aiminghee3
body: 이 부분은 height도 scrollBarStyle에 변수값으로 넘겨서 적용하면
css={scrollBarStyle(height)}으로 끝낼 수 있을거같습니다!
created_at: 2025-03-11T11:12:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+import  theme  from '@styles/theme';
+
+export const scrollBarStyle = css`
+  
+  overflow-y : auto; 
+  
+
+  // Chrome, edge, safari에서 scrollbar를 적용하려면 -webkit-scrollbar로 적용시켜야한다.
+
+  // 전체 스크롤바
+ &::-webkit-scrollbar {
+  width: 8px;
+}
+
+  // 스크롤바에서 움직이는 부분을 제외한 나머지 부분
+ &::-webkit-scrollbar-track {
+  background: ${theme.colors.gray[200]};
+  border-radius: 10px;
+}
+
+  // 스크롤바에서 움직이는 부분
+ &::-webkit-scrollbar-thumb {
+  background:${theme.colors.default}; opacity : 0.2;
+  border-radius: 10px;
+  min-height: 100px;
+}
+ &::-webkit-scrollbar-thumb:hover{
+  background: ${theme.colors.defaultHover}; opacity : 0.8;
+}
path: client/src/components/ScrollBar/ScrollBar.style.ts
user: login: Dochanii
body: 넵 수정했습니다.
created_at: 2025-03-12T05:13:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { scrollBarStyle } from './ScrollBar.style';
+
+interface ScrollBarProps {
+  children: ReactNode;
+  isMouseIn : boolean;
+}
+
+function ScrollBar({ children,isMouseIn }: ScrollBarProps) {
+  // 스크롤바에 부착된 부모 태그의 높이 초기설정
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [parentHeight, setParentHeight] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (containerRef.current?.parentElement) {
+      const updateHeight = () => {
+        setParentHeight(`${containerRef.current!.parentElement!.clientHeight}px`); // 높이 계산해서 업데이트
+      };
+
+      updateHeight(); 
+
+      const observer = new ResizeObserver(updateHeight); // 크기가 변경되면 updateHeight 함수를 실행할수있게 observer 설정
+      observer.observe(containerRef.current.parentElement); // 부모 요소가 변경되면 실행할 수 있게
+
+      return () => {
+        observer.disconnect(); // 언 마운트시 observer 중단
+      };
+    }
+  }, []);
path: client/src/components/ScrollBar/ScrollBar.tsx
user: login: Dochanii
body: 훨씬 가독성이 좋아질 것 같습니다. 수정했습니다.
created_at: 2025-03-12T05:14:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { scrollBarStyle } from './ScrollBar.style';
+
+interface ScrollBarProps {
+  children: ReactNode;
+  isMouseIn : boolean;
+}
+
+function ScrollBar({ children,isMouseIn }: ScrollBarProps) {
path: client/src/components/ScrollBar/ScrollBar.tsx
user: login: Dochanii
body: 이 부분에 대해서 저번에 스크롤바를 이용하는 컴포넌트를 만드는 사람이 조작을 하기로 해서 스크롤바 부분에서 아예 isMouseIn을 뺄까 고민이 됩니다.
created_at: 2025-03-12T05:16:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { scrollBarStyle } from './ScrollBar.style';
+
+interface ScrollBarProps {
+  children: ReactNode;
+  isMouseIn : boolean;
+}
+
+function ScrollBar({ children,isMouseIn }: ScrollBarProps) {
+  // 스크롤바에 부착된 부모 태그의 높이 초기설정
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [parentHeight, setParentHeight] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (containerRef.current?.parentElement) {
+      const updateHeight = () => {
+        setParentHeight(`${containerRef.current!.parentElement!.clientHeight}px`); // 높이 계산해서 업데이트
+      };
+
+      updateHeight(); 
+
+      const observer = new ResizeObserver(updateHeight); // 크기가 변경되면 updateHeight 함수를 실행할수있게 observer 설정
+      observer.observe(containerRef.current.parentElement); // 부모 요소가 변경되면 실행할 수 있게
+
+      return () => {
+        observer.disconnect(); // 언 마운트시 observer 중단
+      };
+    }
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      css={css`
+        ${scrollBarStyle};
+        height: ${parentHeight ?? "100%"}; 
+      `}
+    >
path: client/src/components/ScrollBar/ScrollBar.tsx
user: login: Dochanii
body: 훨씬 간단해지는것 같습니다. 수정했습니다.
created_at: 2025-03-12T05:16:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { scrollBarStyle } from './ScrollBar.style';
+
+interface ScrollBarProps {
+  children: ReactNode;
+  isMouseIn : boolean;
+}
+
+function ScrollBar({ children,isMouseIn }: ScrollBarProps) {
path: client/src/components/ScrollBar/ScrollBar.tsx
user: login: aiminghee3
body: 음 그럼 우선 빼고 후에 필요하다면 리팩토링 하는 방식으로 할까요??!
created_at: 2025-03-12T05:51:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { scrollBarStyle } from './ScrollBar.style';
+
+interface ScrollBarProps {
+  children: ReactNode;
+  isMouseIn : boolean;
+}
+
+function ScrollBar({ children,isMouseIn }: ScrollBarProps) {
path: client/src/components/ScrollBar/ScrollBar.tsx
user: login: Dochanii
body: 네 그렇게 하겠습니다!!
created_at: 2025-03-12T06:38:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+import  theme  from '@styles/theme';
+
+export const scrollBarStyle = (height?: string) => css`
+  
+  overflow-y : auto; 
+  
+
+  // Chrome, edge, safari에서 scrollbar를 적용하려면 -webkit-scrollbar로 적용시켜야한다.
+
+  // 전체 스크롤바
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: ${height ?? "100%"};
+  }
+
+  // 스크롤바에서 움직이는 부분을 제외한 나머지 부분
+ &::-webkit-scrollbar-track {
+  background: ${theme.colors.gray[200]};
+  border-radius: 10px;
+}
+
+  // 스크롤바에서 움직이는 부분
+ &::-webkit-scrollbar-thumb {
+  background:${theme.colors.default}; opacity : 0.2;
+  border-radius: 10px;
+  min-height: 100px;
+}
path: client/src/components/ScrollBar/ScrollBar.style.ts
user: login: ohsung0722
body: global 말고 컴포넌트쪽과 storybook 쪽 px도 다 rem으로 바꿔주셔도 좋을 것 같아요!
created_at: 2025-03-12T08:57:08Z
author_association: MEMBER
diff_hunk: @@ -178,6 +174,30 @@ const globalStyles = css`
     a:hover {
         text-decoration: none; /* 호버 시에도 밑줄 제거 */
     }
+    /* 스크롤 바 부분 */
+    * {
+        overflow-y: auto; 
+
+        &::-webkit-scrollbar {
+            width: 0.8rem;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: ${theme.colors.gray[200]};
+            border-radius: 1rem;
+            
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: ${theme.colors.default}; 
+            border-radius: 1rem;
+            min-height: 10rem;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background: ${theme.colors.defaultHover};
+        }
+    }
path: client/src/styles/global.ts
user: login: ohsung0722
body: 이부분에서 전체 모든 컴포넌트에 대해 overflow-y auto; 가 적용되어서
dev모드에서
<img width="307" alt="image" src="https://github.com/user-attachments/assets/4f9d683a-8063-4bbc-86d1-dba694475e21" />
이런식으로로 Header와 Button 등 모든 요소에 scrollbar가 생기는 것 같습니다!
*를 지우고 html,body에서만 overflow를 걸어두고 나머지 webkit 관련도 밖으로 빼는게 좋을 것 같습니다!

created_at: 2025-03-12T09:28:09Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ScrollBar } from './ScrollBar';
+
+const meta: Meta<typeof ScrollBar> = {
+    title: '스크롤바 컴포넌트',
+    component: ScrollBar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '부모 요소의 크기를 자동 감지하여 동적으로 높이를 조절하는 커스텀 스크롤바 컴포넌트.',
+            },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollBar>;
+
+/**
+ * 기본 스크롤바 (부모 높이 자동 감지)
+ */
+export const Default = ({ height = '300px' }: { height?: string }) => {
+    return (
+        <div
+            style={{
+                border: '1px solid gray',
+                borderRadius: '10px',
+                padding: '2px',
+                height,
+                width: '300px',
+                overflow: 'hidden',
+            }}
+        >
+            <ScrollBar isMouseIn={false}>
+                <div style={{ height: '800px', padding: '10px' }}>
+                    {[...Array(50)].map((_, i) => (
+                        <p key={i}>스크롤 테스트 {i + 1}</p>
+                    ))}
+                </div>
+            </ScrollBar>
+        </div>
+    );
+};
path: client/src/components/ScrollBar/ScrollBar.stories.tsx
user: login: ohsung0722
body: ScrollBar 로직 때문에 그런건지는 모르겠는데
Storybook 에서 확인해보면 Scrollbar 컴포넌트의 height가 부모요소가 아니라 자식 요소의 height를 참조하더라구요??
제가 어떤식으로 고쳐야할지 한번에 감이 안와서 혹싀 시간 되시면 그 부분도 수정해주시면 좋을 것 같아요..!
![image](https://github.com/user-attachments/assets/330ea6e0-83de-4f4e-9ea3-caf45eba3e49)
이런식으로 ScrollBar 전체 높이가 800px로 적용됩니다!
created_at: 2025-03-12T09:52:51Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ScrollBar } from './ScrollBar';
+
+const meta: Meta<typeof ScrollBar> = {
+    title: '스크롤바 컴포넌트',
+    component: ScrollBar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '부모 요소의 크기를 자동 감지하여 동적으로 높이를 조절하는 커스텀 스크롤바 컴포넌트.',
+            },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollBar>;
+
+/**
+ * 기본 스크롤바 (부모 높이 자동 감지)
+ */
+export const Default = ({ height = '300px' }: { height?: string }) => {
+    return (
+        <div
+            style={{
+                border: '1px solid gray',
+                borderRadius: '10px',
+                padding: '2px',
+                height,
+                width: '300px',
+                overflow: 'hidden',
+            }}
+        >
+            <ScrollBar isMouseIn={false}>
+                <div style={{ height: '800px', padding: '10px' }}>
+                    {[...Array(50)].map((_, i) => (
+                        <p key={i}>스크롤 테스트 {i + 1}</p>
+                    ))}
+                </div>
+            </ScrollBar>
+        </div>
+    );
+};
path: client/src/components/ScrollBar/ScrollBar.stories.tsx
user: login: ohsung0722
body: 아 근데 일단 필요한 곳에서만 적용하기로 했으니까 다른 컴포넌트 먼저 우선적으로 개발하셔도 괜찮을 것 같아요!
created_at: 2025-03-12T09:53:25Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ScrollBar } from './ScrollBar';
+
+const meta: Meta<typeof ScrollBar> = {
+    title: '스크롤바 컴포넌트',
+    component: ScrollBar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '부모 요소의 크기를 자동 감지하여 동적으로 높이를 조절하는 커스텀 스크롤바 컴포넌트.',
+            },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollBar>;
+
+/**
+ * 기본 스크롤바 (부모 높이 자동 감지)
+ */
+export const Default = ({ height = '300px' }: { height?: string }) => {
+    return (
+        <div
+            style={{
+                border: '1px solid gray',
+                borderRadius: '10px',
+                padding: '2px',
+                height,
+                width: '300px',
+                overflow: 'hidden',
+            }}
+        >
+            <ScrollBar isMouseIn={false}>
path: client/src/components/ScrollBar/ScrollBar.stories.tsx
user: login: littleemm
body: `ScrollBar`에서 받는 props가 수정되어서 `isMouseIn={false}` 부분 삭제하시면 될 것 같습니다!
created_at: 2025-03-12T11:24:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ScrollBar } from './ScrollBar';
+
+const meta: Meta<typeof ScrollBar> = {
+    title: '스크롤바 컴포넌트',
+    component: ScrollBar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '부모 요소의 크기를 자동 감지하여 동적으로 높이를 조절하는 커스텀 스크롤바 컴포넌트.',
+            },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollBar>;
+
+/**
+ * 기본 스크롤바 (부모 높이 자동 감지)
+ */
+export const Default = ({ height = '300px' }: { height?: string }) => {
+    return (
+        <div
+            style={{
+                border: '1px solid gray',
+                borderRadius: '10px',
+                padding: '2px',
+                height,
+                width: '300px',
+                overflow: 'hidden',
+            }}
+        >
+            <ScrollBar isMouseIn={false}>
+                <div style={{ height: '800px', padding: '10px' }}>
+                    {[...Array(50)].map((_, i) => (
+                        <p key={i}>스크롤 테스트 {i + 1}</p>
+                    ))}
+                </div>
+            </ScrollBar>
+        </div>
+    );
+};
+
+/**
+ * 부모 요소 높이를 동적으로 변경할 수 있는 테스트
+ */
+export const DynamicParent = ({ height = '300px' }: { height?: string }) => {
+    const [parentHeight, setParentHeight] = useState(height);
+
+    return (
+        <div>
+            <button
+                onClick={() => setParentHeight(parentHeight === '300px' ? '500px' : '300px')}
+                style={{
+                    marginBottom: '10px',
+                    padding: '5px 10px',
+                    cursor: 'pointer',
+                }}
+            >
+                부모 높이 변경 (현재: {parentHeight})
+            </button>
+            <div
+                style={{
+                    border: '1px solid gray',
+                    borderRadius: '10px',
+                    padding: '2px',
+                    height: parentHeight,
+                    width: '300px',
+                    overflow: 'hidden',
+                    transition: 'height 0.3s ease-in-out',
+                }}
+            >
+                <ScrollBar isMouseIn={false}>
path: client/src/components/ScrollBar/ScrollBar.stories.tsx
user: login: littleemm
body: 이 부분도 삭제하시면 될 것 같습니다!
created_at: 2025-03-12T11:25:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ScrollBar } from './ScrollBar';
+
+const meta: Meta<typeof ScrollBar> = {
+    title: '스크롤바 컴포넌트',
+    component: ScrollBar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '부모 요소의 크기를 자동 감지하여 동적으로 높이를 조절하는 커스텀 스크롤바 컴포넌트.',
+            },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollBar>;
+
+/**
+ * 기본 스크롤바 (부모 높이 자동 감지)
+ */
+export const Default = ({ height = '300px' }: { height?: string }) => {
path: client/src/components/ScrollBar/ScrollBar.stories.tsx
user: login: littleemm
body: 엄청 사소하지만..! 이 부분을 자식 컴포넌트랑 `height`를 똑같이 주면 스크롤바 밑 부분도 살짝 같이 잘려서 기본값을 300px보다 크게 줘야할 것 같습니다!
created_at: 2025-03-12T12:14:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+import  theme  from '@styles/theme';
+
+export const scrollBarStyle = (height?: string) => css`
+  
+  overflow-y : auto; 
+  
+
+  // Chrome, edge, safari에서 scrollbar를 적용하려면 -webkit-scrollbar로 적용시켜야한다.
+
+  // 전체 스크롤바
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: ${height ?? "100%"};
+  }
+
+  // 스크롤바에서 움직이는 부분을 제외한 나머지 부분
+ &::-webkit-scrollbar-track {
+  background: ${theme.colors.gray[200]};
+  border-radius: 10px;
+}
+
+  // 스크롤바에서 움직이는 부분
+ &::-webkit-scrollbar-thumb {
+  background:${theme.colors.default}; opacity : 0.2;
+  border-radius: 10px;
+  min-height: 100px;
+}
path: client/src/components/ScrollBar/ScrollBar.style.ts
user: login: Dochanii
body: 넵 수정했습니다!
created_at: 2025-03-12T12:27:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -178,6 +174,30 @@ const globalStyles = css`
     a:hover {
         text-decoration: none; /* 호버 시에도 밑줄 제거 */
     }
+    /* 스크롤 바 부분 */
+    * {
+        overflow-y: auto; 
+
+        &::-webkit-scrollbar {
+            width: 0.8rem;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: ${theme.colors.gray[200]};
+            border-radius: 1rem;
+            
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: ${theme.colors.default}; 
+            border-radius: 1rem;
+            min-height: 10rem;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background: ${theme.colors.defaultHover};
+        }
+    }
path: client/src/styles/global.ts
user: login: Dochanii
body: 오 생각지도 못헀네요... 수정했습니다!
created_at: 2025-03-12T12:27:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ScrollBar } from './ScrollBar';
+
+const meta: Meta<typeof ScrollBar> = {
+    title: '스크롤바 컴포넌트',
+    component: ScrollBar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '부모 요소의 크기를 자동 감지하여 동적으로 높이를 조절하는 커스텀 스크롤바 컴포넌트.',
+            },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollBar>;
+
+/**
+ * 기본 스크롤바 (부모 높이 자동 감지)
+ */
+export const Default = ({ height = '300px' }: { height?: string }) => {
+    return (
+        <div
+            style={{
+                border: '1px solid gray',
+                borderRadius: '10px',
+                padding: '2px',
+                height,
+                width: '300px',
+                overflow: 'hidden',
+            }}
+        >
+            <ScrollBar isMouseIn={false}>
+                <div style={{ height: '800px', padding: '10px' }}>
+                    {[...Array(50)].map((_, i) => (
+                        <p key={i}>스크롤 테스트 {i + 1}</p>
+                    ))}
+                </div>
+            </ScrollBar>
+        </div>
+    );
+};
path: client/src/components/ScrollBar/ScrollBar.stories.tsx
user: login: Dochanii
body: 넵 인지하고 있겠습니다. 다른 컴포넌트 개발하다가 수정할 필요가 생기면 그때 바로 수정하도록 하겠습니다.
created_at: 2025-03-12T12:28:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,45 @@
+import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { scrollBarStyle } from './ScrollBar.style';
+
+interface ScrollBarProps {
+  children: ReactNode;
+}
+
+function ScrollBar({ children }: ScrollBarProps) {
+  // 스크롤바에 부착된 부모 태그의 높이 초기설정
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [parentHeight, setParentHeight] = useState<string | undefined>();
+  const parentElement = containerRef.current?.parentElement;
+
+  const updateHeight = () => {
+    setParentHeight(`${parentElement?.clientHeight}px`); // 높이 계산해서 업데이트
+  };
+
+  useEffect(() => {
+    if (parentElement) {
+      updateHeight(); 
+
+      const observer = new ResizeObserver(updateHeight); // 크기가 변경되면 updateHeight 함수를 실행할수있게 observer 설정
+      observer.observe(parentElement); // 부모 요소가 변경되면 실행할 수 있게
path: client/src/components/ScrollBar/ScrollBar.tsx
user: login: littleemm
body: 22번째줄 `updateHeight()`가 초깃값 설정을 위한 것 같은데 `observer`가 컴포넌트가 마운트되는 순간부터 `updateHeight`를 작동시켜서 22번째줄은 없어도 될 것 같습니다!
created_at: 2025-03-12T12:35:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ScrollBar } from './ScrollBar';
+
+const meta: Meta<typeof ScrollBar> = {
+    title: '스크롤바 컴포넌트',
+    component: ScrollBar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '부모 요소의 크기를 자동 감지하여 동적으로 높이를 조절하는 커스텀 스크롤바 컴포넌트.',
+            },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollBar>;
+
+/**
+ * 기본 스크롤바 (부모 높이 자동 감지)
+ */
+export const Default = ({ height = '300px' }: { height?: string }) => {
+    return (
+        <div
+            style={{
+                border: '1px solid gray',
+                borderRadius: '10px',
+                padding: '2px',
+                height,
+                width: '300px',
+                overflow: 'hidden',
+            }}
+        >
+            <ScrollBar isMouseIn={false}>
path: client/src/components/ScrollBar/ScrollBar.stories.tsx
user: login: Dochanii
body: 넵 수정했습니다!
created_at: 2025-03-13T03:40:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ScrollBar } from './ScrollBar';
+
+const meta: Meta<typeof ScrollBar> = {
+    title: '스크롤바 컴포넌트',
+    component: ScrollBar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '부모 요소의 크기를 자동 감지하여 동적으로 높이를 조절하는 커스텀 스크롤바 컴포넌트.',
+            },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollBar>;
+
+/**
+ * 기본 스크롤바 (부모 높이 자동 감지)
+ */
+export const Default = ({ height = '300px' }: { height?: string }) => {
+    return (
+        <div
+            style={{
+                border: '1px solid gray',
+                borderRadius: '10px',
+                padding: '2px',
+                height,
+                width: '300px',
+                overflow: 'hidden',
+            }}
+        >
+            <ScrollBar isMouseIn={false}>
+                <div style={{ height: '800px', padding: '10px' }}>
+                    {[...Array(50)].map((_, i) => (
+                        <p key={i}>스크롤 테스트 {i + 1}</p>
+                    ))}
+                </div>
+            </ScrollBar>
+        </div>
+    );
+};
+
+/**
+ * 부모 요소 높이를 동적으로 변경할 수 있는 테스트
+ */
+export const DynamicParent = ({ height = '300px' }: { height?: string }) => {
+    const [parentHeight, setParentHeight] = useState(height);
+
+    return (
+        <div>
+            <button
+                onClick={() => setParentHeight(parentHeight === '300px' ? '500px' : '300px')}
+                style={{
+                    marginBottom: '10px',
+                    padding: '5px 10px',
+                    cursor: 'pointer',
+                }}
+            >
+                부모 높이 변경 (현재: {parentHeight})
+            </button>
+            <div
+                style={{
+                    border: '1px solid gray',
+                    borderRadius: '10px',
+                    padding: '2px',
+                    height: parentHeight,
+                    width: '300px',
+                    overflow: 'hidden',
+                    transition: 'height 0.3s ease-in-out',
+                }}
+            >
+                <ScrollBar isMouseIn={false}>
path: client/src/components/ScrollBar/ScrollBar.stories.tsx
user: login: Dochanii
body: 넵 수정했습니다!
created_at: 2025-03-13T03:40:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ScrollBar } from './ScrollBar';
+
+const meta: Meta<typeof ScrollBar> = {
+    title: '스크롤바 컴포넌트',
+    component: ScrollBar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '부모 요소의 크기를 자동 감지하여 동적으로 높이를 조절하는 커스텀 스크롤바 컴포넌트.',
+            },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollBar>;
+
+/**
+ * 기본 스크롤바 (부모 높이 자동 감지)
+ */
+export const Default = ({ height = '300px' }: { height?: string }) => {
path: client/src/components/ScrollBar/ScrollBar.stories.tsx
user: login: Dochanii
body: 넵 조절하겠습니다!
created_at: 2025-03-13T03:40:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,45 @@
+import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { scrollBarStyle } from './ScrollBar.style';
+
+interface ScrollBarProps {
+  children: ReactNode;
+}
+
+function ScrollBar({ children }: ScrollBarProps) {
+  // 스크롤바에 부착된 부모 태그의 높이 초기설정
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [parentHeight, setParentHeight] = useState<string | undefined>();
+  const parentElement = containerRef.current?.parentElement;
+
+  const updateHeight = () => {
+    setParentHeight(`${parentElement?.clientHeight}px`); // 높이 계산해서 업데이트
+  };
+
+  useEffect(() => {
+    if (parentElement) {
+      updateHeight(); 
+
+      const observer = new ResizeObserver(updateHeight); // 크기가 변경되면 updateHeight 함수를 실행할수있게 observer 설정
+      observer.observe(parentElement); // 부모 요소가 변경되면 실행할 수 있게
path: client/src/components/ScrollBar/ScrollBar.tsx
user: login: Dochanii
body: 오 그러네여... 감사합니다 수정했습니다!
created_at: 2025-03-13T03:41:07Z
author_association: CONTRIBUTOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-03-08T05:51:34Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: skip review by coderabbit.ai -->

> [!IMPORTANT]
> ## Review skipped
> 
> Bot user detected.
> 
> To trigger a single review, invoke the `@coderabbitai review` command.
> 
> You can disable this status message by setting the `reviews.review_status` to `false` in the CodeRabbit configuration file.

<!-- end of auto-generated comment: skip review by coderabbit.ai -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=Recruiting-Your-Club/ryc&utm_content=114):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: aiminghee3
created_at: 2025-03-11T11:13:48Z
body: 첫 pr이라 힘드셨을텐데 고생하셨습니다!!
author_association: CONTRIBUTOR