feat: add more transition animation, fix some designs

src/app/about/template.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Template = ({ children }: { children: React.ReactNode }) => {
+  return <div className="layout-container">{children}</div>
+}
+
+export default Template

src/app/my-page/template.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Template = ({ children }: { children: React.ReactNode }) => {
+  return <div className="layout-container">{children}</div>
+}
+
+export default Template

src/app/panel/MuiThemeProvider.tsx

@@ -519,6 +519,7 @@ const MuiThemeProvider = ({ children }: { children: React.ReactNode }) => {
             padding: '0px',
             borderRadius: '4px',
             height: 'auto',
+            minHeight: '32px',
             backgroundColor: theme.palette.background.tertiary,
             color: theme.palette.text.normal,
             lineHeight: '150%',

src/app/signup/panel/PasswordField.tsx

@@ -61,7 +61,11 @@ const PasswordField = ({
                 showPassword={showPassword}
                 setShowPassword={setShowPassword}
               />
-              <IconButton onClick={deletePassword} size="small">
+              <IconButton
+                onClick={deletePassword}
+                size="small"
+                sx={{ paddingY: 0 }}
+              >
                 <HighlightOffIcon sx={{ color: 'text.alternative' }} />
               </IconButton>
             </>

src/app/team-list/panel/TeamsList.tsx

@@ -18,6 +18,8 @@ const TeamsList = ({ prop }: { prop: ITeamInfo[] }) => {
       sx={{ p: '0.25rem' }}
       height={'75vh'}
       flex={'2rem'}
+      className="layout-container"
+      key={showTeams}
     >
       <Stack direction={'row'}>
         <Typography fontWeight={'bold'} my={'1rem'}>

src/app/teams/[id]/board/@setting/page.style.ts

@@ -11,4 +11,5 @@ export const mobilePage = {
 export const inputContainer = {
   background: (theme: Theme) => theme.palette.background.tertiary,
   padding: '0rem 0.75rem',
+  alignItems: 'center',
 }

src/app/teams/[id]/layout.tsx

@@ -5,6 +5,7 @@ import { Stack, Container, Box, useMediaQuery } from '@mui/material'
 import useTeamPageState from '@/states/useTeamPageState'
 import TeamSidebar from './panel/NavBar'
 import * as style from '@/components/NavBarLayout.style'
+import useMedia from '@/hook/useMedia'
 
 const TeamLayout = ({
   params,
@@ -24,7 +25,8 @@ const TeamLayout = ({
   }, [])
 
   const isFourRow = useMediaQuery('(min-width:997px)')
-
+  const { isPc } = useMedia()
+
   if (layout === 'FULLPAGE') {
     return (
       <Container sx={style.container}>
@@ -42,7 +44,9 @@ const TeamLayout = ({
         sx={style.stack}
       >
         <TeamSidebar id={id} />
-        <Box sx={style.contentBox}>{children}</Box>
+        <Box sx={{ ...style.contentBox, width: isPc ? undefined : '100%' }}>
+          {children}
+        </Box>
       </Stack>
     </Container>
   )

src/app/teams/template.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Template = ({ children }: { children: React.ReactNode }) => {
+  return <div className="layout-container">{children}</div>
+}
+
+export default Template

src/components/EyeIcon.tsx

@@ -18,6 +18,7 @@ const EyeIcon = ({
         onClick={() => {
           setShowPassword(showPassword === 'password' ? 'text' : 'password')
         }}
+        sx={{ paddingY: 0 }}
       >
         {showPassword === 'password' ? (
           <VisibilityIcon sx={{ color: 'text.alternative' }} />

src/components/board/ListPanel.tsx

@@ -35,7 +35,7 @@ export const ListPageContainer = ({ children }: IChildrenProps) => {
   const { isPc } = useMedia()
   return (
     <Stack
-      sx={{ ...style.ListPageContainer, padding: isPc ? '2rem' : '0' }}
+      sx={{ ...style.ListPageContainer, padding: isPc ? '2rem' : '1rem' }}
       spacing={'2rem'}
     >
       {children}