Skip to content
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.

Sign up for GitHub

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

포스트 헤더 ui 추가 #430

Closed
wants to merge 1 commit into from
Closed

포스트 헤더 ui 추가 #430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions public/assets/svg/post_arrow_left.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
162 changes: 96 additions & 66 deletions src/components/feed/FeedPostViewer/FeedPostViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/ko';
dayjs.extend(relativeTime);
dayjs.locale('ko');
import PostHeaderArrowIcon from 'public/assets/svg/post_arrow_left.svg?v2';

interface FeedPostViewerProps {
post: paths['/post/v1/{postId}']['get']['responses']['200']['content']['application/json'];
Expand All @@ -31,74 +32,82 @@ export default function FeedPostViewer({ post, Actions }: FeedPostViewerProps) {
};

return (
<Container>
<ContentWrapper>
<ContentHeader>
<AuthorWrapper>
<SAvatar src={post.user.profileImage || ''} alt={post.user.name} />
<AuthorInfo>
<AuthorName>{post.user.name}</AuthorName>
<UpdatedDate>{dayjs(post.updatedDate).fromNow()}</UpdatedDate>
</AuthorInfo>
</AuthorWrapper>
<Menu as="div" style={{ position: 'relative' }}>
<Menu.Button>
<MenuIcon />
</Menu.Button>
<MenuItems>
{Actions.map(Action => (
<Menu.Item>
<MenuItem>{Action}</MenuItem>
</Menu.Item>
))}
</MenuItems>
</Menu>
</ContentHeader>
<ContentBody>
<Title>{post.title}</Title>
<Contents>{post.contents}</Contents>
{post.images && (
<ImageSection>
{post.images.length === 1 ? (
<BigImage src={post.images[0]} onClick={handleClickImage(post.images, 0)} />
) : (
<ImageListWrapper>
{post.images.map((image, index) => (
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
<ImageListItem key={index} src={image} onClick={handleClickImage(post.images!, index)} />
))}
</ImageListWrapper>
)}
</ImageSection>
)}
<ViewCount>조회 {post.viewCount}회</ViewCount>
</ContentBody>
</ContentWrapper>
<>
<PostHeader>
<PostHeaderIconWrapper>
<PostHeaderArrowIcon style={{ marginRight: '8px' }} />
</PostHeaderIconWrapper>
피드
</PostHeader>
<Container>
<ContentWrapper>
<ContentHeader>
<AuthorWrapper>
<SAvatar src={post.user.profileImage || ''} alt={post.user.name} />
<AuthorInfo>
<AuthorName>{post.user.name}</AuthorName>
Comment on lines +46 to +48
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스크린리더 사용자가 AuthorName으로 name의 정보를 얻을 수 있으니 Avatar는 시각적인 효과만 낼수있도록 alt를 ""로 작성하는것이 좋을것 같아요

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alt 내가 넣어둔건데 그렇게 하는게 좋겠네요~

<UpdatedDate>{dayjs(post.updatedDate).fromNow()}</UpdatedDate>
</AuthorInfo>
</AuthorWrapper>
<Menu as="div" style={{ position: 'relative' }}>
<Menu.Button>
<MenuIcon />
</Menu.Button>
<MenuItems>
{Actions.map(Action => (
<Menu.Item>
<MenuItem>{Action}</MenuItem>
</Menu.Item>
))}
</MenuItems>
</Menu>
</ContentHeader>
<ContentBody>
<Title>{post.title}</Title>
<Contents>{post.contents}</Contents>
{post.images && (
<ImageSection>
{post.images.length === 1 ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hasOnlyThumbnail 과 같은 말로 바꿀 수 있을것 같아

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변수로 인라인하는 건 좋은 것 같당! 그런데 hasOnlyThumbnail 란 이름이 '이미지가 하나만 있다'랑 완전 같은 의미는 아닌 것 같은데 좀 더 찰떡인 이름이 없을까.. 🤔 이름 짓기 넘 어렵군 ㅜ

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hasOnlyOnePostImage 는 어때요오,,,?? ㅎㅎ

<BigImage src={post.images[0]} onClick={handleClickImage(post.images, 0)} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 나중에 지연이 pr 머지되면 매직넘버 없애보자

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

매직넘버가 뭔가용?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@na-reum 머지했습니다 ~~!

Copy link
Contributor Author

@borimong borimong Sep 23, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@eunsukimme
#429
요기에서 '매직넘버' 검색하면 우리가 했던 열띤 토론을 볼 수 있습니댯,,,,ㅎㅎ

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 나중에 지연이 pr 머지되면 매직넘버 없애보자

좋아!!!!!!!!

) : (
<ImageListWrapper>
{post.images.map((image, index) => (
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
<ImageListItem key={index} src={image} onClick={handleClickImage(post.images!, index)} />
))}
</ImageListWrapper>
)}
</ImageSection>
)}
<ViewCount>조회 {post.viewCount}회</ViewCount>
</ContentBody>
</ContentWrapper>

<CommentLikeWrapper>
<CommentLike>
<CommentIcon />
{/* TODO: add comment count */}
<span style={{ marginLeft: '4px' }}>댓글 </span>
</CommentLike>
<Divider />
<CommentLike>
{post.isLiked ? <LikeFillIcon /> : <LikeIcon />}
<span style={{ marginLeft: '4px' }}>좋아요 {post.likeCount}</span>
</CommentLike>
</CommentLikeWrapper>
<CommentLikeWrapper>
<CommentLike>
<CommentIcon />
{/* TODO: add comment count */}
<span style={{ marginLeft: '4px' }}>댓글 </span>
</CommentLike>
<Divider />
<CommentLike>
{post.isLiked ? <LikeFillIcon /> : <LikeIcon />}
<span style={{ marginLeft: '4px' }}>좋아요 {post.likeCount}</span>
</CommentLike>
</CommentLikeWrapper>
Comment on lines +86 to +97
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

프리티어 설정이 다른가요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

앗 요오거는 아마 Header 부분 추가하느라 전체를 <></>로 한 번 더 감싸주어서 이렇게 된 거 같아요..!! 근데 이 부분뿐만 아니라 전체적으로 다... 그래서 은수오빠가 한 부분들까지 다 + 되어버리는 현상이 일어난...것 같숨니당......ㅠ^ㅠ

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하 이해했어염
그냥 뎁스가 깊어진거군 발견 못했네!


<CommentListWrapper>
{/* 댓글 목록 */}
<div></div>
<CommentInputWrapper>
<CommentInput placeholder="댓글 입력" />
<SendButton>
<SendIcon />
</SendButton>
</CommentInputWrapper>
</CommentListWrapper>
</Container>
<CommentListWrapper>
{/* 댓글 목록 */}
<div></div>
<CommentInputWrapper>
<CommentInput placeholder="댓글 입력" />
<SendButton>
<SendIcon />
</SendButton>
</CommentInputWrapper>
</CommentListWrapper>
</Container>
</>
);
}

Expand Down Expand Up @@ -293,3 +302,24 @@ const SAvatar = styled(Avatar, {
height: '40px',
},
});
const PostHeader = styled('div', {
height: '88px',
color: '$white',
background: '$black100',
display: 'flex',
alignItems: 'center',
fontStyle: 'H1',
paddingBottom: '$8',
'@tablet': {
height: '56px',
fontStyle: 'H2',
mb: '$0',
},
});
const PostHeaderIconWrapper = styled('div', {
display: 'none',
'@tablet': {
display: 'flex',
alignItems: 'center',
},
});