💄 Style: 선택된 태그 이동하는 애니메이션 구현 완성 #79

youngju6143 · 2025-03-15T06:57:32Z

📌 개요

#76 [Feat] 선택한 태그 이동하는 애니메이션 구현

📋 변경사항

태그를 선택했을 때 원 안으로 이동하는 애니메이션을 구현했어요

기능

선택한 태그가 4개 이상일 시, 선택된 태그는 각 지정된 좌표로 이동해요

화면

기능	스크린샷
선택 태그 이동 애니메이션

✅ 체크사항

기능이 정상적으로 동작하는지 확인
코드 스타일 및 규칙 준수 확인
UI가 변경된 경우 스크린샷 첨부 여부 확인

Summary by CodeRabbit

New Features
- 태그 요소에 클릭 이벤트 기능이 추가되어 사용자 인터랙션이 향상되었습니다.
- 태그 선택 시 동적으로 위치가 조정되는 기능이 도입되어, 태그 배치가 보다 안정적으로 표시됩니다.
Style
- 애니메이션 효과 설정이 개선되고, 불필요한 스타일 코드가 정리되어 UI의 일관성이 강화되었습니다.
Bug Fixes
- 태그 구성 요소의 위치 설정이 개선되어 태그 표시가 더욱 정확해졌습니다.

coderabbitai · 2025-03-15T06:57:38Z

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

이번 PR은 전역 CSS에서 애니메이션 관련 주석 제거 및 불필요한 위치 지정 클래스들을 삭제하고, 멀티 스텝 폼 내 태그 구성 파일에서 태그의 위치 값을 조정하는 한편, 태그 UI 컴포넌트들에 대해 클릭 이벤트 핸들러 추가와 동적 위치 설정 로직을 도입하였습니다.

Changes

File(s)	변경 요약
`src/app/globals.css`	`scaleAnimation` keyframe 내 주석 삭제 및 `.move-to-one`, `.move-to-two`, `.move-to-three` 클래스 제거
`src/features/multi-step-form/ui/careerForm/tagFormStep/config/config.ts` `src/features/multi-step-form/ui/careerForm/tagFormStep/ui/TagBox.tsx`	`tagConfig` 항목의 `position` 값 수정 및 `fixedPosition` 속성 추가, `TagBox`에서 import 업데이트, `useEffect` 제거, `MAX_DYNAMIC_TAGS` 상수 추가, `getTagPositions` 함수 도입, 클릭 핸들러 이동 및 className 로직 갱신
`src/shared/ui/tag/tag.tsx`	`TagProps` 인터페이스에 선택적 `onClick` 프로퍼티 추가 및 컴포넌트 함수 파라미터, `span` 요소에 클릭 핸들러 적용

Sequence Diagram(s)

sequenceDiagram
    participant 사용자
    participant TagBox
    participant Tag

    사용자가->>Tag: 태그 클릭 이벤트 발생
    Tag-->>TagBox: 클릭 이벤트 전달 (onClick 핸들러)
    TagBox->>TagBox: getTagPositions 함수 실행하여 태그 위치 결정
    TagBox-->>사용자: 새로운 태그 위치 업데이트 반영

Possibly related PRs

[Feat] 대표 썸네일 페이지 UI 구현, 선택 태그 페이지 인터렉션 구현(선택 태그 이동 제외) #72: 글로벌 CSS 파일 내 애니메이션 및 클래스 조정과 관련한 코드 수정으로 직접적인 연관성이 있음.

Suggested labels

🚀 feature

Suggested reviewers

semnil5202
JaeIn1
jangwonyoon
evenway2025

Tip

⚡🧪 Multi-step agentic review comment chat (experimental)

We're introducing multi-step agentic chat in review comments. This experimental feature enhances review discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments.
- To enable this feature, set early_access to true under in the settings.

📜 Recent review details

Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ebca941 and 044a7c4.

📒 Files selected for processing (2)

src/features/multi-step-form/ui/careerForm/tagFormStep/config/config.ts (5 hunks)
src/features/multi-step-form/ui/careerForm/tagFormStep/ui/TagBox.tsx (3 hunks)

✨ Finishing Touches

📝 Generate Docstrings

🪧 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.
@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.

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.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/features/multi-step-form/ui/careerForm/tagFormStep/ui/TagBox.tsx (2)
31-40: 태그 고정 위치 상수를 정의했습니다.

4개 이상의 태그가 선택될 때 각 태그의 고정 위치를 정의하는 상수가 추가되었습니다. 이는 태그 선택 시 특정 위치로 이동하는 애니메이션을 구현하기 위한 좋은 접근방식입니다.

추후에 이 상수를 별도의 파일로 분리하는 것이 좋을 것 같습니다. 주석에도 언급되어 있듯이 파일 분리를 고려해보세요.

42-78: 태그 위치 계산 함수가 추가되었습니다.

선택된 태그의 위치를 계산하는 getTagPositions 함수가 추가되었습니다. 선택된 태그 수와 선택 순서에 따라 태그의 위치를 동적으로 결정합니다.

함수가 다소 복잡하고 조건문이 많아 가독성이 떨어집니다. 다음과 같이 리팩토링을 고려해보세요:
function getTagPositions(position: string, tag: TagConfigItem) {
  // 4개 이상 선택된 경우 고정 위치 반환
  if (tagArray.length >= 4 && tagArray.includes(tag.message)) {
    return tagFixedPositions[tag.message];
  }

+  // 선택된 태그의 인덱스 찾기
+  const tagIndex = tagArray.indexOf(tag.message);
+  if (tagIndex === -1) return position;

+  // 위치 타입 파악
+  const isTop = position.includes('top');
+  const isBottom = position.includes('bottom');
+  const isLeft = position.includes('left');
+  const isRight = position.includes('right');

+  // 위치에 따른 좌표 반환
+  if (tagIndex === 0) {
+    if (isTop && isLeft) return 'left-[calc(50%-40px)] top-[calc(50%-56px)]';
+    if (isTop && isRight) return 'right-[calc(50%-28px)] top-[calc(50%-56px)]';
+    if (isBottom && isRight) {
+      return tag.message === '취미' 
+        ? 'right-[calc(50%-28px)] bottom-[calc(50%+16px)]'
+        : 'right-[calc(50%-52px)] bottom-[calc(50%+16px)]';
+    }
+    if (isBottom && isLeft) return 'left-[calc(50%-40px)] bottom-[calc(50%+16px)]';
+  }
  
+  // 나머지 인덱스에 대한 처리...
}

📜 Review details

Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f99275c and ebca941.

📒 Files selected for processing (4)

src/app/globals.css (1 hunks)
src/features/multi-step-form/ui/careerForm/tagFormStep/config/config.ts (2 hunks)
src/features/multi-step-form/ui/careerForm/tagFormStep/ui/TagBox.tsx (2 hunks)
src/shared/ui/tag/tag.tsx (3 hunks)

🔇 Additional comments (12)

src/app/globals.css (1)

165-165: 주석만 제거되었고 기능적 변화는 없습니다.

CSS 애니메이션의 transform 속성에서 주석이 제거되었지만, 코드의 기능은 변경되지 않았습니다.

src/shared/ui/tag/tag.tsx (3)

18-18: Tag 컴포넌트에 클릭 이벤트 처리 기능이 추가되었습니다.

Tag 컴포넌트에 onClick 속성을 추가하여 클릭 이벤트를 처리할 수 있는 기능이 추가되었습니다. 이것은 태그 선택 애니메이션 구현을 위한 좋은 변경사항입니다.

41-41: 함수 시그니처가 업데이트되었습니다.

onClick 매개변수가 Tag 함수 시그니처에 추가되었습니다. 이로써 클릭 이벤트 처리 기능이 컴포넌트에 통합되었습니다.

63-63: span 요소에 onClick 핸들러가 추가되었습니다.

span 요소에 onClick 핸들러가 추가되어 Tag 컴포넌트가 클릭 이벤트에 응답할 수 있게 되었습니다.

src/features/multi-step-form/ui/careerForm/tagFormStep/config/config.ts (4)

7-7: 타입 선언에서 주석이 제거되었습니다.

message 속성의 타입 선언에서 주석이 제거되었습니다. 기능적 변화는 없습니다.

54-54: 태그 위치가 조정되었습니다.

'최근 소식' 태그의 위치가 'bottom-40'에서 'bottom-40 left-0'로 변경되었습니다. 이는 애니메이션 구현을 위한 위치 조정입니다.

62-62: 태그 위치가 조정되었습니다.

'활동 지역' 태그의 위치가 'top-20'에서 'top-20 left-0'로 변경되었습니다. 이는 애니메이션 구현을 위한 위치 조정입니다.

70-70: 태그 위치가 조정되었습니다.

'소속 정보' 태그의 위치가 'left-1/2 -translate-x-1/2'에서 'left-40 top-0'로 변경되었습니다. 이는 애니메이션 구현을 위한 위치 조정입니다.

src/features/multi-step-form/ui/careerForm/tagFormStep/ui/TagBox.tsx (4)

7-7: TagConfigItem 타입 가져오기가 추가되었습니다.

TagConfigItem 타입을 명시적으로 가져와서 타입 안전성을 향상시켰습니다.

80-83: useEffect가 이동되었습니다.

useEffect 훅이 컴포넌트 끝 부분으로 이동되었습니다. 기능적 변화는 없습니다.

97-97: 태그 위치 계산 로직이 업데이트되었습니다.

태그 위치 계산 로직이 업데이트되어 새로 추가된 getTagPositions 함수를 사용합니다. 이로써 선택된 태그는 동적으로 계산된 위치로 이동할 수 있게 되었습니다.

99-99: Click 이벤트 핸들러가 Tag 컴포넌트로 이동되었습니다.

onClick 이벤트 핸들러가 태그 컴포넌트로 이동되어 태그 선택 기능이 개선되었습니다. 이는 UI/UX 개선에 좋은 변화입니다.

jangwonyoon

고생하셨습니다~

evenway2025

제 기준에서 이 코드는 이븐하게 잘 작성된 것 같습니다. 고생하셨습니다. Approve 드리겠습니다. 🎊

youngju6143 added 2 commits March 15, 2025 15:38

💄 Style: 선택된 태그 이동하는 애니메이션 구현 완성

a209890

🐛 Fix: step 순서 변경

ebca941

youngju6143 added the 💄 style 스타일 label Mar 15, 2025

youngju6143 self-assigned this Mar 15, 2025

youngju6143 requested review from semnil5202, jangwonyoon, JaeIn1 and evenway2025 as code owners March 15, 2025 06:57

youngju6143 linked an issue Mar 15, 2025 that may be closed by this pull request

[Feat] 선택한 태그 이동하는 애니메이션 및 기능 구현 #76

Closed

2 tasks

coderabbitai bot reviewed Mar 15, 2025

View reviewed changes

♻️ Refactor: 상수 변수화 및 fixedPosition config로 이동

044a7c4

youngju6143 added the auto approve PR에 대한 Auto Approve입니다. label Mar 15, 2025

jangwonyoon approved these changes Mar 15, 2025

View reviewed changes

evenway2025 approved these changes Mar 15, 2025

View reviewed changes

youngju6143 merged commit 50c3d8f into develop Mar 15, 2025
1 of 2 checks passed

youngju6143 deleted the feat/#76-choose-tag-animation branch March 15, 2025 07:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

💄 Style: 선택된 태그 이동하는 애니메이션 구현 완성 #79

💄 Style: 선택된 태그 이동하는 애니메이션 구현 완성 #79

youngju6143 commented Mar 15, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 15, 2025 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested labels

Suggested reviewers

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

coderabbitai bot left a comment

jangwonyoon left a comment

evenway2025 left a comment

💄 Style: 선택된 태그 이동하는 애니메이션 구현 완성 #79

💄 Style: 선택된 태그 이동하는 애니메이션 구현 완성 #79

Conversation

youngju6143 commented Mar 15, 2025 • edited by coderabbitai bot Loading

📌 개요

📋 변경사항

기능

화면

✅ 체크사항

Summary by CodeRabbit

coderabbitai bot commented Mar 15, 2025 • edited Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested labels

Suggested reviewers

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

jangwonyoon left a comment

Choose a reason for hiding this comment

evenway2025 left a comment

Choose a reason for hiding this comment

youngju6143 commented Mar 15, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 15, 2025 •

edited

Loading