[Step1] hippo - Component 기본 구조와 JSX

[meteorqz6]

개인 목표 달성 여부

• HTML 템플릿을 React 컴포넌트로 변환하는 과정 경험하기
• 컴포넌트 단위로 UI를 나누는 기준 정하기
• CSS Module 사용법 익히기

리뷰어에게

특히 봐줬으면 하는 부분, 확신이 없는 코드, 논의하고 싶은 것

• 7e62f1c: BEM 원칙을 적용하고 CSS Module 표기법의 일관성을 확보하기 위한 커밋입니다.
• HTML 템플릿을 React 컴포넌트로 변환할 때 어떤 방식으로 진행했는지 공유하면 좋을 것 같습니다.

[ehlung]

코드에 직접 남긴 것 외에도 모듈 css와 컴포넌트를 묶어준 부분이 제 코드와 다른 점인 것 같습니다.
src 폴더에 모든 파일이 흩뿌려져 있는 것 같아서 저도 고민이 되었는데, 저 같은 경우에는 음식점 디테일/추가 모달을 컴포넌트는 분리하고 css 파일은 합쳐서 그냥 두었던 것 같습니다.
유성님은 모달의 css 파일을 중복을 감수하고 분리하신 것 같은데, 중복 없이 분리하는 더 좋은 방법이 있을지 이야기해 보면 좋을 것 같습니다!

[ehlung]

[배움]
이미지를 import 해오는 방식을 사용하신 부분이 새로워요. 저는 img 태그 안에 경로를 직접 지정해주었는데, 이 방식이 나중에 수정이 되거나 할 때도 더 좋은 것 같아요!

[ehlung]

[배움]
html을 jsx로 옮기면서 달라지는 부분에만 집중해서 해당하는 부분은 잘 정립이 안되어 있음에도 그냥 넘어갔는데, 덕분에 저도 개념 정리가 되는 것 같습니다!

[ehlung]

[배움]
BEM 원칙을 적용해서 일관된 규칙으로 통일한 점 좋은 것 같습니다. 저도 리팩토링으로 적용해보겠습니다.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 050e8c84-5ac7-406a-bc36-712852a685ea

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch hippo-step1

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}