[넥스터즈] 동아리에서 사용할 팀빌딩 서비스 만들기

date

Aug 22, 2023

slug

nexters-moyeomoyeo

author

status

Public

tags

넥스터즈

회고

모여모여

summary

넥스터즈 23기 프론트엔드 파트로 참여하면서 만든 서비스 회고록입니다.

type

Post

thumbnail

category

🔥 Nexters

updatedAt

Aug 23, 2023 09:12 AM

언어

개요

이걸 왜 만드나요?

1. 모임모임 이라는 동아리 사이트에 만들어보고 싶은 서비스를 올린다.

2. 투표를 통해 약 10개의 아이디어가 선정되며, 이를 제안한 사람은 PM이 된다.

3. PM은 첫 세션날 본인이 만들고자 하는 서비스에 대해 발표를 하고 다른 사람들은 참여하고 싶은 아이디어에 투표를 한다. (1지망부터 4지망까지 지원 가능)

4. 투표 결과를 엑셀로 변환한다. 이 데이터를 토대로 PM은 1지망으로 선택해준 팀원부터 차례대로 뽑는다.

1차 MVP (UT 이전의 모습)

UT 진행 하고 받은 피드백 정리 & 액션 아이템 도출

2차 MVP (UT 이후의 모습)

좋았던 점

• 꼼꼼하게 했던 코드리뷰

• 새로운 css 라이브러리 사용(panda css)

const theme = {
  tokens: {
    colors: {
      primary: { value: '#0FEE0F' },
      secondary: { value: '#EE0F0F' }
  ...
}

import { cva } from '../styled-system/css'
 
const button = cva({
  base: {
    display: 'flex'
  },
  variants: {
    visual: {
      solid: { bg: 'red.200', color: 'white' },
      outline: { borderWidth: '1px', borderColor: 'red.200' }
    },
   ...
  }
})

const choiceColors: Record<Choice, Token> = {
  FIRST_ROUND: 'colors.red.20',
  SECOND_ROUND: 'colors.green.10',
  THIRD_ROUND: 'colors.yellow.10',
  FORTH_ROU: 'colors.red.10',
};

export const Card = ({
  name,
  position,
  choice,
  link,
  selected = false,
  onClick,
}: CardProps) => {
  return (
    <button
      className={hstack({
        ...
          <span
            className={center({
              background: choiceColors[choice], // 동적으로 bg가 바뀌어야 함
							...
					>
          ...
    </button>
  );
};

const choiceRecipe = cva({
  base: {
   ...
  },
  variants: {
    choice: {
      FIRST_ROUND: { background: 'purple.40' },
      SECOND_ROUND: { background: 'purple.50' },
      THIRD_ROUND: { background: 'purple.60' },
      FORTH_ROUND: { background: 'purple.70' },
    },
  },
});

export const Card = ({
  name,
  position,
  choice,
  link,
  selected = false,
  onClick,
}: CardProps) => {
  return (
    <button
      className={hstack({
        ...
          <span className={choiceRecipe({ choice })}>
          ...
    </button>
  );
};

아쉬웠던 점

• 넥스터즈 내부에서만 사용가능

• SSE

끝으로