From fd90c30deac5a3d665226c24c89fb72cab15835f Mon Sep 17 00:00:00 2001 From: ww8007 Date: Sat, 14 Oct 2023 23:50:45 +0900 Subject: [PATCH 1/3] =?UTF-8?q?design:=20pull=20to=20refresh=20ui=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common-ui/PullToRefresh.tsx | 19 +++++++++++++++---- src/pages/ProfilePage.tsx | 8 +++----- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/common-ui/PullToRefresh.tsx b/src/common-ui/PullToRefresh.tsx index 5821bac0..4c457fcb 100644 --- a/src/common-ui/PullToRefresh.tsx +++ b/src/common-ui/PullToRefresh.tsx @@ -77,9 +77,12 @@ const PullToRefresh = ({ onTouchMove={onTouchMove} > - + {children} @@ -110,6 +117,8 @@ const IconContainer = styled.div` top: 0; transition: transform 0.3s; background-color: ${theme.colors.black}; + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; `; const fade = keyframes` @@ -219,6 +228,8 @@ const SpinnerContainer = styled.div` const ContentContainer = styled.div` transition: transform 0.3s; + overflow: scroll; + height: 100%; `; export default PullToRefresh; diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index 71655d71..f1d1a2a0 100644 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -41,7 +41,7 @@ const ProfilePage = () => { return ( - + <> {/** 유저 정보 */} @@ -57,17 +57,15 @@ const ProfilePage = () => { - + ); }; export default ProfilePage; -const Layout = styled.div` - overflow-y: scroll; -`; const LBody = styled.div` padding: 0 ${getRem(20)}; margin: ${getRem(12)} 0; + margin-bottom: 6rem; `; From 98f706fdf7757fb52b27fbcf1aa7d3f4210afa41 Mon Sep 17 00:00:00 2001 From: ww8007 Date: Sat, 14 Oct 2023 23:51:12 +0900 Subject: [PATCH 2/3] =?UTF-8?q?design:=20=EB=8C=93=EA=B8=80=20ui=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=9D=B4=EB=AA=A8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comment/api/Comment.ts | 1 + src/comment/ui/comment-list/CommentItem.tsx | 71 +++++++++++++++++---- src/comment/ui/comment-list/CommentList.tsx | 2 +- 3 files changed, 60 insertions(+), 14 deletions(-) diff --git a/src/comment/api/Comment.ts b/src/comment/api/Comment.ts index 29a5d553..7b4e669a 100644 --- a/src/comment/api/Comment.ts +++ b/src/comment/api/Comment.ts @@ -27,6 +27,7 @@ interface ServerCommentItem { isOwnerComment: boolean; content: string; createdTimestamp: number; + profileEmoji: string; } export interface GETCommentListRequest { diff --git a/src/comment/ui/comment-list/CommentItem.tsx b/src/comment/ui/comment-list/CommentItem.tsx index 5a2ed7d2..76f3a69c 100644 --- a/src/comment/ui/comment-list/CommentItem.tsx +++ b/src/comment/ui/comment-list/CommentItem.tsx @@ -6,9 +6,10 @@ import { theme } from '@/styles/theme'; import { timeStampToDate } from '@/utils/date/timeConverter'; import { navigatePath } from '@/constants/navigatePath'; import { useNavigate } from 'react-router-dom'; +import { css } from '@emotion/react'; interface CommentListProps { - id: number; + profileEmoji: string; bookmarkId: number; title: string; nickName: string; @@ -18,7 +19,7 @@ interface CommentListProps { } const CommentItem = ({ - id, + profileEmoji, bookmarkId, title, nickName, @@ -32,6 +33,13 @@ const CommentItem = ({ navigate(navigatePath.BOOKMARK_DETAIL.replace(':id', String(bookmarkId))); }; + const urlRegex = /(https?:\/\/[^\s]+)/g; + const convertedText = content.replace( + urlRegex, + (url) => + `${url}`, + ); + return ( <> @@ -46,21 +54,40 @@ const CommentItem = ({ - {} + {profileEmoji} {nickName} - {content} - - - - {timeStampToDate(updatedAt)} - - - {category} - - + { + const target = e.target as HTMLAnchorElement; + if (target.tagName === 'A') { + e.preventDefault(); + } + }} + /> + + + + + {timeStampToDate(updatedAt)} + + + + + {category} + + + ); @@ -88,6 +115,10 @@ const CommentHeader = styled.div` align-items: center; `; +const ProfileEmoji = styled(Text.Span)` + margin-top: -2px; +`; + const TitleText = styled(Text.Span)` overflow: hidden; text-overflow: ellipsis; @@ -122,6 +153,11 @@ const IconAndNickNameWrapper = styled.div` column-gap: ${getRem(8)}; `; +const BottomWrapper = styled.div` + display: flex; + justify-content: space-between; +`; + const IconAndTimeAndCategoryWrapper = styled.div` display: flex; align-items: center; @@ -131,3 +167,12 @@ const IconAndTimeAndCategoryWrapper = styled.div` const StyleIconWrapper = styled.div` flex-shrink: 0; `; + +const CategoryWrapper = styled.div` + padding: 0.1rem 0.5rem; + background-color: ${theme.colors.lightPrimary}; + border-radius: 0.5rem; + height: 1.7rem; + display: flex; + align-items: center; +`; diff --git a/src/comment/ui/comment-list/CommentList.tsx b/src/comment/ui/comment-list/CommentList.tsx index b7775c77..2f337634 100644 --- a/src/comment/ui/comment-list/CommentList.tsx +++ b/src/comment/ui/comment-list/CommentList.tsx @@ -17,7 +17,7 @@ const CommentList = () => { commentList.map((comment) => ( Date: Sat, 14 Oct 2023 23:51:37 +0900 Subject: [PATCH 3/3] =?UTF-8?q?design:=20ui=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/members/ui/RoundedBox.tsx | 3 ++- src/members/ui/SettingsBox.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/members/ui/RoundedBox.tsx b/src/members/ui/RoundedBox.tsx index 2a91d863..0982f3e7 100644 --- a/src/members/ui/RoundedBox.tsx +++ b/src/members/ui/RoundedBox.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import { css } from '@emotion/react'; import { ColorType, theme } from '@/styles/theme'; +import getRem from '@/utils/getRem'; const RoundedBox = ({ children, @@ -32,7 +33,7 @@ const RoundedBox = ({ }; const StyledRoundedBox = styled.div` - padding: 1.25rem; + padding: ${getRem(20)}; border-radius: 0.625rem; ${({ backgroundColor, diff --git a/src/members/ui/SettingsBox.tsx b/src/members/ui/SettingsBox.tsx index df186feb..5a0a76ed 100644 --- a/src/members/ui/SettingsBox.tsx +++ b/src/members/ui/SettingsBox.tsx @@ -130,7 +130,7 @@ const RemindingDescription = ({ return ( <> - + {unreadBookmarkExists ? '앗! 잊혀진 북마크가 있어요 🔥' : '북마크를 모두 읽으셨어요! 👏'} @@ -152,11 +152,11 @@ const RemindingDescription = ({ max={MAX_DAYS} /> ) : ( - + {`${remindInDays}`} )} - + 일 @@ -176,7 +176,7 @@ const RemindingDescription = ({ }; const StyledDescription = styled.div` - margin-top: ${getRem(20)}; + margin-top: ${getRem(10)}; `; const RemindingLine = styled.div` display: flex;