diff --git a/src/components/ProfileInfo.tsx b/src/components/ProfileInfo.tsx index be0db015..2df9c50b 100644 --- a/src/components/ProfileInfo.tsx +++ b/src/components/ProfileInfo.tsx @@ -7,15 +7,22 @@ interface Props { imageUrl: string; nickname: string; mainSkill: string; + owner: boolean; } // TODO: 프로필 이미지 사진 오류 시 보여줄 기본 프로필 이미지 사진 URL -const ProfileInfo = ({ memberId, imageUrl, nickname, mainSkill }: Props) => { +const ProfileInfo = ({ memberId, imageUrl, nickname, mainSkill, owner }: Props) => { const { goProfilePage } = useNavigatePage(); + const onClickProfileInfo = () => { + if (owner) return; + + goProfilePage(memberId); + }; + return ( - goProfilePage(memberId)} cursor="pointer"> + diff --git a/src/pages/Feed/hooks/useFeedInfiniteFetch.ts b/src/pages/Feed/hooks/useFeedInfiniteFetch.ts index ee6eb2bb..ee971351 100644 --- a/src/pages/Feed/hooks/useFeedInfiniteFetch.ts +++ b/src/pages/Feed/hooks/useFeedInfiniteFetch.ts @@ -1,7 +1,9 @@ +import { useQueryClient } from '@tanstack/react-query'; import { MutableRefObject, useEffect } from 'react'; import { useIntersection } from 'react-use'; export const useFeedInfiniteFetch = (intersectionRef: MutableRefObject, fetchCallback: () => void) => { + const queryClient = useQueryClient(); const intersection = useIntersection(intersectionRef, { root: null, rootMargin: `0px`, @@ -9,8 +11,10 @@ export const useFeedInfiniteFetch = (intersectionRef: MutableRefObject, fe }); useEffect(() => { - if (intersection?.isIntersecting) { + const feedState = queryClient.getQueryState(['ideas']); + + if (intersection?.isIntersecting && feedState?.fetchStatus !== 'fetching') { fetchCallback(); } - }, [intersection, fetchCallback]); + }, [intersection, queryClient, fetchCallback]); }; diff --git a/src/pages/FeedDetail/FeedDetail.page.tsx b/src/pages/FeedDetail/FeedDetail.page.tsx index 826fdf7f..11674780 100644 --- a/src/pages/FeedDetail/FeedDetail.page.tsx +++ b/src/pages/FeedDetail/FeedDetail.page.tsx @@ -11,6 +11,7 @@ import SEOMeta from '../../components/SEOMeta/SEOMeta'; import useConfirm from '../../hooks/useConfirm'; import Back from '../../layouts/Back'; import Logo from '../../layouts/Logo'; +import HyperLinkText from '../components/HyperLinkText/HyperLinkText'; import { useDeleteIdea } from '../components/NewIdeaCard/hooks/mutations/useDeleteIdea'; import { formatCommentDate } from '../Feed/utils/formatCommentDate'; @@ -64,7 +65,7 @@ const FeedDetailPage = () => { - +
@@ -88,9 +89,9 @@ const FeedDetailPage = () => {
- + {introduce} - +
diff --git a/src/pages/FeedDetail/components/Comment.tsx b/src/pages/FeedDetail/components/Comment.tsx index b423863c..c0825a4d 100644 --- a/src/pages/FeedDetail/components/Comment.tsx +++ b/src/pages/FeedDetail/components/Comment.tsx @@ -7,6 +7,7 @@ import ModifyDropdown from './ModifyDropdown'; import Recomment from './Recomment'; import WriteRecomment from './WriteRecomment'; import useConfirm from '../../../hooks/useConfirm'; +import HyperLinkText from '../../components/HyperLinkText/HyperLinkText'; import { get999PlusCount } from '../../utils'; import useDeleteCommentMutation from '../hooks/mutations/useDeleteComment'; import useFocusEditComment from '../hooks/useFocusEditComment'; @@ -96,9 +97,9 @@ const Comment = ({ {!deleted && }
- + {deleted ? '삭제된 댓글입니다.' : content} - + diff --git a/src/pages/FeedDetail/components/EditComment.tsx b/src/pages/FeedDetail/components/EditComment.tsx index 32d62d68..139e5700 100644 --- a/src/pages/FeedDetail/components/EditComment.tsx +++ b/src/pages/FeedDetail/components/EditComment.tsx @@ -101,7 +101,7 @@ const Textarea = styled.textarea` color: ${theme.color.b4}; font-size: ${theme.font.suit14r.fontSize}px; font-weight: ${theme.font.suit14r.fontWeight}; - line-height: 160%; + line-height: 22px; ::placeholder { color: ${theme.color.ba}; diff --git a/src/pages/FeedDetail/components/Recomment.tsx b/src/pages/FeedDetail/components/Recomment.tsx index edd2e444..c2284187 100644 --- a/src/pages/FeedDetail/components/Recomment.tsx +++ b/src/pages/FeedDetail/components/Recomment.tsx @@ -5,6 +5,7 @@ import CommentProfileInfo from './CommentProfileInfo'; import EditComment from './EditComment'; import ModifyDropdown from './ModifyDropdown'; import useConfirm from '../../../hooks/useConfirm'; +import HyperLinkText from '../../components/HyperLinkText/HyperLinkText'; import { get999PlusCount } from '../../utils'; import useDeleteCommentMutation from '../hooks/mutations/useDeleteComment'; import useFocusEditComment from '../hooks/useFocusEditComment'; @@ -83,9 +84,9 @@ const Recomment = ({ owner={owner} /> - + {deleted ? '삭제된 답글입니다.' : content} - + diff --git a/src/pages/FeedDetail/components/WriteComment.tsx b/src/pages/FeedDetail/components/WriteComment.tsx index 15044424..7c564855 100644 --- a/src/pages/FeedDetail/components/WriteComment.tsx +++ b/src/pages/FeedDetail/components/WriteComment.tsx @@ -101,7 +101,7 @@ const Textarea = styled.textarea<{ isFocus: boolean }>` color: ${theme.color.b4}; font-size: ${theme.font.suit14r.fontSize}px; font-weight: ${theme.font.suit14r.fontWeight}; - line-height: 160%; + line-height: 22px; ::placeholder { color: ${theme.color.ba}; diff --git a/src/pages/FeedDetail/components/WriteRecomment.tsx b/src/pages/FeedDetail/components/WriteRecomment.tsx index 824afbb5..8b15cd89 100644 --- a/src/pages/FeedDetail/components/WriteRecomment.tsx +++ b/src/pages/FeedDetail/components/WriteRecomment.tsx @@ -92,7 +92,7 @@ const Textarea = styled.textarea` color: ${theme.color.b4}; font-size: ${theme.font.suit14r.fontSize}px; font-weight: ${theme.font.suit14r.fontWeight}; - line-height: 160%; + line-height: 22px; ::placeholder { color: ${theme.color.ba}; diff --git a/src/pages/Profile/More.page.tsx b/src/pages/Profile/More.page.tsx index 49750096..e5eb4edc 100644 --- a/src/pages/Profile/More.page.tsx +++ b/src/pages/Profile/More.page.tsx @@ -47,7 +47,7 @@ const More = () => { return ( <> {isDeleteAccountPending && } - +
@@ -55,7 +55,7 @@ const More = () => { - 더보기 + 더 보기
diff --git a/src/pages/Profile/components/ProfileInfoSection.tsx b/src/pages/Profile/components/ProfileInfoSection.tsx index 4bfe4baa..152f2d0e 100644 --- a/src/pages/Profile/components/ProfileInfoSection.tsx +++ b/src/pages/Profile/components/ProfileInfoSection.tsx @@ -3,6 +3,7 @@ import { theme, Badge, Spacer, Text, Flex, ImageView, PNGDefaultProfileBackgroun import { useNavigate } from 'react-router-dom'; import Padding from '../../../components/Padding'; +import HyperLinkText from '../../components/HyperLinkText/HyperLinkText'; import { Member } from '../types'; type Props = { @@ -59,9 +60,9 @@ const ProfileInfoSection = ({ memberInfo }: Props) => { {isMyProfile === true && navigate(`/profile-edit`)}>프로필 수정} - + {introduction} - +
세부 스킬 diff --git a/src/pages/Write/components/TitleAndIntroduceSection.tsx b/src/pages/Write/components/TitleAndIntroduceSection.tsx index 8f9208ec..9073957e 100644 --- a/src/pages/Write/components/TitleAndIntroduceSection.tsx +++ b/src/pages/Write/components/TitleAndIntroduceSection.tsx @@ -83,6 +83,7 @@ const BodyTextarea = styled.textarea` font-weight: 400; resize: none; color: ${theme.color.b4}; + line-height: 22px; ::placeholder { color: ${theme.color.ba}; diff --git a/src/pages/WriteEdit/components/TitleAndIntroduceSection.tsx b/src/pages/WriteEdit/components/TitleAndIntroduceSection.tsx index 3b0fd7ce..65194bae 100644 --- a/src/pages/WriteEdit/components/TitleAndIntroduceSection.tsx +++ b/src/pages/WriteEdit/components/TitleAndIntroduceSection.tsx @@ -83,6 +83,7 @@ const BodyTextarea = styled.textarea` font-weight: 400; resize: none; color: ${theme.color.b4}; + line-height: 22px; ::placeholder { color: ${theme.color.ba}; diff --git a/src/pages/WriteEdit/hooks/mutations/usePutIdea.ts b/src/pages/WriteEdit/hooks/mutations/usePutIdea.ts index f2cb8f05..f307d5ba 100644 --- a/src/pages/WriteEdit/hooks/mutations/usePutIdea.ts +++ b/src/pages/WriteEdit/hooks/mutations/usePutIdea.ts @@ -23,7 +23,7 @@ export const usePutIdea = () => { mutationFn: _putIdea, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ideas'] }); - navigate('/'); + navigate(-1); }, onError: (error: PutIdeaError) => { openAlert({ content: error.response?.data.message ?? '글 수정에 실패했습니다.' }); diff --git a/src/pages/components/HyperLinkText/HyperLinkText.tsx b/src/pages/components/HyperLinkText/HyperLinkText.tsx new file mode 100644 index 00000000..de5e797f --- /dev/null +++ b/src/pages/components/HyperLinkText/HyperLinkText.tsx @@ -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
; + + return ( + + {line.split(' ').map((word, idx) => { + const isFirst = idx === 0; + + if (LINK_REG_EXP.test(word)) { + return ( + + {word} + + ); + } + + return <>{isFirst ? word : ` ${word}`}; + })} + + ); + }); + + return generatedTexts; +}; + +const HyperLinkText = (props: Props) => { + const convertedTexts = convertHyperLinkTexts(props); + + return {convertedTexts}; +}; + +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; +`;