-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* feat: 텍스트 중 링크 텍스트를 하이퍼링크 기능 활성화토록 변경하는 컴포넌트 추가 * refactor: 게시글 상세 페이지 중 내가 작성한 글일 경우 프로필 페이지 라우팅 하지않도록 변경 * refactor: 댓글 작성 부분 line-height px 단위로 변경 * feat: 텍스트 내 하이퍼링크 활성화 기능 추가 * refactor: 글쓰기 수정 후 이전페이지로 라우팅하도록 수정 * refactor: 글쓰기 및 글쓰기 수정 본문 line-height 조정 * fix: 하이퍼링크 같은 줄에 일반 단어를 확인하도록 변경 * refactor: Wrapper로 감싸서 사용처의 Flex CSS 영향을 받지 않도록 변경 및 일부 컴포넌트 네이밍 변경 * refactor: 글 작성 직후 무한스크롤 업데이트 오류 보완 * refactor: 더 보기 페이지 띄어쓰기 오타 수정
- Loading branch information
1 parent
ce608d0
commit 45c7133
Showing
14 changed files
with
94 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,20 @@ | ||
| import { useQueryClient } from '@tanstack/react-query'; | ||
| import { MutableRefObject, useEffect } from 'react'; | ||
| import { useIntersection } from 'react-use'; | ||
|
|
||
| export const useFeedInfiniteFetch = (intersectionRef: MutableRefObject<null>, fetchCallback: () => void) => { | ||
| const queryClient = useQueryClient(); | ||
| const intersection = useIntersection(intersectionRef, { | ||
| root: null, | ||
| rootMargin: `0px`, | ||
| threshold: 1, | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (intersection?.isIntersecting) { | ||
| const feedState = queryClient.getQueryState(['ideas']); | ||
|
|
||
| if (intersection?.isIntersecting && feedState?.fetchStatus !== 'fetching') { | ||
| fetchCallback(); | ||
| } | ||
| }, [intersection, fetchCallback]); | ||
| }, [intersection, queryClient, fetchCallback]); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import styled from '@emotion/styled'; | ||
| import { Text } from 'concept-be-design-system'; | ||
|
|
||
| import { ColorKeyType, FontKeyType } from '../../../styles/theme'; | ||
|
|
||
| interface Props { | ||
| font: FontKeyType; | ||
| color: ColorKeyType; | ||
| lineHeight?: string; | ||
| children: string; | ||
| } | ||
|
|
||
| const LINK_REG_EXP = /(https?:\/\/|www\.)/; | ||
| const convertHyperLinkTexts = ({ font, color, lineHeight = 'normal', children: text }: Props) => { | ||
| const generatedTexts = text.split('\n').map((line, idx) => { | ||
| if (line === '') return <br key={idx} />; | ||
|
|
||
| return ( | ||
| <Paragraph as="p" key={idx} font={font} color={color} lineHeight={lineHeight}> | ||
| {line.split(' ').map((word, idx) => { | ||
| const isFirst = idx === 0; | ||
|
|
||
| if (LINK_REG_EXP.test(word)) { | ||
| return ( | ||
| <HyperLink as="a" key={idx} href={word} target="_blank" font={font} color={color} lineHeight={lineHeight}> | ||
| {word} | ||
| </HyperLink> | ||
| ); | ||
| } | ||
|
|
||
| return <>{isFirst ? word : ` ${word}`}</>; | ||
| })} | ||
| </Paragraph> | ||
| ); | ||
| }); | ||
|
|
||
| return generatedTexts; | ||
| }; | ||
|
|
||
| const HyperLinkText = (props: Props) => { | ||
| const convertedTexts = convertHyperLinkTexts(props); | ||
|
|
||
| return <Wrapper>{convertedTexts}</Wrapper>; | ||
| }; | ||
|
|
||
| export default HyperLinkText; | ||
|
|
||
| const Wrapper = styled.div` | ||
| white-space: pre-wrap; | ||
| `; | ||
|
|
||
| const Paragraph = styled(Text)<{ lineHeight: string }>` | ||
| line-height: ${({ lineHeight }) => lineHeight}; | ||
| `; | ||
|
|
||
| const HyperLink = styled(Paragraph)` | ||
| color: #448cef; | ||
| `; |