1️⃣ 타입 지정 완료

• 구매 목록 조회, 구매 상세 조회 타입 지정
  • OrderData
• 코드 조회 타입 지정
  • CodeData

2️⃣ 공통 컴포넌트 개발

• 진욱

  • 버튼 컴포넌트 개발

    import "./Button.scss";
    
    export interface ButtonProps
      extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      children: React.ReactNode;
      type?: "button" | "submit";
      size?: "xs" | "sm" | "md" | "lg" | "full";
      bgColor?: "primary" | "secondary" | "gray" | "light";
    }
    
    const Button: React.FC<ButtonProps> = ({
      children,
      type = "button",
      size = "sm",
      bgColor = "primary",
      ...rest
    }) => {
      return (
        <button type={type} className={`button ${size} ${bgColor}`} {...rest}>
          {children}
        </button>
      );
    };
    
    export default Button;
    

  • 링크 컴포넌트 개발

    import Link from "next/link";
    import "./Anchor.scss";
    
    interface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
      children: React.ReactNode;
      href: string;
      size?: "xs" | "sm" | "md" | "lg" | "full";
      bgColor?: "primary" | "gray";
    }
    
    const Anchor: React.FC<AnchorProps> = ({
      children,
      size = "full",
      bgColor = "primary",
      href,
    }) => {
      return (
        **<Link className={`anchor ${size} ${bgColor}`} href={href}>
          {children}
        </Link>**
      );
    };
    
    export default Anchor;
    

  • 헤더 컴포넌트 개발

    clamp

    clamp(1rem, 10vw, 2rem);
    

    import Link from "next/link";
    import "./Header.scss";
    
    interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
      type?: "default" | "primary" | "transparent";
    }
    
    const Header: React.FC<HeaderProps> = ({ type = "default" }) => {
      return (
        <header className={`header ${type}Type`}>
          <div className="layout header-contents">
            <div className="header-logo">
              <Link href={`/`}>
                <img src={`img/logo-${type}.svg`} alt="TriFly" />
                <h1 className="hidden">TriFly</h1>
              </Link>
            </div>
    
            <nav className="header-nav">
              <Link href={`/order`}>예약내역</Link>
              <Link href={`/footprint`}>발자국</Link>
            </nav>
    
            <div className="header-user">
              {/* {user ? (
                <button type="button">
                  <img src={`img/icon-logout-${type === "default" ? "black" : "white"}.svg`} alt="로그아웃" />
                  <i className="hidden">로그아웃</i>
                </button>
              ) : (
                <Link href={`/login`}>
                  <img src={`img/icon-login-${type === "default" ? "black" : "white"}.svg`} alt="로그인" />
                  <i className="hidden">로그인</i>
                </Link>
              )} */}
    
              <Link href={`/login`}>
                <img
                  src={`img/icon-login-${type === "default" ? "black" : "white"}.svg`}
                  alt="로그인"
                />
                <i className="hidden">로그인</i>
              </Link>
            </div>
    
            <div className="corner">
              <div className="left"></div>
              <div className="right"></div>
            </div>
          </div>
        </header>
      );
    };
    
    export default Header;
    
    

  • 모달 컴포넌트 개발 중

• 소정
  • 전체 레이아웃 지정
  • 인풋 스타일 지정
  • 로그인 페이지 개발 중
• 희선
  • 푸터 컴포넌트 개발
  • 에러 페이지 개발
  • 로딩 페이지 개발