Skip to content

Commit e5099d5

Browse files
gustn99gustn99
committed
refactor: 스켈레톤 UI를 PostBase에 설정
1 parent 433648c commit e5099d5

4 files changed

Lines changed: 38 additions & 81 deletions

File tree

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

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import BottomSheet from '@components/BottomSheet';
2020
import ClothingInfoItem from '@components/ClothingInfoItem';
2121
import { OODDFrame } from '@components/Frame/Frame';
2222
import NavBar from '@components/NavBar';
23+
import Skeleton from '@components/Skeleton';
2324
import { StyledText } from '@components/Text/StyledText';
2425
import TopBar from '@components/TopBar';
2526

@@ -39,14 +40,14 @@ import {
3940
UserName,
4041
MenuBtn,
4142
PostContentContainer,
42-
ContentSkeleton,
4343
Content,
4444
ShowMoreButton,
45-
ImageSkeleton,
4645
IconRow,
4746
IconWrapper,
4847
Icon,
4948
ClothingInfoList,
49+
UserNameWrapper,
50+
PostWrapper,
5051
} from './styles';
5152

5253
const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
@@ -59,7 +60,7 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
5960
const { postId } = useParams<{ postId: string }>();
6061
const contentRef = useRef<HTMLDivElement>(null);
6162

62-
const { data } = usePostDetail(Number(postId));
63+
const { data, isLoading } = usePostDetail(Number(postId));
6364
const queryClient = useQueryClient();
6465
const post = data?.data;
6566
const user = post?.user;
@@ -124,6 +125,25 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
124125
},
125126
};
126127

128+
if (isLoading) {
129+
return (
130+
<OODDFrame>
131+
<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>
143+
</OODDFrame>
144+
);
145+
}
146+
127147
return (
128148
<OODDFrame>
129149
<TopBar LeftButtonSrc={Left} />
@@ -132,7 +152,7 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
132152
<PostContainer>
133153
<PostInfoContainer>
134154
<UserProfile onClick={handleUserClick}>
135-
{post?.user && <img src={post.user.profilePictureUrl} alt="profileImg" />}
155+
{user && <img src={post.user.profilePictureUrl} alt="profileImg" />}
136156
</UserProfile>
137157
<UserName
138158
onClick={handleUserClick}
@@ -153,7 +173,7 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
153173
</MenuBtn>
154174
</PostInfoContainer>
155175

156-
{!post ? <ImageSkeleton /> : <ImageSwiper images={post.postImages.map((image) => image.url)} />}
176+
{post && <ImageSwiper images={post.postImages.map((image) => image.url)} />}
157177

158178
{post?.postClothings && (
159179
<ClothingInfoList className="post-mode">
@@ -179,9 +199,7 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
179199
</IconRow>
180200

181201
<PostContentContainer>
182-
{!post ? (
183-
<ContentSkeleton />
184-
) : (
202+
{post && (
185203
<div>
186204
<Content
187205
ref={contentRef}

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

Lines changed: 12 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,7 @@
1-
import { styled, keyframes } from 'styled-components';
1+
import { styled } from 'styled-components';
22

33
import { StyledText } from '@components/Text/StyledText';
44

5-
// 그라데이션 애니메이션 정의
6-
const shimmer = keyframes`
7-
0% {
8-
background-position: 200% 0;
9-
}
10-
100% {
11-
background-position: -200% 0;
12-
}
13-
`;
14-
15-
// 공통된 로딩 스타일
16-
const LoadingSkeleton = styled.div`
17-
background: linear-gradient(
18-
90deg,
19-
${({ theme }) => theme.colors.gray[200]} 25%,
20-
${({ theme }) => theme.colors.gray[300]} 50%,
21-
${({ theme }) => theme.colors.gray[200]} 75%
22-
);
23-
background-size: 200% 100%;
24-
animation: ${shimmer} 2s infinite;
25-
`;
26-
275
export const PostLayout = styled.div`
286
display: flex;
297
flex-direction: column;
@@ -73,7 +51,7 @@ export const PostInfoContainer = styled.div`
7351
}
7452
`;
7553

76-
export const UserProfile = styled(LoadingSkeleton)`
54+
export const UserProfile = styled.button`
7755
cursor: pointer;
7856
width: 32px;
7957
height: 32px;
@@ -102,12 +80,6 @@ export const PostContentContainer = styled.div`
10280
padding: 0 20px;
10381
`;
10482

105-
export const ContentSkeleton = styled(LoadingSkeleton)`
106-
width: 100%;
107-
height: 16px;
108-
border-radius: 4px;
109-
`;
110-
11183
export const Content = styled(StyledText)<{ $showFullText: boolean }>`
11284
word-wrap: break-word;
11385
word-break: break-all;
@@ -125,11 +97,6 @@ export const ShowMoreButton = styled(StyledText)`
12597
color: ${({ theme }) => theme.colors.text.tertiary};
12698
`;
12799

128-
export const ImageSkeleton = styled(LoadingSkeleton)`
129-
width: 100%;
130-
aspect-ratio: 4 / 5;
131-
`;
132-
133100
export const IconRow = styled.div`
134101
display: flex;
135102
height: 20px;
@@ -201,3 +168,13 @@ export const InputLayout = styled.div`
201168
resize: none;
202169
}
203170
`;
171+
172+
export const UserNameWrapper = styled.div`
173+
margin-left: 10px;
174+
margin-top: 10px;
175+
`;
176+
177+
export const PostWrapper = styled.div`
178+
margin-top: 10px;
179+
padding-inline: 30px;
180+
`;

‎src/pages/Post/index.tsx‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,14 @@ import { modifyPostRepresentativeStatusApi, deletePostApi } from '@apis/post';
77
import { isPostRepresentativeAtom, postIdAtom, userAtom } from '@recoil/Post/PostAtom';
88
import { getCurrentUserId } from '@utils/getCurrentUserId';
99

10-
import back from '@assets/arrow/left.svg';
1110
import Delete from '@assets/default/delete.svg';
1211
import Edit from '@assets/default/edit.svg';
1312
import Pin from '@assets/default/pin.svg';
1413

1514
import BottomSheet from '@components/BottomSheet';
1615
import BottomSheetMenu from '@components/BottomSheet/BottomSheetMenu';
1716
import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet';
18-
import { OODDFrame } from '@components/Frame/Frame';
1917
import Modal from '@components/Modal';
20-
import Skeleton from '@components/Skeleton';
21-
import TopBar from '@components/TopBar/index';
2218

2319
import type { BottomSheetMenuProps } from '@components/BottomSheet/BottomSheetMenu/dto';
2420
import type { BottomSheetProps } from '@components/BottomSheet/dto';
@@ -27,8 +23,6 @@ import type { ModalProps } from '@components/Modal/dto';
2723

2824
import PostBase from './PostBase/index';
2925

30-
import { PicWrapper, NameWrapper, InfoWrapper, PostWrapper } from './styles';
31-
3226
const Post: React.FC = () => {
3327
const user = useRecoilValue(userAtom);
3428
const postId = useRecoilValue(postIdAtom);
@@ -43,8 +37,6 @@ const Post: React.FC = () => {
4337
const [modalContent, setModalContent] = useState('');
4438
const [postPinStatus, setPostPinStatus] = useState<'지정' | '해제'>('지정');
4539

46-
const [isLoading, setIsLoading] = useState(true);
47-
4840
const navigate = useNavigate();
4941
const currentUserId = getCurrentUserId();
5042

@@ -99,7 +91,6 @@ const Post: React.FC = () => {
9991
if (user?.id && postId) {
10092
setIsMyPost(currentUserId === user.id);
10193
}
102-
setIsLoading(false);
10394
}, [user, postId]);
10495

10596
useEffect(() => {
@@ -172,25 +163,6 @@ const Post: React.FC = () => {
172163
content: modalContent,
173164
};
174165

175-
if (isLoading) {
176-
return (
177-
<OODDFrame>
178-
<TopBar LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
179-
<InfoWrapper>
180-
<PicWrapper>
181-
<Skeleton width={2.5} height={2.5} borderRadius={2.5} />
182-
</PicWrapper>
183-
<NameWrapper>
184-
<Skeleton width={6.25} height={1.25} />
185-
</NameWrapper>
186-
</InfoWrapper>
187-
<PostWrapper>
188-
<Skeleton width="100%" height={50} />
189-
</PostWrapper>
190-
</OODDFrame>
191-
);
192-
}
193-
194166
return (
195167
<>
196168
<PostBase onClickMenu={handleMenuOpen} />

‎src/pages/Post/styles.tsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,3 @@ export const InfoWrapper = styled.div`
99
export const PicWrapper = styled.div`
1010
margin-left: 47px;
1111
`;
12-
13-
export const NameWrapper = styled.div`
14-
margin-left: 10px;
15-
margin-top: 10px;
16-
`;
17-
18-
export const PostWrapper = styled.div`
19-
margin-top: 10px;
20-
padding-inline: 30px;
21-
`;

0 commit comments

Comments
 (0)