Merge pull request #86 from Qfeed-Dev/feature/#75

[Feat] 친구페이지 프로필 적용
Qfeed-Dev · Sep 18, 2023 · 8abd06f · 8abd06f
2 parents 0837b7c + e99e8b2
commit 8abd06f
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 46 deletions.
diff --git a/src/components/BottomSheet/children/Friend.tsx b/src/components/BottomSheet/children/Friend.tsx
@@ -15,6 +15,8 @@ import {
     changeAction,
     changeVisibleType
 } from "src/reducer/slices/bottomSheet/bottomSheetSlice";
+import FriendProfile from "src/components/Profile/FriendProfile";
+import Flex from "src/components/common/Flex";
 
 interface Props {}
 
@@ -35,10 +37,18 @@ const Friend = ({}: Props) => {
                 <Loading />
             ) : (
                 <Menu>
-                    <Image type="default" src="" size={60} />
-                    <Spacing size={10} />
-                    <Text typo="Subtitle2b">{friend.friend?.name}</Text>
-                    <Text typo="Caption1r">{friend.friend?.nickname}</Text>
+                    <Flex direction="column" gap={8}>
+                        <FriendProfile
+                            width={72}
+                            url={friend.friend?.profileImage}
+                        />
+                        <Flex direction="column">
+                            <Text typo="Subtitle2b">{friend.friend?.name}</Text>
+                            <Text typo="Caption1r">
+                                {friend.friend?.nickname}
+                            </Text>
+                        </Flex>
+                    </Flex>
 
                     <Spacing size={20} />
                     <TextareaWrapper>

diff --git a/src/components/Profile/FriendProfile.tsx b/src/components/Profile/FriendProfile.tsx
@@ -0,0 +1,44 @@
+import { styled } from "styled-components";
+
+import { colors } from "styles/theme";
+
+interface ProfileProp {
+    width: number;
+    url?: string;
+    grayscale?: number;
+    border?: number;
+}
+
+const FriendProfile = ({
+    width,
+    url,
+    grayscale = 0,
+    border = 0
+}: ProfileProp) => {
+    return (
+        <ProfileWrapper width={width} border={border}>
+            {url && <ProfileImg src={url} grayscale={grayscale} />}
+        </ProfileWrapper>
+    );
+};
+
+const ProfileWrapper = styled.div<{ width: number; border: number }>`
+    width: ${({ width }) => width}px;
+    height: ${({ width }) => width}px;
+
+    background: ${colors.light_gray3};
+
+    border: ${({ border }) => border}px solid ${colors.light_qwhite};
+    border-radius: 50%;
+    overflow: hidden;
+`;
+
+const ProfileImg = styled.img<{ grayscale: number }>`
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+
+    filter: ${({ grayscale }) => `grayscale(${grayscale}%)`};
+`;
+
+export default FriendProfile;
diff --git a/src/pages-edit/mypage/components/Profile.tsx → src/components/Profile/Profile.tsx b/src/pages-edit/mypage/components/Profile.tsx → src/components/Profile/Profile.tsx
@@ -34,6 +34,7 @@ const Profile = ({ width, onClick }: ProfileProp) => {
         userMutation.mutate({
             profileImage: url ? url.imageUrl : url
         });
+        user.refetch();
     };
 
     return (
@@ -47,7 +48,9 @@ const Profile = ({ width, onClick }: ProfileProp) => {
                     accept="image/x-png, image/gif, image/jpeg"
                 />
             )}
-            <ProfileImg src={user.user?.profileImage} />
+            {user.user?.profileImage && (
+                <ProfileImg src={user.user?.profileImage} />
+            )}
         </ProfileWrapper>
     );
 };
@@ -60,13 +63,14 @@ const ProfileWrapper = styled.label<{ width: number }>`
 
     border: 3px solid ${colors.light_qwhite};
     border-radius: 50%;
-    object-fit: cover;
     overflow: hidden;
 `;
 
 const ProfileImg = styled.img`
     width: 100%;
     height: 100%;
+
+    object-fit: cover;
 `;
 
 export default Profile;
diff --git a/src/hooks/account/useUserQuery.ts b/src/hooks/account/useUserQuery.ts
@@ -14,11 +14,15 @@ export const getUser = async () => {
 };
 
 export const useUserQuery = () => {
-    const { data: user, isLoading } = useQuery<User>(userKeys.all, getUser, {
+    const {
+        data: user,
+        isLoading,
+        refetch
+    } = useQuery<User>(userKeys.all, getUser, {
         onError: (error: any) => {
             alert(error);
         }
     });
 
-    return { user, isLoading };
+    return { user, isLoading, refetch };
 };
diff --git a/src/pages-edit/friend/components/FriendItem.tsx b/src/pages-edit/friend/components/FriendItem.tsx
@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
 import Flex from "src/components/common/Flex";
 import Text from "src/components/common/Text";
 import ButtonFillXSmall from "src/components/buttons/button-fill-xsmall";
+import FriendProfile from "src/components/Profile/FriendProfile";
 
 import useFriendMutation from "src/hooks/account/useFriendMutation";
 import useDeleteFriendMutation from "src/hooks/account/useDeleteFriendMutation";
@@ -26,9 +27,13 @@ export default function FriendItem({
 
     return (
         <FriendWrapper>
-            <Flex gap={16} onClick={() => router.push(`/friend/${friend.id}`)}>
-                <ImgCover></ImgCover>
-                <Flex direction="column" align="start">
+            <Flex
+                justify="start"
+                gap={16}
+                onClick={() => router.push(`/friend/${friend.id}`)}
+            >
+                <FriendProfile width={35} url={friend.profileImage} />
+                <Flex width="auto" direction="column" align="start">
                     <Text typo="Subtitle1b">{friend.name}</Text>
                     <Text typo="Caption1r">@{friend.nickname}</Text>
                 </Flex>
@@ -53,11 +58,3 @@ const FriendWrapper = styled(Flex)`
     padding-bottom: 1rem;
     border-bottom: 1px solid ${colors.line_white_5};
 `;
-
-const ImgCover = styled.div`
-    min-width: 35px;
-    min-height: 35px;
-    background: ${colors.light_gray1};
-
-    border-radius: 50%;
-`;
diff --git a/src/pages-edit/home/Home.tsx b/src/pages-edit/home/Home.tsx
@@ -26,7 +26,7 @@ import { useAppDispatch } from "src/hooks/useReduxHooks";
 import { changeQType } from "src/reducer/slices/qtype/qtypeSlice";
 import ButtonFillXSmall from "src/components/buttons/button-fill-xsmall";
 import NavigationTop from "src/components/navigations/NavigationTop";
-import Profile from "../mypage/components/Profile";
+import Profile from "../../components/Profile/Profile";
 
 export default function Home() {
     const router = useRouter();

diff --git a/src/pages-edit/mypage/components/InfoList.tsx b/src/pages-edit/mypage/components/InfoList.tsx
@@ -14,7 +14,8 @@ import { User } from "src/models/account";
 import { useState } from "react";
 import useFriendMutation from "src/hooks/account/useFriendMutation";
 import useDeleteFriendMutation from "src/hooks/account/useDeleteFriendMutation";
-import Profile from "./Profile";
+import Profile from "../../../components/Profile/Profile";
+import FriendProfile from "src/components/Profile/FriendProfile";
 
 export default function InfoList({
     user,
@@ -31,7 +32,15 @@ export default function InfoList({
     return (
         <InfoListWrapper direction="column" gap={16}>
             <Flex direction="column" gap={8}>
-                <Profile width={72} />
+                {isMe ? (
+                    <Profile width={72} />
+                ) : (
+                    <FriendProfile
+                        width={72}
+                        url={user.profileImage}
+                        border={3}
+                    />
+                )}
                 <Text typo="Headline1b">{"@" + user.nickname}</Text>
             </Flex>
             {!isMe && (

diff --git a/src/pages-edit/question/Friend.tsx b/src/pages-edit/question/Friend.tsx
@@ -8,6 +8,9 @@ import { useAppDispatch, useAppSelector } from "src/hooks/useReduxHooks";
 import { Friend } from "src/models/account";
 import { changeVisibleType } from "src/reducer/slices/bottomSheet/bottomSheetSlice";
 import styled from "styled-components";
+import Profile from "../../components/Profile/Profile";
+import FriendProfile from "src/components/Profile/FriendProfile";
+import Flex from "src/components/common/Flex";
 
 export default function FriendItem({
     idx,
@@ -41,35 +44,22 @@ export default function FriendItem({
             onClick={handleClickFriend}
             backgroundColor={bgColor}
         >
-            <FriendInner>
-                <Menu>
-                    <Image
-                        type="default"
-                        size={35}
-                        src={
-                            data?.profileImage
-                                ? data?.profileImage
-                                : "https://i.ibb.co/0Z6FNN7/60pt.png"
-                        }
-                        grayscale={
-                            selectedIdx == null || selectedIdx === data.id
-                                ? 0
-                                : 100
-                        }
-                    />
-                </Menu>
-                <Spacing size={8} />
-
-                <Menu>
+            <FriendInner direction="column" gap={8}>
+                <FriendProfile
+                    width={35}
+                    url={data?.profileImage}
+                    grayscale={
+                        selectedIdx == null || selectedIdx === data.id ? 0 : 100
+                    }
+                />
+                <Flex direction="column">
                     <Text typo="Caption1b" color="light_qblack">
                         {data?.name}
                     </Text>
-                </Menu>
-                <Menu>
                     <Text typo="Caption2r" color="light_qblack">
                         {data?.nickname}
                     </Text>
-                </Menu>
+                </Flex>
             </FriendInner>
         </FriendWrapper>
     );
@@ -83,7 +73,7 @@ const FriendWrapper = styled.div<{ width: number; backgroundColor: any }>`
     background-color: ${({ backgroundColor }) => backgroundColor};
 `;
 
-const FriendInner = styled.div`
+const FriendInner = styled(Flex)`
     padding: 8px 20px;
 `;