style: 생성한 리뷰 관리 디자인 수정 (#113)

* feat: 생성한 리뷰 관리 페이지 상세에서 scrolltop적용 * refactor: 질문 크기 수정 * refactor: 헥사스텟 UI 수정 * style: 중복 아이콘 제거 * style: 폰트 사이즈 더 크게 변경 * style: 아이콘 에셋 수정 * refactor: 리뷰 정보 컴포넌트로 변경 * style: hover 이벤트 임시 제거 * style: drawer 레이아웃 스타일 변경 --------- Co-authored-by: Kim0426 <706shin1728@naver.com>
prgrms-web-devcourse · Dec 4, 2023 · b2a7794 · b2a7794
1 parent f866f3c
commit b2a7794
Show file tree

Hide file tree

Showing 18 changed files with 124 additions and 130 deletions.
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -12,7 +12,6 @@ export { default as CloseIcon } from './close.svg?react'
 export { default as ArrowBelowIcon } from './arrow-below.svg?react'
 export { default as RegistrationIcon } from './registration.svg?react'
 export { default as FilterIcon } from './filter.svg?react'
-export { default as TextIcon } from './text.svg?react'
 export { default as CheckInTheCircleIcon } from './check-in-the-circle.svg?react'
 export { default as PlusIcon } from './plus.svg?react'
 export { default as LogoColIcon } from './logo-col.svg?react'

diff --git a/src/assets/icons/text.svg b/src/assets/icons/text.svg
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
@@ -67,18 +67,18 @@ const UserList = ({
                       questionType !== 'PROCEEDING' && (
                         <span
                           className={`h-1.5 w-1.5 rounded-full ${
-                            hasSavedResult(user.id) ? '' : 'bg-red-600'
+                            hasSavedResult(user.id) ? 'hidden' : 'bg-red-600'
                           }`}
                         ></span>
                       )}
                     <Profile name={user.name} />
                   </div>
-                  <div className="text-xs text-gray-300 dark:text-gray-100 md:text-sm">
+                  <div className="text-xs text-gray-300 dark:text-gray-100 md:text-base">
                     {date ? (
                       `답변일시: ${date}`
                     ) : responserCount ? (
                       <span>
-                        응답자:{responserCount && responserCount[index]}명
+                        응답자: {responserCount && responserCount[index]}명
                       </span>
                     ) : (
                       <p className="text-sub-red-200 dark:text-sub-yellow">
@@ -105,12 +105,12 @@ const UserList = ({
                     )}
                   <Profile name={user.name} />
                 </div>
-                <div className="text-xs text-gray-300 dark:text-gray-100 md:text-sm">
+                <div className="text-xs text-gray-300 dark:text-gray-100 md:text-base">
                   {date ? (
                     `답변일시: ${date}`
                   ) : responserCount ? (
                     <span>
-                      응답자:{responserCount && responserCount[index]}명
+                      응답자: {responserCount && responserCount[index]}명
                     </span>
                   ) : (
                     <p className="text-sub-red-200 dark:text-sub-yellow">

diff --git a/src/pages/CreatedReviewManagePage/components/AllResponseByReceiver/index.tsx b/src/pages/CreatedReviewManagePage/components/AllResponseByReceiver/index.tsx
@@ -42,7 +42,7 @@ const AllResponseReviewByResponser = ({
     <div className="flex flex-col gap-5">
       <SearchBar handleChangeKeyword={handleChangeKeyword} />
       <div className="rounded-md border border-gray-200 bg-main-yellow text-black dark:border-gray-100 dark:bg-main-red-200 dark:text-white md:max-h-[24rem]">
-        <header className="flex items-center whitespace-pre-wrap rounded-t-md border-b border-b-gray-100 bg-main-yellow p-3 text-xs dark:border-b-gray-200 dark:bg-main-red-200 md:text-sm">
+        <header className="flex items-center whitespace-pre-wrap rounded-t-md border-b border-b-gray-100 bg-main-yellow p-3 text-xs dark:border-b-gray-200 dark:bg-main-red-200 md:text-base">
           <span>수신자: </span>
           <span className="text-sub-blue dark:text-sub-skyblue">
             {responseByReceiver?.length || 0}

diff --git a/src/pages/CreatedReviewManagePage/components/AllResponseByResponser/index.tsx b/src/pages/CreatedReviewManagePage/components/AllResponseByResponser/index.tsx
@@ -87,7 +87,7 @@ const AllResponseReviewByResponser = ({
       <div className="rounded-md border border-gray-200 bg-main-yellow text-black dark:border-gray-100 dark:bg-main-red-200 dark:text-white md:max-h-[24rem]">
         {findUserBySearchKeyword?.length ? (
           <>
-            <header className="flex items-center whitespace-pre-wrap rounded-t-md border-b border-b-gray-100 bg-main-yellow p-3 text-xs dark:border-b-gray-200 dark:bg-main-red-200 md:text-sm">
+            <header className="flex items-center whitespace-pre-wrap rounded-t-md border-b border-b-gray-100 bg-main-yellow p-3 text-xs dark:border-b-gray-200 dark:bg-main-red-200 md:text-base">
               <span>응답완료: </span>
               <span className="text-sub-blue dark:text-sub-skyblue">
                 {

diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderHexaStat.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderHexaStat.tsx
@@ -14,20 +14,24 @@ const RenderHexaStat = ({
   return (
     <>
       <div>
-        <h2 className="mb-[0.81rem] flex h-[1.375rem] w-fit items-center justify-center bg-gray-300 p-2 text-sm text-white">
+        <h2 className="mb-4 flex h-fit w-fit items-center justify-center bg-gray-300 px-2 text-sm text-white md:text-base">
           {value?.name}
         </h2>
       </div>
-      <div className="grid grid-cols-3 gap-4">
+      <div className="grid grid-cols-3 gap-4 md:gap-6">
         {filteredAnswers.map((value) => (
-          <div className="flex gap-[0.31rem]" key={nanoid()}>
-            <img
-              src={BasicProfile}
-              className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
-            />
+          <div className="flex justify-between gap-2" key={nanoid()}>
+            <div className="flex gap-2">
+              <img
+                src={BasicProfile}
+                className="avatar h-5 w-5 border dark:bg-white dark:fill-white"
+              />
 
-            <p className="text-sm">{value?.userName}</p>
-            <p className="text-sm text-sub-wine">{value?.value}</p>
+              <p className="text-sm md:text-lg">{value?.userName}</p>
+            </div>
+            <p className="shrink-0 text-sm text-sub-wine md:text-lg">
+              {value?.value}
+            </p>
           </div>
         ))}
       </div>

diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderRefinedSubjective.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderRefinedSubjective.tsx
@@ -43,7 +43,7 @@ const RenderRefinedSubjective = ({
   return (
     <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-dot-pulse absolute right-6 top-10 [--spinner-color:var(--blue-9)]">
           <div className="spinner-pulse-dot"></div>
         </div>
       )}
@@ -52,7 +52,7 @@ const RenderRefinedSubjective = ({
 
       <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"
+        className="w-full shrink-0 resize-none rounded-none border border-gray-200 bg-transparent p-5 text-sm dark:text-white md:text-lg"
         value={result ? result : prompt}
       ></ReactTextareaAutosize>
 

diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderStarRatingAnswer.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderStarRatingAnswer.tsx
@@ -14,7 +14,7 @@ const RenderStarRatingAnswer = ({ value, userName }: StarRatingAnswerProps) => {
           src={BasicProfile}
           className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
         />
-        <p className="ml-[1.31rem] text-sm">{userName}</p>
+        <p className="ml-5 text-sm md:text-lg">{userName}</p>
       </h3>
       <div className="ml-[42.96px] mt-[0.5rem] text-base leading-5 md:mt-[0.62rem]">
         <StarRatingList rate={Number(value)} fixed={true} />

diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderSubjectiveAnswer.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderSubjectiveAnswer.tsx
@@ -26,9 +26,9 @@ const RenderSubjectiveAnswer = ({
         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>
+      <p className="ml-5 text-sm md:text-lg">{value?.userName}</p>
     </h3>
-    <p className="ml-[42.96px] mt-[0.5rem] break-all  text-base leading-5 md:mt-[0.62rem]">
+    <p className="ml-10 mt-2 text-base leading-5 md:mt-2.5 md:text-xl">
       {value?.value}
     </p>
 

diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx
@@ -34,11 +34,11 @@ const renderDefault = (value: Answer) => (
     <h3 className="flex items-center ">
       <img
         src={BasicProfile}
-        className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
+        className="avatar h-5 w-5 border dark:bg-white dark:fill-white"
       />
-      <p className="ml-[1.31rem] text-sm">{value?.userName}</p>
+      <p className="ml-5 text-sm md:text-lg">{value?.userName}</p>
     </h3>
-    <p className="ml-[42.96px] mt-[0.5rem] break-all  text-base leading-5 md:mt-[0.62rem]">
+    <p className="ml-10 mt-2 break-all text-base leading-6 md:mt-2.5 md:text-xl">
       {value?.value}
     </p>
   </>
@@ -71,7 +71,7 @@ const QuestionAnswerRenderer = memo(
           className="accordion-content w-full border-x border-gray-200 text-black dark:text-white"
           key={nanoid()}
         >
-          <div className="accordion-content border-none px-2.5">
+          <div className="accordion-content border-none px-4">
             {(() => {
               switch (questionType) {
                 case 'RATING':
@@ -115,25 +115,26 @@ const QuestionAnswerRenderer = memo(
         <input type="checkbox" id={inputId} className="accordion-toggle" />
         <label
           htmlFor={inputId}
-          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"
+          className="accordion-title flex justify-center border border-gray-200 bg-white px-2.5 py-1 text-lg dark:border-gray-400 dark:bg-main-gray md:py-2.5"
         >
-          <div className="flex h-11 items-center text-lg md:text-xl">
+          <div className="flex items-center justify-between gap-4 text-lg md:text-xl">
             {QUESTION_TYPE[questionType]}
-            <span className="ml-[0.63rem] text-lg md:text-xl">
-              {questionTitle}
+            <span className="w-full text-lg md:text-2xl">{questionTitle}</span>
+
+            <span className="accordion-icon static">
+              <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"
+                  className="dark:fill-white"
+                ></path>
+              </svg>
             </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' &&

diff --git a/src/pages/CreatedReviewManagePage/components/ProfileGroup/index.tsx b/src/pages/CreatedReviewManagePage/components/ProfileGroup/index.tsx
@@ -26,7 +26,7 @@ const ProfileGroup = ({ name, responserSize, type }: ProfileGroupProps) => {
         )}
         {type === 'receiver' ? (
           <p className="text-[0.875rem] md:text-xl">
-            <span className="inline cursor-pointer  rounded-md border-[1px] border-sub-green bg-white pb-[0.19rem] pl-[0.31rem] pr-[0.31rem] pt-[0.19rem] text-[0.75rem]  text-sub-green dark:border-sub-yellow dark:bg-main-red-200 dark:text-sub-yellow md:text-base">
+            <span className="inline rounded-md border-[1px] border-sub-green bg-white pb-[0.19rem] pl-[0.31rem] pr-[0.31rem] pt-[0.19rem] text-[0.75rem]  text-sub-green dark:border-sub-yellow dark:bg-main-red-200 dark:text-sub-yellow md:text-base">
               {responserSize}명의 피어
             </span>
             <span className="ml-[0.25rem] text-[0.75rem] md:text-base ">
@@ -35,7 +35,7 @@ const ProfileGroup = ({ name, responserSize, type }: ProfileGroupProps) => {
           </p>
         ) : (
           <p className="text-[0.875rem] md:text-xl">
-            <span className="inline cursor-pointer  rounded-md border-[1px] border-sub-green bg-white pb-[0.19rem] pl-[0.31rem] pr-[0.31rem] pt-[0.19rem] text-[0.75rem]  text-sub-green dark:border-sub-yellow dark:bg-main-red-200 dark:text-sub-yellow md:text-base">
+            <span className="inline rounded-md border-[1px] border-sub-green bg-white pb-[0.19rem] pl-[0.31rem] pr-[0.31rem] pt-[0.19rem] text-[0.75rem]  text-sub-green dark:border-sub-yellow dark:bg-main-red-200 dark:text-sub-yellow md:text-base">
               {responserSize}명의 피어
             </span>
             <span className="ml-[0.25rem] text-[0.75rem] md:text-base ">

diff --git a/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx b/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx
@@ -111,39 +111,41 @@ const ReceiverReviewDetail = ({
   return (
     <>
       <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]">
+      <div className="drawer drawer-bottom m-0 flex h-[90%] w-full flex-col items-center gap-10 overflow-auto bg-main-ivory pb-8 dark:bg-main-red-100 md:h-5/6">
+        <div className="sticky top-0 z-50 flex h-8 w-full shrink-0 flex-col items-center justify-center bg-main-yellow dark:bg-main-red-200 sm:h-10">
           <label
             htmlFor="drawer-bottom"
             className="flex w-full cursor-pointer justify-center"
           >
-            <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]" />
+            <CloseDropDownIcon className="h-4 w-4 cursor-pointer fill-black stroke-black text-black dark:fill-white dark:stroke-white dark:text-white md:h-5 md:w-5" />
           </label>
         </div>
-        <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}
-              questionTitle={question?.title}
-              questionId={question?.id}
-              key={question?.id}
-              answers={getAnswer(
-                question?.type,
-                question?.id,
-                responseByReceiver,
-              )}
-              reviewId={reviewId}
-              userId={receiverId}
-              reviewStatus={getReviewQuestion?.status}
+        <div className="flex w-full max-w-[37.5rem] flex-col items-center gap-8 px-5">
+          <div className="self-start">
+            <ProfileGroup
+              type="receiver"
+              name={receiverName}
+              responserSize={responserCount?.size}
             />
-          ))}
+          </div>
+          <div className="accordion-group m-0 mb-[10px] flex w-full flex-col gap-10">
+            {getReviewQuestion?.questions?.map((question) => (
+              <AnswerGroup
+                questionType={question?.type}
+                questionTitle={question?.title}
+                questionId={question?.id}
+                key={question?.id}
+                answers={getAnswer(
+                  question?.type,
+                  question?.id,
+                  responseByReceiver,
+                )}
+                reviewId={reviewId}
+                userId={receiverId}
+                reviewStatus={getReviewQuestion?.status}
+              />
+            ))}
+          </div>
         </div>
       </div>
     </>

diff --git a/src/pages/CreatedReviewManagePage/components/ResponserTabReviewDetail/index.tsx b/src/pages/CreatedReviewManagePage/components/ResponserTabReviewDetail/index.tsx
@@ -47,42 +47,44 @@ const ReceiverReviewDetail = ({
   return (
     <>
       <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]">
+      <div className="drawer drawer-bottom m-0 flex h-[90%] w-full flex-col items-center gap-10 overflow-auto bg-main-ivory pb-8 dark:bg-main-red-100 md:h-5/6">
+        <div className="sticky top-0 z-50 flex h-8 w-full shrink-0 flex-col items-center justify-center bg-main-yellow dark:bg-main-red-200 sm:h-10">
           <label
             htmlFor="drawer-bottom"
             className="flex w-full cursor-pointer justify-center"
           >
-            <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]" />
+            <CloseDropDownIcon className="h-4 w-4 cursor-pointer fill-black stroke-black text-black dark:fill-white dark:stroke-white dark:text-white md:h-5 md:w-5" />
           </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]">
-          <ProfileGroup
-            name={responserName}
-            type="responser"
-            responserSize={getAllReceiverName.length}
-          />
-          <SelectResponseUser
-            allUser={getAllReceiverName}
-            selectedName={selectedName}
-            setSelectedName={setSelectedName}
-          />
-          {getReviewQuestion?.questions?.map((question) => (
-            <AnswerGroup
-              role="responser"
-              questionType={question?.type}
-              questionTitle={question?.title}
-              key={question?.id}
-              answers={getAnswer(
-                question?.type,
-                question?.id,
-                getUserSelectedAnswers,
-              )}
-              questionId={question?.id}
-              userId={responserId}
-              reviewId={reviewId}
+        <div className="flex w-full max-w-[37.5rem] flex-col items-center gap-8 px-5">
+          <div className="accordion-group m-0 mb-[10px] flex w-full flex-col gap-10">
+            <ProfileGroup
+              name={responserName}
+              type="responser"
+              responserSize={getAllReceiverName.length}
             />
-          ))}
+            <SelectResponseUser
+              allUser={getAllReceiverName}
+              selectedName={selectedName}
+              setSelectedName={setSelectedName}
+            />
+            {getReviewQuestion?.questions?.map((question) => (
+              <AnswerGroup
+                role="responser"
+                questionType={question?.type}
+                questionTitle={question?.title}
+                key={question?.id}
+                answers={getAnswer(
+                  question?.type,
+                  question?.id,
+                  getUserSelectedAnswers,
+                )}
+                questionId={question?.id}
+                userId={responserId}
+                reviewId={reviewId}
+              />
+            ))}
+          </div>
         </div>
       </div>
     </>

diff --git a/src/pages/CreatedReviewManagePage/components/SortDropDown/index.tsx b/src/pages/CreatedReviewManagePage/components/SortDropDown/index.tsx
@@ -18,7 +18,7 @@ const SortDropDown = ({
         <IconButton
           tabIndex={0}
           text="정렬"
-          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"
+          className="flex h-fit gap-1 rounded-none border border-gray-200 bg-white px-2 py-0 text-xs dark:bg-main-gray dark:text-white md:text-base"
         >
           <ReviewAlignIcon className="fill-black dark:fill-white" />
         </IconButton>