Merge pull request #186 from pkiop/Fix/smallBugFix

잠 카테고리는 RecodeList의 뒤로 가도록 수정 / Error message 지워지지 않는 버그 수정

frontend/src/components/UI/organisms/Board/index.tsx

@@ -16,12 +16,13 @@ function Board({ goalTime, recodeList, className }: Props) {
  const calValue = calNowTime(recode.startTime, endTime);
  return acc + calValue.hour + calValue.min / 60;
  }, 0).toFixed(1);
+ const leftTime = goalTime - Number(nowTime);
  return (
  <S.Board className={className}>
  <S.Content>게시판</S.Content>
  <S.Content>목표 : {goalTime}시간</S.Content>
  <S.Content>{nowTime} / {goalTime}시간</S.Content>
- <S.Content>{(goalTime - Number(nowTime)).toFixed(1)}시간 남음</S.Content>
+ <S.Content>{(leftTime > 0 ? `${leftTime.toFixed(1)}시간 남음` : '목표 달성!')}</S.Content>
  </S.Board>
  );
 }

frontend/src/components/UI/organisms/RecodeInput/index.tsx

@@ -4,6 +4,7 @@ import { gql, useMutation, useQuery } from '@apollo/client';
 import { createTimeRecode, updateTimeRecode, deleteTimeRecode } from 'graphql/mutations';
 import { getTimeRecode } from 'graphql/queries';
 import { IRecode } from 'components/UI/molecules/Recode';
+import { isHour, isMin } from 'libs/time';
 import * as S from './style';
 
 export interface Props {
@@ -15,15 +16,32 @@ export interface Props {
  className?: string;
 }
 
-function isInputError(title: string, startHour:string, startMin: string, selectedCategory: string) {
+function isInputError(
+ title: string,
+ startHour:string, startMin: string,
+ endHour: string | null, endMin: string | null,
+ selectedCategory: string,
+) {
  if (title === '') {
  return 'title을 입력하세요';
  }
- if (startHour === '') {
- return 'startHour을 입력하세요';
+ if (startHour === '' || !isHour(Number(startHour))) {
+ return 'startHour을 제대로 입력하세요';
  }
- if (startMin === '') {
- return 'startMin을 입력하세요';
+ if (startMin === '' || !isMin(Number(startMin))) {
+ return 'startMin을 제대로 입력하세요';
+ }
+ if (endHour !== null && endHour !== '' && (endMin === null || endMin === '')) {
+ return 'endMin을 입력하세요';
+ }
+ if (endMin !== null && endMin !== '' && (endHour === null || endHour === '')) {
+ return 'endHour을 입력하세요';
+ }
+ if (!isHour(Number(endHour))) {
+ return 'endHour을 제대로 입력하세요';
+ }
+ if (!isMin(Number(endMin))) {
+ return 'endMin을 제대로 입력하세요';
  }
  if (selectedCategory === '') {
  return '카테고리를 입력하세요';
@@ -74,11 +92,13 @@ function RecodeInput({
  const endMin = endMinRef?.current?.value;
  const endTime = {
  hour: endHour ? Number(endHour) : null,
- min: endHour ? Number(endMin) : null,
+ min: endMin ? Number(endMin) : null,
  };
  const bActive = switchButtonRef?.current?.classList.contains('active');
 
- const inputErrorMsg = isInputError(title!, startHour!, startMin!, selectedCategory);
+ const inputErrorMsg = isInputError(
+ title!, startHour!, startMin!, endHour!, endMin!, selectedCategory,
+ );
  if (inputErrorMsg) {
  setErrorMsg(inputErrorMsg);
  return;
@@ -162,7 +182,7 @@ function RecodeInput({
  }
 
  setSelectedCategory(category);
-
+ setErrorMsg('');
  categorySelectBar = (
  <S.CategorySelectBar
  labelList={labelList}
@@ -194,6 +214,7 @@ function RecodeInput({
  endMinRef.current.value = '';
  }
  setSelectedCategory('');
+ setErrorMsg('');
  if (switchButtonRef?.current?.classList.contains('active') === false) {
  switchButtonRef?.current?.classList.add('active');
  }

frontend/src/components/UI/organisms/RecodeList/index.tsx

@@ -42,6 +42,16 @@ const sortByStartTime = (recode1:ITimeRecode, recode2: ITimeRecode) => {
  return startTimeDiff;
 };
 
+const sortSleepLocateTail = (recode1: ITimeRecode, recode2: ITimeRecode) => {
+ if (recode1.category === '잠' && recode2.category !== '잠') {
+ return 1;
+ }
+ if (recode2.category === '잠' && recode1.category !== '잠') {
+ return -1;
+ }
+ return 0;
+};
+
 function RecodeList({
  timeRecodes, loading, error, setUpdateRecodeId, toggleRecodeInput, className,
 }:Props) {
@@ -60,20 +70,24 @@ function RecodeList({
  }
 
  if (timeRecodes === null) return (<></>);
- const res = timeRecodes.slice().sort(sortByStartTime).map((recode: ITimeRecode) => (
- <Recode
- key={recode.title
+ const res = timeRecodes
+ .slice()
+ .sort(sortByStartTime)
+ .sort(sortSleepLocateTail)
+ .map((recode: ITimeRecode) => (
+ <Recode
+ key={recode.title
  + recode.startTime.hour
  + recode.startTime.min
  + recode.endTime.hour
  + recode.endTime.min}
- title={recode.title}
- startTime={recode.startTime}
- endTime={recode.endTime.hour ? recode.endTime : undefined}
- category={recode.category}
- onClick={recodeOnClick(recode.id)}
- isActive={recode.isActive} />
- ));
+  title={recode.title}
+  startTime={recode.startTime}
+  endTime={recode.endTime.hour ? recode.endTime : undefined}
+  category={recode.category}
+  onClick={recodeOnClick(recode.id)}
+  isActive={recode.isActive} />
+  ));
  return (
  <S.RecodeList className={className}>
  {res}

frontend/src/libs/time.ts

@@ -12,6 +12,9 @@ export const nowHourMin = () => {
  return { hour: nowTime.getHours(), min: nowTime.getMinutes() };
 };
 
+export const isHour = (hour: number) => hour >= 0 && hour <= 23;
+export const isMin = (min: number) => min >= 0 && min <= 59;
+
 export const calNowTime = (startTime: IHmTime, endTime: IHmTime) => {
  const { hour: startHour, min: startMin } = startTime;
  const { hour: endHour, min: endMin } = endTime;