Merge pull request peer-42seoul#446 from SaltySalt77/feat/homepageSet…

…ting [PUBLIC, C-MYPAGE] 라이트/다크모드 처리
asroq1 · Jan 3, 2024 · aae638d · aae638d
2 parents c3263fa + 7a40928
commit aae638d
Show file tree

Hide file tree

Showing 19 changed files with 416 additions and 169 deletions.
diff --git a/src/app/my-page/homepage-setting/panel/DisplaySetting.tsx b/src/app/my-page/homepage-setting/panel/DisplaySetting.tsx
@@ -1,11 +1,11 @@
 'use client'
 import CuToggle from '@/components/CuToggle'
 import { FormControlLabel, Stack, Typography } from '@mui/material'
-import { useState } from 'react'
+import { useDarkMode } from '@/states/useDarkMode'
 
 const DisplaySetting = () => {
-  const [useSystem, setUseSystem] = useState(false)
-  const [darkMode, setDarkMode] = useState(false)
+  const { useSystemTheme, isLightMode, toggleDarkMode, toggleSystemTheme } =
+    useDarkMode()
 
   return (
     <Stack
@@ -21,10 +21,8 @@ const DisplaySetting = () => {
         <FormControlLabel
           control={
             <CuToggle
-              checked={useSystem}
-              onChange={() => {
-                setUseSystem((prev) => !prev)
-              }}
+              checked={useSystemTheme}
+              onChange={toggleSystemTheme}
               inputProps={{ 'aria-label': `시스템 설정 토글` }}
             />
           }
@@ -40,13 +38,14 @@ const DisplaySetting = () => {
           labelPlacement="start"
         />
         <FormControlLabel
-          sx={{ opacity: useSystem ? 0 : 1, transition: 'opacity 0.5s ease' }}
+          sx={{
+            opacity: useSystemTheme ? 0 : 1,
+            transition: 'opacity 0.5s ease',
+          }}
           control={
             <CuToggle
-              checked={darkMode}
-              onChange={() => {
-                setDarkMode((prev) => !prev)
-              }}
+              checked={isLightMode()}
+              onChange={toggleDarkMode}
               inputProps={{ 'aria-label': `라이트/다크모드 토글` }}
               uncheckedtrackimage="/images/sign_moon.svg"
               checkedtrackimage="/images/sign_sun.svg"
@@ -59,7 +58,7 @@ const DisplaySetting = () => {
               sx={{
                 marginRight: '16px',
                 marginLeft: '0',
-                textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+                // textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
               }}
             >
               라이트/ 다크 모드

diff --git a/src/app/my-page/message/@list/panel/MessageBar.tsx b/src/app/my-page/message/@list/panel/MessageBar.tsx
@@ -75,7 +75,7 @@ export const SearchBar = ({
         alignItems={'center'}
         spacing={'0.38rem'}
       >
-        <SearchIcon width={'1.25rem'} height={'1.25rem'} />
+        <SearchIcon width={'1.25rem'} height={'1.25rem'} sx={{ color: 'text.normal' }}/>
         <InputBase
           sx={style.searchInput}
           onChange={(e) => setSearchKeyword(e.target.value)}

diff --git a/src/app/my-page/message/@list/panel/NewMessageModal.style.ts b/src/app/my-page/message/@list/panel/NewMessageModal.style.ts
@@ -25,6 +25,7 @@ export const searchInput = {
 export const searchIcon = {
   width: '1.25rem',
   height: '1.25rem',
+  color: 'text.normal',
 }
 
 export const closeIcon = {

diff --git a/src/app/panel/MuiThemeProvider.tsx b/src/app/panel/MuiThemeProvider.tsx
@@ -1,7 +1,11 @@
 'use client'
-
-// import { useDarkMode } from '@/states/useDarkMode'
-import { ThemeProvider, alpha, createTheme } from '@mui/material/styles'
+import { useDarkMode } from '@/states/useDarkMode'
+import {
+  ThemeProvider,
+  createTheme,
+  StyledEngineProvider,
+} from '@mui/material/styles'
+import { useEffect } from 'react'
 
 declare module '@mui/material/styles' {
   // typography variant 추가
@@ -320,10 +324,16 @@ declare module '@mui/material/Chip' {
 }
 
 const MuiThemeProvider = ({ children }: { children: React.ReactNode }) => {
-  // const mode = useDarkMode().darkMode
-
   let theme = createTheme()
 
+  const { theme: colorTheme, getModeFromLocalStorage } = useDarkMode()
+
+  useEffect(() => {
+    getModeFromLocalStorage()
+  }, [])
+
+  theme = createTheme(theme, colorTheme)
+
   theme = createTheme(theme, {
     breakpoints: {
       values: {
@@ -475,7 +485,6 @@ const MuiThemeProvider = ({ children }: { children: React.ReactNode }) => {
       },
     },
     palette: {
-      mode: 'dark',
       red: theme.palette.augmentColor({
         color: {
           main: '#FF5833',
@@ -536,27 +545,6 @@ const MuiThemeProvider = ({ children }: { children: React.ReactNode }) => {
         },
         name: 'pink',
       }),
-      background: {
-        primary: '#060623',
-        secondary: '#18182B',
-        tertiary: '#22223A',
-        paper: '#060623',
-        default: '#060623',
-      },
-      line: {
-        base: '#35373E',
-        alternative: '#2C2E35',
-      },
-      text: {
-        strong: '#FFFFFF',
-        primary: '#F6F6F6',
-        normal: '#F6F6F6',
-        alternative: '#9B9B9B',
-        secondary: '#9B9B9B',
-        assistive: '#42444C',
-        disable: '#1E2024',
-        disabled: alpha('#9B9B9B', 0.5), // 기존에 디자이너님의 의도하신 것에 영향이 있을 수 있으나, textfield disabled 상태에서의 텍스트 색상을 위해 고쳤습니다.
-      },
       primary: {
         main: '#6F62FE',
         light: '#A39BFD',
@@ -773,7 +761,11 @@ const MuiThemeProvider = ({ children }: { children: React.ReactNode }) => {
     },
   })
 
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </StyledEngineProvider>
+  )
 }
 
 export default MuiThemeProvider
diff --git a/src/app/panel/layout-panel/AlertIcon.tsx b/src/app/panel/layout-panel/AlertIcon.tsx
@@ -2,15 +2,18 @@
 
 import { Badge, Drawer, Tab, Tabs } from '@mui/material'
 import { IconButton } from '@mui/material'
-import NotificationsIcon from '@mui/icons-material/Notifications'
 import { SyntheticEvent, useCallback, useState } from 'react'
 import { Box } from '@mui/system'
+import NotificationIcon from '@/icons/NotificationIcon'
+import useMedia from '@/hook/useMedia'
 
 const AlertIcon = () => {
   const [tabvalue, setTabValue] = useState(0)
   const [isAlertComing, setIsAlertComing] = useState(false)
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
 
+  const { isPc } = useMedia()
+
   const openAlertTab = useCallback(() => {
     setIsAlertComing(true)
     setIsDrawerOpen(true)
@@ -39,7 +42,13 @@ const AlertIcon = () => {
     <>
       <IconButton color="inherit" aria-label="alert_tab" onClick={openAlertTab}>
         <Badge color="secondary" variant="dot" invisible={isAlertComing}>
-          <NotificationsIcon color="primary" />
+          <NotificationIcon
+            sx={{
+              color: isPc ? 'text.alternative' : 'text.normal',
+              width: '1.25rem',
+              height: '1.25rem',
+            }}
+          />
         </Badge>
       </IconButton>
       <Drawer

diff --git a/src/app/panel/layout-panel/Header.style.ts b/src/app/panel/layout-panel/Header.style.ts
@@ -1,6 +1,5 @@
-export const mobileHeader = {
-  background: 'rgba(6, 6, 35, 0.80)',
-}
+// alpha 함수와 useTheme 함수를 사용해야하기 때문에 mobileHeader의 background color를 제외하였습니다.
+export const mobileHeader = {}
 
 export const mobileHeaderToolbar = {
   boxSizing: 'border-box',

diff --git a/src/app/panel/layout-panel/Header.tsx b/src/app/panel/layout-panel/Header.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { AppBar, Box, Stack, Toolbar } from '@mui/material'
+import { AppBar, Box, Stack, Toolbar, alpha, useTheme } from '@mui/material'
 import SearchButton from '../main-page/SearchButton'
 import AlertIcon from './AlertIcon'
 import PeerLogo from '@/app/panel/layout-panel/PeerLogo'
@@ -14,8 +14,13 @@ import * as style from './Header.style'
  */
 
 const Header = () => {
+  const theme = useTheme()
+  const mobileHeader = {
+    ...style.mobileHeader,
+    backgroundColor: alpha(theme.palette.background.primary, 0.8),
+  }
   return (
-    <AppBar position="fixed" sx={style.mobileHeader}>
+    <AppBar position="fixed" sx={mobileHeader}>
       <Toolbar disableGutters sx={style.mobileHeaderToolbar}>
         <Stack
           direction={'row'}
@@ -26,7 +31,9 @@ const Header = () => {
           <AlertIcon />
           <Box sx={style.mobileHeaderTitle}>
             {/* 페이지별로 다른 제목이 들어갈 수 있어야 함. */}
-            <PeerLogo sx={{ width: '3.375rem', height: '2.5rem' }} />
+            <PeerLogo
+              sx={{ width: '3.375rem', height: '2.5rem', color: 'text.normal' }}
+            />
           </Box>
           <SearchButton />
         </Stack>

diff --git a/src/app/panel/layout-panel/NavBar.tsx b/src/app/panel/layout-panel/NavBar.tsx
@@ -158,7 +158,7 @@ export const PcNav = () => {
     >
       <Stack direction={'row'}>
         <Stack alignItems={'center'} justifyContent={'center'}>
-          <PeerLogo sx={{ width: 50, height: 50 }} />
+          <PeerLogo sx={{ width: 50, height: 50, color: 'text.normal' }} />
         </Stack>
         <BottomNavigation
           showLabels={true}

diff --git a/src/app/panel/layout-panel/PeerLogo.tsx b/src/app/panel/layout-panel/PeerLogo.tsx
@@ -1,35 +1,31 @@
-import SvgIcon from '@mui/material/SvgIcon'
-import { SvgIconProps } from '@mui/material'
+import { createSvgIcon } from '@mui/material'
 
-const PeerLogo = (props: SvgIconProps) => {
-  return (
-    <SvgIcon {...props}>
-      <svg
-        width="54"
-        height="40"
-        viewBox="0 0 54 40"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M1 29.41V16.09H7.66C9.268 16.09 10.522 16.486 11.422 17.278C12.322 18.07 12.772 19.216 12.772 20.716C12.772 22.228 12.322 23.38 11.422 24.172C10.522 24.964 9.268 25.36 7.66 25.36H3.61V29.41H1ZM7.66 18.16H3.61V23.29H7.66C8.44 23.29 9.034 23.08 9.442 22.66C9.862 22.228 10.072 21.58 10.072 20.716C10.072 19.864 9.862 19.228 9.442 18.808C9.034 18.376 8.44 18.16 7.66 18.16Z"
-          fill="white"
-        />
-        <path
-          d="M19.1645 25.45C17.5565 25.45 16.3025 25.054 15.4025 24.262C14.5025 23.458 14.0525 22.282 14.0525 20.734C14.0525 19.174 14.5025 17.998 15.4025 17.206C16.3025 16.402 17.5565 16 19.1645 16H23.6645C24.7205 16 25.5245 16.252 26.0765 16.756C26.6405 17.248 26.9225 17.956 26.9225 18.88C26.9225 20.764 25.8365 21.706 23.6645 21.706H16.8605C17.1125 22.822 17.8805 23.38 19.1645 23.38H26.4545V25.45H19.1645ZM19.1645 18.07C17.9285 18.07 17.1665 18.592 16.8785 19.636H23.5385C23.7785 19.636 23.9645 19.564 24.0965 19.42C24.2405 19.276 24.3125 19.078 24.3125 18.826C24.3125 18.322 24.0545 18.07 23.5385 18.07H19.1645Z"
-          fill="white"
-        />
-        <path
-          d="M33.3153 25.45C31.7073 25.45 30.4533 25.054 29.5533 24.262C28.6533 23.458 28.2033 22.282 28.2033 20.734C28.2033 19.174 28.6533 17.998 29.5533 17.206C30.4533 16.402 31.7073 16 33.3153 16H37.8153C38.8713 16 39.6753 16.252 40.2273 16.756C40.7913 17.248 41.0733 17.956 41.0733 18.88C41.0733 20.764 39.9873 21.706 37.8153 21.706H31.0113C31.2633 22.822 32.0313 23.38 33.3153 23.38H40.6053V25.45H33.3153ZM33.3153 18.07C32.0793 18.07 31.3173 18.592 31.0293 19.636H37.6893C37.9293 19.636 38.1153 19.564 38.2473 19.42C38.3913 19.276 38.4633 19.078 38.4633 18.826C38.4633 18.322 38.2053 18.07 37.6893 18.07H33.3153Z"
-          fill="white"
-        />
-        <path
-          d="M42.7142 25.36V16.09H49.8062C50.8502 16.09 51.6182 16.354 52.1102 16.882C52.6022 17.398 52.8482 18.082 52.8482 18.934V20.86H50.2022V19.258C50.2022 18.538 49.8422 18.178 49.1222 18.178H45.3602V25.36H42.7142Z"
-          fill="white"
-        />
-      </svg>
-    </SvgIcon>
-  )
-}
+const PeerLogo = createSvgIcon(
+  <svg
+    width="54"
+    height="40"
+    viewBox="0 0 54 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 29.41V16.09H7.66C9.268 16.09 10.522 16.486 11.422 17.278C12.322 18.07 12.772 19.216 12.772 20.716C12.772 22.228 12.322 23.38 11.422 24.172C10.522 24.964 9.268 25.36 7.66 25.36H3.61V29.41H1ZM7.66 18.16H3.61V23.29H7.66C8.44 23.29 9.034 23.08 9.442 22.66C9.862 22.228 10.072 21.58 10.072 20.716C10.072 19.864 9.862 19.228 9.442 18.808C9.034 18.376 8.44 18.16 7.66 18.16Z"
+      fill="currentColor"
+    />
+    <path
+      d="M19.1645 25.45C17.5565 25.45 16.3025 25.054 15.4025 24.262C14.5025 23.458 14.0525 22.282 14.0525 20.734C14.0525 19.174 14.5025 17.998 15.4025 17.206C16.3025 16.402 17.5565 16 19.1645 16H23.6645C24.7205 16 25.5245 16.252 26.0765 16.756C26.6405 17.248 26.9225 17.956 26.9225 18.88C26.9225 20.764 25.8365 21.706 23.6645 21.706H16.8605C17.1125 22.822 17.8805 23.38 19.1645 23.38H26.4545V25.45H19.1645ZM19.1645 18.07C17.9285 18.07 17.1665 18.592 16.8785 19.636H23.5385C23.7785 19.636 23.9645 19.564 24.0965 19.42C24.2405 19.276 24.3125 19.078 24.3125 18.826C24.3125 18.322 24.0545 18.07 23.5385 18.07H19.1645Z"
+      fill="currentColor"
+    />
+    <path
+      d="M33.3153 25.45C31.7073 25.45 30.4533 25.054 29.5533 24.262C28.6533 23.458 28.2033 22.282 28.2033 20.734C28.2033 19.174 28.6533 17.998 29.5533 17.206C30.4533 16.402 31.7073 16 33.3153 16H37.8153C38.8713 16 39.6753 16.252 40.2273 16.756C40.7913 17.248 41.0733 17.956 41.0733 18.88C41.0733 20.764 39.9873 21.706 37.8153 21.706H31.0113C31.2633 22.822 32.0313 23.38 33.3153 23.38H40.6053V25.45H33.3153ZM33.3153 18.07C32.0793 18.07 31.3173 18.592 31.0293 19.636H37.6893C37.9293 19.636 38.1153 19.564 38.2473 19.42C38.3913 19.276 38.4633 19.078 38.4633 18.826C38.4633 18.322 38.2053 18.07 37.6893 18.07H33.3153Z"
+      fill="currentColor"
+    />
+    <path
+      d="M42.7142 25.36V16.09H49.8062C50.8502 16.09 51.6182 16.354 52.1102 16.882C52.6022 17.398 52.8482 18.082 52.8482 18.934V20.86H50.2022V19.258C50.2022 18.538 49.8422 18.178 49.1222 18.178H45.3602V25.36H42.7142Z"
+      fill="currentColor"
+    />
+  </svg>,
+  'PeerLogo',
+)
 
 export default PeerLogo
diff --git a/src/app/panel/main-page/SearchButton.tsx b/src/app/panel/main-page/SearchButton.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import { useMediaQuery, IconButton, Modal, Box } from '@mui/material'
-import SearchIcon from '@mui/icons-material/Search'
 import useModal from '@/hook/useModal'
 import SearchBody from '../../search/panel/SearchBody'
+import { SearchIcon } from '@/icons'
 
 const StyleMobileSearch = {
   position: 'absolute' as 'absolute',
@@ -26,7 +26,7 @@ const SearchPc = () => {
   return (
     <>
       <IconButton color="inherit" aria-label="menu" onClick={openModal}>
-        <SearchIcon color="primary" />
+        <SearchIcon sx={{ color: 'text.alternative' }} />
       </IconButton>
       {/* NOTE : 기본 모달과 형태가 달라 CuModal을 사용하지 않았습니다. */}
       <Modal
@@ -48,7 +48,7 @@ const SearchMobile = () => {
   return (
     <>
       <IconButton color="inherit" aria-label="menu" onClick={openModal}>
-        <SearchIcon />
+        <SearchIcon sx={{ color: 'text.normal' }} />
       </IconButton>
       {/* NOTE : 기본 모달과 형태가 달라 CuModal을 사용하지 않았습니다. */}
       <Modal

diff --git a/src/app/teams/[id]/notice/page.tsx b/src/app/teams/[id]/notice/page.tsx
@@ -10,11 +10,11 @@ import {
   InputAdornment,
 } from '@mui/material'
 import AddIcon from '@mui/icons-material/Add'
-import SearchIcon from '@mui/icons-material/Search'
 import useMedia from '@/hook/useMedia'
 import NoticeList from './panel/NoticeList'
 import CuTextField from '@/components/CuTextField'
 import CuButton from '@/components/CuButton'
+import SearchIcon from '@/icons/SearchIcon'
 
 const SearchPopover = ({
   setKeyword,
@@ -40,7 +40,7 @@ const SearchPopover = ({
         onClick={handleOpenPopover}
         aria-describedby={'search-popover'}
       >
-        <SearchIcon />
+        <SearchIcon sx={{ color: 'text.normal' }} />
       </IconButton>
       <Popover
         id={'search-popover'}

diff --git a/src/components/CuToggle.tsx b/src/components/CuToggle.tsx
@@ -29,6 +29,10 @@ const CuToggle = styled((props: SwitchProps) => (
       },
     },
     '& .MuiSwitch-switchBase': {
+      '&:hover': {
+        backgroundColor: 'transparent',
+      },
+
       padding: 0,
       // margin: 2,
       width: 60,

diff --git a/src/components/MessageNavigator.tsx b/src/components/MessageNavigator.tsx
@@ -35,7 +35,7 @@ const MessageNavigator = ({
       />
       <Typography>{title}</Typography>
       <Box>
-        {messageType !== 'main' && <SearchIcon />}
+        {messageType !== 'main' && <SearchIcon sx={{ color: 'text.normal' }} />}
         <AddIcon onClick={onNewMessage} />
       </Box>
     </Box>