diff --git a/src/components/coffeechat/detail/OpenerProfile/index.tsx b/src/components/coffeechat/detail/OpenerProfile/index.tsx index 3f92a8bb3..c0ccf59ef 100644 --- a/src/components/coffeechat/detail/OpenerProfile/index.tsx +++ b/src/components/coffeechat/detail/OpenerProfile/index.tsx @@ -2,10 +2,9 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { IconMail } from '@sopt-makers/icons'; +import { IconMail, IconUser } from '@sopt-makers/icons'; import { useDialog } from '@sopt-makers/ui'; import Link from 'next/link'; -import ProfileIcon from 'public/icons/icon-profile.svg'; import { useGetCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail'; import MessageModal from '@/components/coffeechat/CoffeeChatModal/CoffeeChatModal'; @@ -41,12 +40,14 @@ export default function OpenerProfile({ memberId }: OpenerProfileProps) { <> {openerProfile && ( - + - {openerProfile.profileImage ? ( + {openerProfile.profileImage ? ( ) : ( - + + + )} @@ -181,7 +182,23 @@ const MailIcon = styled(IconMail)` width: 20px; height: 20px; `; - +const StIconBox = styled.div` + display: flex; + align-items: center; + justify-content: center; + background-color: ${colors.gray900}; + width: 100%; + height: 100%; +`; +const StIconUser = styled(IconUser)` + margin-top: 5px; + width: 60px; + color: ${colors.gray400}; + @media ${MOBILE_MEDIA_QUERY} { + margin-top: 3.5px; + width: 46px; + } +`; // TODO: 폰 아이콘 mds에 반영되면 반영 필요 const PhoneIcon = styled(IconPhone)` width: 20px;