다국어 병원 플랫폼

• Frontend Developer · SaaS 프로젝트 (홈페이지 빌더, 상담 예약 시스템 담당)
• GitHub Issues/Projects, 2주 스프린트, 팀 위키 문서화, Slack

• Next.js
• React
• TypeScript
• SWR
• React Hook Form
• Framer Motion
• Tailwind CSS
• next-auth
• Storybook

• SaaS: 병원마다 자체 도메인 웹사이트를 만들어 주는 홈페이지 빌더. 담당자
• Admin: 병원, 의사, 예약, 콘텐츠를 관리하는 운영 도구. 레거시 마이그레이션
• iCH: 병원 검색과 예약을 제공하는 메인 사이트. SEO 개선

Tailwind의 pl, mr 같은 방향 클래스는 RTL에서 뒤집히지 않아, 코드마다 dir 삼항 연산자가 늘어나고 있었습니다. CSS 논리 속성(ps, pe, start, end)으로 바꾸는 규칙과 반응형 우선순위 함정을 위키로 정리해 팀에 공유했습니다. 40개 이상 언어의 번역은 GPTs 기반으로 자동화했습니다.

예약 화면을 Framer Motion 인터랙션으로 고도화하고, Walk-in 예약과 취소, 환불 흐름을 백엔드와 API 단위로 설계했습니다. 고객사가 50곳에서 1,000곳 이상으로 늘어나는 동안 예약 시스템 개발을 담당했습니다.

검색 노출이 필요한데도 CSR로 구현돼 있던 페이지를 SSR과 SSG로 바꾸고, SSR로만 그리던 페이지 중 자주 바뀌지 않는 곳은 SSG와 On-Demand Revalidation으로 옮겼습니다.

서버에서 API를 하나씩 기다리던 곳은 Promise.all로, 일부가 실패해도 화면은 그려야 하는 곳은 Promise.allSettled로 병렬화해 HTML 초기 로딩을 1.79초에서 1.2초로(약 33%) 줄였습니다. Azure Search 기반 사이트맵 생성 로직도 고쳐 빠져 있던 약 5%의 페이지를 복구하고, 언어별 alternate 링크를 추가했습니다.

SWR은 API 주소 전체를 이름표로 써서 데이터를 저장합니다. Admin의 API 주소에는 ?page=1&limit=10 같은 검색 조건이 붙어 있어서, 다른 컴포넌트가 이미 받아 둔 데이터를 쓰려면 같은 검색 조건까지 props로 계속 넘겨야 했습니다.

데이터를 부를 때 짧은 이름을 붙이는 규칙을 정하고, 그 이름으로 SWR 캐시에서 key를 찾아 데이터를 꺼내 읽는 훅을 만들어 props 전달을 없앴습니다. Admin 18개 파일에서 썼고, 만든 이유와 사용법은 팀 위키에 정리했습니다. (2023.04 ~ 05)

// 부모: 데이터를 부를 때 이름을 붙인다
getArticleContributorsSWR(searchOption, 'getArticleContributors')

// 자식: 검색 조건 없이 이름만으로 꺼내 읽기
const { data } = useSWRGetCacheData('getArticleContributors')

// 새로고침은 SWR 2.0 기본 기능으로도 가능
mutate(key => typeof key === 'string'
  && key.includes('getArticleContributors'))

이름으로 새로고침하는 기능도 함께 만들었지만, 당시 쓰던 SWR 2.0의 mutate 필터 함수로도 할 수 있었습니다. 지금이라면 key 앞에 고정 이름을 둔 배열 key와 검색 조건을 URL에서 읽는 커스텀 훅으로, 캐시를 검색할 필요 자체를 없애겠습니다.

저장 버튼을 빠르게 누르면 같은 데이터가 두 번 저장됐습니다. SWR mutation의 onSuccess 안에서 라우팅하면 React Hook Form의 isSubmitting이 그 Promise를 기다리지 않아 버튼이 일찍 풀리는 것이 원인이었습니다.

• handleSubmit에 넘기는 함수에서 upsert를 await
• 제출 버튼에 disabled={isSubmitting}
• 라우팅은 onSuccess 밖에서 await router.push
• props로 받는 upsert 타입에 Promise 명시

팀 위키와 블로그로 공유. 삭제 요청 중복도 같은 방식으로 수정

a-hospital.icloudhospital.com ─┐
b-clinic.icloudhospital.com  ──┼─▶ Application Gateway
…                            ──┘          │
                                          ▼
                             App Service ×1 (SaaS, CSR)
                                          │
                                          ▼
                          hospitalSlug → metadata API

5회차에 걸쳐 ArgoCD, Prometheus 모니터링, 도메인 구매와 위임, AKS 배포 흐름을 인수받았습니다.

새 병원 서브도메인이 생길 때마다 Google, Facebook 콘솔에 리다이렉트 URL을 손으로 등록하던 작업을 Selenium 스크립트로 자동화했습니다.

온보딩 없이 시작한 레거시 마이그레이션, 번들 사이즈 최적화, Formik에서 React Hook Form으로 바꾸자고 제안한 과정, SaaS 프로젝트 인수인계.

Tailwind에서 논리 속성으로 RTL을 지원하는 방법과 주의할 점.

isSubmitting이 풀리는 원인과 팀에 공유한 4가지 규칙.