[1.0.3] 페이지 전환 효과 추가

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/layout.tsx

@@ -26,7 +26,7 @@ const TeamsLayout = ({ children }: { children: ReactNode }) => {
         sx={style.stack}
       >
         <Sidebar />
-        <Stack>
+        <Stack sx={style.contentBox}>
           <Stack direction={'row'}>
             <Typography fontWeight={'bold'} my={'1rem'}>
               {showTeams === TeamStatus.RECRUITING
@@ -42,7 +42,9 @@ const TeamsLayout = ({ children }: { children: ReactNode }) => {
               content={<TeamListTutorial />}
             />
           </Stack>
-          <Box sx={style.contentBox}>{children}</Box>
+          <Box key={showTeams} className="layout-container">
+            {children}
+          </Box>
         </Stack>
       </Stack>
     </Container>

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,6 +25,7 @@ const TeamLayout = ({
   }, [])
 
   const isFourRow = useMediaQuery('(min-width:997px)')
+  const { isPc } = useMedia()
 
   if (layout === 'FULLPAGE') {
     return (
@@ -42,7 +44,14 @@ const TeamLayout = ({
         sx={style.stack}
       >
         <TeamSidebar id={id} />
-        <Box sx={style.contentBox}>{children}</Box>
+        <Box
+          sx={{
+            ...style.contentBox,
+            width: isFourRow ? undefined : isPc ? '70%' : '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/app/template.style.css

@@ -0,0 +1,14 @@
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.layout-container {
+  animation: fadeInUp 0.4s ease-out forwards;
+}

src/app/template.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import './template.style.css'
+
+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}