팀 프로젝트*(Front 1명, Back 1명, Game 1명)*

내 역할 : Front-End Developer

🔗 GitHub Link

https://github.com/alardin/alardin-front

📑 서비스 내용

Alardin는 ‘5분만 현상’을 해결하고자 사용자의 아침을 ‘Fun’하게 제공하고 싶은 목적으로 단순한 알람의 기능이 아니며 주변 사람들과의 메이트를 지어 함께 일어나고 게임의 즐거움으로 알람을 끌 수 있는 서비스입니다.

🔨 기술 스택

• React Native, TypeScript
• Recoil
• Styled-Component

⌨️ 개발 활동

재사용 가능한 UI 컴포넌트 구현

각 기능별로 필요한 컴포넌트를 새로 생성하지 않고 하나의 컴포넌트를 제작하여 상황에 따라 필요하는 스타일링, 이벤트 핸들러 등을 Props 통해 받아와 적용되는 형태로 구현

...
const Button = ({
  width,
  height,
  center,
  value,
  fontSize,
  options,
  disabled,
  children,
  ...rest
}: IButtonProps) => {
  const pressedColor = themeName.button[options].pressed.split(' ')[1];
  return (
    <DefaultButton
      {...{ width, height, center, options, disabled, ...rest }}
      activeOpacity={1}
      underlayColor={pressedColor.substring(0, pressedColor.length - 1)}
      value={value}>
      {React.isValidElement(children) ? (
        children
      ) : (
        <ButtonText {...{ fontSize, options, height, disabled }}>
          {children}
        </ButtonText>
      )}
    </DefaultButton>
  );
};
...