[박상우] 필수기능 구현 및 REFACTOR

[coolfin]

구현

• redux 활용 할 일 CRUD
  • 할 일 추가 및 수정은 Modal을 활용하여 구현
  • Delete의 경우 Confirm을 통해 실수로 삭제하는 일 방지
• 마우스 hover 시 해당 컨테이너 기준 좌우측으로 MOVE 처리
• vercel 배포 링크
• uuid 활용 MOVE 로직 수정
• 코드 REFACTOR
• localStorage 저장
• Ticket 생성 시 색상 지정
• 다크/라이트모드 설정

[moong23]

코드 퀄이 높네요...주니어 아니신것같다는 소신발언 드립니다.
과제하시느라 고생많으셨습니다!! 👍

[moong23]

처음에 mode값이 초기화가 안되어있어서 먼저 이미지 import가 안되는 것 같아요! return을 mode로 감싸주거나, mode의 초기값이 있다면 useState안에서 초기화를 먼저 해주는것도 좋은 방법일 것 같습니다

[coolfin]

아 제 로컬에서는 이미 localStorage값이 있어서 해당 에러는 확인하지 못했네요 리뷰 감사합니다!

[moong23]

Todo status에서 done으로 바로 옮기거나 , 그 반대의 경우도 있을 수 있을것같습니다!

[moong23]

모든 assets파일을 public폴더 안에 넣어놓으면 좋지 않은 이유에 대해 잘 정리된 사이트가 있습니다! 참고후 다음 작업때 반영해주세요!

https://velog.io/@daeun/React-public%ED%8F%B4%EB%8D%94-src%ED%8F%B4%EB%8D%94-%EC%96%B4%EB%94%94%EC%97%90-%EB%84%A3%EC%96%B4%EC%95%BC-%EB%90%98%EB%8A%94%EA%B1%B8%EA%B9%8C

[coolfin]

마지막에 해당 부분 수정하면서 레퍼런스를 찾고 있었는데 감사합니다! 읽어보겠습니다 :)

[moong23]

state의 key를 props로 받고 한번에 합친다면
reducer/done.js와 나머지 파일들을 합쳐서 사용할 수 도 있을 것 같습니다!

[moong23]

Suggested change

	const progressReducer = (state = {progress: []}, action) => {
	switch (action.type) {
	case 'ADD_PROGRESS':
	return {
	...state,
	progress: state.progress.concat({ ...action.data })
	}
	case 'DELETE_PROGRESS':
	return {
	...state,
	progress: state.progress.filter(progress => progress.id !== action.id)
	}
	case 'UPDATE_PROGRESS':
	return {
	...state,
	progress: state.progress.map(progress => progress.id === action.id ? { ...progress, ...action.data } : progress)
	}
	default:
	return state;
	}
	}
	export default progressReducer;
	const initialState = {
	done: [],
	todos: [],
	progress: []
	};
	const combinedReducer = (state = initialState, action) => {
	// Extract the action prefix (ADD, DELETE, UPDATE) and type (DONE, TODO, PROGRESS)
	const matches = /([A-Z]+)_(DONE|TODO|PROGRESS)/.exec(action.type);
	// If the action type doesn't match the expected pattern, return the current state
	if (!matches) return state;
	const [, actionPrefix, actionType] = matches;
	const section = actionType.toLowerCase(); // Convert DONE, TODO, PROGRESS to done, todos, progress
	switch (actionPrefix) {
	case 'ADD':
	return {
	...state,
	[section]: state[section].concat({ ...action.data })
	};
	case 'DELETE':
	return {
	...state,
	[section]: state[section].filter(item => item.id !== action.id)
	};
	case 'UPDATE':
	return {
	...state,
	[section]: state[section].map(item => item.id === action.id ? { ...item, ...action.data } : item)
	};
	default:
	return state;
	}
	};
	export default combinedReducer;

[coolfin]

정규식으로 해결할 수 있다는건 아예 생각해보지 못했네요 😯