Skip to content

Commit f6bb38f

Browse files
gustn99gustn99
committed
style: PostBase UI 조정
1 parent e5099d5 commit f6bb38f

2 files changed

Lines changed: 82 additions & 103 deletions

File tree

‎src/pages/Post/PostBase/index.tsx‎

Lines changed: 75 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ import LikeCommentBottomSheetContent from './LikeCommentBottomSheetContent/index
3434

3535
import {
3636
PostLayout,
37-
PostContainer,
3837
PostInfoContainer,
3938
UserProfile,
4039
UserName,
@@ -129,17 +128,19 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
129128
return (
130129
<OODDFrame>
131130
<TopBar LeftButtonSrc={Left} onClickLeftButton={() => nav(-1)} />
132-
<PostInfoContainer>
133-
<UserProfile>
134-
<Skeleton width={2.5} height={2.5} borderRadius={2.5} />
135-
</UserProfile>
136-
<UserNameWrapper>
137-
<Skeleton width={6.25} height={1.25} />
138-
</UserNameWrapper>
139-
</PostInfoContainer>
140-
<PostWrapper>
141-
<Skeleton width="100%" height={40} />
142-
</PostWrapper>
131+
<PostLayout>
132+
<PostInfoContainer>
133+
<UserProfile>
134+
<Skeleton width={2.5} height={2.5} borderRadius={2.5} />
135+
</UserProfile>
136+
<UserNameWrapper>
137+
<Skeleton width={6.25} height={1.25} />
138+
</UserNameWrapper>
139+
</PostInfoContainer>
140+
<PostWrapper>
141+
<Skeleton width="100%" height={40} />
142+
</PostWrapper>
143+
</PostLayout>
143144
</OODDFrame>
144145
);
145146
}
@@ -149,76 +150,70 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
149150
<TopBar LeftButtonSrc={Left} />
150151

151152
<PostLayout>
152-
<PostContainer>
153-
<PostInfoContainer>
154-
<UserProfile onClick={handleUserClick}>
155-
{user && <img src={post.user.profilePictureUrl} alt="profileImg" />}
156-
</UserProfile>
157-
<UserName
158-
onClick={handleUserClick}
159-
$textTheme={{ style: 'body2-medium' }}
160-
color={theme.colors.text.primary}
161-
>
162-
{user?.nickname ?? '알수없음'}
163-
</UserName>
164-
<StyledText
165-
className="timeAgo"
166-
$textTheme={{ style: 'caption2-regular' }}
167-
color={theme.colors.text.tertiary}
168-
>
169-
{timeAgo}
170-
</StyledText>
171-
<MenuBtn onClick={onClickMenu}>
172-
<img src={More} alt="more" />
173-
</MenuBtn>
174-
</PostInfoContainer>
175-
176-
{post && <ImageSwiper images={post.postImages.map((image) => image.url)} />}
153+
<PostInfoContainer>
154+
<UserProfile onClick={handleUserClick}>
155+
{user && <img src={post.user.profilePictureUrl} alt="profileImg" />}
156+
</UserProfile>
157+
<UserName onClick={handleUserClick} $textTheme={{ style: 'body2-medium' }} color={theme.colors.text.primary}>
158+
{user?.nickname ?? '알수없음'}
159+
</UserName>
160+
<StyledText className="timeAgo" $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.tertiary}>
161+
{timeAgo}
162+
</StyledText>
163+
<MenuBtn onClick={onClickMenu}>
164+
<img src={More} alt="more" />
165+
</MenuBtn>
166+
</PostInfoContainer>
177167

178-
{post?.postClothings && (
179-
<ClothingInfoList className="post-mode">
180-
{post.postClothings.map((clothingObj, index) => (
181-
<ClothingInfoItem key={index} clothingObj={clothingObj} />
182-
))}
183-
</ClothingInfoList>
168+
{post && (
169+
<PostWrapper>
170+
<ImageSwiper images={post.postImages.map((image) => image.url)} />
171+
</PostWrapper>
172+
)}
173+
174+
{post?.postClothings ? (
175+
<ClothingInfoList className="post-mode">
176+
{post.postClothings.map((clothingObj, index) => (
177+
<ClothingInfoItem key={index} clothingObj={clothingObj} />
178+
))}
179+
</ClothingInfoList>
180+
) : null}
181+
182+
<IconRow>
183+
<IconWrapper>
184+
<Icon onClick={() => togglePostLikeStatus()}>
185+
{post?.isPostLike ? <Like isFilled={true} color={theme.colors.brand.primary} /> : <Like />}
186+
</Icon>
187+
<span onClick={() => handleLikeCommentOpen('likes')}>{post?.postLikesCount ?? 0}</span>
188+
</IconWrapper>
189+
<IconWrapper onClick={() => handleLikeCommentOpen('comments')}>
190+
<Icon>
191+
<img src={Message} alt="message" />
192+
</Icon>
193+
<span>{post?.postCommentsCount ?? 0}</span>
194+
</IconWrapper>
195+
</IconRow>
196+
197+
<PostContentContainer>
198+
{post && (
199+
<div>
200+
<Content
201+
ref={contentRef}
202+
onClick={toggleTextDisplay}
203+
$showFullText={showFullText}
204+
$textTheme={{ style: 'body4-light' }}
205+
color={theme.colors.text.primary}
206+
>
207+
{post.content}
208+
</Content>
209+
{isTextOverflowing && (
210+
<ShowMoreButton onClick={toggleTextDisplay} $textTheme={{ style: 'body4-light' }}>
211+
{showFullText ? '간략히 보기' : '더 보기'}
212+
</ShowMoreButton>
213+
)}
214+
</div>
184215
)}
185-
186-
<IconRow>
187-
<IconWrapper>
188-
<Icon onClick={() => togglePostLikeStatus()}>
189-
{post?.isPostLike ? <Like isFilled={true} color={theme.colors.brand.primary} /> : <Like />}
190-
</Icon>
191-
<span onClick={() => handleLikeCommentOpen('likes')}>{post?.postLikesCount ?? 0}</span>
192-
</IconWrapper>
193-
<IconWrapper onClick={() => handleLikeCommentOpen('comments')}>
194-
<Icon>
195-
<img src={Message} alt="message" />
196-
</Icon>
197-
<span>{post?.postCommentsCount ?? 0}</span>
198-
</IconWrapper>
199-
</IconRow>
200-
201-
<PostContentContainer>
202-
{post && (
203-
<div>
204-
<Content
205-
ref={contentRef}
206-
onClick={toggleTextDisplay}
207-
$showFullText={showFullText}
208-
$textTheme={{ style: 'body4-light' }}
209-
color={theme.colors.text.primary}
210-
>
211-
{post.content}
212-
</Content>
213-
{isTextOverflowing && (
214-
<ShowMoreButton onClick={toggleTextDisplay} $textTheme={{ style: 'body4-light' }}>
215-
{showFullText ? '간략히 보기' : '더 보기'}
216-
</ShowMoreButton>
217-
)}
218-
</div>
219-
)}
220-
</PostContentContainer>
221-
</PostContainer>
216+
</PostContentContainer>
222217
</PostLayout>
223218

224219
<NavBar />

‎src/pages/Post/PostBase/styles.tsx‎

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,13 @@ export const PostLayout = styled.div`
66
display: flex;
77
flex-direction: column;
88
align-items: center;
9-
width: 100%;
10-
height: 100%;
11-
height: calc(100vh - 2.75rem);
12-
overflow-y: scroll;
13-
14-
scrollbar-width: none; // Firefox
15-
-ms-overflow-style: none; // IE 10+
16-
&::-webkit-scrollbar {
17-
display: none; // Safari & Chrome
18-
}
19-
`;
9+
gap: 16px;
2010
21-
export const PostContainer = styled.div`
22-
display: flex;
23-
flex-direction: column;
2411
width: 100%;
25-
max-width: 450px;
26-
height: 100%;
12+
height: calc(100vh - 2.75rem);
13+
padding: 0 20px;
14+
padding-bottom: 6.5rem;
2715
overflow-y: scroll;
28-
gap: 16px;
2916
3017
scrollbar-width: none; // Firefox
3118
-ms-overflow-style: none; // IE 10+
@@ -42,7 +29,6 @@ export const PostInfoContainer = styled.div`
4229
display: flex;
4330
align-items: center;
4431
margin-top: 8px;
45-
padding: 0 20px;
4632
gap: 8px;
4733
align-self: stretch;
4834
@@ -77,7 +63,6 @@ export const MenuBtn = styled.button`
7763

7864
export const PostContentContainer = styled.div`
7965
width: 100%;
80-
padding: 0 20px;
8166
`;
8267

8368
export const Content = styled(StyledText)<{ $showFullText: boolean }>`
@@ -101,7 +86,7 @@ export const IconRow = styled.div`
10186
display: flex;
10287
height: 20px;
10388
align-items: center;
104-
padding: 0 20px;
89+
margin-right: auto;
10590
gap: 16px;
10691
`;
10792

@@ -127,8 +112,8 @@ export const Icon = styled.div`
127112
`;
128113

129114
export const ClothingInfoList = styled.div`
130-
padding: 0 20px;
131115
display: flex;
116+
margin-right: auto;
132117
flex-shrink: 0;
133118
overflow-x: auto;
134119
white-space: nowrap;
@@ -175,6 +160,5 @@ export const UserNameWrapper = styled.div`
175160
`;
176161

177162
export const PostWrapper = styled.div`
178-
margin-top: 10px;
179-
padding-inline: 30px;
163+
width: 100%;
180164
`;

0 commit comments

Comments
 (0)