Merge pull request #8 from KUSITMS-29th-TEAM-D/feat/#3/top-nav

[FEAT] Top-Nav 구현

src/components/common/PlainButton.tsx

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components';
+
+type PlainButtonVariant = 'primary' | 'gray';
+
+interface PlainButtonProps {
+  children: React.ReactNode;
+  variant: PlainButtonVariant;
+  width?: string | null;
+  height?: string | null;
+  onClick?: () => void;
+}
+
+interface StyledButtonProps {
+  $variant: PlainButtonVariant;
+  $width: string | null;
+  $height: string | null;
+}
+
+export const PlainButton = ({
+  children,
+  variant,
+  width = null,
+  height = null,
+  onClick,
+}: PlainButtonProps) => {
+  return (
+    <StyledButton $variant={variant} $width={width} $height={height} onClick={onClick}>
+      {children}
+    </StyledButton>
+  );
+};
+
+const getVariantStyle = ($variant: PlainButtonVariant) => {
+  switch ($variant) {
+    case 'gray':
+      return css`
+        color: ${(props) => props.theme.color.white};
+        background: ${(props) => props.theme.color.gray800};
+
+        &:hover {
+          background: ${(props) => props.theme.color.gray700};
+        }
+      `;
+
+    case 'primary':
+      return css`
+        color: ${(props) => props.theme.color.primary700};
+        background: ${(props) => props.theme.color.primary50};
+
+        &:hover {
+          background: ${(props) => props.theme.color.primary100};
+        }
+      `;
+  }
+};
+
+const StyledButton = styled.button<StyledButtonProps>`
+  ${({ theme }) => theme.font.desktop.label1m};
+
+  width: ${({ $width }) => $width};
+  height: ${({ $height }) => $height};
+  padding: 8px 24px;
+  border-radius: 8px;
+
+  ${({ $variant }) => getVariantStyle($variant)}
+`;

src/components/common/SideNavigation.tsx

@@ -0,0 +1,123 @@
+import { useEffect } from 'react';
+
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { ReactComponent as ArrowIcon } from '@/assets/icons/arrowRight.svg';
+import { ReactComponent as CloseIcon } from '@/assets/icons/close.svg';
+import { PlainButton } from '@/components/common/PlainButton';
+import { NAVIGATION_MENU } from '@/constants/navigation';
+
+interface SideNavigationProps {
+  isLoggedIn: boolean;
+  setOpen: (show: boolean) => void;
+}
+
+export const SideNavigation = ({ isLoggedIn, setOpen }: SideNavigationProps) => {
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, []);
+
+  return (
+    <StyledContainer>
+      <StyledContent>
+        <StyledMenuButtonList>
+          <button className="close-button" onClick={() => setOpen(false)}>
+            <CloseIcon />
+          </button>
+          {NAVIGATION_MENU.map((item) => (
+            <Link to={item.path} className="menu-button" key={item.menu}>
+              <span>{item.menu}</span>
+              <ArrowIcon />
+            </Link>
+          ))}
+        </StyledMenuButtonList>
+        <StyledUserButtonList>
+          {/* TODO: 각 페이지 path로 이동하도록 click 핸들러 추가 */}
+          {isLoggedIn ? (
+            <>
+              <PlainButton variant="primary" height="48px">
+                마이페이지
+              </PlainButton>
+              <PlainButton variant="gray" height="48px">
+                로그아웃
+              </PlainButton>
+            </>
+          ) : (
+            <PlainButton variant="gray" height="48px">
+              로그인
+            </PlainButton>
+          )}
+        </StyledUserButtonList>
+      </StyledContent>
+    </StyledContainer>
+  );
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+
+  width: 100%;
+  height: 100vh;
+
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  background: ${({ theme }) => theme.color.bgModal};
+`;
+
+const StyledContent = styled.nav`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  width: 320px;
+  height: 100%;
+
+  background: ${({ theme }) => theme.color.white};
+`;
+
+const StyledMenuButtonList = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  .close-button {
+    margin: 16px 20px 16px auto;
+  }
+
+  .menu-button {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 12px 16px 12px 32px;
+    background: ${({ theme }) => theme.color.white};
+
+    span {
+      ${({ theme }) => theme.font.mobile.title1};
+      color: ${({ theme }) => theme.color.gray800};
+    }
+
+    svg {
+      margin: 12px;
+    }
+
+    &:hover {
+      background: ${({ theme }) => theme.color.gray100};
+    }
+  }
+`;
+
+const StyledUserButtonList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  padding: 20px 32px;
+`;

src/components/common/SmallButton.tsx

@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components';
+
+interface SmallButtonProps {
+  children: React.ReactNode;
+  filled?: boolean;
+  width?: string | null;
+  onClick?: () => void;
+}
+
+interface StyledButtonProps {
+  $filled: boolean;
+  $width: string | null;
+}
+
+export const SmallButton = ({
+  children,
+  filled = false,
+  width = null,
+  onClick,
+}: SmallButtonProps) => {
+  return (
+    <StyledButton $filled={filled} $width={width} onClick={onClick}>
+      {children}
+    </StyledButton>
+  );
+};
+
+const StyledButton = styled.button<StyledButtonProps>`
+  ${({ theme }) => theme.font.desktop.body2m};
+
+  width: ${({ $width }) => $width};
+  padding: 8px 24px;
+  border-radius: 8px;
+
+  ${(props) =>
+    props.$filled
+      ? css`
+          color: ${props.theme.color.white};
+          background: ${props.theme.color.gray800};
+
+          &:hover {
+            background: ${props.theme.color.gray700};
+          }
+        `
+      : css`
+          color: ${props.theme.color.gray800};
+          background: transparent;
+
+          &:hover {
+            color: ${props.theme.color.primary600};
+          }
+        `}
+`;