sopt-makers · lydiacho · Aug 17, 2024 · Aug 17, 2024 · Aug 17, 2024 · Aug 17, 2024
diff --git a/src/common/assets/MakersDarkLogo.tsx → src/common/assets/MakersLogoDark.tsx b/src/common/assets/MakersDarkLogo.tsx → src/common/assets/MakersLogoDark.tsx
@@ -1,4 +1,4 @@
-const MakersDarkLogo = ({ className }: { className?: string }) => {
+const MakersLogoDark = ({ className }: { className?: string }) => {
   return (
     <svg
       width="87"
@@ -24,4 +24,4 @@ const MakersDarkLogo = ({ className }: { className?: string }) => {
   );
 };
 
-export default MakersDarkLogo;
+export default MakersLogoDark;
diff --git a/src/common/assets/MakersLogo.tsx → src/common/assets/MakersLogoLight.tsx b/src/common/assets/MakersLogo.tsx → src/common/assets/MakersLogoLight.tsx
@@ -1,4 +1,4 @@
-const MakersLogo = ({ className }: { className?: string }) => {
+const MakersLogoLight = ({ className }: { className?: string }) => {
   return (
     <svg
       width="87"
@@ -24,4 +24,4 @@ const MakersLogo = ({ className }: { className?: string }) => {
   );
 };
 
-export default MakersLogo;
+export default MakersLogoLight;
diff --git a/src/common/assets/NowsoptLogo.tsx b/src/common/assets/NowsoptLogo.tsx
diff --git a/src/common/assets/SoptLogoDark.tsx b/src/common/assets/SoptLogoDark.tsx
diff --git a/src/common/assets/SoptLogoLight.tsx b/src/common/assets/SoptLogoLight.tsx
diff --git 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 && (
         <>
           <header className={`${containerVar[isMenuOpen ? 'open' : 'default']} ${containerSizeVer[deviceType]}`}>
             <button onClick={handleClickLogo} style={{ cursor: 'pointer' }}>
-              {isMakers ? (
-                !isMenuOpen && isLight ? (
-                  <MakersLogo className={logoVariant} />
-                ) : (
-                  <MakersDarkLogo className={logoVariant} />
-                )
-              ) : (
-                <NowsoptLogo className={logoVariant} />
-              )}
+              {isMakers ? !isMenuOpen && <MakersLogo className={logoVariant} /> : <SoptLogo className={logoVariant} />}
             </button>
             <Nav isMenuOpen={isMenuOpen} onClickMenuToggle={handleClickMenuToggle} />
           </header>

diff --git 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
@@ -27,7 +27,7 @@ const SignInInfo = () => {
           </Link>
         }>
         <p>
-          {season}기 {isMakers ? '' : group} 지원서 작성이 처음이라면 ‘새 지원서 작성하기’를 진행해주세요. 이전에
+          {season}기 {isMakers ? '' : `${group} `}지원서 작성이 처음이라면 ‘새 지원서 작성하기’를 진행해주세요. 이전에
           지원서를 제출한 적이 있더라도 새 지원서를 작성해야 해요.
         </p>
       </Callout>

diff --git 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
@@ -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': {