학교 대항전

component/Button/Button.styled.ts

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { ButtonProps } from './Button.types';
+
+const getSize = ({ size }: Pick<ButtonProps, 'size'>) => {
+  switch (size) {
+    case 'XS':
+      return css`
+        width: 72px;
+        height: 24px;
+      `;
+    case 'S':
+      return css`
+        width: 84px;
+        height: 37px;
+      `;
+    case 'L':
+      return css`
+        width: 320px;
+        height: 54px;
+      `;
+  }
+};
+
+export const ButtonWrapper = styled.button<
+  Omit<ButtonProps, 'children' | 'title'>
+>`
+  ${(props) => getSize(props)};
+  padding-block: 0;
+  padding-inline: 0;
+  border: 0;
+  border-radius: ${(props) => (props.radius ? '12px' : 0)};
+
+  background-color: ${(props) => props.backgroundColor};
+  font-weight: 700;
+
+  &:hover {
+    opacity: 80%;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
+  }
+
+  &:active {
+    opacity: 40%;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+
+  input[type='submit'] {
+    display: none;
+  }
+`;

component/Button/Button.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { ButtonProps } from './Button.types';
+import { ButtonWrapper } from './Button.styled';
+import { SerializedStyles, css } from '@emotion/react';
+
+export const Button = ({
+  type = 'button',
+  className,
+  size,
+  disabled = false,
+  radius = true,
+  backgroundColor,
+  onClick,
+  style,
+  children,
+}: ButtonProps) => {
+  return (
+    <>
+      <ButtonWrapper
+        type={type}
+        className={classNames(className)}
+        size={size}
+        disabled={disabled}
+        radius={radius}
+        onClick={(e) => {
+          if (onClick) {
+            onClick(e);
+          }
+        }}
+        backgroundColor={backgroundColor}
+        css={style as SerializedStyles}
+      >
+        {children}
+      </ButtonWrapper>
+    </>
+  );
+};

component/Button/Button.types.ts

@@ -0,0 +1,15 @@
+import { SerializedStyles } from '@emotion/react';
+import { Property } from 'csstype';
+
+export interface ButtonProps {
+  type?: 'submit' | 'reset' | 'button' | undefined;
+  className?: string;
+  size: 'XS' | 'S' | 'L';
+  disabled?: boolean;
+  radius?: boolean;
+  backgroundColor: Property.BackgroundColor;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  style?: SerializedStyles | React.CSSProperties;
+  children?: React.ReactNode;
+  isSubmit?: boolean;
+}

component/Button/index.ts

@@ -0,0 +1,5 @@
+import { Button } from './Button';
+import { ButtonProps } from './Button.types';
+
+export { Button };
+export type { ButtonProps };

component/Card.tsx

@@ -1,5 +1,5 @@
 import { pallete } from '@/styles/Color';
-import { BodyMedium, Headline_02, Subtitle_02 } from '@/styles/Typography';
+import { BodyMedium, Headline_02, Subtitle_02 } from '@/component/Typography';
 import Image from 'next/image';
 import React, { forwardRef } from 'react';
 

component/Collapse/Collapse.styled.ts

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+export const CollapseWrapper = styled.div`
+  width: 100%;
+`;

component/Collapse/Collapse.tsx

@@ -0,0 +1,53 @@
+import React, { useRef, useState } from 'react';
+import { SerializedStyles, css } from '@emotion/react';
+import Image from 'next/image';
+
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import chevronDown from '../Icon/asset/chevron-down-gray400.svg';
+
+import { CollapseProps } from './Collapse.types';
+import { CollapseWrapper } from './Collapse.styled';
+
+export const Collapse = ({
+  className,
+  title,
+  children,
+  style,
+}: CollapseProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = () => setIsOpen(!isOpen);
+
+  return (
+    <CollapseWrapper className={className}>
+      <Button
+        className='flex items-center justify-center'
+        size='L'
+        radius={false}
+        backgroundColor='--white'
+        onClick={handleClick}
+        style={css`
+          border: 0;
+          width: unset;
+          ${style as SerializedStyles}
+        `}
+      >
+        <div className='ml-3'>{title}</div>
+        <Image className='mr-3' src={chevronDown} alt='chevron_down' />
+      </Button>
+      <div
+        ref={contentRef}
+        className='flex flex-col w-full items-center'
+        style={{
+          overflow: 'hidden',
+          maxHeight: isOpen ? `${contentRef.current?.scrollHeight}px` : '0',
+          transition: 'max-height 0.3s ease',
+        }}
+      >
+        {children}
+      </div>
+    </CollapseWrapper>
+  );
+};

component/Collapse/Collapse.types.ts

@@ -0,0 +1,8 @@
+import { SerializedStyles } from '@emotion/react';
+
+export interface CollapseProps {
+  className?: string;
+  title: React.ReactNode;
+  children: React.ReactNode;
+  style?: SerializedStyles | React.CSSProperties;
+}

component/Collapse/index.ts

@@ -0,0 +1,3 @@
+import { Collapse } from './Collapse';
+
+export { Collapse };

component/Icon/Icon.styled.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+import { IconProps } from '.';
+
+export const IconWrapper = styled.div<Pick<IconProps, 'style'>>`
+  width: fit-content;
+  height: fit-content;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

component/Icon/Icon.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { SerializedStyles } from '@emotion/react';
+import parse, { Element, HTMLReactParserOptions } from 'html-react-parser';
+
+import { IconWrapper } from './Icon.styled';
+import { IconProps, SvgProps } from './Icon.types';
+
+/**
+ * If you set 'type' as 'svg', you should pass raw svg string data to 'src'
+ * for vite environment, add postfix '?raw' at asset importing
+ * ref (https://ko.vitejs.dev/guide/assets.html#importing-asset-as-string)
+ */
+export const Icon = ({
+  className,
+  type,
+  color,
+  src,
+  alt,
+  width,
+  height,
+  style,
+}: IconProps) => {
+  return (
+    <IconWrapper className={className} css={style as SerializedStyles}>
+      {type === 'svg' ? (
+        <Svg color={color} width={width} height={height} src={src} />
+      ) : (
+        <img width={width} height={height} src={src} alt={alt} />
+      )}
+    </IconWrapper>
+  );
+};
+
+const Svg = ({ color, width, height, src }: SvgProps) => {
+  const convertSrc = () => {
+    const widthToken = 'width';
+    const heightToken = 'height';
+    const fillToken = 'fill';
+
+    const convertedColor = color;
+
+    const option: HTMLReactParserOptions = {
+      replace: (domNode) => {
+        if (
+          domNode instanceof Element &&
+          domNode.attribs &&
+          domNode.name === 'svg'
+        ) {
+          let widthFlag = false;
+          let heightFlag = false;
+          let fillFlag = false;
+
+          domNode.attributes.forEach((value) => {
+            if (value.name === widthToken && width && !widthFlag) {
+              domNode.attribs[widthToken] = String(width);
+              widthFlag = true;
+            }
+            if (value.name === heightToken && height && !heightFlag) {
+              domNode.attribs[heightToken] = String(height);
+              heightFlag = true;
+            }
+            if (value.name === fillToken && convertedColor && !fillFlag) {
+              domNode.attribs[fillToken] = convertedColor;
+              fillFlag = true;
+            }
+          });
+
+          if (!widthFlag && width) domNode.attribs[widthToken] = String(width);
+          if (!heightFlag && height)
+            domNode.attribs[heightToken] = String(height);
+          if (!fillFlag && convertedColor)
+            domNode.attribs[fillToken] = convertedColor;
+        }
+
+        return domNode;
+      },
+    };
+
+    return parse(src, option);
+  };
+
+  return convertSrc();
+};

component/Icon/Icon.types.ts

@@ -0,0 +1,20 @@
+import { Property } from 'csstype';
+import { SerializedStyles } from '@emotion/react';
+
+export interface IconProps {
+  className?: string;
+  type: 'svg' | 'png' | 'jpg';
+  src: string;
+  alt: string;
+  width?: number | string;
+  height?: number | string;
+  color?: Property.BackgroundColor;
+  style?: SerializedStyles | React.CSSProperties;
+}
+
+export interface SvgProps {
+  color?: Property.BackgroundColor;
+  width?: number | string;
+  height?: number | string;
+  src: string;
+}