[27기] 27기 모집 전 공식 웹 수정 사항 반영 (#197)

Author: gonn-i

.github/workflows/storybook-chromatic-action.yml

@@ -4,13 +4,21 @@ import { useSpring, animated } from '@react-spring/web';
 import { Box } from 'components/common';
 import styled from 'styled-components';
 import media from 'styles/media';
+import { PaletteKeyTypes } from 'styles/theme';
 
 export interface AnimatedBoxProps {
   children: ReactNode;
   className?: string;
+  color: PaletteKeyTypes;
+  fontColor: PaletteKeyTypes;
 }
 
-function AnimatedBox({ children, className }: AnimatedBoxProps): ReactElement {
+function AnimatedBox({
+  children,
+  className,
+  color,
+  fontColor,
+}: AnimatedBoxProps): ReactElement {
   const animatedDivRef = useRef(null);
   const [isIntersect, setIsIntersect] = useState(false);
 
@@ -44,9 +52,8 @@ function AnimatedBox({ children, className }: AnimatedBoxProps): ReactElement {
     <animated.div ref={animatedDivRef} style={styles}>
       <StyledBox
         className={className}
-        width={380}
-        height={268}
-        backgroundColor="white"
+        backgroundColor={color}
+        fontColor={fontColor}
         borderRadius={20}
       >
         {children}
@@ -57,33 +64,25 @@ function AnimatedBox({ children, className }: AnimatedBoxProps): ReactElement {
 
 export default AnimatedBox;
 
-const StyledBox = styled(Box)`
+const StyledBox = styled.section<{
+  backgroundColor: PaletteKeyTypes;
+  fontColor: PaletteKeyTypes;
+  borderRadius: number;
+}>`
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  flex-direction: row;
+  justify-content: space-between;
   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}
-  }
+  padding: 20px 24px;
+  width: auto;
+  min-width: 195px;
+  border-radius: ${({ borderRadius }) => borderRadius}px;
+  background-color: ${({ theme, backgroundColor }) =>
+    backgroundColor && theme.palette[backgroundColor]};
+  color: ${({ theme, fontColor }) => fontColor && theme.palette[fontColor]};
 
   ${media.mobile} {
-    width: 335px;
-    height: 220px;
-
-    .title-text {
-      ${({ theme }) => theme.textStyle.mobile.Subtitle}
-    }
-    .content-text {
-      ${({ theme }) => theme.textStyle.mobile.Head}
-    }
+    width: auto;
+    height: 120px;
   }
 `;

pages/_middleware.ts _middleware.tspages/_middleware.ts renamed to _middleware.ts

@@ -31,49 +31,29 @@ const Template: Story<AnimatedButtonProps> = (args) => (
 export const PrimaryAnimatedButton = Template.bind({});
 
 PrimaryAnimatedButton.args = {
-  width: 190,
-  height: 65,
-  fontColor: 'white',
-  buttonColor: 'orange_400',
   className: 'recruitButton',
   buttonText: '21기에서 만나요!',
 };
 
 export const SecondaryAnimatedButton = Template.bind({});
 
 SecondaryAnimatedButton.args = {
-  width: 190,
-  height: 65,
-  fontColor: 'black',
-  buttonColor: 'grey_850',
-  borderColor: 'lightGrey',
   className: 'recruitButton',
   buttonText: '21기에서 만나요!',
-  variant: 'secondary',
+  variant: 'black',
 };
 
 export const DisabledAnimatedButton = Template.bind({});
 
 DisabledAnimatedButton.args = {
-  width: 190,
-  height: 65,
-  fontColor: 'black',
-  buttonColor: 'grey_850',
-  borderColor: 'lightGrey',
-  className: 'recruitButton',
   buttonText: '21기에서 만나요!',
-  variant: 'secondary',
+  variant: 'primary',
   disabled: true,
 };
 
 export const SmallSizeAnimatedButton = Template.bind({});
 
 SmallSizeAnimatedButton.args = {
-  width: 120,
-  height: 50,
-  fontColor: 'black',
-  buttonColor: 'grey_850',
-  borderColor: 'lightGrey',
-  className: 'recruitButton',
+  variant: 'primary',
   buttonText: '지원하기',
 };

components/common/AnimatedBox/index.tsx

@@ -3,26 +3,22 @@ import media from 'styles/media';
 import { slideIn, slideOut } from 'styles/utils-styles';
 import Button, { ButtonProps } from '../Button';
 
-export type AnimatedButtonVariant = 'primary' | 'secondary';
+export type AnimatedButtonVariant = 'primary' | 'black';
 
 export interface AnimatedButtonProps extends ButtonProps {
-  width: number;
-  height: number;
   buttonText: string;
   href?: string;
-  variant?: AnimatedButtonVariant;
+  variant: AnimatedButtonVariant;
 }
 
 function AnimatedButton({
-  width,
-  height,
   buttonText,
   href,
   variant = 'primary',
   ...rest
 }: AnimatedButtonProps) {
   return (
-    <ButtonStyled width={width} height={height} variant={variant} {...rest}>
+    <ButtonStyled variant={variant} {...rest}>
       {/* <svg
         width={`${width + 2}px`}
         height={`${height}px`}

components/common/AnimatedButton/index.stories.tsx

@@ -1,10 +1,11 @@
 import type { ReactElement, ReactNode } from 'react';
 import styled from 'styled-components';
 import media from 'styles/media';
-import { PaletteKeyTypes } from 'styles/theme';
+import { PaletteKeyTypes, TextStyleV2Types } from 'styles/theme';
 
 interface IBadgeStyle {
   backgroundColor?: PaletteKeyTypes;
+  typoColor?: PaletteKeyTypes;
 }
 
 interface BadgeProps extends IBadgeStyle {
@@ -16,10 +17,15 @@ function Badge({
   className,
   children,
   backgroundColor = 'grey_100',
+  typoColor = 'black_60',
 }: BadgeProps): ReactElement {
   return (
-    <StyledBadge className={className} backgroundColor={backgroundColor}>
-      {children}기
+    <StyledBadge
+      className={className}
+      backgroundColor={backgroundColor}
+      typoColor={typoColor}
+    >
+      {children}
     </StyledBadge>
   );
 }
@@ -28,16 +34,14 @@ const StyledBadge = styled.div<IBadgeStyle>`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 59px;
-  height: 37px;
-  border-radius: 20px;
-  color: ${({ theme }) => theme.palette.grey_1000};
+  padding: 2px 8px;
+  border-radius: 4px;
   background-color: ${({ theme, backgroundColor }) =>
     backgroundColor && theme.palette[backgroundColor]};
-
-  ${({ theme }) => theme.textStyle.web.Body_1};
+  color: ${({ theme, typoColor }) => typoColor && theme.palette[typoColor]};
+  ${({ theme }) => theme.textStyleV2.resp.caption_md};
   ${media.mobile} {
-    ${({ theme }) => theme.textStyle.mobile.Body_1};
+    ${({ theme }) => theme.textStyleV2.resp.caption_sm};
   }
 `;
 

components/common/AnimatedButton/index.tsx

@@ -0,0 +1,107 @@
+import React, { ReactElement } from 'react';
+import styled, { keyframes } from 'styled-components';
+import media from 'styles/media';
+
+interface BannerProps {
+  backgroundImg?: string;
+  className?: string;
+  title?: string;
+  description?: string;
+}
+
+function Banner({
+  className,
+  backgroundImg = '/assets/images/27th/banner_project_story.png',
+  title,
+  description,
+}: BannerProps): ReactElement {
+  return (
+    <StyledBox backgroundImg={backgroundImg} className={className}>
+      <InnerTextContainer>
+        <StyledTitle>{title}</StyledTitle>
+        <StyledDescription>{description}</StyledDescription>
+      </InnerTextContainer>
+    </StyledBox>
+  );
+}
+
+const StyledBox = styled.div<BannerProps>`
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  background-image: url(${({ backgroundImg }) => backgroundImg});
+  background-color: ${({ theme, backgroundImg }) =>
+    !backgroundImg && theme.palette.grey_800};
+  padding: 146px 0 93px 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+`;
+
+const InnerTextContainer = styled.div`
+  max-width: 1200px;
+  margin: 0 80px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: flex-start;
+  gap: 8px;
+
+  ${media.tablet} {
+    width: -webkit-fill-available;
+  }
+
+  ${media.mobile} {
+    margin: 0;
+  }
+`;
+
+const slideUp = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const StyledTitle = styled.h1`
+  color: ${({ theme }) => theme.palette.white_100};
+  ${({ theme }) => theme.textStyleV2.resp.title1_md};
+  white-space: nowrap;
+  margin-top: 0;
+  margin-bottom: 0;
+
+  animation: ${slideUp} 0.6s ease forwards;
+  animation-delay: 0.2s;
+
+  ${media.mobile} {
+    ${({ theme }) => theme.textStyleV2.resp.title1_sm};
+    white-space: pre-line;
+    margin: 0 24px;
+  }
+`;
+
+const StyledDescription = styled.p`
+  color: ${({ theme }) => theme.palette.white_50};
+  ${({ theme }) => theme.textStyleV2.resp.subtitle_md};
+  white-space: nowrap;
+  margin-top: 0;
+  margin-bottom: 0;
+
+  animation: ${slideUp} 0.6s ease forwards;
+  animation-delay: 0.2s;
+
+  ${media.mobile} {
+    ${({ theme }) => theme.textStyleV2.resp.subtitle_sm};
+    white-space: pre-line;
+    margin: 0 24px;
+  }
+`;
+
+export default Banner;

components/common/Badge/index.tsx

@@ -4,6 +4,7 @@ import theme, { PaletteKeyTypes } from 'styles/theme';
 
 interface IBoxStyle {
   backgroundColor?: PaletteKeyTypes;
+  fontColor?: PaletteKeyTypes;
   width?: number;
   height?: number;
   borderRadius?: number;
@@ -22,6 +23,7 @@ function Box({
   height,
   backgroundColor = 'grey',
   borderRadius = 20,
+  fontColor = 'black',
   ...rest
 }: BoxProps): ReactElement {
   return (
@@ -44,6 +46,7 @@ const StyledBox = styled.div<IBoxStyle>`
   border-radius: ${({ borderRadius }) => borderRadius}px;
   background-color: ${({ backgroundColor }) =>
     backgroundColor && theme.palette[backgroundColor]};
+  color: ${({ fontColor }) => fontColor && theme.palette[fontColor]};
 `;
 
 export default Box;