01 / 03
01
메인 피드
다른 사용자의 익명 고민을 검색, 태그, 정렬 기능으로 탐색하며 공감과 소통을 이어가는 화면입니다.
02 / 03
02
마이페이지
익명 프로필을 관리하고, 내가 작성한 고민과 댓글을 한눈에 확인할 수 있는 개인 화면입니다.
03 / 03
03
고민 작성 모달
익명으로 고민을 작성하고 태그를 추가해 빠르게 게시할 수 있는 입력 화면입니다.
한눈에 보기
익명 고민함 웹 서비스
역할
Shared Components Team
범위
8개
//핵심 포인트3개
01
공통 UI 컴포넌트를 팀 단위로 구현하며 재사용 기준을 의식
02
React Query / Zustand를 통해 서버 상태와 UI 상태 분리 개념을 처음 실전 적용
03
(회고) 당시 Storybook 미도입 → 이후 도입 필요성을 체감한 계기
//기술 스택8개
//FRONTEND(5)
탭을 바꿔가며 역할과 설명을 한 범주씩 확인할 수 있습니다.
React
UI 상태/컴포넌트상태 변화에 따라 UI를 컴포넌트 단위로 조합하고, 재사용 가능한 화면 구조로 유지보수를 쉽게 했다.
TypeScript
타입 안정성API 응답/컴포넌트 Props 계약을 타입으로 고정해 런타임 오류를 줄이고 협업 시 실수를 예방했다.
Tailwind CSS
디자인 시스템/스타일토큰(색/타이포/간격)과 유틸 기반으로 스타일 규칙을 표준화해 화면 간 일관성을 유지했다.
TanStack React Query
서버 상태 관리캐싱/로딩/에러/리패칭 정책을 표준화해 데이터 패칭 코드를 단순화하고 사용자 경험을 안정화했다.
Zustand
UI 상태 엔진페이지 간 공유되는 UI 상태(오버레이·사이드바·카드 확장 등)를 가볍고 예측 가능한 스토어로 관리해 인터랙션의 연속성을 유지했다.