2026년 2월 11일 (수요일)

내부 도구 만들기: 구글 로그인부터 프로젝트 관리까지

오늘은 거의 하루 종일 바톤 매뉴얼 프로젝트에 매달렸습니다. 이름에서 느껴지시겠지만, 저희 스튜디오의 내부 프로젝트 관리 도구를 만들고 있거든요.

인증부터 제대로

가장 먼저 손댄 건 구글 로그인 연동이었습니다. 그런데 아무나 들어오면 곤란하니까 @ba-ton.kr 도메인만 허용하도록 제한을 걸었어요. 회사 이메일이 없으면 못 들어옵니다 (당연한 얘기지만 내부 도구니까요).

UserType enum을 대문자로 정리하면서 constants 파일도 따로 뺐는데, 이게 나중에 미들웨어에서 권한 체크할 때 훨씬 깔끔하더라고요. /console/admin 경로는 ADMIN만 접근 가능하게, 로그인 안 한 사용자는 자동으로 튕겨내도록 미들웨어를 손봤습니다.

// middleware에서 깔끔하게 권한 체크
const dbUser = await prisma.user.findUnique({
  where: { uid: session.user.id }
});

if (pathname.startsWith('/console/admin') && 
    dbUser?.user_type !== USER_TYPE.ADMIN) {
  return NextResponse.redirect(new URL('/console', request.url));
}

프로젝트 관리 기능의 등장

인증이 끝나자 본격적으로 프로젝트 CRUD를 구현했습니다. Prisma 스키마에 Project 모델을 추가하고, react-hook-form과 Zod로 검증 로직을 단단히 짰어요. 생성/조회/수정 API를 차례로 만들고, UI도 붙였죠.

상희님이 레이아웃 컴포넌트를 대거 추가해주셔서 작업이 한결 수월했습니다. ListGrid 컴포넌트에 renderCardActions, renderHeaderAction 같은 슬롯을 넣어서 유연하게 확장 가능하게 만든 게 인상적이었어요. 덕분에 프로젝트별 드롭다운 메뉴(정보 수정/공개·비공개/삭제)도 금방 붙일 수 있었습니다.

그 외의 소소한 것들

온라인 쇼핑몰 B에서는 아카이브 목록 텍스트를 "OUR ARCHIVE"에서 "ARCHIVE"로 간소화했고요. 아트페어 K 공식 웹사이트는 심사위원용 페이지 정렬을 a-z 순으로 바꿨습니다. 사실 오늘은 거의 manual 작업에 올인한 날이었네요.

내부 도구라고 대충 만들 수는 없잖아요. 저희도 매일 쓸 거니까.

프로젝트가 없을 때 보여줄 안내 메시지까지 꼼꼼히 챙기면서, 나름 애정을 담아 만들고 있습니다.

글 작성자

한송욱

@coolwithyou

Tech LeadSoftware Engineer

프로필 보기

커밋 참여자

이상희

Software Engineer

+13444-2866

추지혜

Software Engineer

+1029-24

개발자 개인정보 및 고객사 정보 보호를 위해 프로젝트명과 일부 세부 정보는 마스킹 처리되어 있습니다.

작업한 프로젝트

온라인 쇼핑몰 B

2개 커밋+2-2

바톤 매뉴얼 프로젝트

23개 커밋+14471-2888

아트페어 K 공식 웹사이트

1개 커밋+1-7

상세 커밋 내역

스타일 수정

온라인 쇼핑몰 B · sangheedev · +1 / -1

코드 업데이트

온라인 쇼핑몰 B · Lee Sanghee · +1 / -1

설정 변경

바톤 매뉴얼 프로젝트 · sangheedev · +8609 / -2259

기능 추가

바톤 매뉴얼 프로젝트 · chujihye · +8 / -3

설정 변경

바톤 매뉴얼 프로젝트 · sangheedev · +2195 / -36

기능 추가

바톤 매뉴얼 프로젝트 · chujihye · +35 / -3

버그 수정

아트페어 K 공식 웹사이트 · dongha@macmini · +1 / -7

코드 업데이트

바톤 매뉴얼 프로젝트 · Chu Jihye · +542 / -5

코드 개선

바톤 매뉴얼 프로젝트 · chujihye · +6 / -6

설정 변경

바톤 매뉴얼 프로젝트 · sangheedev · +260 / -40

코드 개선

바톤 매뉴얼 프로젝트 · chujihye · +2 / -2

기능 추가

바톤 매뉴얼 프로젝트 · chujihye · +17 / -0

스타일 수정

바톤 매뉴얼 프로젝트 · sangheedev · +239 / -41

스타일 수정

바톤 매뉴얼 프로젝트 · sangheedev · +825 / -44

버그 수정

바톤 매뉴얼 프로젝트 · sangheedev · +85 / -75

코드 업데이트

바톤 매뉴얼 프로젝트 · sangheedev · +625 / -5

설정 변경

바톤 매뉴얼 프로젝트 · sangheedev · +191 / -239

스타일 수정

바톤 매뉴얼 프로젝트 · sangheedev · +0 / -1

버그 수정

바톤 매뉴얼 프로젝트 · sangheedev · +86 / -84

버그 수정

바톤 매뉴얼 프로젝트 · sangheedev · +1 / -1

스타일 수정

바톤 매뉴얼 프로젝트 · sangheedev · +217 / -3

스타일 수정

바톤 매뉴얼 프로젝트 · sangheedev · +1 / -5

기능 추가

바톤 매뉴얼 프로젝트 · chujihye · +291 / -2

기능 추가

바톤 매뉴얼 프로젝트 · chujihye · +128 / -3

코드 업데이트

바톤 매뉴얼 프로젝트 · sangheedev · +93 / -25

코드 업데이트

바톤 매뉴얼 프로젝트 · sangheedev · +15 / -6

인증부터 제대로

// middleware에서 깔끔하게 권한 체크
const dbUser = await prisma.user.findUnique({
  where: { uid: session.user.id }
});

if (pathname.startsWith('/console/admin') && 
    dbUser?.user_type !== USER_TYPE.ADMIN) {
  return NextResponse.redirect(new URL('/console', request.url));
}

프로젝트 관리 기능의 등장

그 외의 소소한 것들

내부 도구라고 대충 만들 수는 없잖아요. 저희도 매일 쓸 거니까.

프로젝트가 없을 때 보여줄 안내 메시지까지 꼼꼼히 챙기면서, 나름 애정을 담아 만들고 있습니다.