depromeet / na-lab-client

🔬 오직 나만을 위한 커리어 연구실, Na Lab

디프만 13기 대상 수상작 🎉

Na Lab

🔬 오직 나만을 위한 커리어 연구실, Na Lab

‘Na Lab’은 동료의 익명 피드백을 통해 나의 직무 강점을 발견하는 서비스입니다.

👉 Na Lab 바로가기

나의 커리어 브랜딩을 완성해주는 기본질문을 통해 손쉽게 질문폼을 생성할 수 있어요.

부담스러웠던 동료 평가의 경험을 마치 친구와 심리테스트 하듯 즐겁게 할 수 있도록 설계했어요.

많은 사람들의 답변 속에서 정말 나에게 도움이 되는 피드백은 어느 것일까요?

나랩은 유저가 개별 답변에 대한 이해도를 높이며 의미 있는 피드백을 얻을 수 있도록 결과를 정리했어요.

동료들의 피드백으로 어디든 활용할 수 있는 나만의 명함을 만들 수 있어요.

😎 Development Description

• Hotjar, GA, mixpanel, Vercel analytics를 이용해 사용자 지표를 수집 및 분석하여 이탈율을 줄이고, 사용자 경험을 개선했어요.
• Sentry 부착으로 에러 로그를 수집하고, 디버깅에 유리한 환경을 구성했어요
• SSR 을 활용한 SEO 개인화를 진행했어요.
• API Route를 사용해 이미지를 동적으로 생성해 사용자가 이미지를 다운받을 수 있게 만들었어요.
• Stylelint를 사용해 스타일링 컨벤션을 확립했어요.
• Vitest를 활용해 TDD로 개발했어요.

🏛️ System Architecture

🧑🏻‍💻 Developers

개발자	GITHUB
오혜성	https://github.com/hyesungoh
변수미	https://github.com/sumi-0011
이상조	https://github.com/sjoleee
권오연	https://github.com/oyeon-kwon

na-lab-client's Issues

리뷰어 페이지 OG 이미지 동적 제공

설명

vercel satori를 이용해서 리뷰어 페이지의 OG 이미지를 동적 생성하면 좋을 거 같아요 !

배경 이미지 위에 혜성님의 어쩌구 저쩌구 정도로 타이포만 ...?

https://github.com/vercel/satori

Drag and Drop Component 만들기

설명

Drag and Drop Component 만들기

typography Head 3 SemiBold 추가

설명

typography Head 3 SemiBold 추가

아이콘 및 SVG 컴포넌트

설명

SVG 컴포넌트와 몇 아이콘 컴포넌트 개발

객관식/주관식을 선택하는 Tab 생성

설명

객관식/주관식을 선택하는 Tab 생성

feedback 컴포넌트

설명

할 일

• [ ]

모니터링 도구 설정

• GA
• Hotjar
• Mixpanel

Internal link 컴포넌트, 훅

설명

app dir에서는 실험적으로 type safe route가 지원되나, pages dir은 방안이 없기 때문에 대체할 수 있는 컴포넌트와 훅을 개발합니다

useDebounce 작성

설명

Debounce를 편하게 사용할 수 있도록 useDebounce Hook을 개발합니다.

채팅 인풋 컴포넌트

설명

키패드에 float되며 입력할 수 있는 컴포넌트를 개발

타입 커버리지 적용 및 CI 추가

설명

https://github.com/plantain-00/type-coverage

https://github.com/codechecks/typecov

공용 훅 개발

설명

일반적으로 사용할 수 있는 useToggle, useInput 을 개발합니다

SEO 컴포넌트

설명

meta 태그, og 태그 등을 head에 넣을 수 있는 컴포넌트를 개발

UnreadBadgeIcon 컴포넌트

설명

할 일

• [ ]

exception api 명세에 따라 변경

설명

api 명세에 따라 exception에서 사용하는 스키마를 변경

useIsMounted

설명

useIsMounted 훅 개발

할 일

• [ ]

gitignore 추가

설명

• gitignore에 다음 코드를 추가합니다.

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

Portal

설명

https://react.dev/reference/react-dom/createPortal

추가 System Color 반영

설명

추가 컬러 테마에 반영

할 일

• [ ]

아이콘 컴포넌트

설명

아이콘 컴포넌트 개발

color css 선언

설명

디자인시스템 컬러 theme에 추가

toast 컴포넌트

설명

할 일

• [ ]

useLongPress hook 작성

설명

useLongPress hook을 작성합니다.

customRender 개발

설명

테스트를 위한 custom render 유틸 개발

feedback/list 페이지의 FeedbackCardList, FeedbackCard 컴포넌트 작성

설명

feedback/list 페이지의 FeedbackCardList, FeedbackCard 컴포넌트 작성

할 일

• [ ]

질문 추가 form 틀 컴포넌트 제작

설명

질문 추가 form 틀 컴포넌트 제작

할 일

• 객관식, 주관식 상태 추가

Bottom sheet 및 기본 motions 상수

설명

할 일

• #34 선행되어야 함
• 모션 상수
• bottom sheet

repo 이름 및 프로젝트 명 변경

서비스 명 확정 후 변경

axios instance 개발

설명

추후 사용을 위한 axios instance를 개발합니다

storybook decorator

설명

스토리북 전역 테마 사용하기 위한 데코레이터 설정

할 일

• [ ]

Sentry 설정

Current Bundle Sizes

Route	Size (gzipped)
/	72.33 KB
/_app	167.71 KB
/_error	72.25 KB

Dynamic import: None found.

스토리북 `storysource` 에드온 추가

설명

https://github.com/storybookjs/storybook/tree/master/addons/storysource

스토리북, 크로마틱 환경 설정

설명

할 일

• [ ]

버튼 컴포넌트

설명

https://www.figma.com/file/pXoNF52otjFeSJVInC1gTi/%F0%9F%91%A9%E2%80%8D%F0%9F%8E%A4Design-%EB%94%94%ED%94%84%EB%A7%8C-3%EC%A1%B0?type=design&node-id=1356-39426&t=wwwLpA5set0CrSLu-4

할 일

• [ ]

프로젝트 스캐폴딩

• create next app
• yarn berry w/ pnp
• eslint & prettier
• vitest
• playwright
• emotion
• tanstack/react-query
• framer motion w/ lazy
• github issue and pr template
• github branch rule w/ repo setting
• git hook w/ husky, commitlint, lint-staged
• CI w/ codecov
• CodeQL
• auto assign w/ code owners
• stylelint

CollaborationBadge 컴포넌트

설명

할 일

• [ ]

bottom sheet는 full + 둥근 모서리

useMouseMove

설명

클릭, 터치의 움직임을 담당하는 useMouseMove

Header 컴포넌트 생성

설명

Header 컴포넌트 생성

할 일

• Header 컴포넌트 생성
• 스토리북 작성

life cycle custom hook

설명

타겟-로그인 페이지

설명

최초 진입에서 보여지는 로그인 페이지

getParsedDate 유틸함수

설명

결과쪽에서 날짜를 사용할때 파싱해주는 유틸함수를 만듭니다

할 일

• [ ]

이벤트 기록 유틸

설명

GA와 Mixpanel 이벤트를 기록할 수 있는 유틸 개발

Portal 컴포넌트 hydration 오류 수정

설명

Portal 컴포넌트 사용시, 프리렌더링 결과물과 클라이언트 렌더링 결과물이 상이하여 hydration이 불가한 오류를 수정합니다.

Dialog 컴포넌트 개발

설명

Dialog 컴포넌트를 개발합니다.

카카오 로그인

설명

• 카카오 회원가입
• 카카오 로그인

참고

• next auth 사용
  [Getting Started | NextAuth.js](https://next-auth.js.org/getting-started/example)

리뷰어 페이지 및 step

설명

리뷰어 페이지를 생성하고

해당 페이지에서 route별 step을 렌더링할 수 있도록 합니다

폰트 및 타이포 적용

설명

• 폰트 적용
• theme에 타이포 적용

모바일 레이아웃 적용

설명