2620227
75685e41da
문제: 기존 반응형 @media 가 base.css(2번째 로드)에 있어, 뒤에 로드되는 components/layout 규칙에 덮여 사실상 무력했음(폰에서 그리드가 안 접힘). - public/css/responsive.css 신설, _header 에서 맨 마지막에 <link> → 미디어쿼리가 데스크톱 규칙을 !important 없이 정상 override - base.css 의 죽은 반응형 블록 제거(responsive.css 로 이관) - @media 640: 헤더 flex-wrap(검색창 둘째 줄 전체폭·숨김 해제), 탭 영역 44px, 크롭 스테이지 aspect-ratio 정사각, 입력 16px(iOS 확대 방지), 좌우 여백/모달 여백 축소, 프로필 히어로 세로 스택 - 데스크톱(>640)은 규칙 미적용 → 기존과 픽셀 동일 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
AI DEV — 사내 개발 포털
사내 개발 도구로 한 번에 이동하고, 내가 만든 프로젝트를 동료와 공유·소통하는 곳입니다. 행번으로 로그인하면 바로 쓸 수 있어요.
🔗 접속: https://portal.bokdev.in
📖 자세한 사용 매뉴얼: https://gitea.bokdev.in/playground/MANUAL (포털 헤더의 매뉴얼 버튼에서도 열 수 있어요)
처음 오셨나요?
- 로그인 — 포털에 들어가면 자동으로 사내 로그인(Keycloak) 화면으로 이동합니다. 행번과 비밀번호로 로그인하세요. 별도 회원가입은 없습니다.
- 로그인하면 대시보드가 열립니다. 아래 세 가지를 할 수 있어요.
무엇을 할 수 있나요?
1. 개발 도구 바로가기
대시보드 맨 위 개발 도구 카드를 누르면 새 탭으로 이동합니다. 포털에 로그인돼 있으면 대부분 다시 로그인 없이(SSO) 바로 들어갑니다.
- 모두 사용: Coder(클라우드 IDE), Gitea(Git 저장소), Kubero(배포)
- 관리자 전용: Harbor·OpenEverest·MinIO·Keycloak·LiteLLM (권한이 있는 분에게만 보입니다)
2. 내 프로젝트 공유
- 새 프로젝트 버튼으로 등록합니다. 제목·설명(Markdown 지원)·태그·저장소 URL·배포 URL을 넣을 수 있어요. 저장소 URL을 넣고 README 가져오기를 누르면 설명을 자동으로 채워줍니다.
- 공개/비공개를 고를 수 있습니다. 공개하면 동료들의 피드에 보이고, 비공개는 나만 봅니다(언제든 전환 가능).
- 등록한 프로젝트는 상세 화면의 ✏️ 수정 버튼으로 내용을 고치거나 삭제할 수 있습니다.
3. 동료 프로젝트 둘러보기
- 공유 프로젝트 피드에서 동료들이 만든 결과물을 봅니다. 최신순·인기순 정렬, 헤더 검색으로 찾기.
- ❤️ 좋아요, ⭐ 즐겨찾기, 💬 댓글(답글·LGTM)로 응원과 피드백을 남겨보세요.
- 이름/아바타를 누르면 그 사람의 프로필로 이동해 그가 만든 프로젝트를 모아 볼 수 있습니다.
그 외
- 프로필 사진을 올릴 수 있어요(내 프로필 → 사진의 + 버튼).
- 헤더에서 다크/라이트 테마를 전환할 수 있습니다.
문제가 있거나 아이디어가 있다면
버그·건의는 이슈로 남겨 주세요 — 언제든 환영합니다. 👉 https://gitea.bokdev.in/playground/ai-dev-portal/issues
개발자용 (참고)
서버 렌더링 기반의 가벼운 웹앱입니다. Node(Express + EJS) + Postgres, 로그인은 Keycloak OIDC. 프런트 프레임워크·번들러 없이 정적 CSS/바닐라 JS로 동작합니다.
cp .project-env.example .project-env # 값 채우기 (OIDC_CLIENT_SECRET 등)
set -a; . ./.project-env; set +a
npm install
npm run db:init # schema.sql 적용 (최초 1회)
npm run dev # http://localhost:3000
- 배포는 Kubero(NodeJS buildpack), 도메인
portal.bokdev.in. - 브랜드명
AI DEV는PORTAL_BRAND환경변수로 바꿀 수 있습니다. - 코드 구조·작업 규약·환경변수 등 자세한 내용은
CLAUDE.md를 참고하세요.