Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

REV-396/생성한 리뷰 관리 디자인 수정 #113

Merged
merged 11 commits into from
Dec 4, 2023
1 change: 0 additions & 1 deletion src/assets/icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
3 changes: 0 additions & 3 deletions src/assets/icons/text.svg

This file was deleted.

10 changes: 5 additions & 5 deletions src/components/UserList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,24 @@ const RenderHexaStat = ({
return (
<>
<div>
<h2 className="mb-[0.81rem] flex h-[1.375rem] w-[3rem] items-center justify-center bg-gray-300 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="flex">
<div className="grid grid-cols-3 gap-4 md:gap-6">
{filteredAnswers.map((value) => (
<div className="flex w-3/6 flex-wrap gap-[0.31rem]" key={nanoid()}>
<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 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 md:text-lg">{value?.userName}</p>
</div>
<p className="shrink-0 text-sm text-sub-wine md:text-lg">
{value?.value}
</p>
</div>
))}
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand All @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
39 changes: 20 additions & 19 deletions src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
Expand Down Expand Up @@ -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':
Expand Down Expand Up @@ -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' &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 ">
Expand All @@ -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 ">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
useSaveFinalResult,
} from '@/apis/hooks'
import { CloseDropDownIcon } from '@/assets/icons'
import { scrollToTop } from '@/utils'
import { ProfileGroup, AnswerGroup } from '..'
import { getAnswer } from '../../utils'

Expand Down Expand Up @@ -103,43 +104,48 @@ const ReceiverReviewDetail = ({
const responserCount = new Set(
responseByReceiver?.map((data) => data?.responser?.id.toString()),
)
useEffect(() => {
scrollToTop()
}, [])

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>
</>
Expand Down
Loading