Merge branch 'develop' of https://github.com/prgrms-web-devcourse/Tea…

…m-12-ReviewRanger-FE into develop

src/assets/icons/index.ts

@@ -1,6 +1,5 @@
 export { default as CloseInTheCircleIcon } from './close-in-the-circle.svg?react'
 export { default as MenuIcon } from './menu.svg?react'
-export { default as BasicProfileIcon } from './basic-profile.svg?react'
 export { default as EyeOffIcon } from './eye-off.svg?react'
 export { default as EyeOnIcon } from './eye-on.svg?react'
 export { default as StarIcon } from './star.svg?react'

src/assets/images/index.ts

@@ -6,3 +6,4 @@ export { default as errorLightImg } from './error-white.png'
 export { default as sansDark } from './sans-dark.png'
 export { default as sansLight } from './sans-light.png'
 export { default as rangerCleanHead } from './clean-head.png'
+export { default as BasicProfile } from './basic-profile.png'

src/components/Header/index.tsx

@@ -6,11 +6,10 @@ import {
   LogoRowIcon,
   LogoShortIcon,
   ArrowLeftIcon,
-  BasicProfileIcon,
   SunIcon,
   MoonIcon,
 } from '@/assets/icons'
-import { rangerCleanHead } from '@/assets/images'
+import { rangerCleanHead, BasicProfile } from '@/assets/images'
 import { Modal } from '..'
 import Dropdown from '../Dropdown'
 
@@ -81,7 +80,7 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
                       <img src={user.path} alt="my" />
                     </div>
                   ) : (
-                    <BasicProfileIcon className="h-7 w-7 md:h-9 md:w-9" />
+                    <img src={BasicProfile} className="h-7 w-7 md:h-9 md:w-9" />
                   )}
                 </Dropdown.Toggle>
                 <Dropdown.Menu className="w-40 rounded-sm">

src/components/Profile/index.tsx

@@ -1,18 +1,12 @@
-import { BasicProfileIcon } from '@/assets/icons'
+import { BasicProfile } from '@/assets/images'
 
 interface ProfileProps {
   image?: string | JSX.Element
   name: string
   className?: string
 }
 
-const Profile = ({
-  image = (
-    <BasicProfileIcon className="visible h-4 w-4 bg-white dark:bg-black" />
-  ),
-  name,
-  className,
-}: ProfileProps) => {
+const Profile = ({ image = BasicProfile, name, className }: ProfileProps) => {
   return (
     <div className="flex flex-row items-center gap-2">
       <div className="flex h-5 w-5 items-center justify-center overflow-hidden rounded-full border">

src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx

@@ -1,7 +1,7 @@
 import { nanoid } from 'nanoid'
 import { useState } from 'react'
 import { StarRatingList } from '@/components'
-import { BasicProfileIcon } from '@/assets/icons'
+import { BasicProfile } from '@/assets/images'
 import { QUESTION_TYPE } from '../../constants'
 import RenderRefinedSubjective from './RenderRefinedSubjective'
 
@@ -29,7 +29,10 @@ interface Answer {
 const renderStarRating = (value: Answer) => (
   <div>
     <h3 className="flex items-center">
-      <BasicProfileIcon className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white" />
+      <img
+        src={BasicProfile}
+        className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
+      />
       <p className="ml-[1.31rem] text-sm">{value.userName}</p>
     </h3>
     <div className="ml-[42.96px] mt-[0.5rem] text-base leading-5 md:mt-[0.62rem]">
@@ -51,7 +54,10 @@ const renderHexaStat = (value: Answer, answers: Answer[]) => {
       <div className="flex">
         {filteredAnswers.map((value) => (
           <div className="flex w-3/6 flex-wrap gap-[0.31rem]" key={nanoid()}>
-            <BasicProfileIcon className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white" />
+            <img
+              src={BasicProfile}
+              className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
+            />
             <p className="text-sm">{value?.userName}</p>
             <p className="text-sm text-sub-wine">{value?.value}</p>
           </div>
@@ -64,7 +70,10 @@ const renderHexaStat = (value: Answer, answers: Answer[]) => {
 const renderDefault = (value: Answer) => (
   <>
     <h3 className="flex items-center ">
-      <BasicProfileIcon className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white" />
+      <img
+        src={BasicProfile}
+        className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
+      />
       <p className="ml-[1.31rem] text-sm">{value?.userName}</p>
     </h3>
     <p className="ml-[42.96px] mt-[0.5rem] break-all  text-base leading-5 md:mt-[0.62rem]">

src/pages/CreatedReviewManagePage/components/ProfileGroup/index.tsx

@@ -1,4 +1,4 @@
-import { BasicProfileIcon } from '@/assets/icons'
+import { BasicProfile } from '@/assets/images'
 
 interface ProfileGroupProps {
   name: string
@@ -9,7 +9,10 @@ interface ProfileGroupProps {
 const ProfileGroup = ({ name, responserSize, type }: ProfileGroupProps) => {
   return (
     <div className="flex">
-      <BasicProfileIcon className="avatar h-[2.8125rem] w-[2.8125rem] border dark:bg-white dark:fill-white md:h-[3.5rem] md:w-[3.5rem]" />
+      <img
+        src={BasicProfile}
+        className="avatar h-[2.8125rem] w-[2.8125rem] border dark:bg-white dark:fill-white md:h-[3.5rem] md:w-[3.5rem]"
+      />
 
       <div className="ml-[0.63rem] flex flex-col md:ml-[1.44rem]">
         {type === 'receiver' ? (

src/pages/CreatedReviewManagePage/components/SelectResponseUser/index.tsx

@@ -22,7 +22,7 @@ const SelectResponseUser = ({
           className={`flex h-fit shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md border px-2 py-1.5 
           ${
             name === selectedName
-              ? 'border-black border-sub-green bg-main-yellow dark:border-white dark:bg-main-red-300'
+              ? 'border-black bg-main-yellow dark:border-white dark:bg-main-red-300'
               : 'border-gray-100 bg-white dark:border-gray-300 dark:bg-main-red-200'
           }`}
         >

src/pages/MyPage/index.tsx

@@ -2,12 +2,8 @@ import { ChangeEvent, useRef } from 'react'
 import { useNameCheck, usePasswordCheck, useToast } from '@/hooks'
 import { Header, Input, Modal } from '@/components'
 import { useEditImage, useUser } from '@/apis/hooks'
-import {
-  BasicProfileIcon,
-  CheckIcon,
-  EditIcon,
-  ImageIcon,
-} from '@/assets/icons'
+import { CheckIcon, EditIcon, ImageIcon } from '@/assets/icons'
+import { BasicProfile } from '@/assets/images'
 import { useEditNameCheck, useEditPasswordCheck } from './hooks'
 
 const MyPage = () => {
@@ -99,7 +95,7 @@ const MyPage = () => {
                 className="h-full w-full"
               />
             ) : (
-              <BasicProfileIcon className="h-20 w-20" />
+              <img src={BasicProfile} className="h-20 w-20" />
             )}
           </div>
           <div className="absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border bg-white dark:bg-main-red-200">

src/pages/ReviewReplyPage/components/ReviewReplyStart/ReviewSelect.tsx

@@ -149,7 +149,7 @@ const ReceiverSelect = ({ setReviewStep, questions }: ReceiverSelectProps) => {
                       setName('')
                     }}
                   >
-                    <Profile name={nonReceiver.name} className="visible z-10" />
+                    <Profile name={nonReceiver.name} />
                   </Dropdown.Item>
                 ))
             ) : (