WebIC(Web IDE + Metric)는 웹 기반 코드 편집기 환경에
코딩 활동 데이터(타자 시간, 코딩량, 생산성 등)를 추적하는 Metric 기능을 결합한 서비스입니다.
Monaco Editor 기반 IDE UI + GitHub Repository 연동 + AI 보조 기능을 포함합니다.
폴더구조는 상이할 수 있습니다. 컴포넌트 분리로 추가페이지나 링크 있을 수 있음.
for_webic/
├─ app/
│ ├─ (auth)/ # 로그인 / 회원가입 (Clerk)
│ ├─ main/ # WebIC 메인 페이지
│ ├─ layout.tsx # 전체 레이아웃
│ └─ globals.css # 전역 스타일 (Tailwind)
│
├─ components/
│ ├─ sidebar/ # Left Sidebar, Navigation
│ ├─ filetree/ # 파일트리 UI
│ ├─ editor/ # Monaco Editor 컴포넌트
│ ├─ terminal/ # (예정) Terminal UI
│ ├─ replychat/ # 댓글/스레드 패널
│ └─ ui/ # shadcn/ui 기반 공통 UI
│
├─ lib/
│ ├─ client/ # Clerk · Liveblocks · GitHub client
│ ├─ utils/ # 유틸 함수
│ └─ types/ # 타입 정의
│
├─ public/
│ └─ icons/ # 아이콘 파일
│
├─ styles/
│
├─ package.json
└─ README.md
- 1 컴포넌트 = 1 기능
- UI 컴포넌트는 components/ui/
- IDE 기능 컴포넌트는 영역별 폴더 분리
(editor, filetree, sidebar, replychat 등)
- 기본 테마: Dark
- 메인 컬러: Indigo / Blue
- 포인트 컬러: Purple, Pink
- 로고: 각진 형태 W / 사각형 파비콘에서도 선명
- Left Sidebar
- FileTree
- Editor + Tabs
- Right Panel(Chat/AI)
| 기능 | 기술 |
|---|---|
| 프레임워크 | Next.js |
| UI | TailwindCSS v3 + shadcn/ui |
| 에디터 | Monaco Editor |
| 인증 | Clerk |
| 실시간 협업 | Liveblocks |
| 상태관리 | React Hooks |
| 배포 | Vercel |
- GitHub OAuth 로그인
- 사용자 Repo 목록 가져오기
- Repo 선택 후 DB 저장
- Repo 파일 구조 읽기
- 파일 쓰기 → 커밋 기능
- 브랜치 선택
- 파일 업로드 기능
- @/components/... alias 사용
- 비즈니스 로직 → lib/
- UI 요소 → components/ui/
필수 Tailwind 선언:
@tailwind base; @tailwind components; @tailwind utilities;
- .env.local
- Clerk / Liveblocks / GitHub OAuth 키 필요
npm install
npm run dev
- globals.css 내부에 @tailwind base 누락 여부 확인
react-arborist 기본 아이콘이 덮어써져 VSCode 스타일 아이콘 강제 적용 작업 필요.
Liveblocks Thread 렌더링 에러 발생 → 로그 기반 원인 분석 중.
- Clerk 로그인/회원가입
- IDE 레이아웃 구축
- Sidebar / FileTree / Editor 배치
- Monaco Editor 적용
- FileTree 연동
- GitHub OAuth → Repo 목록 표시
- 타자 시간 Tracking 기능
- Today/Weekly Graph 페이지 추가
- Replychat 안정화
- Monaco Editor 문서
- GitHub OAuth Flow
- 멘토링 가이드
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.