VS 코드로 지금 작업하고 있는데요. 코드 레벨에서 보여지는 것 그리고 스토리북 그리고 실제 프로덕트의 관계가 정확하게 어떻게 되는지 궁금합니다. 스토리북이라는 게 내가 코드를 작성하면은 스토리북에서 자동으로 변환이 된다는가요?. 예를 들면 내가 컴포넌트들을 만들 경우에 스토리북이라는게 자동으로 생성되는 것인지 아니면 스토리북이라는 게 하나의 노트처럼 내가 그걸 하나하나 작성하고 기입해야 되는 건지? 그리고 코드 레벨과 스토리북 사이의 연결은 어떻게 되는 건지 궁금합니다. 그리고 즉 내가 클로드 코드를 이용해서 코드 레벨에 어떤 걸 수정했을 경우에 그게 스토리북에도 연결이 되는 건지. 요

1. 컴퍼넌트가 새로 생길때마다 스토리북은 자동 등록인가? 아니요, 원래는 개발자가 스토리북에 등하고 싶은 컴퍼넌트의 스토리 파일을 작성해야 스토리북에 등록됩다. 보통 ComponentName.jsx.stories 라는 이름으로 작성을하면 pnpm storybook 커맨드를 실행했을때 프로젝트 내의 모든 stories 파일을 모아다 화면에서 보이는것처러 로컬 호스트에서 빌드를 해주는겁니다. **중요** 다만 우리가 공부하고있는 "스타터 키트"에는 제가 미리 세팅한 스토리북 + 클로드 코드 스킬로 인해서 (component-work) 사용자가 컴퍼넌트를 새로 등록할때 자동으로 스토리북에 등록하도록 유도합니다. 다만 스킬 호출이 100% 보장은 아니지만 왠만한 상황에서는 적용됩니다. 이 내용의 관계는 S2 > 스타트업 살표보기에서 언급되는데 해당 영상의 "슬라이드"자료도 꼭 살펴보시기 바랍니다. 2. 코드 베이스와 스토리북의 관계 피그마를 예로 설명드리면 우리가 디자인 컴퍼넌트를 만들면 그걸 피그마에서 "컴퍼넌트"로 등록시킬 수 있습니다. 여기에 원본 "메인 컴퍼넌트"가 있고 원본을 복사해서 실제 UI에 적용하는 instance가 있습니다. 인스턴스들이 여러화면에 이미 배치가되어있는 상태에서 메인 컴퍼넌트를 수정하면 한꺼번에 바뀝니다. 이제 다시 react.js로 넘어오면 Component.jsx 자체는 원본 컴퍼넌트이며 Page.jsx라는 페이지 역할을 하는 상위 컴퍼넌트에서 Component.jsx를 불러와서 재활용할 수 있습니다. 이때 스토리북은 위에서 Page.jsx가 컴퍼넌트를 불러와서 재활용한것 처럼 Component.stories.jsx 에서 불러오지만 미리 규약된 방식에 의해서 해당 컴퍼넌트의 기본 가이드와 props에 의한 배레이션을 문서로 보여줄 수 있는겁니다. AI이전에는 이 스토리 파일 작성법을 다 숙지했어야하는데 지금이 해당 컴퍼넌트의 스펙만 작업자가 알고있으면, 어떤식으로 베리에이션해서 스토리 문서에 등록하라고 지시할 수 있는거죠. 그런데 이 조차도 스타터 키트의 component-work 스킬에 의해서 docs에서 props를 보여주는 방식 + props가 바뀔때의 경우를 너무 과하지 않게 필요한 만큼 보여주라는 가이드가 내장된 상태입니다. 3. 코드 베이스를 수정했을때 스토리북 자동 갱신 자동으로 갱신되는 경우, 직접 지시해야할 경우가 모두 발생합니다. 예를들어 컴퍼넌트의 props는 그대로고 다른 내용만 수정했을때는 당연히 해당 스토리에서 컴퍼넌트 원본을 불러왔기때문에 자동으로 바뀝니다. 하지만 작업을하다가 특정 컴퍼넌트의 props를 추가하거나, 삭제하거나 혹은 변경 사항이 있을경우는 이 부분을 다시 반영해줘야합니다. 하지만 이 경우도 /component-work이 감지해서 변경사항을 스토리북에 반영하도록 유도합니다.