<aside> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRufdTh8fp8WTr0R8HQdORBzzJ6plc-jGBphQ&s" alt="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRufdTh8fp8WTr0R8HQdORBzzJ6plc-jGBphQ&s" width="40px" /> 차세대 다우오피스 Front-End를 구성하기 위한, Radix UI와 같은 Headless UI와 Tanstack Table 등을 활용해, 다우오피스의 디자인 시스템을 적용한 공통 컴포넌트입니다.
</aside>
react-datepicker, date-fns를 활용해 컴포넌트 구성 및 다국어 처리해 구현.
Tansstack Table 활용해, 테이블 구성.
defaultValue, value, onChange Props를 기반으로 state를 통한 컴포넌트 구현.
<aside> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRufdTh8fp8WTr0R8HQdORBzzJ6plc-jGBphQ&s" alt="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRufdTh8fp8WTr0R8HQdORBzzJ6plc-jGBphQ&s" width="40px" /> 다우오피스 임직원포탈은 임직원들이 그룹웨어로 활용할 수 있는 다양한 기능(전자결재, 캘린더, 메일, Works, 예약 등)을 제공합니다.
</aside>
JWT 토큰 활용해 로그인 로직 구성 후, 사용자 정보를 GraphQL을 통해서 로드해옴.
JWT
토큰 활용, 각 Token
을 CookieStorage
활용해 구성Jotai
의 atomWithStorage
활용해 브라우저 Storage
의 사용자의 App
접근 여부를 저장해 판단하는 로직 구성.Compound Component
패턴과 Context API
를 활용해, 일렉트론으로 구성된 채팅에서도 알맞게 변형해 사용할 수 있도록 구성.GraphQL
과 Tanstack Query
활용해 사용자 정보를 fetch
해옴.