Merge pull request #284 from 2023-Winter-Bootcamp-Team-N/FE/feat/#220

[feat] 서머리 페이지 호버효과 수정
2023-Winter-Bootcamp-Team-N · Jan 30, 2024 · b2e6e6c · b2e6e6c
2 parents 4ab2c3e + 6cf0f11
commit b2e6e6c
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/frontend/src/pages/newtab/SummaryPage.tsx b/frontend/src/pages/newtab/SummaryPage.tsx
@@ -311,7 +311,11 @@ const SummaryPage: React.FC<SummaryPageProps> = ({
                 flexDirection: 'column',
                 alignItems: 'flex-start',
                 overflow: 'auto',
+                transform: hoverState[index] ? 'translateY(-8px)' : 'none', // 호버 시 위로 이동
+                transition: 'transform 0.3s', // 부드러운 이동 효과
               }}
+              onMouseEnter={() => handleMouseEnter(index)}
+              onMouseLeave={() => handleMouseLeave(index)}
               onClick={() => openModalForSummary(Channel)}>
               {/* 요약본 {index} */}
               {/* 라인 */}
@@ -435,7 +439,11 @@ const SummaryPage: React.FC<SummaryPageProps> = ({
                 flexDirection: 'column',
                 alignItems: 'flex-start',
                 overflow: 'auto',
+                transform: hoverState[index] ? 'translateY(-8px)' : 'none', // 호버 시 위로 이동
+                transition: 'transform 0.3s', // 부드러운 이동 효과
               }}
+              onMouseEnter={() => handleMouseEnter(index)}
+              onMouseLeave={() => handleMouseLeave(index)}
               onClick={() => openModalForSummary(summaries)}>
               {/* 요약본 {index} */}
               {index !== 0 && (