diff --git a/src/components/BottomSheet/children/Friend.tsx b/src/components/BottomSheet/children/Friend.tsx index 0469e06..9b73e34 100644 --- 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) => { ) : ( - - - {friend.friend?.name} - {friend.friend?.nickname} + + + + {friend.friend?.name} + + {friend.friend?.nickname} + + + diff --git a/src/components/Profile/FriendProfile.tsx b/src/components/Profile/FriendProfile.tsx new file mode 100644 index 0000000..0e7eb41 --- /dev/null +++ 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 ( + + {url && } + + ); +}; + +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 b/src/components/Profile/Profile.tsx similarity index 93% rename from src/pages-edit/mypage/components/Profile.tsx rename to src/components/Profile/Profile.tsx index b9bdac6..955b27a 100644 --- a/src/pages-edit/mypage/components/Profile.tsx +++ b/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" /> )} - + {user.user?.profileImage && ( + + )} ); }; @@ -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 index 35be9dd..ada6531 100644 --- 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(userKeys.all, getUser, { + const { + data: user, + isLoading, + refetch + } = useQuery(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 index b60bbf2..fd73517 100644 --- 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 ( - router.push(`/friend/${friend.id}`)}> - - + router.push(`/friend/${friend.id}`)} + > + + {friend.name} @{friend.nickname} @@ -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 index 1f15a55..243a983 100644 --- 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 index f5d37a4..c2a35ea 100644 --- 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 ( - + {isMe ? ( + + ) : ( + + )} {"@" + user.nickname} {!isMe && ( diff --git a/src/pages-edit/question/Friend.tsx b/src/pages-edit/question/Friend.tsx index bbc261e..2fe53e9 100644 --- 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} > - - - - - - - + + + {data?.name} - - {data?.nickname} - + ); @@ -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; `;