Merge pull request #380 from sopt-makers/develop

[Deploy] 모바일 접속 미지원 해제 및 일부 반응형 작업 배포

src/common/assets/MakersDarkLogo.tsx

@@ -1,6 +1,12 @@
-const MakersDarkLogo = () => {
+const MakersDarkLogo = ({ className }: { className?: string }) => {
   return (
-    <svg width="87" height="31" viewBox="0 0 87 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="87"
+      height="31"
+      viewBox="0 0 87 31"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}>
       <g clipPath="url(#clip0_2501_966)">
         <path
           fillRule="evenodd"

src/common/assets/MakersLogo.tsx

@@ -1,6 +1,12 @@
-const MakersLogo = () => {
+const MakersLogo = ({ className }: { className?: string }) => {
   return (
-    <svg width="87" height="30" viewBox="0 0 87 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="87"
+      height="30"
+      viewBox="0 0 87 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}>
       <g clipPath="url(#clip0_2311_4700)">
         <path
           fillRule="evenodd"

src/common/assets/NowsoptLogo.tsx

@@ -1,6 +1,12 @@
-const NowsoptLogo = () => {
+const NowsoptLogo = ({ className }: { className?: string }) => {
   return (
-    <svg width="87" height="30" viewBox="0 0 87 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="87"
+      height="30"
+      viewBox="0 0 87 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}>
       <g id="Frame" clipPath="url(#clip0_1535_12708)">
         <g id="Group">
           <path

src/common/components/Input/components/InputTheme/index.tsx

@@ -142,7 +142,10 @@ export const TextBox이메일 = ({
   return (
     <TextBox label="이메일" name="email" required>
       <InputLine
-        style={{ width: 308, paddingRight: isActive ? 50 : 16 }}
+        style={{
+          width: DEVICE_TYPE === 'DESK' ? 308 : DEVICE_TYPE === 'TAB' ? 246 : 208,
+          paddingRight: isActive ? 50 : 16,
+        }}
         name="email"
         placeholder="이메일을 입력해주세요."
         type="email"
@@ -158,7 +161,7 @@ export const TextBox이메일 = ({
         <Timer isActive={isActive} onResetTimer={handleResetTimer} />
       </InputLine>
       <InputLine
-        style={{ width: 308 }}
+        style={{ width: DEVICE_TYPE === 'DESK' ? 308 : DEVICE_TYPE === 'TAB' ? 246 : 208 }}
         id="verification-code"
         readOnly={!isActive}
         name="code"

src/common/components/Layout/components/Header/MenuItem/index.tsx → src/common/components/Layout/components/Header/Nav/MenuItem/index.tsx

@@ -1,7 +1,9 @@
 import { track } from '@amplitude/analytics-browser';
 import { NavLink } from 'react-router-dom';
 
-import { menuItem, menuLink } from './style.css';
+import { useDevice } from '@hooks/useDevice';
+
+import { menuItemVar, menuLinkVar } from './style.css';
 
 interface MenuItemProps {
   text: string;
@@ -13,18 +15,20 @@ interface MenuItemProps {
 }
 
 const MenuItem = ({ text, path, target, amplitudeId, className, onClick }: MenuItemProps) => {
+  const DEVICE_TYPE = useDevice();
+
   return (
-    <li className={`${className} ${menuItem}`}>
+    <li className={`${className} ${menuItemVar[DEVICE_TYPE]}`}>
       {path ? (
         <NavLink
           to={path}
-          className={menuLink}
+          className={menuLinkVar[DEVICE_TYPE]}
           onClick={() => (amplitudeId ? track(amplitudeId) : null)}
           target={target}>
           {text}
         </NavLink>
       ) : (
-        <p className={`${onClick ? menuLink : null}`} onClick={onClick}>
+        <p className={`${onClick ? menuLinkVar[DEVICE_TYPE] : null}`} onClick={onClick}>
           {text}
         </p>
       )}

src/common/components/Layout/components/Header/Nav/MenuItem/style.css.ts

@@ -0,0 +1,75 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+
+import { theme } from 'styles/theme.css';
+
+const menuItem = style({
+  ...theme.font.HEADING_6_18_B,
+});
+
+export const menuItemVar = styleVariants({
+  DESK: [
+    menuItem,
+    {
+      color: theme.color.baseText,
+    },
+  ],
+  TAB: [
+    menuItem,
+    {
+      color: theme.color.grayButtonFill,
+    },
+  ],
+  MOB: [
+    menuItem,
+    {
+      color: theme.color.grayButtonFill,
+    },
+  ],
+});
+
+const menuLink = style({
+  textDecoration: `underline transparent 2px`,
+  textUnderlineOffset: 21,
+  transition: 'all 0.2s ease-out',
+  cursor: 'pointer',
+});
+
+export const menuLinkVar = styleVariants(
+  {
+    DESK: {
+      hover: {
+        textDecorationColor: theme.color.primary,
+      },
+      active: {
+        color: theme.color.primary,
+      },
+    },
+    TAB: {
+      hover: {
+        color: theme.color.whiteButtonFill,
+      },
+      active: {
+        color: theme.color.whiteButtonFill,
+        fontWeight: 'bolder',
+      },
+    },
+    MOB: {
+      hover: {
+        color: theme.color.whiteButtonFill,
+      },
+      active: {
+        color: theme.color.whiteButtonFill,
+        fontWeight: 'bolder',
+      },
+    },
+  },
+  ({ hover, active }) => [
+    menuLink,
+    {
+      selectors: {
+        '&:hover:not([disabled])': hover,
+        '&.active': active,
+      },
+    },
+  ],
+);

src/common/components/Layout/components/Header/Nav/MenuList/index.tsx

@@ -0,0 +1,73 @@
+import { reset, track } from '@amplitude/analytics-browser';
+import { useContext, useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { useDevice } from '@hooks/useDevice';
+import { RecruitingInfoContext } from '@store/recruitingInfoContext';
+
+import { dimmedBgVar, menuContainerVar, menuList, menuMobListVar } from './style.css';
+import { MENU_ITEMS, MENU_ITEMS_MAKERS } from '../../contants';
+import MenuItem from '../MenuItem';
+
+const MenuList = ({ isMenuOpen, onClickMenuToggle }: { isMenuOpen?: boolean; onClickMenuToggle?: () => void }) => {
+  const DEVICE_TYPE = useDevice();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const [isShown, setIsShown] = useState(isMenuOpen);
+  const [animation, setAnimation] = useState<'open' | 'close'>(isMenuOpen ? 'open' : 'close');
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      setIsShown(true);
+      setAnimation('open');
+    } else {
+      setAnimation('close');
+      const timer = setTimeout(() => setIsShown(false), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isMenuOpen]);
+
+  const isSignedIn = localStorage.getItem('soptApplyAccessToken');
+
+  const {
+    recruitingInfo: { name, isMakers },
+  } = useContext(RecruitingInfoContext);
+  const menuItems = isMakers ? MENU_ITEMS_MAKERS : MENU_ITEMS;
+  const handleLogout = () => {
+    track('click-gnb-logout');
+    reset();
+    localStorage.removeItem('soptApplyAccessToken');
+    localStorage.removeItem('soptApplyAccessTokenExpiredTime');
+    pathname === '/' ? window.location.reload() : navigate('/');
+  };
+
+  if (onClickMenuToggle && !isShown) return null;
+
+  return (
+    <nav>
+      <ul
+        className={DEVICE_TYPE !== 'DESK' ? `${menuMobListVar[DEVICE_TYPE]} ${menuContainerVar[animation]}` : menuList}>
+        {!isSignedIn && (
+          <>
+            {menuItems.map(({ text, path, target, amplitudeId }) => (
+              <MenuItem key={text} text={text} path={path} target={target} amplitudeId={amplitudeId} />
+            ))}
+            <MenuItem key="로그인" text="로그인" path="/" amplitudeId="click-gnb-signin" />
+          </>
+        )}
+        {isSignedIn && name && (
+          <>
+            {menuItems.map(({ text, path, target, amplitudeId }) => (
+              <MenuItem key={text} text={text} path={path} target={target} amplitudeId={amplitudeId} />
+            ))}
+            <MenuItem key="로그아웃" text="로그아웃" onClick={handleLogout} />
+            <MenuItem key="로그인완료" text={`${name}님`} className="amp-block" />
+          </>
+        )}
+      </ul>
+      {onClickMenuToggle && isShown && <div className={dimmedBgVar[animation]} onClick={onClickMenuToggle} />}
+    </nav>
+  );
+};
+
+export default MenuList;

src/common/components/Layout/components/Header/Nav/MenuList/style.css.ts

@@ -0,0 +1,75 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+
+import { Z_INDEX } from '@constants/zIndex';
+import { fadeIn, fadeInDown, fadeOut, fadeOutUp } from 'styles/animation.css';
+import { theme } from 'styles/theme.css';
+
+export const menuContainerVar = styleVariants({
+  open: {
+    animation: `${fadeInDown} 0.3s`,
+  },
+  close: {
+    animation: `${fadeOutUp} 0.3s`,
+    animationFillMode: 'forwards',
+  },
+});
+export const menuList = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 40,
+});
+
+const menuMobList = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 18,
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: '100%',
+  backgroundColor: theme.color.blackBackground,
+  zIndex: Z_INDEX.gnbMenu,
+});
+
+export const menuMobListVar = styleVariants({
+  TAB: [
+    menuMobList,
+    {
+      padding: '92px 40px 40px 40px',
+    },
+  ],
+  MOB: [
+    menuMobList,
+    {
+      padding: '86px 20px 36px 20px',
+    },
+  ],
+});
+
+export const dimmedBg = style({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100dvh',
+  backgroundColor: theme.color.backgroundDimmed,
+  zIndex: Z_INDEX.gnbBg,
+
+  cursor: 'pointer',
+});
+
+export const dimmedBgVar = styleVariants({
+  open: [
+    dimmedBg,
+    {
+      animation: `${fadeIn} 0.3s`,
+    },
+  ],
+  close: [
+    dimmedBg,
+    {
+      animation: `${fadeOut} 0.3s`,
+      animationFillMode: 'forwards',
+    },
+  ],
+});

src/common/components/Layout/components/Header/Nav/index.tsx

@@ -0,0 +1,24 @@
+import { IconMenu, IconXClose } from '@sopt-makers/icons';
+import { useContext } from 'react';
+
+import { useDevice } from '@hooks/useDevice';
+import { ThemeContext } from '@store/themeContext';
+import { theme } from 'styles/theme.css';
+
+import MenuList from './MenuList';
+import { menuIconVar } from './style.css';
+
+const Nav = ({ isMenuOpen, onClickMenuToggle }: { isMenuOpen: boolean; onClickMenuToggle: () => void }) => {
+  const DEVICE_TYPE = useDevice();
+  const { isLight } = useContext(ThemeContext);
+
+  return DEVICE_TYPE !== 'DESK' ? (
+    <i className={menuIconVar[DEVICE_TYPE]} onClick={onClickMenuToggle}>
+      {isMenuOpen ? <IconXClose /> : <IconMenu color={isLight ? 'currentColor' : theme.color.white} />}
+    </i>
+  ) : (
+    <MenuList />
+  );
+};
+
+export default Nav;