design: 프로필, 댓글 UI 수정

src/comment/api/Comment.ts

@@ -27,6 +27,7 @@ interface ServerCommentItem {
  isOwnerComment: boolean;
  content: string;
  createdTimestamp: number;
+ profileEmoji: string;
 }
 
 export interface GETCommentListRequest {

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) =>
+ `<a style="color: ${theme.colors.lightPrimary}" href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`,
+ );
+
  return (
  <>
  <Container onClick={navigateToBookmark}>
@@ -46,21 +54,40 @@ const CommentItem = ({
  </IconAndTitleWrapper>
  </CommentHeader>
  <IconAndNickNameWrapper>
- {<Icon name="badge-green" size={'s'} />}
+ <ProfileEmoji fontSize={getRem(14)}>{profileEmoji}</ProfileEmoji>
  <NicknameText fontSize={getRem(14)} weight={'bold'}>
  {nickName}
  </NicknameText>
  </IconAndNickNameWrapper>
- <ContentText fontSize={getRem(11)}>{content}</ContentText>
- <IconAndTimeAndCategoryWrapper>
- <Icon name="timeline" size={'s'} />
- <UpdatedAtText fontSize={getRem(10)}>
- {timeStampToDate(updatedAt)}
- </UpdatedAtText>
- <CategoryText fontSize={getRem(10)} weight={'bold'}>
- {category}
- </CategoryText>
- </IconAndTimeAndCategoryWrapper>
+ <ContentText
+ fontSize={0.8}
+ dangerouslySetInnerHTML={{ __html: convertedText }}
+ onClick={(e) => {
+ const target = e.target as HTMLAnchorElement;
+ if (target.tagName === 'A') {
+ e.preventDefault();
+ }
+ }}
+ />
+ <BottomWrapper>
+ <IconAndTimeAndCategoryWrapper>
+ <Icon name="timeline" size={'s'} />
+ <UpdatedAtText fontSize={getRem(10)}>
+ {timeStampToDate(updatedAt)}
+ </UpdatedAtText>
+ </IconAndTimeAndCategoryWrapper>
+ <CategoryWrapper>
+ <CategoryText
+ fontSize={getRem(10)}
+ weight={'bold'}
+ css={css`
+ text-shadow: 1px 1px 10px black;
+ `}
+ >
+ {category}
+ </CategoryText>
+ </CategoryWrapper>
+ </BottomWrapper>
  </Container>
  </>
  );
@@ -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;
+`;

src/comment/ui/comment-list/CommentList.tsx

@@ -17,7 +17,7 @@ const CommentList = () => {
  commentList.map((comment) => (
  <CommentItem
  key={comment.id} // 변경이 되었는지 안되었는지 판단 여부
- id={comment.id}
+ profileEmoji={comment.profileEmoji}
  bookmarkId={comment.bookmarkId}
  title={comment.bookmark}
  content={comment.content}

src/common-ui/PullToRefresh.tsx

@@ -77,9 +77,12 @@ const PullToRefresh = ({
  onTouchMove={onTouchMove}
  >
  <IconContainer
- style={{
- transform: `translateY(${pullDistance - threshold}rem)`,
- }}
+ css={css`
+ transform: translateY(${pullDistance - threshold}rem);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ `}
  >
  <SpinnerContainer
  css={css`
@@ -92,7 +95,11 @@ const PullToRefresh = ({
  ))}
  </SpinnerContainer>
  </IconContainer>
- <ContentContainer style={{ transform: `translateY(${pullDistance}rem)` }}>
+ <ContentContainer
+ css={css`
+ transition: translateY(${pullDistance}rem);
+ `}
+ >
  {children}
  </ContentContainer>
  </div>
@@ -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;

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,

src/members/ui/SettingsBox.tsx

@@ -130,7 +130,7 @@ const RemindingDescription = ({
 
  return (
  <>
- <Text.P fontSize={1.25} weight="bold" color="grey900">
+ <Text.P fontSize={1.1} weight="bold" color="grey900">
  {unreadBookmarkExists
  ? '앗! 잊혀진 북마크가 있어요 🔥'
  : '북마크를 모두 읽으셨어요! 👏'}
@@ -152,11 +152,11 @@ const RemindingDescription = ({
  max={MAX_DAYS}
  />
  ) : (
- <Text.Span color={'lightPrimary'} fontSize={1.25} weight="bold">
+ <Text.Span color={'lightPrimary'} fontSize={1.1} weight="bold">
  {`${remindInDays}`}
  </Text.Span>
  )}
- <Text.Span color={'lightPrimary'} fontSize={1.25} weight="bold">
+ <Text.Span color={'lightPrimary'} fontSize={1.1} weight="bold">
  일
  </Text.Span>
 
@@ -176,7 +176,7 @@ const RemindingDescription = ({
 };
 
 const StyledDescription = styled.div`
- margin-top: ${getRem(20)};
+ margin-top: ${getRem(10)};
 `;
 const RemindingLine = styled.div`
  display: flex;

src/pages/ProfilePage.tsx

@@ -41,7 +41,7 @@ const ProfilePage = () => {
 
  return (
  <PullToRefresh onRefresh={handleRefresh}>
- <Layout>
+ <>
  {/** 유저 정보 */}
  <BasicInfoBox />
  <LBody>
@@ -57,17 +57,15 @@ const ProfilePage = () => {
  <SettingsBox serverRemindInDays={notificationSettingDay || 7} />
  <CustomerFeedbackBox />
  </LBody>
- </Layout>
+ </>
  </PullToRefresh>
  );
 };
 
 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;
 `;