diff --git a/src/components/ChallengeCard.tsx b/src/components/ChallengeCard.tsx index b2018e8..5d9d424 100644 --- a/src/components/ChallengeCard.tsx +++ b/src/components/ChallengeCard.tsx @@ -27,8 +27,12 @@ const ChallengeCard = ({ challenge }: { challenge: Challenge }) => { } }, [challenge.representImage]); + const handleNavigate = () => { + navigate(`${challenge.challengeId}`, { state: { title: challenge.title } }); + }; + return ( - navigate(`${challenge.challengeId}`)}> + {imageSrc ? : } {challenge.title} diff --git a/src/pages/ChallengeCommunityPage.tsx b/src/pages/ChallengeCommunityPage.tsx index 775c84a..76ad281 100644 --- a/src/pages/ChallengeCommunityPage.tsx +++ b/src/pages/ChallengeCommunityPage.tsx @@ -10,6 +10,7 @@ import { Link } from 'react-router-dom'; import { Challenge, ChallengeCategory, ChallengeResponse } from '../types/ChallengeType'; import { getSearchChallenge } from '../api/ChallengeApi'; import { NotExistingDocument } from '../styles/TeamDocumentStyled'; +import { Helmet } from 'react-helmet-async'; const ChallengeCommunityPage = () => { const [count, setCount] = useState(1); // 총 페이지 수 @@ -64,94 +65,102 @@ const ChallengeCommunityPage = () => { }, [pageInfo.currentPage, location.pathname, selectedCategory, keyword]); // 페이지가 변경될 때와, 데이터가 변경되었을 때 (즉 라우터가 변경되었을 때) 리렌더링 return ( - - - - - - {/* */} - - 챌린지 - 다른 참여자와 함께 이뤄나가요. + <> + + 끄적끄적 | 챌린지 모아보기 + + + + + + + {/* */} + + 챌린지 + 다른 참여자와 함께 이뤄나가요. + - - - - - + + + + - - handleCategoryClick('')} isSelected={selectedCategory === ''}> - 전체 - - {Object.entries(ChallengeCategory).map(([key, value]) => ( + handleCategoryClick(key)} - isSelected={selectedCategory === key} + onClick={() => handleCategoryClick('')} + isSelected={selectedCategory === ''} > - {value} + 전체 - ))} - + {Object.entries(ChallengeCategory).map(([key, value]) => ( + handleCategoryClick(key)} + isSelected={selectedCategory === key} + > + {value} + + ))} + - - - - - - + + + + + + - - {/* 검색 */} - - + + {/* 검색 */} + + - {challenges?.length !== 0 ? ( - <> - - - {challenges?.map((challenge, index) => ( - - ))} - - + {challenges?.length !== 0 ? ( + <> + + + {challenges?.map((challenge, index) => ( + + ))} + + - - - - - ) : ( - - 해당하는 검색결과가 존재하지 않아요 - - )} - - + + + + + ) : ( + + 해당하는 검색결과가 존재하지 않아요 + + )} + + + ); }; diff --git a/src/pages/ChallengeDetailPage.tsx b/src/pages/ChallengeDetailPage.tsx index b95b1f4..4e16d62 100644 --- a/src/pages/ChallengeDetailPage.tsx +++ b/src/pages/ChallengeDetailPage.tsx @@ -18,12 +18,14 @@ import defaultImg from '../img/default.png'; import CustomModal from '../components/CustomModal'; import useModal from '../hooks/useModal'; import JoinChallengeModal from '../components/JoinChallengeModal'; +import { Helmet } from 'react-helmet-async'; const ChallengeDetailPage = () => { const navigate = useNavigate(); const location = useLocation(); const pathname = location.pathname; const challengeId = pathname.split('/').pop(); + const challengeTitle = location.state?.title; const [challengeData, setChallengeData] = useState({ representImage: undefined }); const [imageSrc, setImageSrc] = useState(undefined); @@ -112,108 +114,79 @@ const ChallengeDetailPage = () => { }; return ( - - - - - - navigate(-1)} /> {/* 뒤로가기 버튼 */} - - - {challengeData.category && - ChallengeCategory[challengeData.category as keyof typeof ChallengeCategory]} - - {challengeData.title} + <> + + 끄적끄적 | '{challengeTitle}' 챌린지 + + + + + + + navigate(-1)} /> {/* 뒤로가기 버튼 */} + + + {challengeData.category && + ChallengeCategory[challengeData.category as keyof typeof ChallengeCategory]} + + {challengeData.title} + - - - {/* 생성자도 참여하기 버튼을 통해 챌린지에 참여 */} - {challengeData.isAuthor && ( - - { - navigate(`/challenge/create/${challengeId}`); - }} - /> - - - )} - - {/* 참여하기 or 탈퇴하기 버튼 */} - {isDateValid(challengeData?.endDate) ? ( - 챌린지 마감 // 챌린지 종료됨 - ) : challengeData.isParticipant ? ( // 챌린지 종료되지 않음, 참여 여부에 따라 버튼 표시 - 탈퇴하기 - ) : ( - 참여하기 - )} + + {/* 생성자도 참여하기 버튼을 통해 챌린지에 참여 */} + {challengeData.isAuthor && ( + + { + navigate(`/challenge/create/${challengeId}`); + }} + /> + + + )} - {join && challengeId && ( - - )} - - + {/* 참여하기 or 탈퇴하기 버튼 */} + {isDateValid(challengeData?.endDate) ? ( + 챌린지 마감 // 챌린지 종료됨 + ) : challengeData.isParticipant ? ( // 챌린지 종료되지 않음, 참여 여부에 따라 버튼 표시 + 탈퇴하기 + ) : ( + 참여하기 + )} - 챌린지 정보 + {join && challengeId && ( + + )} + + - - - - - - - {challengeData.title} - - {`${formatDate(challengeData.startDate ?? '')} ~ ${formatDate(challengeData.endDate ?? '')}`} - - -

{challengeData.contents}

- - - - - {challengeData?.participantCount}명 참여 중 - - - {challengeData.cycle - ? ChallengeCycle[challengeData.cycle as keyof typeof ChallengeCycle] - : '알 수 없는 주기'}{' '} - {challengeData.cycle === 'WEEKLY' && - Array.isArray(challengeData.cycleDetails) && - challengeData.cycleDetails - .map( - (detail: string) => - ChallengeCycleDetail_Weekly[ - detail as keyof typeof ChallengeCycleDetail_Weekly - ] - ) - .join(', ')} - {challengeData.cycle === 'MONTHLY' && - Array.isArray(challengeData.cycleDetails) && - challengeData.cycleDetails - .map( - (detail: string) => - ChallengeCycleDetail_Monthly[ - detail as keyof typeof ChallengeCycleDetail_Monthly - ] + '일' - ) - .join(', ')} - - - + 챌린지 정보 - - - 블록 미리보기 - -

{challengeData.title}

-

+ + + + + + + {challengeData.title} + + {`${formatDate(challengeData.startDate ?? '')} ~ ${formatDate(challengeData.endDate ?? '')}`} + + +

{challengeData.contents}

+ + + + + {challengeData?.participantCount}명 참여 중 + + {challengeData.cycle ? ChallengeCycle[challengeData.cycle as keyof typeof ChallengeCycle] : '알 수 없는 주기'}{' '} @@ -237,57 +210,91 @@ const ChallengeDetailPage = () => { ] + '일' ) .join(', ')} -

- + + - - 챌린지 장 - - {challengeData.authorName} - - - - - + + + 블록 미리보기 + +

{challengeData.title}

+

+ {challengeData.cycle + ? ChallengeCycle[challengeData.cycle as keyof typeof ChallengeCycle] + : '알 수 없는 주기'}{' '} + {challengeData.cycle === 'WEEKLY' && + Array.isArray(challengeData.cycleDetails) && + challengeData.cycleDetails + .map( + (detail: string) => + ChallengeCycleDetail_Weekly[ + detail as keyof typeof ChallengeCycleDetail_Weekly + ] + ) + .join(', ')} + {challengeData.cycle === 'MONTHLY' && + Array.isArray(challengeData.cycleDetails) && + challengeData.cycleDetails + .map( + (detail: string) => + ChallengeCycleDetail_Monthly[ + detail as keyof typeof ChallengeCycleDetail_Monthly + ] + '일' + ) + .join(', ')} +

+ + - 실시간 완료 + + 챌린지 장 + + {challengeData.authorName} + + + + + - {/* 사용자 프로필 누르면 프로필 조회 가능해야함 */} - - {challengeData?.completedMembers && challengeData.completedMembers.length > 0 ? ( - challengeData.completedMembers.map((member, index) => ( - - - {member.nickname} - - )) - ) : ( - 챌린지를 완료한 첫 번째 주인공이 되어보세요! - )} - + 실시간 완료 - {/* 챌린지 삭제 동의 모달창 */} - {isModalOpen && isDelModalOpen && ( - - )} + {/* 사용자 프로필 누르면 프로필 조회 가능해야함 */} + + {challengeData?.completedMembers && challengeData.completedMembers.length > 0 ? ( + challengeData.completedMembers.map((member, index) => ( + + + {member.nickname} + + )) + ) : ( + 챌린지를 완료한 첫 번째 주인공이 되어보세요! + )} + + + {/* 챌린지 삭제 동의 모달창 */} + {isModalOpen && isDelModalOpen && ( + + )} - {/* 챌린지 탈퇴 동의 모달창 */} - {isModalOpen && isWithdrawModalOpen && ( - - )} - - + {/* 챌린지 탈퇴 동의 모달창 */} + {isModalOpen && isWithdrawModalOpen && ( + + )} + + + ); }; diff --git a/src/pages/CreateBoardPage.tsx b/src/pages/CreateBoardPage.tsx index 6856b76..7b5270f 100644 --- a/src/pages/CreateBoardPage.tsx +++ b/src/pages/CreateBoardPage.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import Navbar from '../components/Navbar'; import Flex from '../components/Flex'; +import { Helmet } from 'react-helmet-async'; import personalDashboardIcon from '../img/personalDashboardIcon.png'; import teamDashboardIcon from '../img/teamDashboardIcon.png'; @@ -21,59 +22,64 @@ import { const CreateBoard = () => { return ( - - - - 끄적끄적을 어떻게 사용하고 싶으세요? - 생성할 대시보드 종류를 선택해주세요. + <> + + 끄적끄적 | 대시보드 생성 + + + + + 끄적끄적을 어떻게 사용하고 싶으세요? + 생성할 대시보드 종류를 선택해주세요. - - - - - - - 설정 이미지 - - - 정신 없는 하루도,
- 복잡한 작업도 끄적끄적과 함께 해요. - - 개인 대시보드 - - - + + + + + + + 설정 이미지 + + + 정신 없는 하루도,
+ 복잡한 작업도 끄적끄적과 함께 해요. + + 개인 대시보드 + + + - - - - - 설정 이미지 - - - 협업도 문제 없어요.
- 팀원을 등록하고 프로젝트를 관리해요. - - 팀 대시보드 - - - - - - - + + + + + 설정 이미지 + + + 협업도 문제 없어요.
+ 팀원을 등록하고 프로젝트를 관리해요. + + 팀 대시보드 + + + + + + + + ); }; diff --git a/src/pages/CreateChallengePage.tsx b/src/pages/CreateChallengePage.tsx index abad6d9..876a31d 100644 --- a/src/pages/CreateChallengePage.tsx +++ b/src/pages/CreateChallengePage.tsx @@ -15,6 +15,7 @@ import { stringify } from 'querystring'; import { useLocation, useNavigate } from 'react-router-dom'; import useModal from '../hooks/useModal'; import CustomModal from '../components/CustomModal'; +import { Helmet } from 'react-helmet-async'; // * 날짜 포맷 설정 함수 const formatDate = (date: Date): string => { @@ -232,189 +233,194 @@ const CreateChallengePage = () => { }; return ( - - - - - 챌린지 {challengeId ? '수정' : '생성'} - 챌린지 팀원 모집 게시글 - - - 제목 - - - - - 설명 - - + <> + + 끄적끄적 | 챌린지 생성 + + + + + + 챌린지 {challengeId ? '수정' : '생성'} + 챌린지 팀원 모집 게시글 - - 카테고리 - 제목 + - {Object.entries(ChallengeCategory).map(([key, value]) => ( - - ))} - + /> - 대표 이미지 - setIsHovering(true)} // 마우스 오버 시 상태 업데이트 - onMouseLeave={() => setIsHovering(false)} - > - - - {formData.representImage && ( - 설명 + + + + + + 카테고리 + - 챌린지 이미지 ( + + ))} + + + + + 대표 이미지 + setIsHovering(true)} // 마우스 오버 시 상태 업데이트 + onMouseLeave={() => setIsHovering(false)} + > + + + {formData.representImage && ( + + > + 챌린지 이미지 + + )} + + + + 챌린지 블록 + + 제목 + + + + + 주기 + handleTermChange('DAILY')} + isSelected={formData.cycle === 'DAILY'} // 선택된 상태 확인 + > + 매일 + + handleTermChange('WEEKLY')} + isSelected={formData.cycle === 'WEEKLY'} // 선택된 상태 확인 + > + 매주 + + handleTermChange('MONTHLY')} + isSelected={formData.cycle === 'MONTHLY'} // 선택된 상태 확인 + > + 매월 + + + {formData.cycle === 'DAILY' && } + + {formData.cycle === 'WEEKLY' && ( + + {Object.entries(ChallengeCycleDetail_Weekly).map(([key, day], index) => ( + handleCycleDetailClick(index + 1, 'week')} + isSelected={formData.cycleDetails?.includes(key) ?? false} // 키를 사용하여 선택 상태 확인 + > + {day} + + ))} + + )} + + {formData.cycle === 'MONTHLY' && ( + + {chunks.map((week, index) => ( + + {week.map(day => ( + handleCycleDetailClick(day, 'day')} + isSelected={isDaySelected(day)} + > + {day} + + ))} + + ))} )} - - - 챌린지 블록 - - 제목 - + 종료 날짜 + + + +

까지

+ + + + + 챌린지 {challengeId ? '수정' : '생성'} + + + {/* 작성되지 않은 부분이 있으면 모달창으로 알림 */} + {isModalOpen && ( + - - - - 주기 - handleTermChange('DAILY')} - isSelected={formData.cycle === 'DAILY'} // 선택된 상태 확인 - > - 매일 - - handleTermChange('WEEKLY')} - isSelected={formData.cycle === 'WEEKLY'} // 선택된 상태 확인 - > - 매주 - - handleTermChange('MONTHLY')} - isSelected={formData.cycle === 'MONTHLY'} // 선택된 상태 확인 - > - 매월 - - - {formData.cycle === 'DAILY' && } - - {formData.cycle === 'WEEKLY' && ( - - {Object.entries(ChallengeCycleDetail_Weekly).map(([key, day], index) => ( - handleCycleDetailClick(index + 1, 'week')} - isSelected={formData.cycleDetails?.includes(key) ?? false} // 키를 사용하여 선택 상태 확인 - > - {day} - - ))} - - )} - - {formData.cycle === 'MONTHLY' && ( - - {chunks.map((week, index) => ( - - {week.map(day => ( - handleCycleDetailClick(day, 'day')} - isSelected={isDaySelected(day)} - > - {day} - - ))} - - ))} - - )} - - - - 종료 날짜 - - - -

까지

- - - - - 챌린지 {challengeId ? '수정' : '생성'} - - - {/* 작성되지 않은 부분이 있으면 모달창으로 알림 */} - {isModalOpen && ( - - )} - - + )} + + + ); }; diff --git a/src/pages/CreatePersonalBoardPage.tsx b/src/pages/CreatePersonalBoardPage.tsx index 32da0d0..1182bf2 100644 --- a/src/pages/CreatePersonalBoardPage.tsx +++ b/src/pages/CreatePersonalBoardPage.tsx @@ -24,6 +24,7 @@ import { DelBtn, } from '../styles/CreateBoardPageStyled'; import { useLocation } from 'react-router-dom'; +import { Helmet } from 'react-helmet-async'; const CreatePersonalBoard = () => { const location = useLocation(); @@ -44,101 +45,108 @@ const CreatePersonalBoard = () => { } = usePersonalDashBoard(dashboardId); // 개인 대시보드 생성 커스텀 훅 사용 return ( - - - - - 개인 대시보드 {dashboardId ? '수정' : '생성'} - 제목과 설명, 카테고리를 설정하고 공개 여부를 선택하세요. + <> + + 끄적끄적 | 대시보드 생성 + + + + + + 개인 대시보드 {dashboardId ? '수정' : '생성'} + 제목과 설명, 카테고리를 설정하고 공개 여부를 선택하세요. - - - - - - - - -