Style/#234/skeleton

src/bookmarks/ui/Detail/SkeletonBookmarkDetail.tsx

@@ -0,0 +1,143 @@
+/* eslint-disable no-irregular-whitespace */
+import getRem from '@/utils/getRem';
+import Button from '@/common-ui/Button';
+import styled from '@emotion/styled';
+import { theme } from '@/styles/theme';
+
+import { skeletonAnimation1 } from '@/common-ui/utils/skeletonAnimations';
+import { ReactNode } from 'react';
+import Icon from '@/common-ui/assets/Icon';
+
+const SkeletonBookmarkDetail = () => {
+  return (
+    <>
+      <BookMarkImage>​</BookMarkImage>
+      <Container>
+        <SkeletonTitleText>​</SkeletonTitleText>
+        <CategoryAndIconsWrapper>
+          <CategoryButtonWrapper>
+            <CategoryButton height={2.5} buttonColor="lightPrimary">
+              ​
+            </CategoryButton>
+          </CategoryButtonWrapper>
+          <LikeAndMessageIconWrapper>​</LikeAndMessageIconWrapper>
+        </CategoryAndIconsWrapper>
+        <BookMarkInfoWrapper>
+          <BookMarkInfo
+            icon={<Icon name="calendar-plus" size="s" />}
+            content={<SkeletonText>​</SkeletonText>}
+          />
+          <BookMarkInfo
+            icon={<Icon name="location" size="s" />}
+            content={<SkeletonText>​</SkeletonText>}
+          />
+        </BookMarkInfoWrapper>
+      </Container>
+    </>
+  );
+};
+
+export default SkeletonBookmarkDetail;
+
+const BookMarkInfo = ({
+  icon,
+  content,
+}: {
+  icon: ReactNode;
+  content: ReactNode;
+}) => {
+  return (
+    <InfoRow>
+      <IconWrapper>{icon}</IconWrapper>
+      <InfoTextWrapper>
+        <SkeletonSubText>​</SkeletonSubText>
+        {content}
+      </InfoTextWrapper>
+    </InfoRow>
+  );
+};
+
+const Container = styled.article`
+  padding: ${getRem(0, 20)};
+`;
+
+const BookMarkImage = styled.div`
+  width: 100%;
+  height: ${getRem(247)};
+  border-radius: ${getRem(0, 0, 32, 32)};
+  background-color: ${theme.colors.grey800};
+  ${skeletonAnimation1};
+`;
+
+const CategoryAndIconsWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: ${getRem(15)};
+`;
+
+const CategoryButtonWrapper = styled.div`
+  width: ${getRem(154)};
+`;
+
+const CategoryButton = styled(Button)`
+  color: ${theme.colors.black};
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+`;
+
+const LikeAndMessageIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${getRem(12)};
+  width: 30%;
+  height: 1.7rem;
+  border-radius: ${getRem(5)};
+  align-self: center;
+  ${skeletonAnimation1};
+  background-color: ${theme.colors.grey800};
+`;
+
+const BookMarkInfoWrapper = styled.div`
+  padding: ${getRem(20)} 0px;
+`;
+const InfoRow = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${getRem(10)};
+  width: 100%;
+  overflow: hidden;
+`;
+
+const InfoTextWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  height: 2rem;
+  align-items: center;
+  column-gap: 2rem;
+`;
+
+const SkeletonTitleText = styled.div`
+  width: 100%;
+  height: 1.8rem;
+  background-color: ${theme.colors.grey800};
+  margin-top: ${getRem(28)};
+  border-radius: ${getRem(5)};
+  ${skeletonAnimation1};
+`;
+
+const SkeletonSubText = styled.div`
+  width: 20%;
+  background-color: ${theme.colors.grey800};
+  ${skeletonAnimation1};
+  border-radius: ${getRem(5)};
+`;
+
+const SkeletonText = styled.div`
+  width: 50%;
+  height: 1.1rem;
+  background-color: ${theme.colors.grey800};
+  ${skeletonAnimation1};
+  border-radius: ${getRem(5)};
+`;

src/bookmarks/ui/SkeletonBookmarkUserInfo.tsx

@@ -0,0 +1,73 @@
+import SkeletonText from '@/common-ui/skeleton/SkeletonText';
+import { skeletonAnimation1 } from '@/common-ui/utils/skeletonAnimations';
+import { theme } from '@/styles/theme';
+import getRem from '@/utils/getRem';
+import styled from '@emotion/styled';
+
+interface SkeletonBookmarkUserInfoProps {
+  isFriendPage?: {
+    isFollowing: boolean;
+    friendId: number;
+    memberId: number;
+    isBlocked: boolean;
+  };
+}
+
+const SkeletonBookmarkUserInfo = ({
+  isFriendPage,
+}: SkeletonBookmarkUserInfoProps) => {
+  return (
+    <StyleWrapper>
+      <TextWrapper>
+        <UserBox></UserBox>
+        {!!isFriendPage && (
+          <SkeletonText width={40} height={1.5} animationType="reverse" />
+        )}
+        {!isFriendPage && <SkeletonText width={40} height={1.5} />}
+      </TextWrapper>
+      {!!isFriendPage && (
+        <>
+          <StyledButton />
+        </>
+      )}
+    </StyleWrapper>
+  );
+};
+
+export default SkeletonBookmarkUserInfo;
+
+const StyleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const UserBox = styled.div`
+  display: flex;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  background-color: ${theme.colors.grey800};
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  ${skeletonAnimation1};
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: 0.5rem;
+  width: 100%;
+`;
+
+const StyledButton = styled.div`
+  width: ${getRem(70)};
+  height: 1.4rem;
+  font-size: ${getRem(14)};
+  padding: ${getRem(4, 15)};
+  border-radius: ${getRem(5)};
+  background-color: ${theme.colors.grey800};
+  font-weight: bold;
+  ${skeletonAnimation1}
+`;

src/comment/api/Comment.ts

@@ -45,6 +45,7 @@ export const useGETCommentListQuery = ({ userId }: GETCommentListRequest) => {
     refetchOnWindowFocus: false,
     retry: 0,
     enabled: !!userId,
+    suspense: true,
   });
 };
 

src/comment/ui/bookmark/SkeletonCommentList.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import styled from '@emotion/styled';
+import { theme } from '@/styles/theme';
+import Icon from '@/common-ui/assets/Icon';
+import getRem from '@/utils/getRem';
+import SkeletonText from '@/common-ui/skeleton/SkeletonText';
+import { skeletonAnimation2 } from '@/common-ui/utils/skeletonAnimations';
+
+const SkeletonCommentList = () => {
+  return (
+    <CommentListWrapper>
+      {[...Array(3)].map((_, index) => (
+        <SkeletonCommentItem key={index} />
+      ))}
+    </CommentListWrapper>
+  );
+};
+
+const CommentListWrapper = styled.div`
+  padding: 0 ${getRem(20)};
+`;
+
+const SkeletonCommentItem = () => {
+  return (
+    <Container>
+      <CommentHeader>
+        <NicknameTextAndIconWrapper>
+          <SkeletonText height={1} width={7} animationType="reverse" />
+          <SkeletonText height={1} />
+        </NicknameTextAndIconWrapper>
+        {/* <div />
+        <div /> */}
+      </CommentHeader>
+      <SkeletonText height={1} />
+      <IconAndTextWrapper>
+        <Icon name="timeline" size={'xs'} />
+        <SkeletonText height={1} width={40} />
+      </IconAndTextWrapper>
+    </Container>
+  );
+};
+
+export default SkeletonCommentList;
+
+const Container = styled.div`
+  display: grid;
+  flex-direction: column;
+  row-gap: 0.8rem;
+  padding: ${getRem(15, 20)};
+  border-radius: ${getRem(7)};
+  background-color: ${theme.colors.grey700};
+  ${skeletonAnimation2}
+  margin-bottom: 1rem;
+  :nth-last-of-type(1) {
+    margin-bottom: 5rem;
+  }
+`;
+
+const CommentHeader = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 1.5rem;
+`;
+
+const NicknameTextAndIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${getRem(8)};
+  margin-right: auto; // 추가
+  width: 100%;
+`;
+
+const IconAndTextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${getRem(8)};
+`;

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

@@ -18,7 +18,7 @@
 }
 
 const CommentItem = ({
   id,
   bookmarkId,
   title,
   nickName,
@@ -46,10 +46,10 @@
           </IconAndTitleWrapper>
         </CommentHeader>
         <IconAndNickNameWrapper>
+          {<Icon name="badge-green" size={'s'} />}
           <NicknameText fontSize={getRem(14)} weight={'bold'}>
             {nickName}
           </NicknameText>
-          {<Icon name="badge-green" size={'s'} />}
         </IconAndNickNameWrapper>
         <ContentText fontSize={getRem(11)}>{content}</ContentText>
         <IconAndTimeAndCategoryWrapper>

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

@@ -0,0 +1,40 @@
+import { useGETCommentListQuery } from '@/comment/api/Comment';
+import BlankItem from '@/common-ui/BlankItem';
+import useAuthStore from '@/store/auth';
+import CommentItem from './CommentItem';
+import styled from '@emotion/styled';
+import getRem from '@/utils/getRem';
+
+const CommentList = () => {
+  const { memberId } = useAuthStore();
+  const { data: commentList } = useGETCommentListQuery({
+    userId: memberId,
+  });
+  return (
+    <CommentListWrapper>
+      {!commentList?.length && <BlankItem page="COMMENT" />}
+      {!!commentList &&
+        commentList.map((comment) => (
+          <CommentItem
+            key={comment.id} // 변경이 되었는지 안되었는지 판단 여부
+            id={comment.id}
+            bookmarkId={comment.bookmarkId}
+            title={comment.bookmark}
+            content={comment.content}
+            nickName={comment.member}
+            category={comment.category}
+            updatedAt={Number(comment.createdTimestamp)}
+          />
+        ))}
+    </CommentListWrapper>
+  );
+};
+
+export default CommentList;
+
+const CommentListWrapper = styled.div`
+  > * + * {
+    margin-top: ${getRem(10)};
+    margin-bottom: ${getRem(10)};
+  }
+`;