style: 스타일 긴급 수정 (#96)

* style: 아이콘 스타일 수정 * style: 수정, 이미지 아이콘 svg 수정 * feat: 프로필 클릭해도 이미지 변경 가능 처리 * style: 헤더 프로필 스타일 수정 * style: 버튼 커서 포인터 * style: 생성 리뷰 관리 페이지 스타일 수정 * style: 욥션 배경색 수정 * style: 읽지 않음 처리 * refactor: alert 아이콘 이름 변경 * feat: 리뷰 리스트 비어있을 때 처리
prgrms-web-devcourse · Nov 29, 2023 · 9fad688 · 9fad688
1 parent fcdcaa2
commit 9fad688
Show file tree

Hide file tree

Showing 23 changed files with 128 additions and 93 deletions.
diff --git a/src/assets/icons/no_result_alert.svg → src/assets/icons/alert.svg b/src/assets/icons/no_result_alert.svg → src/assets/icons/alert.svg
diff --git a/src/assets/icons/edit.svg b/src/assets/icons/edit.svg
diff --git a/src/assets/icons/image.svg b/src/assets/icons/image.svg
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -22,7 +22,7 @@ export { default as LogoShortIcon } from './logo-short.svg?react'
 export { default as ReviewAlignIcon } from './review-align.svg?react'
 export { default as EditIcon } from './edit.svg?react'
 export { default as LeftSignXIcon } from './left-sign-x.svg?react'
-export { default as NoSearchResultIcon } from './no_result_alert.svg?react'
+export { default as AlertIcon } from './alert.svg?react'
 export { default as MultipleCheckIcon } from './multiple-check.svg?react'
 export { default as DropdownIcon } from './dropdown.svg?react'
 export { default as HexagonIcon } from './hexagon.svg?react'

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -63,11 +63,11 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
         </div>
         <div className="flex items-center gap-x-3 md:gap-x-5">
           <div
-            className="flex cursor-pointer items-center justify-center md:h-8 md:w-8"
+            className="flex h-6 w-6 cursor-pointer items-center justify-center md:h-8 md:w-8"
             onClick={toggle}
           >
             {darkMode ? (
-              <MoonIcon className="animate h-full w-full" />
+              <MoonIcon className="h-full w-full" />
             ) : (
               <SunIcon className="h-full w-full" />
             )}
@@ -77,7 +77,7 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
               <Dropdown>
                 <Dropdown.Toggle className="avatar avatar-sm flex cursor-pointer items-center justify-center overflow-hidden border border-gray-200 bg-white md:avatar-md dark:bg-black">
                   {user?.path ? (
-                    <div className="flex h-7 w-7 p-0.5 md:h-9 md:w-9">
+                    <div className="flex h-7 w-7 md:h-9 md:w-9">
                       <img src={user.path} alt="my" />
                     </div>
                   ) : (

diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
@@ -59,17 +59,15 @@ const UserList = ({
               >
                 <div
                   onClick={() => handleClick(user.id, user.name)}
-                  className="flex items-center justify-between px-3 py-2 text-sm md:text-lg"
+                  className="flex items-center justify-between px-2 py-2 text-sm md:text-lg"
                 >
                   <div className="flex items-center gap-2">
                     {responserCount &&
                       responserCount[index] &&
                       questionType !== 'PROCEEDING' && (
                         <span
-                          className={`dot ${
-                            hasSavedResult(user.id)
-                              ? 'bg-blue-600'
-                              : 'bg-red-600'
+                          className={`h-1.5 w-1.5 rounded-full ${
+                            hasSavedResult(user.id) ? '' : 'bg-red-600'
                           }`}
                         ></span>
                       )}

diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderRefinedSubjective.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderRefinedSubjective.tsx
@@ -12,20 +12,22 @@ const RenderRefinedSubjective = ({ text }: RenderRefinedSubjectiveProps) => {
   const { handleChangePrompt, handleRefine } = handlers
 
   return (
-    <div className="relative flex w-full flex-col bg-transparent p-2.5">
+    <div className="relative mt-8 flex w-full flex-col bg-transparent">
       {isLoading && (
         <div className="spinner-dot-pulse absolute right-6 top-6 [--spinner-color:var(--blue-9)]">
           <div className="spinner-pulse-dot"></div>
         </div>
       )}
 
+      <h1 className="mb-2 text-base md:text-lg">⭐ 전송될 취합 답변: </h1>
+
       <ReactTextareaAutosize
         onChange={handleChangePrompt}
         className="m-0 w-full shrink-0 resize-none rounded-none border border-gray-200 bg-transparent p-5 text-sm dark:text-white"
         value={result ? result : prompt}
       ></ReactTextareaAutosize>
 
-      <div className="ml-2.5 flex gap-2 p-2.5">
+      <div className="flex gap-2">
         <IconButton
           className="mt-2.5 h-7 gap-1 rounded-md border border-gray-200 bg-gray-400 text-sm text-black"
           text="정제"

diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx
@@ -1,7 +1,7 @@
 import { nanoid } from 'nanoid'
 import { useState } from 'react'
 import { StarRatingList } from '@/components'
-import { CloseDropDownIcon, BasicProfileIcon } from '@/assets/icons'
+import { BasicProfileIcon } from '@/assets/icons'
 import { QUESTION_TYPE } from '../../constants'
 import RenderRefinedSubjective from './RenderRefinedSubjective'
 
@@ -32,9 +32,9 @@ const renderStarRating = (value: Answer) => (
       <BasicProfileIcon 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] text-base leading-5 md:mt-[0.62rem]">
+    <div className="ml-[42.96px] mt-[0.5rem] text-base leading-5 md:mt-[0.62rem]">
       <StarRatingList rate={Number(value.value)} fixed={true} />
-    </p>
+    </div>
   </div>
 )
 
@@ -81,10 +81,10 @@ const renderResponseByQuestion = (
   role?: 'responser' | 'receiver',
 ) => (
   <article
-    className="m-t-[1.25rem] accordion-content w-full text-black dark:text-white"
+    className="accordion-content w-full border-x border-gray-200 text-black dark:text-white"
     key={nanoid()}
   >
-    <div className="accordion-content ml-[0.63rem] border-none">
+    <div className="accordion-content border-none px-2.5">
       {(() => {
         switch (questionType) {
           case 'RATING':
@@ -115,25 +115,33 @@ const QuestionAnswerRenderer = ({
   const [inputId] = useState(nanoid())
 
   return (
-    <section
+    <div
       className={`${
-        role === 'responser' && 'accordion accordion-open border-b-0'
-      } border-x border-gray-200 bg-white dark:bg-main-gray`}
+        role === 'responser' ? 'accordion accordion-open' : 'accordion'
+      } bg-white dark:bg-main-gray`}
     >
-      <input type="checkbox" id={inputId} className="accordion-toggle " />
+      <input type="checkbox" id={inputId} className="accordion-toggle" />
       <label
         htmlFor={inputId}
-        className="accordion-title ml-[0.62px] flex h-[2.5rem] justify-center  border-r-[1px] border-t border-gray-200 bg-white text-lg dark:bg-black"
+        className="accordion-title flex h-10 justify-center border border-gray-200 bg-white px-2.5 text-lg dark:border-gray-400 dark:bg-main-gray"
       >
-        <div className="flex items-center justify-between">
-          <h1 className="flex h-[2.75rem] items-center pl-[0.63rem] text-lg md:text-xl">
-            {QUESTION_TYPE[questionType]}
-            <span className="ml-[0.63rem] text-lg md:text-xl">
-              {questionTitle}
-            </span>
-          </h1>
-          <CloseDropDownIcon className="fill-black stroke-black text-black dark:fill-white dark:stroke-white dark:text-white" />
+        <div className="flex h-11 items-center text-lg md:text-xl">
+          {QUESTION_TYPE[questionType]}
+          <span className="ml-[0.63rem] text-lg md:text-xl">
+            {questionTitle}
+          </span>
         </div>
+
+        <span className="accordion-icon absolute top-1/2 flex -translate-y-1/2 items-center justify-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path>
+          </svg>
+        </span>
       </label>
 
       {questionType !== 'HEXASTAT' &&
@@ -150,7 +158,7 @@ const QuestionAnswerRenderer = ({
           ?.map((value) =>
             renderResponseByQuestion(value, answers, questionType),
           )}
-    </section>
+    </div>
   )
 }
 

diff --git a/src/pages/CreatedReviewManagePage/components/NotFoundSearchUser/index.tsx b/src/pages/CreatedReviewManagePage/components/NotFoundSearchUser/index.tsx
@@ -1,9 +1,9 @@
-import { NoSearchResultIcon } from '@/assets/icons'
+import { AlertIcon } from '@/assets/icons'
 
 const NotFoundUser = () => {
   return (
     <div className="flex h-[9.375rem] flex-col items-center justify-center border-gray-200">
-      <NoSearchResultIcon className="fill-black dark:fill-white" />
+      <AlertIcon className="fill-black dark:fill-white" />
       <p>검색 결과가 없다!</p>
     </div>
   )

diff --git a/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx b/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx
@@ -128,8 +128,8 @@ const ReceiverReviewDetail = ({
 
   return (
     <>
-      <label htmlFor="drawer" className="overlay"></label>
-      <div className="drawer drawer-bottom m-0 flex h-5/6 w-full  flex-col items-center gap-10 overflow-auto bg-main-ivory dark:bg-main-red-100 md:h-5/6">
+      <label className="overlay" htmlFor="drawer-bottom"></label>
+      <div className="drawer drawer-bottom m-0 flex h-[90%] w-full flex-col items-center gap-10 overflow-auto bg-main-ivory dark:bg-main-red-100 md:h-5/6">
         <div className="sticky top-0 z-50 flex h-[30px] w-full shrink-0 flex-col items-center justify-center bg-main-yellow dark:bg-main-red-200 sm:h-[40px]">
           <label
             htmlFor="drawer-bottom"
@@ -138,12 +138,14 @@ const ReceiverReviewDetail = ({
             <CloseDropDownIcon className="h-[1rem] w-[1rem] cursor-pointer fill-black stroke-black text-black dark:fill-white dark:stroke-white dark:text-white md:h-[1.25rem] md:w-[1.25rem]" />
           </label>
         </div>
-        <div className="accordion-group m-0 mb-[10px] flex w-[21.875rem] max-w-[550px] flex-col gap-10 md:w-[34.375rem]">
+        <div className="mx-auto w-full max-w-[550px] self-start px-2.5">
           <ProfileGroup
             type="receiver"
             name={receiverName}
             responserSize={responserCount?.size}
           />
+        </div>
+        <div className="accordion-group m-0 mb-[10px] flex w-[21.875rem] max-w-[550px] flex-col gap-10 md:w-[34.375rem]">
           {getReviewQuestion?.questions?.map((question) => (
             <AnswerGroup
               questionType={question?.type}

diff --git a/src/pages/CreatedReviewManagePage/components/ResponserTabReviewDetail/index.tsx b/src/pages/CreatedReviewManagePage/components/ResponserTabReviewDetail/index.tsx
@@ -41,8 +41,8 @@ const ReceiverReviewDetail = ({
 
   return (
     <>
-      <label htmlFor="drawer" className="overlay"></label>
-      <div className="drawer drawer-bottom m-0 flex h-5/6 w-full  flex-col items-center gap-10 overflow-auto bg-main-ivory dark:bg-main-red-100 md:h-5/6">
+      <label className="overlay" htmlFor="drawer-bottom"></label>
+      <div className="drawer drawer-bottom m-0 flex h-[90%] w-full flex-col items-center gap-10 overflow-auto bg-main-ivory dark:bg-main-red-100 md:h-5/6">
         <div className="sticky top-0 z-50 flex h-[30px] w-full shrink-0 flex-col items-center justify-center bg-main-yellow dark:bg-main-red-200 sm:h-[40px]">
           <label
             htmlFor="drawer-bottom"

diff --git a/src/pages/CreatedReviewManagePage/components/SortDropDown/index.tsx b/src/pages/CreatedReviewManagePage/components/SortDropDown/index.tsx
@@ -18,33 +18,31 @@ const SortDropDown = ({
         <IconButton
           tabIndex={0}
           text="정렬"
-          className="
-        flex h-6 w-14 gap-0.5 rounded-none border-2 border-gray-200 bg-white p-0 text-xs dark:bg-main-gray dark:text-white"
+          className="flex h-6 w-14 gap-0.5 rounded-none border border-gray-200 bg-white p-0 text-xs dark:bg-main-gray dark:text-white"
         >
           <ReviewAlignIcon className="fill-black dark:fill-white" />
         </IconButton>
         <div
-          className="w-25 dropdown-menu dropdown-menu-bottom-left rounded-none border-2 bg-white
-        text-black dark:bg-black dark:text-white
-        "
+          className="dropdown-menu dropdown-menu-bottom-left w-28 rounded-none border bg-white
+        px-0 text-center text-black dark:bg-main-gray dark:text-white"
         >
           <a
             tabIndex={1}
-            className="dropdown-item w-full text-sm hover:bg-gray-200"
+            className="dropdown-item w-full text-sm hover:bg-main-yellow dark:hover:bg-gray-300"
             onClick={sortByName}
           >
             이름순
           </a>
           <a
             tabIndex={2}
-            className="dropdown-item w-full text-sm hover:bg-gray-200"
+            className="dropdown-item w-full text-sm hover:bg-main-yellow dark:hover:bg-gray-300"
             onClick={sortByNoResponse}
           >
             응답순
           </a>
           <a
             tabIndex={3}
-            className="dropdown-item w-full text-sm hover:bg-gray-200"
+            className="dropdown-item w-full text-sm hover:bg-main-yellow dark:hover:bg-gray-300"
             onClick={sortByResponse}
           >
             미응답순

diff --git a/src/pages/MainPage/components/EmptyReview/index.tsx b/src/pages/MainPage/components/EmptyReview/index.tsx
@@ -0,0 +1,12 @@
+import { AlertIcon } from '@/assets/icons'
+
+const EmptyReview = ({ message }: { message: string }) => {
+  return (
+    <div className="mx-auto mt-24 flex w-80 flex-col items-center justify-center gap-4">
+      <AlertIcon className="dark:fill-white md:h-8 md:w-8" />
+      <p className="text-base md:text-xl">{message}</p>
+    </div>
+  )
+}
+
+export default EmptyReview
diff --git a/src/pages/MainPage/components/InvitedReviewList/index.tsx b/src/pages/MainPage/components/InvitedReviewList/index.tsx
@@ -5,6 +5,7 @@ import { useGetInvitedReviews } from '@/apis/hooks'
 import { scrollToTop } from '@/utils'
 import { InvitedReview } from '@/types'
 import { ListSkeleton } from '..'
+import EmptyReview from '../EmptyReview'
 import InvitedReviewItem from './InvitedReviewItem'
 
 interface InvitedReviewListProps {
@@ -38,21 +39,25 @@ const InvitedReviewList = ({ handleClickReview }: InvitedReviewListProps) => {
     hasNextPage,
   })
 
-  return (
-    <>
-      <ul className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4 md:gap-10">
-        {reviews.map((review) => (
-          <InvitedReviewItem
-            handleClickReview={handleClickReview}
-            key={nanoid()}
-            {...review}
-          />
-        ))}
-        {isFetchingNextPage && <ListSkeleton />}
-        <div ref={ref}></div>
-      </ul>
-    </>
-  )
+  if (reviews.length) {
+    return (
+      <>
+        <ul className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4 md:gap-10">
+          {reviews.map((review) => (
+            <InvitedReviewItem
+              handleClickReview={handleClickReview}
+              key={nanoid()}
+              {...review}
+            />
+          ))}
+          {isFetchingNextPage && <ListSkeleton />}
+          <div ref={ref}></div>
+        </ul>
+      </>
+    )
+  }
+
+  return <EmptyReview message="초대받은 리뷰가 아직 없습니다. 😥" />
 }
 
 export default InvitedReviewList
diff --git a/src/pages/MainPage/components/ReceivedReviewList/index.tsx b/src/pages/MainPage/components/ReceivedReviewList/index.tsx
@@ -4,6 +4,7 @@ import { useInfiniteScroll } from '@/hooks'
 import { useGetReceivedReviews } from '@/apis/hooks'
 import { scrollToTop } from '@/utils'
 import { ReceivedReview } from '@/types'
+import EmptyReview from '../EmptyReview'
 import ListSkeleton from '../ListSkeleton'
 import ReceivedReviewItem from './ReceivedReviewItem'
 
@@ -31,21 +32,25 @@ const ReceivedReviewList = ({ handleClickReview }: ReceivedReviewListProps) => {
     hasNextPage,
   })
 
-  return (
-    <>
-      <ul className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4 md:gap-10">
-        {reviews.map((review) => (
-          <ReceivedReviewItem
-            handleClickReview={handleClickReview}
-            key={nanoid()}
-            {...review}
-          />
-        ))}
-        {isFetchingNextPage && <ListSkeleton />}
-        <div ref={ref}></div>
-      </ul>
-    </>
-  )
+  if (reviews.length) {
+    return (
+      <>
+        <ul className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4 md:gap-10">
+          {reviews.map((review) => (
+            <ReceivedReviewItem
+              handleClickReview={handleClickReview}
+              key={nanoid()}
+              {...review}
+            />
+          ))}
+          {isFetchingNextPage && <ListSkeleton />}
+          <div ref={ref}></div>
+        </ul>
+      </>
+    )
+  }
+
+  return <EmptyReview message="받은 리뷰 결과가 아직 없습니다. 😥" />
 }
 
 export default ReceivedReviewList