diff --git a/src/common/assets/MakersDarkLogo.tsx b/src/common/assets/MakersLogoDark.tsx similarity index 98% rename from src/common/assets/MakersDarkLogo.tsx rename to src/common/assets/MakersLogoDark.tsx index fbaadd6b..cd356362 100644 --- a/src/common/assets/MakersDarkLogo.tsx +++ b/src/common/assets/MakersLogoDark.tsx @@ -1,4 +1,4 @@ -const MakersDarkLogo = ({ className }: { className?: string }) => { +const MakersLogoDark = ({ className }: { className?: string }) => { return ( { ); }; -export default MakersDarkLogo; +export default MakersLogoDark; diff --git a/src/common/assets/MakersLogo.tsx b/src/common/assets/MakersLogoLight.tsx similarity index 98% rename from src/common/assets/MakersLogo.tsx rename to src/common/assets/MakersLogoLight.tsx index a6aa8736..9d3fe9e4 100644 --- a/src/common/assets/MakersLogo.tsx +++ b/src/common/assets/MakersLogoLight.tsx @@ -1,4 +1,4 @@ -const MakersLogo = ({ className }: { className?: string }) => { +const MakersLogoLight = ({ className }: { className?: string }) => { return ( { ); }; -export default MakersLogo; +export default MakersLogoLight; diff --git a/src/common/assets/NowsoptLogo.tsx b/src/common/assets/NowsoptLogo.tsx deleted file mode 100644 index 6282842e..00000000 --- a/src/common/assets/NowsoptLogo.tsx +++ /dev/null @@ -1,327 +0,0 @@ -const NowsoptLogo = ({ className }: { className?: string }) => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default NowsoptLogo; diff --git a/src/common/assets/SoptLogoDark.tsx b/src/common/assets/SoptLogoDark.tsx new file mode 100644 index 00000000..8efe671c --- /dev/null +++ b/src/common/assets/SoptLogoDark.tsx @@ -0,0 +1,20 @@ +const SoptLogoDark = ({ className }: { className?: string }) => { + return ( + + + + ); +}; + +export default SoptLogoDark; diff --git a/src/common/assets/SoptLogoLight.tsx b/src/common/assets/SoptLogoLight.tsx new file mode 100644 index 00000000..802de140 --- /dev/null +++ b/src/common/assets/SoptLogoLight.tsx @@ -0,0 +1,20 @@ +const SoptLogoLight = ({ className }: { className?: string }) => { + return ( + + + + ); +}; + +export default SoptLogoLight; diff --git a/src/common/components/Layout/components/Header/index.tsx b/src/common/components/Layout/components/Header/index.tsx index 879a5ca5..4362fee0 100644 --- a/src/common/components/Layout/components/Header/index.tsx +++ b/src/common/components/Layout/components/Header/index.tsx @@ -1,9 +1,10 @@ import { useContext, useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; -import MakersDarkLogo from '@assets/MakersDarkLogo'; -import MakersLogo from '@assets/MakersLogo'; -import NowsoptLogo from '@assets/NowsoptLogo'; +import MakersLogoDark from '@assets/MakersLogoDark'; +import MakersLogoLight from '@assets/MakersLogoLight'; +import SoptLogoDark from '@assets/SoptLogoDark'; +import SoptLogoLight from '@assets/SoptLogoLight'; import { DeviceTypeContext } from '@store/deviceTypeContext'; import { RecruitingInfoContext } from '@store/recruitingInfoContext'; import { ThemeContext } from '@store/themeContext'; @@ -15,10 +16,8 @@ import { containerSizeVer, containerVar, logoVar } from './style.css'; const Header = () => { const { deviceType } = useContext(DeviceTypeContext); const [isMenuOpen, setIsMenuOpen] = useState(false); - const handleClickMenuToggle = () => { - setIsMenuOpen((prev) => !prev); - }; + const deviceType = useDevice(); const navigate = useNavigate(); const { pathname } = useLocation(); @@ -27,6 +26,14 @@ const Header = () => { } = useContext(RecruitingInfoContext); const { isLight } = useContext(ThemeContext); + const MakersLogo = isLight ? MakersLogoLight : MakersLogoDark; + const SoptLogo = isLight ? SoptLogoLight : SoptLogoDark; + const logoVariant = logoVar[deviceType]; + + const handleClickMenuToggle = () => { + setIsMenuOpen((prev) => !prev); + }; + const handleClickLogo = () => { pathname === '/' ? window.location.reload() : navigate('/'); }; @@ -37,22 +44,13 @@ const Header = () => { } }, [deviceType]); - const logoVariant = logoVar[deviceType]; return ( <> {isMakers != undefined && ( <>
diff --git a/src/styles/theme.css.ts b/src/styles/theme.css.ts index 353e5d3a..ad083e94 100644 --- a/src/styles/theme.css.ts +++ b/src/styles/theme.css.ts @@ -6,8 +6,7 @@ const color = createThemeContract({ primary: null, // 기수 컬러 primaryLight: null, // 기수 컬러 밝게 primaryDark: null, // 기수 컬러 어둡게 - // 기수 컬러 linear - primaryLinear: 'linear-gradient(rgba(189, 236, 0, 0.3) 0%, rgba(189, 236, 0, 1) 45%, rgba(189, 236, 0, 0.3) 100%)', + primaryLinear: null, // 기수 컬러 linear error: null, // error background: null, // background @@ -37,14 +36,14 @@ const color = createThemeContract({ }); export const light = createTheme(color, { - // primary: '#BDEC00', - // primaryLight: 'rgba(189, 236, 0, 0.08)', - // primaryDark: '#99BF00', - // primaryLinear: 'linear-gradient(rgba(189, 236, 0, 0.3) 0%, rgba(189, 236, 0, 1) 45%, rgba(189, 236, 0, 0.3) 100%)', - primary: colors.gray600, - primaryLight: colors.gray30, - primaryDark: colors.gray950, - primaryLinear: 'linear-gradient(rgba(63, 63, 71, 0.3) 0%, rgba(63, 63, 71, 1) 45%, rgba(63, 63, 71, 0.3) 100%)', + primary: '#3C92FF', + primaryLight: 'rgba(112, 175, 255, 0.08)', + primaryDark: '#3683E5', + primaryLinear: 'linear-gradient(rgba(60, 146, 255, 0.3) 0%, rgba(60, 146, 255, 1) 45%, rgba(60, 146, 255, 0.3) 100%)', + // primary: colors.gray600, + // primaryLight: colors.gray30, + // primaryDark: colors.gray950, + // primaryLinear: 'linear-gradient(rgba(63, 63, 71, 0.3) 0%, rgba(63, 63, 71, 1) 45%, rgba(63, 63, 71, 0.3) 100%)', error: colors.error, background: colors.white, @@ -74,14 +73,14 @@ export const light = createTheme(color, { }); export const dark = createTheme(color, { - // primary: '#BDEC00', - // primaryLight: 'rgba(189, 236, 0, 0.08)', - // primaryDark: '#99BF00', - // primaryLinear: 'linear-gradient(rgba(189, 236, 0, 0.3) 0%, rgba(189, 236, 0, 1) 45%, rgba(189, 236, 0, 0.3) 100%)', - primary: colors.gray600, - primaryLight: colors.gray30, - primaryDark: colors.gray950, - primaryLinear: 'linear-gradient(rgba(63, 63, 71, 0.3) 0%, rgba(63, 63, 71, 1) 45%, rgba(63, 63, 71, 0.3) 100%)', + primary: '#5BA3FF', + primaryLight: 'rgba(143, 192, 255, 0.08)', + primaryDark: '#5292E5', + primaryLinear: 'linear-gradient(rgba(91, 163, 255, 0.3) 0%, rgba(91, 163, 255, 1) 45%, rgba(91, 163, 255, 0.3) 100%)', + // primary: colors.gray600, + // primaryLight: colors.gray30, + // primaryDark: colors.gray950, + // primaryLinear: 'linear-gradient(rgba(63, 63, 71, 0.3) 0%, rgba(63, 63, 71, 1) 45%, rgba(63, 63, 71, 0.3) 100%)', error: colors.error, background: colors.gray950, diff --git a/src/views/SignInPage/components/SignInInfo/index.tsx b/src/views/SignInPage/components/SignInInfo/index.tsx index 3a01d74e..35e22415 100644 --- a/src/views/SignInPage/components/SignInInfo/index.tsx +++ b/src/views/SignInPage/components/SignInInfo/index.tsx @@ -27,7 +27,7 @@ const SignInInfo = () => { }>

- {season}기 {isMakers ? '' : group} 지원서 작성이 처음이라면 ‘새 지원서 작성하기’를 진행해주세요. 이전에 + {season}기 {isMakers ? '' : `${group} `}지원서 작성이 처음이라면 ‘새 지원서 작성하기’를 진행해주세요. 이전에 지원서를 제출한 적이 있더라도 새 지원서를 작성해야 해요.

diff --git a/src/views/dialogs/SubmitDialog/style.css.ts b/src/views/dialogs/SubmitDialog/style.css.ts index 6604fcbe..62de2cd1 100644 --- a/src/views/dialogs/SubmitDialog/style.css.ts +++ b/src/views/dialogs/SubmitDialog/style.css.ts @@ -179,17 +179,17 @@ export const checkmark = style({ /* 체크되었을 때 배경색 */ [`${checkboxWrapper} input:checked ~ &`]: { - border: `1px solid ${colors.gray600}`, - backgroundColor: colors.gray600, - // border: `1px solid #BDEC00`, - // backgroundColor: '#BDEC00', + // border: `1px solid ${colors.gray600}`, + // backgroundColor: colors.gray600, + border: `1px solid #3C92FF`, + backgroundColor: '#3C92FF', }, [`${checkboxWrapper} input:checked:hover ~ &`]: { - border: `1px solid ${colors.gray950}`, - backgroundColor: colors.gray950, - // border: `1px solid #99BF00`, - // backgroundColor: '#99BF00', + // border: `1px solid ${colors.gray950}`, + // backgroundColor: colors.gray950, + border: `1px solid #3683E5`, + backgroundColor: '#3683E5', }, /* 체크되면 체크마크 보이게 하기 */ @@ -212,8 +212,8 @@ export const checkmark = style({ /* focus-visible 속성 */ [`${checkboxWrapper} input:focus-visible ~ &`]: { - outline: `2px dotted ${colors.gray600}`, - // outline: `2px dotted #BDEC00`, + // outline: `2px dotted ${colors.gray600}`, + outline: `2px dotted #3C92FF`, outlineOffset: 2, }, }, diff --git a/src/views/dialogs/style.css.ts b/src/views/dialogs/style.css.ts index acdda0ce..23f75471 100644 --- a/src/views/dialogs/style.css.ts +++ b/src/views/dialogs/style.css.ts @@ -95,17 +95,17 @@ export const buttonOutside = styleVariants({ buttonOutsideBase, { color: colors.white, - backgroundColor: colors.gray600, - // backgroundColor: '#BDEC00', + // backgroundColor: colors.gray600, + backgroundColor: '#3C92FF', }, ], line: [ buttonOutsideBase, { - color: colors.gray600, - boxShadow: `0 0 0 1px ${colors.gray600}`, - // color: '#BDEC00', - // boxShadow: `0 0 0 1px #BDEC00`, + // color: colors.gray600, + // boxShadow: `0 0 0 1px ${colors.gray600}`, + color: '#3C92FF', + boxShadow: `0 0 0 1px #3C92FF`, }, ], disabled: [ @@ -153,12 +153,12 @@ export const buttonInside = styleVariants({ buttonInsideBase, { color: colors.white, - backgroundColor: colors.gray600, - // backgroundColor: '#BDEC00', + // backgroundColor: colors.gray600, + backgroundColor: '#3C92FF', ':hover': { - backgroundColor: colors.gray950, - // backgroundColor: '#99BF00', + // backgroundColor: colors.gray950, + backgroundColor: '#3683E5', }, selectors: { @@ -174,8 +174,8 @@ export const buttonInside = styleVariants({ line: [ buttonInsideBase, { - color: colors.gray600, - // color: '#BDEC00', + // color: colors.gray600, + color: '#3C92FF', // FIXME: gray20으로 수정해야 함. ':hover': {