반복해서 사용하는 문장을 템플릿으로 관리하고, 갤러리 탐색과 AI 톤 교정을 제공하는 React 19 · TypeScript 대시보드입니다.
발표 PPT 구성과 발표자 메모는 발표 준비 문서를 참고하세요.
화면 구성, 상태 관리, API 요청을 분리하여 기능을 수정할 때 확인할 코드 범위를 줄였습니다.
src/
├── App.tsx # 공통 레이아웃과 라우팅
├── pages/ # 내 템플릿, 템플릿 갤러리, AI 톤 교정
│ └── index.ts # 페이지 모음 export
├── components/ # 대시보드, 템플릿 상세, 모달 등 공통 UI
├── customHooks/ # 데이터 조회와 재사용 상태 관리
├── api/ # 생성·수정·삭제 등 API 요청 함수
├── testApi/ # 개발 화면 확인용 브라우저 테스트 API
├── models/ # 공통 데이터·오류 타입
├── contexts/ # 전역 로딩 상태
└── utils/ # 공통 유틸리티
public/
├── error-page/ # 정적 오류 안내 페이지
└── noscript-page/ # JavaScript 비활성화 안내 페이지
페이지별 전용 컴포넌트와 상태 훅은 해당 pages/ 하위에 배치했습니다. 데이터 조회는 customHooks/, 변경 요청은 api/에서 담당합니다.
2026-11-02 코드 기준입니다. 아래 상태는 프런트엔드 구현 범위이며, 운영 서버에서의 동작 검증을 의미하지 않습니다.
| 영역 | 구현 내용 | 남은 작업 |
|---|---|---|
| 공통 화면 | 헤더·사이드바·본문 레이아웃, 라우팅, 검색 입력, 로딩·오류 처리 | 계정 정보·플랜·사용량 표시 연동 |
| 내 템플릿 | 목록·검색·상세, 생성·수정·삭제, 변수 입력 후 복사 | 실제 인증·서버 환경에서 저장 및 조회 검증 |
| 템플릿 갤러리 | 샘플 목록, 검색·카테고리 필터, 상세·복사, 내 템플릿에 추가 및 중복 확인 | 준비된 목록·상세 조회 훅을 화면에 연결 |
| AI 톤 교정 | 7가지 스타일, 1,000자 입력 제한, 교정 요청·결과 복사·템플릿 저장 | 실제 AI 교정 및 플랜·사용량 연동 검증 |
| 추가 API | 내 정보·설정, 사용량, 단축어 중복 확인, 휴지통 조회·복구·영구 삭제 등 요청 코드 | 관련 화면 연결 여부와 서버 동작 검증 |
| 오류 안내 | React 오류 경계, 정적 오류·JavaScript 비활성화 안내 페이지 | 오류 리다이렉트 주소 설정 및 이동 확인 |
주요 화면과 API 호출 코드는 구현되어 있으며, 현재는 개발용 데이터로 사용자 흐름을 확인하는 단계입니다. 로그인·토큰 전달과 실제 서버 연동이 다음 작업입니다. 휴지통·계정·결제 전용 페이지는 현재 라우트에 없습니다.
검색 엔진과 공유 화면에 서비스 정보를 전달하기 위해 제목·설명 메타태그와 Open Graph·Twitter Card를 적용했습니다. 운영 배포 시 사이트명·대표 URL·이미지 경로는 실제 서비스 값으로 확정해야 합니다.
Mac의 트랙패드 뒤로가기와 iPhone의 뒤로가기 제스처(이하 ‘긴 터치 뒤로가기 제스처’)에서 발생하는 화면 멈춤 현상을 브라우저 히스토리(popstate) 동작 분석을 기반으로 개선했습니다. 현재 코드에는 Mac Safari에서 뒤로가기·앞으로가기 시 캐시된 페이지가 복원되면 pageshow의 persisted 값을 확인하여 새로고침하는 처리가 적용되어 있습니다. iPhone 환경의 개선 효과는 별도 기기 검증이 필요합니다.
안드로이드 네이버 앱에서 error 이벤트를 리스닝할 때 개인정보보호 브라우징·공유하기 기능의 브라우저 콜백 오류가 서비스 오류로 처리되는 문제를 해결했습니다. 현재 전역 비동기 오류 처리는 unhandledrejection을 대상으로 구성했습니다.
브라우저별 기본 스타일 차이는 CSS Reset/Normalize로 줄이고, Pretendard와 시스템 폰트 대체 순서를 지정했습니다. HTML5·CSS Variables·CSS Selector 지원 여부를 확인한 뒤 필요한 Polyfill만 Dynamic Import로 불러오도록 구성하여 브라우저 호환성과 번들 최적화를 함께 고려했습니다.
오류 발생 위치에 따라 처리 책임을 나누는 Error Handling Architecture를 설계했습니다. React 렌더링 오류는 ErrorBoundary, 처리되지 않은 Promise 오류는 전역 unhandledrejection 리스너, API 오류는 요청 함수와 조회 훅에서 처리합니다. 화면에서 복구할 수 있는 오류는 안내·재시도로 대응하고, 전역 오류는 공통 리다이렉트 함수와 정적 오류 안내 페이지로 연결하도록 구성했습니다. 실제 오류 페이지 이동을 위해서는 리다이렉트 주소 설정이 필요합니다.
npm run dev: 개발 서버 실행CI=true npm test -- --watchAll=false: 테스트 실행npx tsc --noEmit: 타입 검사
개발 환경에서는 테스트 API가 기본 활성화됩니다. 내 템플릿과 갤러리 저장 데이터는 새로고침하면 초기화되며, AI 결과는 원문에 정해진 문구를 붙이는 샘플 응답입니다.
REACT_APP_USE_TEST_API=false로 테스트 API를 끌 수 있습니다. 다만 현재 레이아웃은 테스트 모드 외에는 빈 토큰을 전달하므로 실제 인증 토큰 연결이 별도로 필요합니다. 갤러리 목록은 테스트 API 설정과 관계없이 샘플 데이터를 사용합니다.
API·훅·주요 UI 테스트 파일이 작성되어 있습니다. 이 문서 작성 시 테스트·빌드·브라우저 검증은 실행하지 않았습니다. 오류 리다이렉트 설정(src/config.ts)은 현재 "url" 임시 값입니다.