ONF 체크!

부트캠프가 끝났다고 마냥 늘어질 수 없다. 마음 맞는 동료끼리 모였다. 각자 공부하면서도 텐션이 떨어지지 않게 하고자 사이드 프로젝트를 시작한다. 프론트엔드 5명, 백엔드 4명이다. 꽤 큰 규모지만, 시간을 길게 쓰는 게 아니기에 적당한 수준이라고 여겼다. 모두 이 프로젝트에 평일 한 달간 매일 5시간씩 할애할 예정이다.

 

 

IDEA

교대 일정 관리, 출석 체크 관리, 교통사고 전문 상담가 매칭 서비스, 프로젝트 매칭 플랫폼(디자이너와 개발자), 개발자 면접사이트, 온라인 가계부, 스포츠 토토, 도매상과 소매상 매칭 서비스, 혼잡도 알리미, 헬스장 정보 알림 서비스, 운동 크루 모집 서비스, 꽃집 플랫폼 등 사람이 많으니 아이디어가 꽤나 나왔다. 물론, 아이디어 중에는 기존에 있는 서비스도 있다. 아이디어에 제한을 두지 않았다. 우린 만들면서 또 배울 점이 많을 테니까. 모든 아이디어는 하고 싶은 이유가 그럴듯했다. 많은 이유 중 하나는 사용해보니 불편한 점이 있다는 것. 이 많은 아이디어 중 하나를 골라야 했다.

사실, 개발자 취업 관련한 이야기들 들어보면 코딩 작성보다 문제 해결에 취지를 둔 프로젝트에 높은 점수를 준다고들 한다. 그래서 고민이었다. 사이드 프로젝트를 배움의 목적으로 사용할 것인지, 목적 해결로 사용할 것인지를. 우리는 여러 논의 끝에 전자를 택했다. 기존 팀프로젝트 리팩토링과 별도 개인 공부 시간도 있길 바라는 사람이 많았기에. 배움의 목적은 기존에 쓰지 않은 레거시 상태 관리인 redux 사용, 팀 프로젝트에 대한 감 익히기 등이다.

우리는 출석 체크 관리에 대한 아이디어를 출근 기록 서비스로 변경해 진행하기로 했다. 기존에 있는 시프티, 플렉스 등 여러 어플이 있는 것을 인지한 채로 해당 서비스를 최대한 구현할 예정이다. 

 

Front-End

프론트엔드 팀원끼리 따로 모였다. 기존 출근 기록 서비스를 보니 사용자 페이지와 관리자 페이지로 나뉘었고, 이는 관리자 모드가 필수인 이 서비스에선 필수인 듯했다. 우리도 이 큰 틀을 깰 것인가 싶었지만, 그대로 유지하기로 했다. 관리자 입장에서는 필요한 정보만 모아 볼 수 있게 심플함이 좋고, 사용자 페이지는 조금 더 디자인을 가미해 사용성과 심미성을 높이는 게 좋아 보이기 때문이었다.

기존 서비스를 돌아보니 사용자 페이지보단 관리자 페이지가 더 많은 정보를 주고 받는 것을 확인했다. 우리는 사용자 페이지 2명, 관리자 페이지 3명으로 나누었다. 퍼블리싱은 페이지 단위로 스프린트를 나눴고, 기능은 각자 퍼블리싱한 페이지를 기반으로 만들되 공통 컴포넌트로 뺄 수 있을 경우 매일 시작 미팅 때 건의를 올려 처리하기로 했다.

나는 관리자 페이지의 홈, 설정 페이지와 공통 컴포넌트 제작을 맡았다. 추후 CI/CD까지 해볼 예정이긴 하나, 일단 제작에 신경 쓰기로 했다. 레이아웃을 맡은 동료가 기본 틀을 만들 동안, 나는 버튼과 인풋박스 등 공통으로 사용될 컴포넌트를 먼저 만들었다. 물론, 바로 전에 이 프로젝트의 메인 색상과 여러 자잘한 것들을 정했다. 이 스타일셋을 바탕으로 공통 컴포넌트를 만들었다.

 

공통 컴포넌트

const Btn01 = ({ text, type, bdC, bgC, color, onClick }: IBtn01Props) => {
  return (
    <Btn type={type} onClick={onClick} color={color} bdC={bdC} bgC={bgC}>
      {text}
    </Btn>
  );
};

export default Btn01;

const Btn = styled.button`
  padding: 8px 16px;
  color: ${(Props: IStyleProps) => (Props.color ? Props.color : "")};
  background: ${(Props: IStyleProps) => (Props.bgC ? Props.bgC : "")};
  border: ${(Props: IStyleProps) => (Props.bdC ? "1px" : "none")} solid
    ${(Props: IStyleProps) => (Props.bdC ? Props.bdC : "#000")};
`;

interface IBtn01Props {
  type?: "button" | "submit" | "reset" | undefined;
  text: string;
  color?: string;
  bdC?: string;
  bgC?: string;
  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
}

interface IStyleProps {
  color?: string;
  bdC?: string;
  bgC?: string;
}

공통 컴포넌트는 위와 같이 타입스크립트를 이용했다. 필수 값과 선택 값을 정하고, 선택 값은 기본 값을 설정해 페이지에 맞춰 사용할 수 있도로 여지를 주었다. 우리는 React-hook-form을 이용할 예정인 만큼, type과 onClick도 함께 설정했다. 예상하고 만든 공통 컴포넌트인 만큼 개발하면서 얼마나 계속 수정될지... 기대된다:)

아, 이렇게 먼저 만든 이유는 아토믹패턴을 부분이나마 도입해보고자 하는 의견이 있어서다. 전적으로 도입하자는 의견이 있었지만, redux와 아토믹 패턴 두 가지를 동시에 시작하기엔, 혹시 모를 오류 핸들링이 쉽지 않다는 의견이 컸다. 아무래도 해보지 않은 것에 대한 두려움일까. 모두가 동의한 건 시간이 많았다면 적용했겠지만, 그것보다 완성하는 게 우선이라는 거다. 일단 완성해봐야 의미가 있기에, 레거시 중 제일 어려워 보인 redux를 사용해 보기로 한 것. 그에 따른 부산물로 공통 컴포넌트가 나왔다. 물론 우리가 사용했던 container-presenter패턴에서도 공통 컴포넌트가 있지만, 우리는 이보다 조금 더 잘게 쪼개 볼 예정이다. container-presenter과 atomic의 조화랄까.