fix: avatar ui issue and store

AboutClan · Aug 13, 2024 · 55d3356 · 55d3356
1 parent d4fe517
commit 55d3356
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 10 deletions.
diff --git a/components/atoms/Avatar.tsx b/components/atoms/Avatar.tsx
@@ -62,11 +62,12 @@ function AvatarComponent({
   };
 
   function AvatarComponent() {
+
     return (
       <AvatarContainer size={size} sizeLength={sizeLength}>
         <ImageContainer
           bg={
-            bgImage ||
+            (!shadowAvatar && bgImage) ||
             (shadowAvatar
               ? "var(--gray-500)"
               : hasAvatar && avatar.bg !== null && COLOR_TABLE_LIGHT[avatar.bg])

diff --git a/components/molecules/ContentHeartBar.tsx b/components/molecules/ContentHeartBar.tsx
@@ -192,7 +192,7 @@ function ContentHeartBar({ feedId, likeUsers, likeCnt, comments, refetch }: Cont
           {commentArr.length}
         </Button>
         <Button size="sm" variant="ghost" mb="2px" onClick={() => handleDrawerBtn("like")}>
-          <AvatarGroupsOverwrap userAvatarArr={userAvatarArr} size="sm" />
+          <AvatarGroupsOverwrap userAvatarArr={userAvatarArr} userLength={heartProps.cnt} />
         </Button>
       </Flex>
       {modalType === "like" && (

diff --git a/components/molecules/UserCommentInput.tsx b/components/molecules/UserCommentInput.tsx
@@ -36,7 +36,7 @@ function UserCommentInput({
     onSubmit(text);
     setText("");
   };
-  console.log("user", user);
+
   return (
     <Flex align="center" flex={1}>
       {user && (

diff --git a/components/molecules/cards/PostThumbnailCard.tsx b/components/molecules/cards/PostThumbnailCard.tsx
@@ -87,7 +87,7 @@ export function PostThumbnailCard({
           <Subtitle>{subtitle}</Subtitle>
           {participants ? (
             <StatusContainer>
-              <AvatarGroupsOverwrap userAvatarArr={userAvatarArr} size="sm" />
+              <AvatarGroupsOverwrap userAvatarArr={userAvatarArr} />
               <div className="statusText">
                 <Box fontSize="14px" color="var(--color-mint)" fontWeight={600} mr="8px" mt="4px">
                   {statusText}

diff --git a/components/molecules/groups/AvatarGroupsOverwrap.tsx b/components/molecules/groups/AvatarGroupsOverwrap.tsx
@@ -2,7 +2,6 @@ import styled from "styled-components";
 
 import { IAvatar } from "../../../types/models/userTypes/userInfoTypes";
 import Avatar from "../../atoms/Avatar";
-type Size = "sm";
 
 interface IUserAvatar {
   image: string;
@@ -11,11 +10,11 @@ interface IUserAvatar {
 
 interface IAvatarGroupsOverwrap {
   userAvatarArr: IUserAvatar[];
-  size: Size;
+  userLength?: number;
 }
 const VOTER_SHOW_MAX = 6;
 
-export default function AvatarGroupsOverwrap({ userAvatarArr }: IAvatarGroupsOverwrap) {
+export default function AvatarGroupsOverwrap({ userAvatarArr, userLength }: IAvatarGroupsOverwrap) {
   return (
     <Participants>
       {userAvatarArr.map((att, idx) => {
@@ -27,7 +26,10 @@ export default function AvatarGroupsOverwrap({ userAvatarArr }: IAvatarGroupsOve
               avatar={att.avatar}
               size="sm"
               isLink={false}
-              shadowAvatar={idx === VOTER_SHOW_MAX - 1 && userAvatarArr.length - idx}
+              shadowAvatar={
+                idx === VOTER_SHOW_MAX - 1 &&
+                (userLength ? userLength - VOTER_SHOW_MAX : userAvatarArr.length - idx)
+              }
             />
           )
         );

diff --git a/components/molecules/layouts/ImageTitleGridLayout.tsx b/components/molecules/layouts/ImageTitleGridLayout.tsx
@@ -48,6 +48,7 @@ export default function ImageTileGridLayout({
             fill={true}
             alt="reviewThumbnailImage"
             priority={isPriority}
+            style={{ objectPosition: "center", objectFit: "cover" }}
           />
         </ImageContainer>
         <TextContainer>{text}</TextContainer>

diff --git a/modals/store/StoreApplyGiftModal.tsx b/modals/store/StoreApplyGiftModal.tsx
@@ -36,7 +36,7 @@ function StoreApplyGiftModal({ setIsModal, giftInfo }: IStoreApplyGiftModal) {
 
   const { data: userInfo } = useUserInfoQuery();
   const { data: myPoint, isLoading } = usePointSystemQuery("point");
-  const { mutate: applyGift } = useStoreMutation({
+  const { mutate: applyGift, isLoading: isLoading2 } = useStoreMutation({
     onSuccess() {
       getPoint({ value: -totalCost, message: `${giftInfo.name} 응모` });
       completeToast("free", "응모에 성공했어요! 당첨 발표일을 기다려주세요!");
@@ -90,10 +90,10 @@ function StoreApplyGiftModal({ setIsModal, giftInfo }: IStoreApplyGiftModal) {
     main: {
       text: "응모하기",
       func: onApply,
+      isLoading: isLoading2,
     },
   };
 
-
   return (
     <ModalLayout title="상품 응모" footerOptions={footerOptions} setIsModal={setIsModal}>
       <Box h="130px">