Loading...
;
+ }
-function App() {
return (
-
-
- 
-
-
+
- Edit src/App.tsx and save to reload.
-
{title}
+ D-{dDay} +{contents}
+ ) : ( ++
챌린지 설명
+{text} 대시보드
+ {text === '팀' ? ( + // 팀 대시보드일 때 렌더링 +
+
+ {groupedDashboard[category].map(dashboardItem => (
+ onClick(dashboardItem.dashboardId ?? 0)}
+ >
+ {dashboardItem.title}
+
+ ))}
+
+
+ ))
+ )}
+ {category}
+휴지통
+{blockProgress}%
+
+
+ {mainTitle}
+
+ {dashboardType ? (
+
+ 
+
+ ) : (
+
+
+
+ )}
+
+
+ {subTitle}
+
+ + + ); +}; +export default Header; diff --git a/src/components/InProgressDashboard.tsx b/src/components/InProgressDashboard.tsx new file mode 100644 index 0000000..ba1f4c9 --- /dev/null +++ b/src/components/InProgressDashboard.tsx @@ -0,0 +1,92 @@ +import { useNavigate, Outlet } from 'react-router-dom'; +import Block from './Block'; +import * as S from '../styles/DashboardStyled'; +import { createPersonalBlock } from '../api/PersonalBlockApi'; +import SidePage from '../pages/SidePage'; +import { Droppable } from 'react-beautiful-dnd'; +import theme from '../styles/Theme/Theme'; +import main from '../img/main.png'; +import { BlockListResDto } from '../types/PersonalBlock'; + +type Props = { + // list: StatusPersonalBlock | undefined; + list: BlockListResDto[]; + id: string; + dashboardId: string; +}; + +const InProgressDashboard = ({ list, id, dashboardId }: Props) => { + const navigate = useNavigate(); + // const blocks = list.flatMap((item: StatusPersonalBlock) => item.blockListResDto); + // const blocks = list?.blockListResDto; + + const settings = { + backGroundColor: '#EDF3FF', + highlightColor: theme.color.main, + progress: '진행 중', + imgSrc: main, + }; + + // + 버튼 누르면 사이드 페이지로 이동 + const handleAddBtn = async () => { + // 초기 post 요청은 빈 내용으로 요청. 추후 patch로 자동 저장. + const now = new Date(); + const startDate = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')} 00:00`; + const deadLine = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')} 23:59`; + + const data = { + dashboardId: dashboardId, + title: '', + contents: '', + progress: 'IN_PROGRESS', + startDate: startDate, + deadLine: deadLine, + }; + + const blockId = await createPersonalBlock(data); + // console.log(blockId); + + const { highlightColor, progress } = settings; + navigate(`personalBlock/${blockId}`, { state: { highlightColor, progress, blockId } }); + }; + + return ( +
+
+
+ 
+
+
+
+
+
+ 대시보드 생성
+
+ 도전! 챌린지
+
+
+ {info?.data.nickName}
+ + + 마이페이지
+
+ );
+ })}
+ {provided.placeholder}
+ +
+ 복잡한 작업도 끄적끄적과 함께 해요. +
+ 팀원을 등록하고 프로젝트를 관리해요. +
전체 공개
+나만 보기
+
+ {/*
+
+
+
+
+
+
+ {/* */}
+
+ Login
+로그인하고 더 많은 하루를 계획하세요!
+ +
+ 
+ 
+
+ 1
+ Loading editor...
;
+
+ // 자동 저장
+ /*
+ ? debounce 초가 생각보다 짧은데 굳이 interval까지 쓸 필요가 있을까?
+ */
+ /*
+ const autoSaveCallback = () => {
+ console.log('시간에 맞춰 자동 저장 함수 호출~~');
+ onClick();
+ };
+ useInterval(autoSaveCallback, 1000 * 10);
+ */
+
+ // 탭 닫는 + 새로고침 이벤트 감지 (특별한 조치는 못하고, 크롬 자체에서 정말 창을 끌거냐는 경고창 보여주기 가능)
+ /*
+ useEffect(() => {
+ const handleBeforeUnload = (event: { preventDefault: () => void; returnValue: string }) => {
+ event.preventDefault();
+ event.returnValue = ''; // 필요에 따라 메시지를 반환할 수 있음
+ console.log('야호~');
+ };
+
+ window.addEventListener('beforeunload', handleBeforeUnload);
+
+ return () => {
+ window.removeEventListener('beforeunload', handleBeforeUnload);
+ };
+ }, []);
+ */
+
+ // 라우터 변경 감지 : 라우터 변경시 데이터 저장
+ useBlocker(tx => {
+ const { currentLocation, nextLocation } = tx;
+
+ if (currentLocation.pathname !== nextLocation.pathname) {
+ SubmitData();
+ return false;
+ }
+ return true;
+ });
+
+ return (
+ ~
++
Loading editor...
;
+
+ // 라우터 변경 감지 : 라우터 변경시 데이터 저장
+ useBlocker(tx => {
+ const { currentLocation, nextLocation } = tx;
+
+ if (currentLocation.pathname !== nextLocation.pathname) {
+ // SubmitData();
+ return false;
+ }
+ return true;
+ });
+
+ // * 팀 문서 삭제
+ const delTeamDocument = async () => {
+ await deleteTeamDocument(teamDocumentId);
+ navigate(`/${teamDashboardId}/teamdocument`);
+ };
+
+ const submitDelTeamDocument = () => {
+ openModal('yes', delTeamDocument);
+ };
+
+ return (
+ +