[FE-Feat] 에러페이지 마크업, 버튼 컴포넌트 다형성 리팩터링

frontend/src/components/Button/Button.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof Button> = {
   title: 'Components/Button',
   component: Button,
   argTypes: {
-    type: {
+    variant: {
       control: { type: 'radio' },
       options: ['primary', 'secondary', 'destructive', 're'],
     },

frontend/src/components/Button/index.css.ts

@@ -10,7 +10,7 @@ export const containerStyle = recipe({
     cursor: 'pointer',
   },
   variants: {
-    type: {
+    variant: {
       primary: {
         color: vars.color.Ref.Primary[500],
       },
@@ -62,7 +62,7 @@ export const containerStyle = recipe({
   compoundVariants: [
     {
       variants: {
-        type: 'primary',
+        variant: 'primary',
         style: 'filled',
       },
       style: {
@@ -71,7 +71,7 @@ export const containerStyle = recipe({
     },
     {
       variants: {
-        type: 'primary',
+        variant: 'primary',
         style: 'weak',
       },
       style: {
@@ -80,7 +80,7 @@ export const containerStyle = recipe({
     },
     {
       variants: {
-        type: 'primary',
+        variant: 'primary',
         style: 'outline',
       },
       style: {
@@ -89,7 +89,7 @@ export const containerStyle = recipe({
     },
     {
       variants: {
-        type: 'secondary',
+        variant: 'secondary',
         style: 'filled',
       },
       style: {
@@ -98,7 +98,7 @@ export const containerStyle = recipe({
     },
     {
       variants: {
-        type: 'secondary',
+        variant: 'secondary',
         style: 'weak',
       },
       style: {
@@ -107,7 +107,7 @@ export const containerStyle = recipe({
     },
     {
       variants: {
-        type: 'secondary',
+        variant: 'secondary',
         style: 'outline',
       },
       style: {
@@ -117,7 +117,7 @@ export const containerStyle = recipe({
     },
     {
       variants: {
-        type: 'secondary',
+        variant: 'secondary',
         style: 'borderless',
       },
       style: {
@@ -126,7 +126,7 @@ export const containerStyle = recipe({
     },
     {
       variants: {
-        type: 'destructive',
+        variant: 'destructive',
         style: 'filled',
       },
       style: {
@@ -135,7 +135,7 @@ export const containerStyle = recipe({
     },
     {
       variants: {
-        type: 'destructive',
+        variant: 'destructive',
         style: 'weak',
       },
       style: {
@@ -144,7 +144,7 @@ export const containerStyle = recipe({
     },
     {
       variants: {
-        type: 're',
+        variant: 're',
         style: 'filled',
       },
       style: {
@@ -153,7 +153,7 @@ export const containerStyle = recipe({
     },
     {
       variants: {
-        type: 're',
+        variant: 're',
         style: 'outline',
       },
       style: {
@@ -175,7 +175,7 @@ export const containerStyle = recipe({
     },
   ],
   defaultVariants: {
-    type: 'primary',
+    variant: 'primary',
     style: 'filled',
     size: 'md',
     radius: 'max',

frontend/src/components/Button/index.tsx

@@ -1,13 +1,22 @@
-import type { JSX, MouseEventHandler } from 'react';
+import type { 
+  ComponentPropsWithoutRef, 
+  ElementType, 
+  JSX, 
+  MouseEventHandler,
+} from 'react';
 
 import clsx from '@/utils/clsx';
 
 import ButtonIcon from './ButtonIcon';
 import ButtonText from './ButtonText';
 import { containerStyle } from './index.css';
 
+type AsProp<T extends ElementType = 'button'> = {
+  as?: T;
+};
+
 export interface ButtonProps {
-  type?: 'primary' | 'secondary' | 'destructive' | 're';
+  variant?: 'primary' | 'secondary' | 'destructive' | 're';
   style?: 'weak' | 'filled' | 'outline' | 'borderless';
   radius?: 'max' | 'roundCorner';
   size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -18,8 +27,9 @@ export interface ButtonProps {
   className?: string;
 }
 
-const Button = ({
-  type = 'primary',
+const Button = <T extends ElementType = 'button'>({
+  as,
+  variant = 'primary',
   style = 'filled',
   radius = 'roundCorner',
   size = 'md',
@@ -28,15 +38,19 @@ const Button = ({
   onClick,
   children,
   className,
-}: ButtonProps) => (
-  <button 
-    className={clsx(containerStyle({ type, style, radius, size }), className)}
-    onClick={onClick}
-  >
-    {leftIcon && <ButtonIcon size={size}>{leftIcon}</ButtonIcon>}
-    <ButtonText size={size}>{children}</ButtonText>
-    {rightIcon && <ButtonIcon size={size}>{rightIcon}</ButtonIcon>}
-  </button>
-);
+}: AsProp<T> & ComponentPropsWithoutRef<T> & ButtonProps) => {
+  const Component = as || 'button';
+
+  return(
+    <Component 
+      className={clsx(containerStyle({ variant, style, radius, size }), className)}
+      onClick={onClick}
+    >
+      {leftIcon && <ButtonIcon size={size}>{leftIcon}</ButtonIcon>}
+      <ButtonText size={size}>{children}</ButtonText>
+      {rightIcon && <ButtonIcon size={size}>{rightIcon}</ButtonIcon>}
+    </Component>
+  );
+};
 
 export default Button;

frontend/src/components/Calendar/Core/TimeControlButton.tsx

@@ -34,7 +34,7 @@ export const TimeControlButton = ({ type }: { type: 'prev' | 'next' | 'today' })
           aria-label='오늘'
           onClick={handleClickToday}
           style='outline'
-          type='secondary'
+          variant='secondary'
         >
           오늘
         </Button>

frontend/src/components/SegmentControl/index.tsx

@@ -36,7 +36,7 @@ const SegmentControl = ({
       {options.map((option) => {
         const isSelected = option.value === selectedValue;
         const buttonStyles: ButtonProps = {
-          type: 'secondary',
+          variant: 'secondary',
           radius: 'max',
           size: 'lg',
           style: getButtonStyle(isSelected, style), 

frontend/src/routes/@components/ErrorPage/index.tsx

@@ -0,0 +1,40 @@
+import { Link } from '@tanstack/react-router';
+
+import Button from '@/components/Button';
+import { Flex } from '@/components/Flex';
+import { Text } from '@/components/Text';
+import { vars } from '@/theme/index.css';
+
+const ErrorPage = () => (
+  <Flex
+    align='center'
+    direction='column'
+    gap={700}
+    height='100vh'
+  >
+    <img
+      alt='에러를 나타내는 이미지'
+      height={180}
+      src='/images/assets/error.webp'
+      width={180}
+    />
+    <Flex
+      align='center'
+      direction='column'
+      gap={300}
+    >
+      <Text color={vars.color.Ref.Netural[800]} typo='h3'>유효하지 않은 링크입니다.</Text>
+      <Text color={vars.color.Ref.Netural[500]} typo='b2M'>링크가 삭제되거나 변경되었어요.</Text>
+    </Flex>
+    <Button
+      as={Link}
+      size='lg'
+      style='weak'
+      to='/'
+    >
+      홈으로
+    </Button>
+  </Flex>
+);
+
+export default ErrorPage;

frontend/src/routes/__root.tsx

@@ -3,6 +3,8 @@ import { lazy } from 'react';
 
 import { defaultENV } from '@/envconfig';
 
+import ErrorPage from './@components/ErrorPage';
+
 const TanStackRouterDevtools =
   defaultENV.MODE === 'production'
     ? () => null
@@ -19,4 +21,5 @@ export const Route = createRootRoute({
       <TanStackRouterDevtools />
     </>
   ),
+  notFoundComponent: ErrorPage,
 });

frontend/src/routes/landing/@components/index.css.ts

@@ -5,10 +5,17 @@ import { fontFamilies, fontWeights } from '@/theme/typo';
 
 export const containerStyle = style({
   width: '100vw',
-  minHeight: '100vh',
+  height: '100vh',
   padding: '0 1.75rem',
 
   background: 'linear-gradient(180deg, #B1F8FA8A 0%, #3182F610 98%)',
+  overflow: 'hidden',
+
+  '@media': {
+    '(max-width: 1024px)': {
+      overflowY: 'scroll',
+    },
+  },
 });
 
 export const titleStyle = style({
@@ -63,8 +70,8 @@ export const imageWrapperStyle = style({
 });
 
 export const imageStyle = style({
-  width: '50%',
-  maxHeight: '29.8rem',
+  width: `calc(50%-${vars.spacing[300]})`,
+  maxHeight: '28rem',
 
   objectFit: 'cover',
 

frontend/src/routes/my-schedule/@components/SchedulePopover/PopoverButton.tsx

@@ -21,7 +21,7 @@ export const PopoverButton = ({ type, ...handlers }: PopoverButtonProps)=>(
         className={buttonStyle}
         onClick={handlers.onClickDelete}
         style='weak'
-        type='destructive'
+        variant='destructive'
       >
         삭제
       </Button>

frontend/src/theme/font.ts

@@ -13,7 +13,7 @@ import {
 export const font = {
   H1: {
     fontFamily: fontFamilies['pretendard'],
-    fontWeight: fontWeights['pretendard-0'],
+    fontWeight: fontWeights.bold,
     lineHeight: lineHeights['0'],
     fontSize: fontSize['6'],
     letterSpacing: letterSpacing['0'],
@@ -24,7 +24,7 @@ export const font = {
   },
   H2: {
     fontFamily: fontFamilies['pretendard'],
-    fontWeight: fontWeights['pretendard-0'],
+    fontWeight: fontWeights.bold,
     lineHeight: lineHeights['1'],
     fontSize: fontSize['5'],
     letterSpacing: letterSpacing['0'],
@@ -35,7 +35,7 @@ export const font = {
   },
   H3: {
     fontFamily: fontFamilies['pretendard'],
-    fontWeight: fontWeights['pretendard-1'],
+    fontWeight: fontWeights['pretendard-0'],
     lineHeight: lineHeights['2'],
     fontSize: fontSize['4'],
     letterSpacing: letterSpacing['1'],

frontend/src/theme/reset.css.ts

@@ -20,13 +20,13 @@ globalStyle('*, *::before, *::after', {
   },
 });
 
-globalStyle('html, body, #root, #page', {
+globalStyle('html, body', {
   '@layer': {
     reset: {
       width: '100vw',
       height: '100vh',
 
-      position: 'fixed',
+      position: 'absolute',
       left: 0,
       top: 0,
     },

frontend/src/theme/typo.ts

@@ -12,6 +12,7 @@ export const lineHeights = {
   7: '1.375rem',
 };
 export const fontWeights = {
+  bold: 700,
   'pretendard-0': 600,
   'pretendard-1': 500,
   'pretendard-2': 400,