Skip to content

[UNI-267] refactor : createMarkerElement 재 함수화 및 적용#167

Merged
jpark0506 merged 5 commits intofefrom
feat/UNI-267
Feb 17, 2025
Merged

[UNI-267] refactor : createMarkerElement 재 함수화 및 적용#167
jpark0506 merged 5 commits intofefrom
feat/UNI-267

Conversation

@dgfh0450
Copy link
Copy Markdown
Contributor

📝 PR 타입

  • 기능 구현
  • 기능 수정
  • 버그 수정
  • 리팩토링
  • 인프라, 의존성, 환경 변수, 빌드 관련 코드 업데이트

🚀 변경 사항

createMarkerElement 리팩토링

        createMarkerElement({
	        type: Markers.ORIGIN,
	        title: marker.property.buildingName,
	        className: "translate-pinmarker",
        });
  • 기존 하나의 함수, createMarkerElement에 마커의 타입, 이름 등 정보를 입력하여 다양한 종류의 마커를 생성하던 과정을 각 종류별 마커를 생성하는 독립 함수로 분리하였습니다
	const {
		cautionMarkerElement,
		dangerMarkerElement,
		buildingMarkerElement,
		selectedBuildingMarkerElement,
		originMarkerElement,
		destinationMarkerElement,
	} = createMarkerElement();

        originMarker.content = originMarkerElement({ name: origin.buildingName });
  • 다음과 같이 분리하여 더 명확한 기능을 수행하는 함수로 분리하였습니다.
  • 내부 함수들은 Closure로 안에서만 접근이 가능합니다.

마커 className 재정의

image - 다음과 같이 그림자가 있는 마커는 `translate-shadowmarker` image - 다음과 같이 아래 이름이 있는 마커는 `translate-namedmarker` 로 변경하였습니다.

💡 To Reviewer

  • 현재와 동일 결과 확인하였습니다.
  • PR이 승인되면 추후 Navigation등 현재 사용중인 로직을 모두 이관할 수 있습니다.

@dgfh0450 dgfh0450 added 💡 refactor 기능 개선 🧇 fe 프론트엔드 task labels Feb 17, 2025
@dgfh0450 dgfh0450 requested a review from jpark0506 February 17, 2025 12:02
@dgfh0450 dgfh0450 self-assigned this Feb 17, 2025
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Feb 17, 2025

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.

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


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Copy Markdown
Contributor

@jpark0506 jpark0506 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM~ 고생하셨습니다!! 변경하신 코드에 리팩토링해보겠습니다

const markerElement = createMarkerElement({
type: Markers.DANGER,
className: "translate-pinmarker",
className: "translate-shadowmarker",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

명시적인 이름으로 바뀐 점 좋습니다!

Comment on lines +288 to +308
const waypointMarkerElement = ({ className }: MarkerProps) => {
const containerElement = createContainerElement(`translate-waypoint ${className}`);

const imageElement = createImageElement(Markers.WAYPOINT);

containerElement.appendChild(imageElement);

return containerElement;
};

return {
dangerMarkerElement,
cautionMarkerElement,
buildingMarkerElement,
selectedBuildingMarkerElement,
originMarkerElementWithName,
destinationMarkerElementWithName,
originMarkerElement,
destinationMarkerElement,
reportMarkerElement,
waypointMarkerElement,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

함수 분리로 비즈니스 코드가 깔끔해졌네요! 고생하셨습니다!

@jpark0506 jpark0506 merged commit 4a91f98 into fe Feb 17, 2025
@jpark0506 jpark0506 deleted the feat/UNI-267 branch February 25, 2025 07:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🧇 fe 프론트엔드 task 💡 refactor 기능 개선

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants