-
Notifications
You must be signed in to change notification settings - Fork 4
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.
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
게시글 작성 시 본문 링크 삽입을 하지 않더라도 사용자에게 링크 클릭이 가능하도록 변경 #706
Changes from all commits
d1bbabd
75ac17a
317c7f9
76c885e
c2f7935
8e68b23
5d4a21b
4444985
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import { convertTextToUrl } from '@utils/post/convertTextToUrl'; | ||
|
||
test.each([ | ||
['www.naver.com 이걸 어째', '[[www.naver.com]] 이걸 어째'], | ||
[ | ||
'반갑다 https://github.com/woowacourse-teams/2023-votogether/issues/703 임', | ||
'반갑다 [[https://github.com/woowacourse-teams/2023-votogether/issues/703]] 임', | ||
], | ||
['안녕 wwwww.naver.com', '안녕 wwwww.naver.com'], | ||
['http://localhost:3000/ 피카츄', '[[http://localhost:3000/]] 피카츄'], | ||
[ | ||
'http://localhost:3000/http://localhost:3000/ 피카츄', | ||
'[[http://localhost:3000/http://localhost:3000/]] 피카츄', | ||
], | ||
['www.naver.com', '[[www.naver.com]]'], | ||
['[[www.naver.com]] www.naver.com', '[[www.naver.com]] [[www.naver.com]]'], | ||
[ | ||
'[[http://localhost:3000/]] http://localhost:3000/', | ||
'[[http://localhost:3000/]] [[http://localhost:3000/]]', | ||
], | ||
[ | ||
'[[https://votogether.com/ranking]] https://www.naver.com/', | ||
'[[https://votogether.com/ranking]] [[https://www.naver.com/]]', | ||
], | ||
[ | ||
'www.naver.com www.naver.com www.naver.com https://www.npmjs.com/package/dotenv-webpack', | ||
'[[www.naver.com]] [[www.naver.com]] [[www.naver.com]] [[https://www.npmjs.com/package/dotenv-webpack]]', | ||
], | ||
])( | ||
'convertTextToUrl 함수에서 링크가 포함된 문자를 입력했을 때 문자에서 링크는 [[]]로 감싸서 반환한다.', | ||
(word, expectedWord) => { | ||
const result = convertTextToUrl(word); | ||
|
||
expect(result).toBe(expectedWord); | ||
} | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
/** | ||
* https://abc.co.kr/@abc/4 | ||
* https://votogether.com/ | ||
* http://localhost:3000/posts/100035 | ||
* http://votogether.com/ | ||
* (?<!\[\[) 는 앞에 [[로 시작하는 지 여부를 확인한다 | ||
* https?:\/\/는 http:// 혹은 https:// 로 시작하는 지 여부를 확인한다. | ||
* (?!\]\]) 는 뒤에 ]]로 끝나는 지 여부를 확인한다. | ||
* [^\s] 는 공백이 아닌 문자인지 여부를 확인한다. | ||
*/ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 상세한 주석 정말 좋군요👍 |
||
const httpsOrHttpRegex = /(?<!\[\[)(https?:\/\/[^\s]+)(?!\]\])/g; | ||
|
||
/** | ||
* www.naver.com | ||
* www.tistory.com | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 혹시 tistory.com 도 링크로 인식되는지 궁금해요! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. www.tistory.com There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 그러게요! 근데 www. 을 안붙히고 뒤에 .com이나 net을 인식하면 가능은 할 것 같아요 |
||
* (?<!\[\[) 는 앞에 [[로 시작하는 지 여부를 확인한다 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 혹시 [[ 로 시작하는지 판별하는 이유는 기존의 링크가 [[ 로 시작하기 때문인가요?? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 네 기존의 링크가 [[으로 시작하기 때문에 중복해서 [[[[ 기존링크 ]]]]와 같이 변환되지 않게 하기 위해서 [[로 시작한다면 매칭되지 않게 했습니다 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 세심하시네요 |
||
* (?<!\/)는 앞에 /로 시작하는 지 여부를 확인한다. https://www 에서 www 앞에 /가 있기에 중복되어 확인하는 것을 방지하기 위함 | ||
* \b(w{3})\b 는 www로 시작하는 지 여부를 정확히 확인한다. w가 4개인 경우 판별하지 않음 | ||
* [^\s] 는 공백이 아닌 문자인지 여부를 확인한다. | ||
* (?!\]\]) 는 뒤에 ]]로 끝나는 지 여부를 확인한다. | ||
*/ | ||
const wwwRegex = /(?<!\[\[)(?<!\/)\b(w{3})\b[^\s]+(?!\]\])/g; | ||
|
||
export const convertTextToUrl = (text: string) => { | ||
const httpOrHttpsConvertedText = text.replace(httpsOrHttpRegex, url => `[[${url}]]`); | ||
const wwwConvertedText = httpOrHttpsConvertedText.replace(wwwRegex, url => `[[${url}]]`); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 이렇게 되면 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [[www.---]]와 같이 이미 감싸져 있는 문자열이라면 변경되지 않구요 [[ ]] 으로 감싸져 있지 않은 www라면 [[www.---]]으로 변경됩니당 |
||
|
||
return wwwConvertedText; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
만약
isLinkEnabled
가 false라면 모든 문자열은 < span >으로 감싸지게 되는데,그렇다면 서두에 분기처리해서 early return 해버리는건 어떠세요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수아가 좋은 제안을 해주셔서 아래와 같이 바꿔볼 수 있었어요 !!👍👍👍