diff --git a/src/components/common/DatepickerCalendar/index.tsx b/src/components/common/DatepickerCalendar/index.tsx index ae0b1f68..e0ea631c 100644 --- a/src/components/common/DatepickerCalendar/index.tsx +++ b/src/components/common/DatepickerCalendar/index.tsx @@ -14,8 +14,8 @@ import '@/styles/datepicker-custom.css'; interface Props { isChangeable: boolean; - deadLine: Date | null; - setDeadLine: React.Dispatch>; + deadLine: Date | string | null; + setDeadLine?: React.Dispatch>; } const TWO_WEEK_DAYS = 14; @@ -38,7 +38,7 @@ const DatepickerCalendar = ({ isChangeable, deadLine, setDeadLine }: Props) => { disabled={!isChangeable} ref={deadLineDatePickerRef} className='disabled:bg-grey-100 disabled:text-grey-500' - selected={deadLine} + selected={deadLine ? new Date(deadLine) : null} minDate={now} onChange={handleChangeDate} locale={ko} @@ -62,7 +62,7 @@ const DatepickerCalendar = ({ isChangeable, deadLine, setDeadLine }: Props) => { 마감 일자 - {deadLine!.toISOString().split('T')[0]} + {deadLine ? new Date(deadLine).toISOString().split('T')[0] : null} { const { data: detailData } = useGetSurveyDetail(id); - const { data: qrData } = useGetSurveyQrCode(id, { - enabled: !!detailData, - }); + // const { data: qrData } = useGetSurveyQrCode(id, { + // enabled: !!detailData, + // }); const { surveyName, averageScores, additionalQuestions, mandatoryQuestions } = detailData || {}; @@ -65,129 +73,155 @@ const ChartDetail = ({ id }: Props) => { return distributionValues.every((value) => value === 0); }; - const copyQRcode = async () => { - try { - if (!qrData?.body) return; - const imageUrl = `data:image/png;base64,${qrData.body}`; + // const copyQRcode = async () => { + // try { + // if (!qrData?.body) return; + // const imageUrl = `data:image/png;base64,${qrData.body}`; - const response = await fetch(imageUrl); - const blob = await response.blob(); + // const response = await fetch(imageUrl); + // const blob = await response.blob(); - await navigator.clipboard.write([ - new ClipboardItem({ 'image/png': blob }), - ]); + // await navigator.clipboard.write([ + // new ClipboardItem({ 'image/png': blob }), + // ]); - showToast('QRcode 복사 성공', 'success', 1000); - } catch (error) { - showToast('QRcode 복사 실패', 'warning', 1000); - } - }; + // showToast('QRcode 복사 성공', 'success', 1000); + // } catch (error) { + // showToast('QRcode 복사 실패', 'warning', 1000); + // } + // }; return (
{detailData && averageScores && mandatoryQuestions && - additionalQuestions && - qrData && ( - <> + additionalQuestions && ( + // qrData && +
+ {surveyName}
- {surveyName} -
- + +
+ -
-
-
- 월별 총 만족도 점수 분포도 +
+
+ 월별 총 만족도 점수 분포도 {mandatoryQuestions!.every(isAllDistributionZero) ? ( - 제출된 설문이 없습니다. +
+ 제출된 설문이 없습니다. +
) : ( - +
+ +
)}
-
- 만족도 평균 +
+ 만족도 평균 {!Object.values(averageScores).every((score) => score === 0) ? ( - +
+ +
) : ( - 제출된 설문이 없습니다. +
+ 제출된 설문이 없습니다. +
)}
-
-
- + + +
+
+ - + -
-
-
- 설문 조사 링크 -
+ '영양사에게 한마디', + )! + } + title='영양사에게 한마디' + /> +
+ 설문 조사 링크 +
+
qr이미지 navigate(`${ROUTES.SURVEY.TAKE}/${id}`)} /> - +
+
+
+ + QR 코드를 다운로드하거나 URL을 복사하여 +
+ 작성한 설문을 간편하게 공유하세요! + + https://www.nnplanner.com/qrqrqr +
+
+ + +
- -
-
-
- +
)}
); diff --git a/src/components/feature/Survey/Create/index.tsx b/src/components/feature/Survey/Create/index.tsx index 0c9d7ab4..96aeeb03 100644 --- a/src/components/feature/Survey/Create/index.tsx +++ b/src/components/feature/Survey/Create/index.tsx @@ -40,7 +40,7 @@ const SurveyCreate = ({ id }: { id: string }) => { const [inputs, setInputs] = useState([]); const [surveyName, setSurveyName] = useState(''); - const [deadLine, setDeadLine] = useState(twoWeeksLater); + const [deadLine, setDeadLine] = useState(twoWeeksLater); const showToast = useToastStore((state) => state.showToast); const requestData = { diff --git a/src/components/feature/Survey/Edit/index.tsx b/src/components/feature/Survey/Edit/index.tsx index 3210f62f..746098e1 100644 --- a/src/components/feature/Survey/Edit/index.tsx +++ b/src/components/feature/Survey/Edit/index.tsx @@ -25,7 +25,7 @@ const SurveyEdit = ({ id }: Props) => { const { data: detailSurvey } = useGetSurveyDetail(id); const [editSurveyName, setEditSurveyName] = useState(''); - const [editDeadLine, setEditDeadLine] = useState(null); + const [editDeadLine, setEditDeadLine] = useState(null); const [inputs, setInputs] = useState([]); useEffect(() => { diff --git a/src/components/shared/ChartDetail/AverageGraph/index.tsx b/src/components/shared/ChartDetail/AverageGraph/index.tsx index 2f314f3a..c85c7367 100644 --- a/src/components/shared/ChartDetail/AverageGraph/index.tsx +++ b/src/components/shared/ChartDetail/AverageGraph/index.tsx @@ -30,29 +30,34 @@ const AverageGraph = ({ averageScores }: Props) => { legend: { show: true, position: 'bottom', - formatter: (seriesName: string, opts) => { - const value = opts.w.globals.series[opts.seriesIndex]; - return `${seriesName}: ${value !== undefined ? value.toFixed(0) : 0}점`; + fontSize: '14px', + height: 30, + horizontalAlign: 'center', + fontFamily: 'Pretendard', + + formatter: (seriesName: string) => { + // const value = opts.w.globals.series[opts.seriesIndex]; + return `${seriesName}`; }, }, labels: titleList, - colors: ['#FFF9B1', '#FFD1A9', '#C9F4C5', '#A7D8F0'], + colors: ['#98DAC2', '#33B988', '#008D5A', '#005637'], plotOptions: { radialBar: { offsetY: 0, startAngle: 0, endAngle: 270, hollow: { - margin: 7, - size: '20%', + margin: 8, + size: '15%', background: 'transparent', image: undefined, position: 'front', }, track: { background: '#fff', - strokeWidth: '75%', - margin: 5, + strokeWidth: '100%', + margin: 3, }, dataLabels: { name: { @@ -73,12 +78,14 @@ const AverageGraph = ({ averageScores }: Props) => { barLabels: { enabled: true, useSeriesColors: false, - offsetX: -20, + offsetX: -10, fontSize: '12px', + fontWeight: 400, + fontFamily: 'Pretendard', formatter: function (seriesName, opts) { return ( seriesName + - ': ' + + ' ' + Number(opts.w.globals.series[opts.seriesIndex]).toFixed(0) ); }, @@ -91,12 +98,12 @@ const AverageGraph = ({ averageScores }: Props) => { }; return ( -
+
item * 10 || 0)} type='radialBar' - height={330} + height='100%' width='100%' />
diff --git a/src/components/shared/ChartDetail/BarGraph/index.tsx b/src/components/shared/ChartDetail/BarGraph/index.tsx index 820ff0bd..6f9be6fd 100644 --- a/src/components/shared/ChartDetail/BarGraph/index.tsx +++ b/src/components/shared/ChartDetail/BarGraph/index.tsx @@ -90,12 +90,12 @@ const BarGraph = ({ data }: SatisfactionDistribution) => { }); return ( -
+
diff --git a/src/components/shared/ChartDetail/TextList/index.tsx b/src/components/shared/ChartDetail/TextList/index.tsx index 5df8c74e..2c1dca2f 100644 --- a/src/components/shared/ChartDetail/TextList/index.tsx +++ b/src/components/shared/ChartDetail/TextList/index.tsx @@ -1,7 +1,7 @@ import { cn } from '@/utils/core'; import { + Body2Assistive, Body2Black, - HeadPrimary, SubTitle1Black, } from '@/components/common/Typography'; @@ -16,8 +16,8 @@ const TextList = ({ list, title, type }: Props) => { {title}
    {list.length !== 0 && @@ -27,7 +27,9 @@ const TextList = ({ list, title, type }: Props) => { ))} {list.length === 0 && ( - 제출된 설문이 없습니다. +
    + 제출된 설문이 없습니다. +
    )}
diff --git a/src/components/shared/ChartDetail/TopCard/index.tsx b/src/components/shared/ChartDetail/TopCard/index.tsx index 37dc2033..c534b941 100644 --- a/src/components/shared/ChartDetail/TopCard/index.tsx +++ b/src/components/shared/ChartDetail/TopCard/index.tsx @@ -1,34 +1,44 @@ -import { CardTitle, HeadPrimary } from '@/components/common/Typography'; +import Badge from '@/components/common/Badge'; +import { + Body2Assistive, + Body2Black, + SubTitle1Black, +} from '@/components/common/Typography'; interface Props { title: string; top3Data: string[] | null; + type: 'like' | 'unlike'; } -const TopCard = ({ top3Data, title }: Props) => { +const TopCard = ({ top3Data, title, type }: Props) => { return ( -
- {title} -
-
- {top3Data && - top3Data - .map((menu) => ( -
-

{menu}

+
+ {title} +
+ {top3Data && + top3Data + .map((menu, idx) => ( +
+ +
+ 02/20 + {menu}
- )) - // TODO: top3식단 3개만 받을 수 있게끔 api 수정후 삭제 예정 - .slice(0, 3)} - {top3Data && top3Data.length === 0 && ( -
- 제출된 설문이 없습니다. -
- )} -
+
+ )) + // TODO: top3식단 3개만 받을 수 있게끔 api 수정후 삭제 예정 + .slice(0, 3)} + {top3Data && top3Data.length === 0 && ( +
+ 제출된 설문이 없습니다. +
+ )}
); diff --git a/src/components/shared/Meal/MealCreate/index.tsx b/src/components/shared/Meal/MealCreate/index.tsx index 647c0df1..dba637cb 100644 --- a/src/components/shared/Meal/MealCreate/index.tsx +++ b/src/components/shared/Meal/MealCreate/index.tsx @@ -74,12 +74,13 @@ const MealCreate = ({ date, handleSaveMenu }: MealCreateProps) => { resetPagination(); }; + // 빌드에러로 인해 주석처리합니다 (승현) // 검색창에 keyword 입력 후 검색 버튼 눌렀을 때 - const handleSearchClick = () => { - if (keyword.length < 0) return; - resetPagination(); - refetch(); - }; + // const handleSearchClick = () => { + // if (keyword.length < 0) return; + // resetPagination(); + // refetch(); + // }; // 메뉴 삭제 const handleDeleteMenu = () => { @@ -279,8 +280,9 @@ const MealCreate = ({ date, handleSaveMenu }: MealCreateProps) => { ref={searchContainerRef} keyword={keyword} searchResultList={searchResultList} - onChange={(e) => setKeyword(e.target.value)} - onSubmit={handleSearchClick} + // 빌드에러로 인해 주석처리합니다 (승현) + // onChange={(e) => setKeyword(e.target.value)} + // onSubmit={handleSearchClick} onClickNewMenu={handleClickNewMenu} isError={isError} isLoading={isLoading} diff --git a/src/components/shared/Survey/Controls/index.tsx b/src/components/shared/Survey/Controls/index.tsx index 385d835a..5ab99f4b 100644 --- a/src/components/shared/Survey/Controls/index.tsx +++ b/src/components/shared/Survey/Controls/index.tsx @@ -12,8 +12,8 @@ interface Props { surveyName: string; setEditSurveyName?: React.Dispatch>; setSurveyName?: React.Dispatch>; - deadLine: Date | null; - setDeadLine: React.Dispatch>; + deadLine: Date | null | string; + setDeadLine: React.Dispatch>; accessBtnText: string; accessHandler: () => void; } diff --git a/src/type/survey/surveyRequest.ts b/src/type/survey/surveyRequest.ts index 867acfaf..83a00ed1 100644 --- a/src/type/survey/surveyRequest.ts +++ b/src/type/survey/surveyRequest.ts @@ -3,7 +3,7 @@ import { inputsType } from '@/components/feature/Survey/Create'; export interface PostSurveyRequest { mmId: string; surveyName: string; - deadlineAt: Date | null; + deadlineAt: Date | null | string; additionalQuestions: inputsType[]; } @@ -19,7 +19,7 @@ export interface GetSearchSurveyRequest { export interface PutSurveyRequest { surveyName: string; - deadlineAt: Date | null; + deadlineAt: Date | null | string; state?: string; questions: { questionId: number;