Skip to content

링크 관리 페이지 추가#14

Merged
yoouyeon merged 12 commits intodevelopfrom
feat/13-link-management-ui
Feb 17, 2026
Merged

링크 관리 페이지 추가#14
yoouyeon merged 12 commits intodevelopfrom
feat/13-link-management-ui

Conversation

@yoouyeon
Copy link
Contributor

@yoouyeon yoouyeon commented Dec 28, 2025

#10 에 이어서 작업하느라...
base 브랜치를 feat/9-add-meeting-settlement로 설정하고
draft pr로 올렸습니다!
앞선 PR들 마무리되면 정리해서 리뷰 요청 드릴게요!

💻 작업 내용

  • closes 링크 관리 기능 UI 개발 #13
  • 링크 관리 페이지
    • 새로운 라우트(ROUTE.myLinks) 추가
    • 지출 링크를 가져오는 mock api 추가 (아직 백엔드 명세가 나오지 않아서 요청 url 변경될 수 있습니다!)
    • 링크 관리 페이지 구현
  • 스타일 처리 로직 개선
    • 공통 processStyleProps 유틸 강화: border, layout, text 등의 추가 스타일을 처리할 수 있도록 개선
    • Text 컴포넌트 property 타입 수정 (Flex에서 사용하던 것처럼 기본적인 css 스타일들을 처리할 수 있도록 함)

📸 스크린샷

링크 목록 링크 복사
localhost_3000_my-links(Galaxy S8) (1) localhost_3000_my-links(Galaxy S8) (2)
링크 목록 스크롤 링크가 없을 때
localhost_3000_my-links(Galaxy S8) localhost_3000_my-links(Galaxy S8) (3)

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능
    • 나의 링크 페이지 추가: 경비 관련 링크를 한눈에 확인할 수 있는 새로운 페이지가 추가되었습니다.
    • 링크 복사 기능: 각 링크의 복사 버튼을 클릭하여 URL을 클립보드에 복사할 수 있으며, 복사 완료 알림이 표시됩니다.
    • 홈 화면 네비게이션: 홈 화면에서 나의 링크 페이지로 이동할 수 있는 버튼이 추가되었습니다.

- MyLinksPage 컴포넌트 추가
- 링크 경로 업데이트
- 링크가 없을 경우 모임 생성 버튼 표시
- 페이지 헤더와 내비게이션 기능 추가
- 데이터 타입 정의
- useGetExpensesLinks 훅 추가
- mock 핸들러 업데이트
- borderWidth, borderColor, borderStyle 속성 추가
- processStyleProps에 스타일 처리 로직 반영
- processStyleProps에 minWidth, overflow, display, flex, textAlign, whiteSpace, textOverflow 추가
- Text 컴포넌트에 processStyleProps 적용
- LinkBox 컴포넌트 생성
- 링크 표시/복사 기능 추가
- mock api 연결
- 로딩 중 UI 표시 추가
- processStyleProps에 minHeight와 boxSizing 처리 로직 추가
- SizeProps, LayoutProps 인터페이스에 속성 정의
@yoouyeon yoouyeon added the ✨ Feature 신규 기능 추가 label Dec 28, 2025
@coderabbitai
Copy link

coderabbitai bot commented Dec 28, 2025

Warning

Rate limit exceeded

@yoouyeon has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 9 minutes and 2 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

정산 링크 관리 기능의 UI를 개발하며, 새로운 MyLinks 페이지와 라우팅을 추가하고 링크 API 및 스타일 시스템을 확장했습니다.

Changes

Cohort / File(s) Summary
MyLinks 라우팅 및 페이지
src/app/Router.tsx, src/shared/config/route.ts
/my-links 경로 추가 및 보호된 라우트에 MyLinks 컴포넌트 등록
MyLinks 페이지 및 컴포넌트
src/pages/myLinks/MyLinksPage.tsx, src/pages/myLinks/index.ts, src/pages/myLinks/ui/LinkBox/index.tsx
로딩/데이터/빈 상태를 처리하는 MyLinksPage 및 링크 항목 표시용 LinkBox 컴포넌트 구현
링크 API 및 데이터
src/entities/expense/api/expense.ts, src/entities/expense/model/expense.type.ts, src/features/expense-management/api/useGetExpensesLinks.ts, src/mocks/handlers/expense.ts
ExpenseLink/ExpenseLinkList 타입 정의, getLinks() API 메서드, useGetExpensesLinks 쿼리 훅, MSW 모킹 추가
스타일 시스템 확장
src/shared/lib/processStyle.ts, src/shared/types/styled.d.ts, src/shared/ui/Text/index.styles.tsx
processStyleProps에 minWidth/minHeight/border/layout/text 속성 추가, SizeProps/BorderProps 확장, LayoutProps/TextProps 신규 추가
UI 컴포넌트 업데이트
src/shared/ui/Text/index.tsx, src/shared/ui/Header/index.styles.ts
Text 컴포넌트를 HTMLAttributes와 BaseStyledProps 기반으로 리팩토링, Header의 typography를 TextVariant 유틸로 단순화
HomePage 업데이트
src/pages/home/HomePage.style.ts, src/pages/home/HomePage.tsx
BoxButton을 styled(Link)로 변경, 네비게이션 대상(myLinks, /) 추가
Storybook 업데이트
src/pages/selectGroup/SelectGroupPage.stories.tsx
멤버 역할 데이터 수정(MEM B ER → PARTICIPANT)

Possibly related PRs

Poem

🐰 링크를 관리하는 새로운 페이지
숨은 스타일 시스템 더욱 강해지고
Text 컴포넌트 깔끔하게 정돈되니
복사 버튼 톡톡 누르면 완료!
마법 같은 코드의 정원이 자라나 ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check ✅ Passed PR 변경사항이 링크 관리 기능 UI 개발 요구사항을 모두 충족합니다: 라우팅 설정, 링크 없음 UI, 링크 있음 UI 구현 완료.
Out of Scope Changes check ✅ Passed 링크 관리 기능 구현을 위한 필요한 스타일 시스템 확장(processStyleProps, Text 컴포넌트 개선)이 포함되었으나 범위를 벗어나지 않음.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/13-link-management-ui

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 and usage tips.

Copy link
Contributor

@ongheong ongheong left a comment

Choose a reason for hiding this comment

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

👍👍👍

Base automatically changed from feat/9-add-meeting-settlement to develop February 17, 2026 12:03
@yoouyeon yoouyeon marked this pull request as ready for review February 17, 2026 12:08
@github-actions
Copy link

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (5)
src/shared/ui/Text/index.tsx (1)

6-15: BaseStyledProps의 커스텀 props가 DOM으로 전달될 수 있습니다.

...propsBaseStyledProps의 모든 속성이 S.Text에 전달됩니다. styled-components는 @emotion/is-prop-valid로 대부분 필터링하지만, color 등 일부 HTML 유효 속성은 DOM에 그대로 전달되어 React 콘솔 경고가 발생할 수 있습니다.

현재 동작에 문제가 없다면 당장은 괜찮지만, DOM 경고가 발생할 경우 styled-components의 shouldForwardProp 또는 transient props($ prefix) 패턴 적용을 고려해 주세요.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Text/index.tsx` around lines 6 - 15, The Text component's props
type (TextProps) extends BaseStyledProps and spreads all props into S.Text,
which can cause custom styling props (from BaseStyledProps) like color to be
forwarded to the DOM and trigger React warnings; update the styled component
S.Text to filter these by either using styled-components' shouldForwardProp to
block BaseStyledProps keys or switch to transient props (prefix prop names with
$ and update TextProps and usages accordingly), ensuring
TextProps/BaseStyledProps fields are not passed through via ...props to the
underlying DOM element (reference S.Text, TextProps, BaseStyledProps,
shouldForwardProp, and transient props).
src/shared/lib/processStyle.ts (1)

168-171: flex: 0 등 falsy 값이 무시됩니다.

props.flex && 패턴은 flex0일 때 조건이 false로 평가되어 스타일이 적용되지 않습니다. flex: 0은 flex item이 grow하지 않도록 하는 유효한 CSS 값입니다. 기존 props에도 동일한 패턴이 사용되고 있지만, flex0이 의미 있는 값으로 자주 쓰이므로 주의가 필요합니다.

제안: undefined 체크로 변경
-  ${props.flex &&
+  ${props.flex !== undefined &&
   css`
     flex: ${props.flex};
   `}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/shared/lib/processStyle.ts` around lines 168 - 171, The current
conditional uses "props.flex &&" which incorrectly skips valid falsy values like
0; update the check in the styled template that references props.flex and the
css block so it tests for undefined (e.g. props.flex !== undefined or typeof
props.flex !== 'undefined') before emitting "flex: ${props.flex};" ensuring
flex: 0 is applied when provided.
src/shared/types/styled.d.ts (1)

63-71: TextProps 이름이 Text/index.tsx의 로컬 TextProps와 충돌할 수 있습니다.

src/shared/ui/Text/index.tsx에서도 동일한 이름의 TextProps 인터페이스를 로컬로 정의하고 있어 혼동을 유발할 수 있습니다. BaseStyledTextProps 또는 TextStyleProps 등으로 구분하면 가독성이 높아질 수 있습니다.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/shared/types/styled.d.ts` around lines 63 - 71, The exported interface
TextProps in src/shared/types/styled.d.ts conflicts with the local TextProps in
src/shared/ui/Text/index.tsx; rename the exported interface to a distinct name
(e.g., BaseStyledTextProps or TextStyleProps) and update all places that import
or reference that symbol (search for TextProps imports/usages, including
styled-components and components relying on shared types) so code compiles and
the local Text/index.tsx can keep its own TextProps without collision.
src/shared/ui/Text/index.styles.tsx (1)

21-26: textAlign 스타일이 두 곳에서 적용될 수 있습니다.

Line 23에서 $textAlign을 통해 text-align을 설정하고, Line 26의 processStyleProps에서도 textAlign prop이 있으면 동일한 CSS 속성을 출력합니다. processStyleProps가 뒤에 위치하므로 우선하겠지만, 동일 속성이 두 경로로 적용되는 것은 혼동을 유발할 수 있습니다.

장기적으로 $textAlign 전용 라인을 제거하고 processStyleProps로 통합하는 것을 고려해 보세요.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Text/index.styles.tsx` around lines 21 - 26, The Text styled
component currently applies text-align twice (explicit line using $textAlign and
again via processStyleProps); remove the explicit text-align line from Text and
rely on processStyleProps to emit text-align using the $textAlign prop, but
ensure processStyleProps (or the shape it consumes) recognizes $textAlign and
applies a default of 'left' when undefined; update any references/tests
expecting the explicit behavior to use processStyleProps and keep identifiers
Text, StyledTextProps, processStyleProps, and $textAlign for locating the
change.
src/pages/myLinks/ui/LinkBox/index.tsx (1)

13-18: 복사 실패 시 사용자 피드백이 없습니다.

copyClipboardfalse를 반환하는 경우(복사 실패) 사용자에게 아무런 알림이 표시되지 않습니다. 실패 시에도 toast를 표시하면 UX가 개선됩니다.

💡 실패 케이스 처리 제안
   const copyLink = async (text: string) => {
     const isCopied = await copyClipboard(text);
     if (isCopied) {
       showToast({ type: 'success', content: '링크 복사 완료!' });
+    } else {
+      showToast({ type: 'error', content: '링크 복사에 실패했어요.' });
     }
   };
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/myLinks/ui/LinkBox/index.tsx` around lines 13 - 18, The copyLink
function currently only shows a success toast when copyClipboard returns true;
add feedback for failure by showing an error toast when isCopied is false and
also wrap the await copyClipboard(text) in try/catch to show an error toast (via
showToast) if copyClipboard throws. Update the copyLink function to call
showToast({type: 'error', content: '링크 복사 실패' /* or localized message */}) on
failure and in the catch include a generic message or the caught error for
better UX/debugging.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/pages/myLinks/MyLinksPage.tsx`:
- Around line 17-40: The isLoading branch currently builds a JSX fragment but
never returns it, so the loading UI is never rendered; update the MyLinksPage
component to return the loading JSX when isLoading is true (e.g., add a return
before the fragment) so the Header and Flex elements (Header, Flex) with the
loading text are rendered, keeping the existing props such as
leftButtonOnClick={() => navigate(-1)} and bgColor intact.

---

Nitpick comments:
In `@src/pages/myLinks/ui/LinkBox/index.tsx`:
- Around line 13-18: The copyLink function currently only shows a success toast
when copyClipboard returns true; add feedback for failure by showing an error
toast when isCopied is false and also wrap the await copyClipboard(text) in
try/catch to show an error toast (via showToast) if copyClipboard throws. Update
the copyLink function to call showToast({type: 'error', content: '링크 복사 실패' /*
or localized message */}) on failure and in the catch include a generic message
or the caught error for better UX/debugging.

In `@src/shared/lib/processStyle.ts`:
- Around line 168-171: The current conditional uses "props.flex &&" which
incorrectly skips valid falsy values like 0; update the check in the styled
template that references props.flex and the css block so it tests for undefined
(e.g. props.flex !== undefined or typeof props.flex !== 'undefined') before
emitting "flex: ${props.flex};" ensuring flex: 0 is applied when provided.

In `@src/shared/types/styled.d.ts`:
- Around line 63-71: The exported interface TextProps in
src/shared/types/styled.d.ts conflicts with the local TextProps in
src/shared/ui/Text/index.tsx; rename the exported interface to a distinct name
(e.g., BaseStyledTextProps or TextStyleProps) and update all places that import
or reference that symbol (search for TextProps imports/usages, including
styled-components and components relying on shared types) so code compiles and
the local Text/index.tsx can keep its own TextProps without collision.

In `@src/shared/ui/Text/index.styles.tsx`:
- Around line 21-26: The Text styled component currently applies text-align
twice (explicit line using $textAlign and again via processStyleProps); remove
the explicit text-align line from Text and rely on processStyleProps to emit
text-align using the $textAlign prop, but ensure processStyleProps (or the shape
it consumes) recognizes $textAlign and applies a default of 'left' when
undefined; update any references/tests expecting the explicit behavior to use
processStyleProps and keep identifiers Text, StyledTextProps, processStyleProps,
and $textAlign for locating the change.

In `@src/shared/ui/Text/index.tsx`:
- Around line 6-15: The Text component's props type (TextProps) extends
BaseStyledProps and spreads all props into S.Text, which can cause custom
styling props (from BaseStyledProps) like color to be forwarded to the DOM and
trigger React warnings; update the styled component S.Text to filter these by
either using styled-components' shouldForwardProp to block BaseStyledProps keys
or switch to transient props (prefix prop names with $ and update TextProps and
usages accordingly), ensuring TextProps/BaseStyledProps fields are not passed
through via ...props to the underlying DOM element (reference S.Text, TextProps,
BaseStyledProps, shouldForwardProp, and transient props).

@github-actions
Copy link

@moddo-kr moddo-kr deleted a comment from coderabbitai bot Feb 17, 2026
@yoouyeon
Copy link
Contributor Author

@coderabbitai approve

@coderabbitai
Copy link

coderabbitai bot commented Feb 17, 2026

✅ Actions performed

Comments resolved and changes approved.

@yoouyeon yoouyeon merged commit a6b37d4 into develop Feb 17, 2026
2 checks passed
@yoouyeon yoouyeon deleted the feat/13-link-management-ui branch February 17, 2026 12:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 신규 기능 추가

Projects

None yet

Development

Successfully merging this pull request may close these issues.

링크 관리 기능 UI 개발

2 participants