feat: Mobile layout, show tooltip on info click

IT-Cotato · Feb 13, 2025 · b37d5da · b37d5da
1 parent b9a154f
commit b37d5da
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/src/pages/MyPage/components/member-management/InfoTooltip.tsx b/src/pages/MyPage/components/member-management/InfoTooltip.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ReactComponent as Info } from '@/pages/MyPage/tempAsssets/info_circle.svg';
-import { Tooltip } from '@mui/material';
+import { IconButton, Tooltip, useMediaQuery } from '@mui/material';
+import { device } from '@theme/media';
 
 //
 //
@@ -49,24 +50,35 @@ const CustomTooltip = () => {
 //
 
 export default function InfoTooltip() {
+  const [open, setOpen] = useState(false);
   return (
     <Tooltip
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
       title={<CustomTooltip />}
       slotProps={{
         tooltip: {
           sx: {
             bgcolor: 'white',
             color: 'black',
             borderRadius: '0.625rem',
-            padding: '2rem 1.5rem',
+            p: '2rem 1.5rem',
             boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.25)',
             maxWidth: 'none',
             width: 'auto',
           },
         },
       }}
     >
-      <Info />
+      <IconButton
+        onClick={() => setOpen(!open)}
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        className="focus:outline-none"
+      >
+        <Info />
+      </IconButton>
     </Tooltip>
   );
 }
diff --git a/src/pages/MyPage/components/member-management/SearchBar.tsx b/src/pages/MyPage/components/member-management/SearchBar.tsx
@@ -1,6 +1,7 @@
-import { IconButton, InputBase, Paper } from '@mui/material';
+import { IconButton, InputBase, Paper, useMediaQuery } from '@mui/material';
 import { ReactComponent as Search } from '@/pages/MyPage/tempAsssets/search.svg';
 import React, { Dispatch, SetStateAction } from 'react';
+import { device } from '@theme/media';
 
 //
 //
@@ -16,14 +17,15 @@ interface SearchBarProps {
 //
 
 export default function SearchBar({ value, setValue }: SearchBarProps) {
+  const isTablet = useMediaQuery(`(max-width:${device.tablet})`);
   return (
     <Paper
       component="form"
       sx={{
         p: '2px 4px',
         display: 'flex',
         alignItems: 'center',
-        width: 400,
+        width: isTablet ? 200 : 400,
         height: '2.25rem',
       }}
     >

diff --git a/src/pages/MyPage/components/member-management/TagButton.tsx b/src/pages/MyPage/components/member-management/TagButton.tsx
@@ -1,4 +1,5 @@
 import { Button, ButtonProps } from '@mui/material';
+import { media } from '@theme/media';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -14,6 +15,10 @@ const StyledButton = styled(Button)<{ isSelected: boolean }>`
   && {
     display: flex;
     min-width: 6.25rem;
+    ${media.tablet`
+      min-width: 0;
+      padding: 0.125rem;
+      `}
     justify-content: center;
     align-items: center;
     padding: 0.25rem 0.625rem;