Skip to content

docs(AX): AI 코드 품질 지침 추가와 개인 작업 스킬 분리 - #242

Merged
minbros merged 3 commits into
devfrom
docs/frontend-code-guidelines
Oct 20, 2026
Merged

minbros merged 3 commits into
devfrom
docs/frontend-code-guidelines

Conversation

@KangShinGyu98

Copy link
Copy Markdown
Collaborator

노션

변경 내용

  • docs/code-conventions/에 AI 코드 품질 지침 두 개를 추가했습니다. principles.md는 철학과 패턴(절마다 목적 → 규칙 → 대표 예시), anti-patterns.md는 AI가 자주 만드는 안티패턴 23개와 ✓ 대안입니다. AGENTS.md에는 두 문서를 가리키는 2줄만 넣었습니다.
  • Design.md를 지침에 맞췄습니다. 실제 토큰 이름으로 예시를 고쳤고, 원시 색은 맞는 semantic이 없을 때만 bg-[var(--…)]로 씁니다. 컴포넌트는 shadcn 도입 전까지 기존 공용 컴포넌트와 병행하고, 상태 위치·필수 상태는 지침을 가리킵니다. 같은 정책으로 tailwind.config.js·globals.css의 토큰 주석만 고쳤습니다(값 변경 없음).
  • 개발 환경마다 달라지는 start-work·open-pr·check-screens 스킬과 scripts/check-screens.mjs를 저장소에서 뺐습니다(개인 스킬로 이동). screens 스크립트와 playwright 의존성, CONTRIBUTING·PR 템플릿의 관련 안내도 정리했습니다.
  • 브랜치·PR 규칙, 화면 확인 기준, PR 템플릿 체크리스트 같은 팀 규칙은 그대로입니다.

변경 이유

  • AI가 쓰는 프론트엔드 코드를 정석 패턴에 맞추고, props 남발·effect 남용·숫자 보정 같은 반복 문제를 줄이기 위한 지침입니다.
  • git·화면 확인 자동화는 개발 환경에 따라 달라 팀이 함께 쓸 도구가 아니라고 판단했습니다.

테스트

  • npm run lint (에러 0, 이번에 바꾸지 않은 파일의 기존 경고 4)
  • npm test (187개 파일, 1491개 테스트 통과)
  • npm run build

🤖 Generated with Claude Code

@vercel

vercel Bot commented Oct 20, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
frontend-server Ready Ready Preview Oct 20, 2026 7:10am UTC

Request Review

@coderabbitai

coderabbitai Bot commented Oct 20, 2026

Copy link
Copy Markdown

Important

  • 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: ac5e7b42-75eb-4996-b675-92e28d027d6b
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@sonarqubecloud

Copy link
Copy Markdown

@minbros
minbros merged commit c0ec1b0 into dev Oct 20, 2026
5 checks passed
minbros added a commit that referenced this pull request Oct 22, 2026
* chore(workflow): github 자동화·화면 테스트 자동화 (#239)

* chore(workflow): 브랜치 종류 정리와 작업 시작·PR 스킬 추가

- CONTRIBUTING에 브랜치 종류 표(fix·refactor·chore·docs 추가), PR 전 검증, 작업 공유 기준 정리
- PR 템플릿에 노션 링크 칸 추가
- Claude Code 스킬 start-work, open-pr 추가
- vitest에 테스트용 NEXT_PUBLIC 환경 변수를 넣어 36개 파일 로드 실패 수정
- .claude/settings.local.json을 gitignore에 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* chore(workflow): 화면 확인 스크립트와 check-screens 스킬 추가

- npm run screens: Playwright로 PC 크롬·사파리(WebKit)·안드로이드(Galaxy S24 에뮬레이션), simctl로 아이폰 시뮬레이터 스크린샷
- 전용 크롬 프로필에서 로그인해 localhost 인증 쿠키만 저장
- 3000번 dev 서버가 현재 폴더 코드인지 검사
- open-pr 검증에 화면 확인 단계, PR 템플릿에 화면 확인 항목 추가
- CONTRIBUTING에 화면 확인 기준 표 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix(workflow): 화면 확인 스크립트 입력 검증과 PR 스킬 확인 단계 보완

- --label은 .screens 바로 아래 폴더 이름만, --base는 로컬 http 주소만, --path는 앱 안 경로만 허용
- login이 고정 포트 대신 빈 포트로 띄운 전용 프로필 크롬에만 연결·저장·종료
- 외부 명령(lsof·git·open·xcrun·xcode-select)을 절대 경로로 호출
- open-pr: 기존 PR 갱신도 push 전에 커밋 목록을 보여 주고 확인

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix(workflow): 화면 확인 스크립트 경로·인자 검증을 사용 지점에서 확인

- --base는 허용한 호스트 이름과 숫자 포트로 주소를 다시 만들어 크롬 인자로 넘김
- 결과 파일은 쓰기 직전에 .screens 안인지 확인하고, 사용법 오류는 ✖ 메시지로 출력

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

* feat(calendar): 여행 날짜 선택 달력 적용 (#240)

* chore(workflow): 브랜치 종류 정리와 작업 시작·PR 스킬 추가

- CONTRIBUTING에 브랜치 종류 표(fix·refactor·chore·docs 추가), PR 전 검증, 작업 공유 기준 정리
- PR 템플릿에 노션 링크 칸 추가
- Claude Code 스킬 start-work, open-pr 추가
- vitest에 테스트용 NEXT_PUBLIC 환경 변수를 넣어 36개 파일 로드 실패 수정
- .claude/settings.local.json을 gitignore에 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* chore(workflow): 화면 확인 스크립트와 check-screens 스킬 추가

- npm run screens: Playwright로 PC 크롬·사파리(WebKit)·안드로이드(Galaxy S24 에뮬레이션), simctl로 아이폰 시뮬레이터 스크린샷
- 전용 크롬 프로필에서 로그인해 localhost 인증 쿠키만 저장
- 3000번 dev 서버가 현재 폴더 코드인지 검사
- open-pr 검증에 화면 확인 단계, PR 템플릿에 화면 확인 항목 추가
- CONTRIBUTING에 화면 확인 기준 표 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* feat(calendar): 날짜 선택 디자인 작업 중 (WIP)

* feat(calendar): 캘린더 주변 박스 제거

* test(calendar): 날짜 선택 달력에 맞춰 여행 정보 수정 테스트 갱신

- 날짜 input 대신 날짜 칸 클릭 → 날짜 선택 → 확인 순서로 변경
- 날짜 칸 접근성 이름을 "시작 날짜·종료 날짜 + 날짜"로 확인
- showPicker 키보드 테스트를 달력 열기·취소 테스트로 교체

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix(workflow): 화면 확인 스크립트 입력 검증과 PR 스킬 확인 단계 보완

- --label은 .screens 바로 아래 폴더 이름만, --base는 로컬 http 주소만, --path는 앱 안 경로만 허용
- login이 고정 포트 대신 빈 포트로 띄운 전용 프로필 크롬에만 연결·저장·종료
- 외부 명령(lsof·git·open·xcrun·xcode-select)을 절대 경로로 호출
- open-pr: 기존 PR 갱신도 push 전에 커밋 목록을 보여 주고 확인

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix(workflow): 화면 확인 스크립트 경로·인자 검증을 사용 지점에서 확인

- --base는 허용한 호스트 이름과 숫자 포트로 주소를 다시 만들어 크롬 인자로 넘김
- 결과 파일은 쓰기 직전에 .screens 안인지 확인하고, 사용법 오류는 ✖ 메시지로 출력

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix(calendar): 여행 정보 수정 폼을 연 순간 값으로 유지하고 달력은 고른 날짜만 반영

- 모달을 연 뒤 서버 값이 바뀌어도 입력 칸을 다시 채우지 않고, 바꾼 게 없으면 적용하기 비활성
- 저장은 화면 값 그대로, 기간 축소 확인은 서버 최신 기간 기준
- 달력은 고른 쪽만 바뀌고 아무것도 고르지 않고 닫으면 그대로
- 모바일 달력 팝업 가로 최소 300px, 화면보다 높으면 안에서 세로 스크롤

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

* docs(AX): AI 코드 품질 지침 추가와 개인 작업 스킬 분리 (#242)

- AI 프론트엔드 코드 품질 지침과 문서 연결 추가
- 개인 개발 스킬과 화면 확인 도구를 저장소에서 분리

* feat(route): 웹 동선보기 장소 이동 네비게이션 추가 (#241)

- 웹 동선보기의 이전·다음 장소 탐색과 지도·일정 카드 연동 추가

* feat(map): 장소 검색 UI를 피그마 디자인에 맞게 개편 (#243)

* feat(map): 장소 검색 UI를 피그마 디자인에 맞게 개편

- 검색 칩과 가로 스크롤 툴바, 검색 상태 및 장소 미리보기 정리
- 선택 핀 이름 우선순위와 경로 복귀 상태 유지
- 로그인 페이지 내부 헬퍼의 잘못된 export와 관련 테스트 수정

* fix(map): 검색창 포커스 중 지우기 버튼 숨김

* fix(map): 장소 말풍선을 선택 핀 상단에 연결

* fix(map): 장소 말풍선과 핀 사이 여백 조정

* fix(map): 검색 모드 충돌과 검색 UI 상호작용 개선

- 카테고리 검색과 텍스트 검색을 상호 배타적으로 전환
- 빈 검색창과 지우기 동작에서 검색 아이콘으로 복귀
- 툴바 높이 고정 및 자동완성 강조 상태 통합
- 닫기 버튼 영역 정렬과 말풍선 자동 포커스 제거

* fix(map): 검색어 삭제 시 피그마 기본 검색창 상태 유지

- Filled 상태에서 지우면 펼쳐진 빈 검색창으로 복귀
- 포커스가 없는 빈 검색창도 바깥 클릭 시 접기

* fix(map): 자동완성 선택 시 상세정보 바로 표시

* fix(place): 사진 한 장 조회 시 단건 API 사용

- 단건 사진 훅의 batch 선행 호출 제거
- 공유 캐시와 사진 없음 만료 및 재시도 동작 검증

* fix(map): 현 위치 검색 후 필터 변경 시 Places 중복 검색 제거 (#245)

* docs(workflow): 화면 확인 지침 삭제

---------

Co-authored-by: KangShingyu <103213494+KangShinGyu98@users.noreply.github.com>
Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

This branch was successfully deployed

1 active deployment
Preview — 443d0765 Deployed Oct 20, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants