diff --git a/src/components/meeting/select/HeaderToolTip.tsx b/src/components/meeting/select/HeaderToolTip.tsx index eb51aa8..24b64d3 100644 --- a/src/components/meeting/select/HeaderToolTip.tsx +++ b/src/components/meeting/select/HeaderToolTip.tsx @@ -30,12 +30,6 @@ const ToolTipWrapper = styled.div` top: 50px; display: flex; justify-content: center; - - @media (max-width: 768px) { - left: auto; // 모바일 화면에서 왼쪽 위치를 자동으로 설정 - right: 5%; // 모바일 화면에서 오른쪽으로 이동 - top: 70px; // 모바일 화면에서 약간 아래로 내려가게 설정 - } `; const CustomTooltip = styled.div` @@ -49,7 +43,7 @@ const CustomTooltip = styled.div` @media (max-width: 768px) { padding: 5px; // 모바일 화면에서 패딩 조정 - width: 90%; // 모바일에서 툴팁의 너비를 조정 + width: 95%; // 모바일에서 툴팁의 너비를 조정 } `; @@ -68,29 +62,26 @@ export const TooltipArrow = styled.div<{ isAbove?: boolean }>` right: 7%; @media (max-width: 768px) { - top: ${({ isAbove }) => - isAbove ? `40px` : `-12px`}; // 모바일 화면에서 화살표 위치 약간 조정 - width: 15px; // 화살표 크기 축소 + top: ${({ isAbove }) => (isAbove ? `30px` : `-7.5px`)}; + } + @media (max-width: 450px) { + width: 15px; height: 15px; + top: ${({ isAbove }) => (isAbove ? `20px` : `-4.5px`)}; } `; const commonStyles = ` font-size: 14px; color: ${theme.color.point.purple}; - - @media (max-width: 768px) { - font-size: 7px; // 모바일 화면에서 글자 크기 축소 + @media (max-width: 450px) { + font-size: 0.6rem; } `; export const UserName = styled.span` ${commonStyles} margin: 5px; - - @media (max-width: 768px) { - font-size: 7px; // 모바일 화면에서 더 작은 글씨 크기 - } `; const CloseButton = styled.button` @@ -99,9 +90,4 @@ const CloseButton = styled.button` border: none; cursor: pointer; padding: 5px; - - @media (max-width: 768px) { - padding: 2px; // 모바일 화면에서 버튼 패딩 축소 - font-size: 7px; // 모바일에서 버튼 글씨 크기도 작게 - } `; diff --git a/src/components/meeting/timetable/ResultTimeCell.tsx b/src/components/meeting/timetable/ResultTimeCell.tsx index d247255..c608c0f 100644 --- a/src/components/meeting/timetable/ResultTimeCell.tsx +++ b/src/components/meeting/timetable/ResultTimeCell.tsx @@ -52,9 +52,9 @@ function ResultTimeCell({ if (!cell) return; if (!dragDisabled) { - cell.addEventListener('touchstart', handleTouchStart, { passive: false }); - cell.addEventListener('touchmove', handleTouchMove, { passive: false }); - cell.addEventListener('touchend', onDragEnd, { passive: false }); + cell.addEventListener('touchstart', handleTouchStart, { passive: true }); + cell.addEventListener('touchmove', handleTouchMove, { passive: true }); + cell.addEventListener('touchend', onDragEnd, { passive: true }); return () => { cell.removeEventListener('touchstart', handleTouchStart); @@ -107,16 +107,16 @@ const ResultHalfCell = styled(SelectHalfCell)< selected && ` background-image: linear-gradient( - -45deg, /* 각도를 -45도로 설정하여 반대 방향으로 */ - ${theme.color.primary.white} 10%, /* 더 얇은 흰색 줄무늬 */ - ${theme.color.point.green} 0, /* 초록색 배경 */ - ${theme.color.point.green} 50%, /* 초록색 부분 */ - ${theme.color.primary.white} 0, /* 다시 얇은 흰색 줄무늬 */ + -45deg, + ${theme.color.primary.white} 10%, + ${theme.color.point.green} 0, + ${theme.color.point.green} 50%, + ${theme.color.primary.white} 0, ${theme.color.primary.white} 60%, ${theme.color.point.green} 0 ); - background-size: 10px 10px; /* 패턴 크기 */ - background-color: ${theme.color.point.green}; /* 초록색 배경 */ + background-size: 10px 10px; + background-color: ${theme.color.point.green}; `}; &:first-child {