fix: Recruit Banner, Way 반응형 수정, BreakPoint xsmall 추가

README.md

@@ -1 +1 @@
-# yapp-web
+# YAPP Web

__mocks__/next/image.js

@@ -0,0 +1,4 @@
+  import React from 'react';
+  export default function (props) {
+    return <img {...props} />
+  }

__mocks__/next/link.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function ({ children }) {
+  return <a>{children}</a>;
+}

__mocks__/next/router.js

@@ -0,0 +1,9 @@
+export const useRouter = () => ({
+  route: '/',
+  pathname: '',
+  query: '',
+  asPath: '',
+  prefetch: () => {},
+  push: () => {},
+});
+export default { useRouter };

build.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+cd ../
+mkdir output
+cp -R ./yapp-web/* ./output
+cp -R ./output ./yapp-web/

components/AnimatedBox/index.stories.tsx

@@ -0,0 +1,26 @@
+import { Story, Meta } from '@storybook/react';
+import GridSection from 'pages/components/GridSection';
+
+export default {
+  title: 'YAPP Design System/Component/AnimatedBox',
+  component: GridSection,
+  parameters: {
+    docs: {
+      description: {
+        component: 'AnimatedBox',
+      },
+    },
+  },
+  argTypes: {
+    data: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} as Meta;
+
+const Template: Story = (args) => <GridSection {...args} />;
+
+export const defaultAnimatedBox = Template.bind({});
+defaultAnimatedBox.args = {};

components/AnimatedBox/index.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useCallback, useRef, useState } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import { useSpring, animated } from '@react-spring/web';
+import { Box } from 'components';
+import styled from 'styled-components';
+import media from 'styles/media';
+
+interface AnimatedBox {
+  children: ReactNode;
+  className?: string;
+}
+
+function AnimatedBox({ children, className }: AnimatedBox): ReactElement {
+  const animatedDivRef = useRef(null);
+  const [isIntersect, setIsIntersect] = useState(false);
+
+  const handleIntersect: IntersectionObserverCallback = useCallback(
+    ([entry], observer) => {
+      if (entry.isIntersecting && animatedDivRef.current) {
+        observer.unobserve(animatedDivRef.current); // 한번 observe된 ref 풀기
+        setIsIntersect(true);
+      }
+    },
+    [],
+  );
+
+  const styles = useSpring({
+    config: { mass: 200, tension: 1500, friction: 1000 }, // 질량, 장력, 마찰력
+    from: { opacity: 0, y: 50 }, // 처음 위치
+    to: isIntersect && { opacity: 1, y: 0 }, // 이벤트 시작시 해당 값까지 애니메이션
+  });
+
+  useEffect(() => {
+    let observer: IntersectionObserver;
+    if (animatedDivRef.current) {
+      observer = new IntersectionObserver(handleIntersect, { threshold: 0.3 }); // 이벤트 부여
+      observer.observe(animatedDivRef.current); // observe 시작
+    }
+
+    return () => observer && observer.disconnect();
+  }, [handleIntersect]);
+
+  return (
+    <animated.div ref={animatedDivRef} style={styles}>
+      <StyledBox
+        className={className}
+        width={380}
+        height={268}
+        backgroundColor="white"
+        borderRadius={20}
+      >
+        {children}
+      </StyledBox>
+    </animated.div>
+  );
+}
+
+export default AnimatedBox;
+
+const StyledBox = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  filter: drop-shadow(
+    0px 5px 40px ${({ theme }) => theme.palette.grey_850 + '3'}
+  );
+
+  .title-text {
+    color: ${({ theme }) => theme.palette.grey_500};
+    ${({ theme }) => theme.textStyle.web.Subtitle};
+  }
+  .content-text {
+    ${({ theme }) => theme.textStyle.web.Head}
+  }
+
+  ${media.mobile} {
+    width: 335px;
+    height: 220px;
+
+    .title-text {
+      ${({ theme }) => theme.textStyle.mobile.Subtitle}
+    }
+    .content-text {
+      ${({ theme }) => theme.textStyle.mobile.Head}
+    }
+  }
+`;

components/Box.tsx

@@ -0,0 +1,50 @@
+import React, { ReactElement, ReactNode } from 'react';
+import styled from 'styled-components';
+import theme, { PaletteKeyTypes } from 'styles/theme';
+
+interface IBoxStyle {
+  backgroundColor?: PaletteKeyTypes;
+  width?: number;
+  height?: number;
+  borderRadius?: number;
+  isFullWidth?: boolean;
+}
+
+interface BoxProps extends IBoxStyle {
+  children: ReactNode;
+  className?: string;
+}
+
+function Box({
+  children,
+  className,
+  width = 0,
+  height,
+  backgroundColor = 'grey',
+  borderRadius = 20,
+  ...rest
+}: BoxProps): ReactElement {
+  return (
+    <StyledBox
+      {...rest}
+      width={width}
+      height={height}
+      borderRadius={borderRadius}
+      backgroundColor={backgroundColor}
+      className={className}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+const StyledBox = styled.div<IBoxStyle>`
+  padding: 10px;
+  width: ${({ isFullWidth, width }) => (isFullWidth ? '100%' : `${width}px`)};
+  height: ${({ height }) => height}px;
+  border-radius: ${({ borderRadius }) => borderRadius}px;
+  background-color: ${({ backgroundColor }) =>
+    backgroundColor && theme.palette[backgroundColor]};
+`;
+
+export default Box;

components/Button/index.stories.tsx

@@ -0,0 +1,47 @@
+import { Story, Meta } from '@storybook/react';
+import Button, { ButtonProps } from 'components/Button';
+
+export default {
+  title: 'YAPP Design System/Component/Button',
+  component: Button,
+  parameters: {
+    docs: {
+      description: {
+        component: '홈페이지에 사용되는 모든 버튼',
+      },
+    },
+  },
+  argTypes: {
+    width: {
+      type: 'number',
+    },
+    height: {
+      type: 'number',
+    },
+    hasBorder: { type: 'boolean' },
+    borderRadius: { type: 'number' },
+    className: {
+      table: {
+        disable: true,
+      },
+    },
+    onClick: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} as Meta;
+
+const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+
+export const DefaultButton = Template.bind({});
+
+// Props 전달
+DefaultButton.args = {
+  width: 252,
+  height: 78,
+  buttonColor: 'grey',
+  fontColor: 'white',
+  children: '프로젝트 더보기',
+};

components/Button/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { ReactNode, ReactElement } from 'react';
+import styled, { css } from 'styled-components';
+import media from 'styles/media';
+import { PaletteKeyTypes } from 'styles/theme';
+
+export interface IButtonStyle {
+  width?: number;
+  height?: number;
+  hasBorder?: boolean;
+  borderRadius?: number;
+  buttonColor?: PaletteKeyTypes;
+  borderColor?: PaletteKeyTypes;
+  fontColor?: PaletteKeyTypes;
+}
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    IButtonStyle {
+  children?: ReactNode;
+  className?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+function Button({
+  children,
+  className,
+  onClick,
+  ...rest
+}: ButtonProps): ReactElement {
+  return (
+    <StyledButton className={className} onClick={onClick} {...rest}>
+      {children}
+    </StyledButton>
+  );
+}
+
+const StyledButton = styled.button<IButtonStyle>`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  ${({ width, height }) =>
+    css`
+      width: ${width}px;
+      height: ${height}px;
+    `};
+
+  ${({
+    theme,
+    fontColor = 'black',
+    buttonColor = 'white',
+    hasBorder = false,
+    borderRadius = 150,
+    borderColor = 'white',
+  }) => css`
+    border-radius: ${borderRadius}px;
+    color: ${theme.palette[fontColor]};
+    background-color: ${theme.palette[buttonColor]};
+    border: ${hasBorder ? '1px solid' : 'none'};
+    border-color: ${theme.palette[borderColor]}};
+  `};
+
+  /* Text Style */
+  ${({ theme }) => theme.textStyle.web.Button}
+  ${media.mobile} {
+    ${({ theme }) => theme.textStyle.mobile.Button}
+  }
+`;
+
+export default Button;

components/Carousel/index.stories.tsx

@@ -0,0 +1,29 @@
+import { Story, Meta } from '@storybook/react';
+import Carousel, { CarouselProps } from 'components/Carousel';
+import { CAROUSEL_DATA } from 'database/home';
+
+export default {
+  title: 'YAPP Design System/Component/Carousel',
+  component: Carousel,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Carousel',
+      },
+    },
+  },
+  argTypes: {
+    data: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} as Meta;
+
+const Template: Story<CarouselProps> = (args) => (
+  <Carousel {...args} data={CAROUSEL_DATA} />
+);
+
+export const defaultCarousel = Template.bind({});
+defaultCarousel.args = {};