Skip to content

[fix] 앱 웹뷰에서 본문 텍스트를 선택·복사할 수 있게 한다 #2257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
seongwon030 wants to merge 3 commits into
base: develop-fe
Choose a base branch
from
Open

[fix] 앱 웹뷰에서 본문 텍스트를 선택·복사할 수 있게 한다 #2257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d1b1c0a
fix: 앱 웹뷰에서 본문 텍스트를 선택·복사할 수 있게 선택 차단을 컨트롤로 좁힌다
seongwon030 Oct 28, 2026
e9ef711
fix: 본문 속 링크도 선택·복사할 수 있게 선택 차단 셀렉터에서 a를 뺀다
seongwon030 Oct 28, 2026
41f9283
fix: 메뉴 행과 추천 동아리 태그 링크는 길게 눌러도 선택되지 않게 한다
seongwon030 Oct 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions frontend/src/pages/MenuPage/MenuPage.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,9 @@ const rowStyles = css`

export const InfoLink = styled(Link)`
${rowStyles}
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
Comment on lines +137 to +139

@reviewer-harry reviewer-harry Bot Oct 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

[같이 수정되는 코드 함께 두기] 같은 세 줄(user-select·-webkit-user-select·-webkit-touch-callout)이 이번 커밋에서 RecommendedClubs.styles.ts의 Tag에도 똑같이 들어갔고, WebviewGlobal.styles.ts·LongPressReorderItem.styles.ts에도 이미 있어요. 나중에 -webkit-tap-highlight-color 같은 속성을 하나 더 넣어야 할 때 한 곳만 고치고 나머지를 빠뜨리기 쉬워요. @/styles에 noSelectOnLongPress 같은 이름의 css 조각으로 빼서 같이 쓰는 걸 생각해 보면 좋겠어요.

그리고 이 세 줄은 앱 웹뷰에서 길게 눌러도 링크가 선택되지 않게 하려는 거라, 코드만 봐서는 이유가 보이지 않아요. "본문 링크와 달리 메뉴 행은 길게 눌러도 선택되지 않게 한다" 정도로 한 줄 주석을 달아 두면, 나중에 누가 a 선택 차단을 다시 손볼 때 왜 여기만 따로 막았는지 알 수 있어요. 지금 이 스타일은 웹뷰가 아닌 일반 웹에도 적용된다는 점도 같이 확인해 주세요.

`;

export const InfoRow = styled.div`
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/pages/PeacePage/components/RecommendedClubs/RecommendedClubs.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ export const Tag = styled(Link)<{ $accent: string }>`
${({ theme }) => setTypography(theme.typography.paragraph.p5)};
color: ${({ $accent }) => $accent};
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;

&:active {
background: ${({ $accent }) => $accent};
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/styles/WebviewGlobal.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ const WebviewGlobalStyles = createGlobalStyle`
overscroll-behavior: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
cursor: default;
}
button, [role='button'], img {

@reviewer-harry reviewer-harry Bot Oct 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

[변경 범위] 커밋 의도는 "본문 속 링크"를 선택 가능하게 하는 건데, a를 전역 셀렉터에서 빼면 웹뷰 안의 모든 <a>가 같이 풀려요. MenuPage의 InfoLink(styled(Link)), RecommendedClubs의 Tag, ClubProfileCard의 SocialLinkItem처럼 버튼·행 역할을 하는 링크도 이제 길게 누르면 텍스트 선택이 잡히고, iOS에서는 -webkit-touch-callout까지 풀려 링크 미리보기/복사 메뉴가 떠요. 이전 커밋에서 "컨트롤은 막는다"던 기준과도 어긋나고요.

본문 링크만 풀고 싶다면 전역에서는 a를 유지하고, 본문 컨테이너 쪽에서만 해제하는 게 좁고 안전해 보여요. 예를 들면:

/* 전역 */
button, a, [role='button'], img { user-select: none; ... }
/* 본문 렌더 영역 스타일 */
.description a { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }

아니면 UI용 링크 쪽에 개별로 user-select: none을 붙이는 방법도 있어요. 메뉴 행·태그 같은 링크를 앱 웹뷰에서 길게 눌러 봤는지 한 번 확인해 주세요.

@seongwon030 seongwon030 Oct 28, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

반영했어요(41f9283). 다만 전역에 a를 다시 거는 대신, 컨트롤 링크를 컴포넌트에서 막는 쪽으로 갔어요.

두 방식 모두 새 화면에서 빠뜨릴 수 있는데, 빠뜨렸을 때 결과가 달라요. 전역 a를 막고 본문만 풀면, 본문 링크를 하나 빠뜨렸을 때 URL 복사가 안 되는 이번 버그가 그대로 돌아와요(linkifyText 말고도 LetterDetailPage의 react-markdown 링크가 있어요). 반대로 컨트롤 링크를 빠뜨리면 길게 눌렀을 때 글자가 선택되는 정도라 덜 해롭다고 봤어요.

  • 막음: MenuPage InfoLink, RecommendedClubs Tag. 앱 UA로 /menu에서 InfoLink 선택이 9자 → 0자가 되는 걸 확인했어요.
  • 안 막음: SocialLinkItem. 안에 SNS 아이디(displayName)가 보여서 복사할 수 있어야 해요.
  • 나머지 컨트롤 링크(PositionCard·BackLink·PolicyLink·SnsLink·ContactButton)는 실기기에서 길게 눌러 보지 못했어요. 거슬리는 곳만 후속으로 막을게요. PR 본문 영향 범위에 적어 뒀어요.

user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
cursor: default;
}
* {
-webkit-tap-highlight-color: transparent;
Expand Down
Loading