Refactor/feed 화면 구현

src/components/AnswerContent/index.jsx

@@ -46,15 +46,12 @@ const AnswerContent = ({ answer, name, imageSource, id, onAnswerSubmit }) => {
     let response;
     try {
       setIsLoading(true);
-      // setError(null);
       response = await postAnswer(id, postBody);
       setUpdatedAnswer(response);
       onAnswerSubmit(id, response);
     } catch (err) {
-      // setError(`${response} : 답변을 등록하던 중 오류가 발생했습니다. 페이지를 새로고침합니다.`);
-      // setTimeout(() => {
-      //   window.location.reload();
-      // }, 2000);
+      // eslint-disable-next-line
+      console.error(err);
     } finally {
       setIsLoading(false);
     }
@@ -64,7 +61,7 @@ const AnswerContent = ({ answer, name, imageSource, id, onAnswerSubmit }) => {
 
   const renderAnswerHeader = () => (
     <div className='flex items-center mb-[4px]'>
-      <p className='mr-[8px] inline-block text-sm leading-[18px] md:text-lg md:leading-[24px]'>{name}</p>
+      <p className='mr-[8px] inline-block text-sm leading-[18px] md:text-lg md:leading-[24px] font-actor'>{name}</p>
       <p className='text-sm font-medium leading-[18px] text-gray-40'>{formatCreatedAt(updatedAnswer.createdAt)}</p>
     </div>
   );

src/components/CountFavorite/index.jsx

@@ -41,8 +41,8 @@ const CountFavorite = ({ like, dislike, id }) => {
         <p className={`text-sm leading-[18px] font-medium  ${clickFavorite ? 'text-blue-50' : 'text-gray-40'}`}>좋아요 {`${favoriteCount || ''}`}</p>
       </button>
       <button type='button' onClick={countingHandleUnFavorite} className='flex justify-center items-center gap-[6px]'>
-        <ThumbsDownIcon className={`${clickUnFavorite ? 'fill-red-50' : 'fill-gray-40'}`} />
-        <p className={`text-sm leading-[18px] font-medium ${clickUnFavorite ? 'text-red-50' : 'text-gray-40'} `}>싫어요 {`${unFavoriteCount || ''}`}</p>
+        <ThumbsDownIcon className={`${clickUnFavorite ? 'fill-gray-60' : 'fill-gray-40'}`} />
+        <p className={`text-sm leading-[18px] font-medium ${clickUnFavorite ? 'text-gray-60' : 'text-gray-40'} `}>싫어요 {`${unFavoriteCount || ''}`}</p>
       </button>
     </div>
   );

src/components/DeleteIdBtn/index.jsx

@@ -11,7 +11,7 @@ const DeleteIdBtn = ({ onClick, id }) => {
   };
 
   return (
-    <div className='relative w-full md:max-w-[704px] desktop:max-w-[716px] min-w-[144px] h-[25px] md:h-[35px]'>
+    <div className='relative w-full max-w-[716px] min-w-[144px] h-[25px] md:h-[35px] mx-6 mb-1.5 md:mx-8 md:mb-[9px]'>
       <button
         type='button'
         className='absolute right-0 w-[70px] min-w-[70px] h-[25px] md:w-[100px] md:h-[35px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] px-[17.5px] md:px-[24px] md:py-[5px] rounded-[200px] bg-brown-40 font-normal text-gray-10 text-[10px]/[25px] md:text-[15px]/[25px]'

src/components/Header/index.jsx

@@ -51,7 +51,7 @@ const Header = ({ imageSource, name }) => {
       <header className={`w-[calc(100vw - ${scrollBarWidth}px)] bg-white`}>
         <div className='flex justify-center relative'>
           <div className='w-screen overflow-hidden flex justify-center'>
-            <img className='min-w-[906px] md:min-w-[1200px]' src={headerImg} alt='Header_Image' />
+            <object className='min-w-[906px] md:min-w-[1200px] h-100' data={headerImg} aria-labelledby='Header_Image' type='image/svg+xml' />
           </div>
           <div className='flex flex-col items-center absolute gap-3 top-[40px] md:top-[50px]'>
             <Link to='/'>

src/components/Modals/index.jsx

@@ -32,7 +32,11 @@ const Modal = () => {
   if (!isModalOpen) return null;
   return (
     <div className='fixed inset-0 flex flex-col justify-center items-center px-6 bg-dim' onClick={clickOutsideModal} role='presentation'>
-      <form action='POST' onSubmit={postFormHandler} className=' flex flex-col w-full h-3/5 rounded-3xl p-6 bg-gray-10 shadow-3pt md:max-w-lg md:h-2/5'>
+      <form
+        action='POST'
+        onSubmit={postFormHandler}
+        className=' flex fixed flex-col w-full h-3/5 rounded-3xl p-6 bg-gray-10 left-1/2 -translate-x-1/2 shadow-3pt md:max-w-lg md:h-2/5 animate-slide-up-fade-modal'
+      >
         <label htmlFor='questionContent' className='flex flex-col flex-1'>
           <div className='flex w-full items-center gap-2'>
             <MessagesIcon className='w-[22px] h-[22px] fill-gray-60 md:w-[24px] md:h-[24px]' />

src/components/ToastPostQuestion/index.jsx

@@ -0,0 +1,6 @@
+const ToastPostQuestion = () => (
+  <div className='fixed bottom-[100px] md:bottom-[60px] left-1/2 px-5 py-3 bg-black rounded-lg text-sm/[18px] font-medium text-white -translate-x-1/2 shadow-2pt animate-slide-up-fade-delete'>
+    질문이 등록되었습니다.
+  </div>
+);
+export default ToastPostQuestion;

src/pages/Feed/index.jsx

@@ -7,6 +7,7 @@ import { AppContext } from 'components/Context';
 import Header from 'components/Header';
 import CountQuestion from 'components/CountQuestion';
 import QnAList from 'components/QnAList';
+import ToastPostQuestion from 'components/ToastPostQuestion';
 
 const getDynamicLimit = () => {
   const screenHeight = window.innerHeight;
@@ -31,6 +32,8 @@ const Feed = () => {
 
   const [listLoading, setListLoading] = useState(false);
 
+  const [isToastState, setIsToastState] = useState(false);
+
   const [offset, setOffset] = useState(0);
   const [hasMore, setHasMore] = useState(false);
 
@@ -91,6 +94,12 @@ const Feed = () => {
   // 새 질문이 추가되면 질문 리스트 맨 앞에 삽입
   useEffect(() => {
     if (postObject) {
+      setIsToastState(true);
+
+      setTimeout(() => {
+        setIsToastState(false);
+      }, 3000);
+
       setQuestionList((prev) => {
         const alreadyExists = prev.some((question) => question.id === postObject.id);
         if (alreadyExists) {
@@ -173,6 +182,7 @@ const Feed = () => {
           <span className='hidden md:block'>질문 작성하기</span>
         </button>
       </div>
+      {isToastState && <ToastPostQuestion />}
     </div>
   );
 };

tailwind.config.js

@@ -44,6 +44,7 @@ module.exports = {
       animation: {
         'slide-up-fade-urlCopy': 'slideUpFade 0.5s ease-out, fadeOut 0.5s ease-out 4.6s',
         'slide-up-fade-delete': 'slideUpFade 0.5s ease-out, fadeOut 0.5s ease-out 2.6s',
+        'slide-up-fade-modal': 'slideUpFade 0.5s ease-out',
       },
       gridTemplateColumns: {
         mobileLow: 'repeat(2, 1fr)',