Merge pull request #109 from dev-five-git/fix-overflow

Fix overflow

Author: owjs3901

apps/landing/src/components/test-case/TestCaseCircle.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { Box } from '@devup-ui/react'
-import { useState } from 'react'
 
 import Tooltip from './Tooltip'
 
@@ -12,8 +11,6 @@ export default function TestCaseCircle({
   children: React.ReactNode
   isSuccess: boolean
 }) {
-  const [isHover, setIsHover] = useState(false)
-
   return (
     <Box role="group">
       <Box
@@ -22,10 +19,8 @@ export default function TestCaseCircle({
         borderRadius="100px"
         boxSize="16px"
         cursor="pointer"
-        onMouseEnter={() => setIsHover(true)}
-        onMouseLeave={() => setIsHover(false)}
       />
-      <Tooltip isOpen={isHover}>{children}</Tooltip>
+      <Tooltip>{children}</Tooltip>
     </Box>
   )
 }

apps/landing/src/components/test-case/Tooltip.tsx

@@ -4,15 +4,8 @@ import { VStack } from '@devup-ui/react'
 import { useRef, useState } from 'react'
 import { useEffect } from 'react'
 
-export default function Tooltip({
-  children,
-  isOpen,
-}: {
-  children: React.ReactNode
-  isOpen: boolean
-}) {
+export default function Tooltip({ children }: { children: React.ReactNode }) {
   const [viewportWidth, setViewportWidth] = useState(0)
-  const [tooltipRect, setTooltipRect] = useState<DOMRect | null>(null)
   const ref = useRef<HTMLDivElement>(null)
   useEffect(() => {
     if (typeof window === 'undefined') return
@@ -30,22 +23,36 @@ export default function Tooltip({
     }
   }, [])
 
-  useEffect(() => {
-    if (ref.current) {
-      setTooltipRect(ref.current.getBoundingClientRect())
-    }
-  }, [isOpen])
-
   return (
     <VStack
-      ref={ref}
+      ref={(el) => {
+        if (!el) return
+
+        ref.current = el
+
+        const mo = new ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            const target = entry.target as HTMLDivElement
+            const x = target.offsetLeft
+            const width = target.offsetWidth
+            if (x + width > viewportWidth) {
+              target.style.right = '16px'
+            }
+          })
+        })
+
+        mo.observe(el)
+
+        return () => mo.disconnect()
+      }}
       _groupHover={{
-        display: isOpen ? 'flex' : 'none',
+        display: 'flex',
       }}
       bg="rgba(0, 0, 0, 0.75)"
       borderRadius="4px"
       display="none"
       justifyContent="center"
+      maxW="calc(100vw - 32px)"
       onMouseEnter={(e) => {
         e.stopPropagation()
       }}
@@ -55,12 +62,6 @@ export default function Tooltip({
       pos="absolute"
       px="10px"
       py="8px"
-      style={{
-        right:
-          tooltipRect && tooltipRect.x + tooltipRect.width > viewportWidth
-            ? '16px'
-            : 'unset',
-      }}
       transform="translateY(10px)"
       transition="all 0.3s ease-in-out"
     >

apps/landing/src/components/test-case/list/TestCaseList.tsx

@@ -1,4 +1,4 @@
-import { Grid, Text } from '@devup-ui/react'
+import { Box, Grid, Text } from '@devup-ui/react'
 import Latex from 'react-syntax-highlighter/dist/cjs/languages/hljs/latex'
 
 import { TestStatus } from '@/types'
@@ -19,26 +19,23 @@ export function TestCaseList({ results }: { results: TestStatus[2] }) {
             value={Number(!isSuccess)}
           >
             <TestCaseCircle key={text + idx} isSuccess={isSuccess}>
-              <Text
-                color="#FFF"
-                typography="body"
-                whiteSpace="nowrap"
-                wordBreak="keep-all"
-              >
-                {textParts.map((part, partIdx) =>
-                  part.type === 'latex' ? (
-                    <Latex key={partIdx}>${part.content}$</Latex>
-                  ) : (
-                    <span key={partIdx}>{part.content}</span>
-                  ),
-                )}
-                <br />
-                정답 : {expected}
-                <br />
-                결과 : {actual}
-                <br />
-                {isSuccess ? '✅ 테스트 성공' : '❌ 테스트 실패'}
-              </Text>
+              <Box minW="50vw" w="100%" whiteSpace="pre-wrap">
+                <Text color="#FFF" typography="body">
+                  {textParts.map((part, partIdx) =>
+                    part.type === 'latex' ? (
+                      <Latex key={partIdx}>${part.content}$</Latex>
+                    ) : (
+                      <span key={partIdx}>{part.content}</span>
+                    ),
+                  )}
+                  <br />
+                  정답 : <Text wordBreak="break-all">{expected}</Text>
+                  <br />
+                  결과 : <Text wordBreak="break-all">{actual}</Text>
+                  <br />
+                  {isSuccess ? '✅ 테스트 성공' : '❌ 테스트 실패'}
+                </Text>
+              </Box>
             </TestCaseCircle>
           </TestCaseDisplayBoundary>
         )