Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/#354 QA에서 발견된 UX 문제 해결 #356

Merged
merged 5 commits into from
Nov 24, 2024
Merged

Feature/#354 QA에서 발견된 UX 문제 해결 #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8e2aa84
feat: 학습자료 생성 모달이 닫히면, 남아있던 data 초기화
llddang Nov 24, 2024
6f3d426
feat: 팀페이지에서 학습자료 갯수를 넘어 페이지네비게이션 되는 오류 해결
llddang Nov 24, 2024
680176d
feat: 팀원이 아닌 사람이 스터디에 들어올 수 없도록 수정
llddang Nov 24, 2024
bb72364
feat: 10MB 이내의 파일만 등록 가능하도록 수정
llddang Nov 24, 2024
2c5bfee
fix: 학습자료 첨부에서 첨부파일에 null이 들어가는 빌드 오류 해결
llddang Nov 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions src/app/team/[teamId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
getDocumentList('teams', params.teamId, page, size).then((res) => {
if (res.ok) {
setDocumentArray(res.body.content);
setDocumentLength(res.body.numberOfElements);
setDocumentLength(res.body.totalElements);
}
});
}
Expand All @@ -75,10 +75,6 @@ const Page = ({ params }: { params: { teamId: number } }) => {
TEAM_CATEGORY_INFOS[1].page = `/team/${params.teamId}/document`;
}, []);

useEffect(() => {
getCardData(cardIdx);
}, [cardIdx]);

useEffect(() => {
getCardData(0);
}, [category]);
Expand All @@ -98,6 +94,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
const handlePrevClick = () => {
if (cardIdx - CARD_PER_PAGE < 0) return;

getCardData(cardIdx - CARD_PER_PAGE);
setCardIdx((idx) => idx - CARD_PER_PAGE);
};

Expand All @@ -115,13 +112,15 @@ const Page = ({ params }: { params: { teamId: number } }) => {
}
});
} else if (category === '학습자료') {
if (cardIdx + CARD_PER_PAGE > documentLength) return;
if (cardIdx + CARD_PER_PAGE >= documentLength) return;

const nextPage = Math.floor((cardIdx + CARD_PER_PAGE) / CARD_PER_PAGE);
const size = CARD_PER_PAGE;

getDocumentList('teams', params.teamId, nextPage, size).then((res) => {
if (res.ok) {
setDocumentArray(res.body.content);
setDocumentLength(res.body.totalElements);
setCardIdx((idx) => idx + CARD_PER_PAGE);
}
});
Expand Down
15 changes: 11 additions & 4 deletions src/app/team/[teamId]/study/[studyId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
'use client';

import { Flex, Grid, IconButton, Text, Link, Card } from '@chakra-ui/react';
import { useAtomValue } from 'jotai';
import NextLink from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { MdOutlineArrowForwardIos } from 'react-icons/md';

import { getDocumentList } from '@/app/api/document';
import { getStudy, getStudyMembers } from '@/app/api/study';
import { myTeamAtom } from '@/atom';
import DocumentCard from '@/components/DocumentCard';
import Title from '@/components/Title';
import CurriculumCard from '@/containers/study/CurriculumCard';
Expand All @@ -28,7 +31,11 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
const [isTerminateModalOpen, setIsTerminateModalOpen] = useState<boolean>(false);
const [documentArray, setDocumentArray] = useState<DocumentList[]>([]);

const router = useRouter();
const user = useGetUser();
const myTeam = useAtomValue(myTeamAtom);
if (user && !user.isLogin) router.replace(`/team/${params.teamId}`);
if (user && !myTeam.some((id) => id === +params.teamId)) router.replace(`/team/${params.teamId}`);

const participantData = useGetFetchWithToken(getStudyMembers, [params?.studyId])?.map(
(data: StudyMember) =>
Expand Down Expand Up @@ -67,7 +74,7 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
</>
)}
</Flex>
{studyData && studyData?.status !== 'ENDED' && user?.memberId === studyData?.studyLeaderId && (
{studyData && studyData?.status !== 'ENDED' && user && user.memberId === studyData?.studyLeaderId && (
<StudyControlPanel
editModalOpen={setIsEditModalOpen}
terminateModalOpen={setIsTerminateModalOpen}
Expand All @@ -76,11 +83,11 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
)}
<Grid gap="4" templateColumns={{ base: '', xl: '2fr 1fr' }} w="100%" my="4">
<Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
{studyData && (
{studyData && user && user.memberId !== -1 && (
<CurriculumCard
cropId={studyData.cropId}
studyProgressRatio={studyData.studyProgressRatio}
isStudyLeader={user?.memberId === studyData?.studyLeaderId}
isStudyLeader={user.memberId === studyData.studyLeaderId}
/>
)}

Expand Down Expand Up @@ -129,7 +136,7 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
<Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
{/* <Feed /> */}
<Flex align="right" direction="column" rowGap="3">
{studyData && user?.memberId === studyData.studyLeaderId && (
{studyData && user && user.memberId === studyData.studyLeaderId && (
<StudyParticipantMenu
studyId={params.studyId}
teamId={studyData?.teamReference.id}
Expand Down
76 changes: 54 additions & 22 deletions src/containers/study/CreateDocumentModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ const DocumentBoxIcon = {
URL: <BsLink45Deg />,
};

const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB

const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: DocumentModalProps) => {
const [doctype, setDocType] = useState<DocumentType>('IMAGE');
const [docList, setDocList] = useState<DocumentList>({
Expand Down Expand Up @@ -51,6 +53,20 @@ const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: Docume
const handleChange = (value: string) => {
setSelectedValue(value as DocumentAccessType);
};

const handleCloseModal = () => {
onClose();
setTitle('');
setDescription('');
setSelectedValue('ALL');
setDocList({
IMAGE: [],
DOCUMENT: [],
URL: [],
});
setDocType('IMAGE');
};

const user = useGetUser();

const onConfirmButtonClick = () => {
Expand Down Expand Up @@ -84,48 +100,64 @@ const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: Docume
const categoryDatas = categoryData as CreateDocument;
createDocs(categoryDatas.groupType, categoryDatas.groupId, documentForm).then((response) => {
if (response.ok) {
onClose();
handleCloseModal();
}
});
} else if (category === 'update') {
const categoryDatas = categoryData as DocumentDetail;
postDocs(categoryDatas.id, { title, description, accessType: selectedValue }).then((response) => {
if (response.ok) {
onClose();
handleCloseModal();
}
});
} else {
onClose();
handleCloseModal();
}
};

const handleGetDoc = {
IMAGE: (e: ChangeEvent<HTMLInputElement>) => {
const imgs = Array.from(e.target.files || []);
const images = Array.from(e.target.files || []);
let alertFlag = false;
const filteredImages = images.reduce(
(r, img) => {
if (img.size >= MAX_FILE_SIZE) alertFlag = true;
else
r.push({
key: img.name,
name: img.name,
content: img,
});
return r;
},
[] as { key: string; name: string; content: File }[],
);
if (alertFlag) alert('10MB 이내의 파일을 첨부해주세요.');
setDocList((prev) => ({
...prev,
IMAGE: [
...prev.IMAGE,
...imgs.map((img) => ({
key: img.name,
name: img.name,
content: img,
})),
],
IMAGE: [...prev.IMAGE, ...filteredImages],
}));
},
DOCUMENT: (e: ChangeEvent<HTMLInputElement>) => {
const files = Array.from(e.target.files || []);
let alertFlag = false;
const filteredFiles = files.reduce(
(r, file) => {
if (file.size >= MAX_FILE_SIZE) alertFlag = true;
else
r.push({
key: file.name,
name: file.name,
content: file,
});
return r;
},
[] as { key: string; name: string; content: File }[],
);
if (alertFlag) alert('10MB 이내의 파일을 첨부해주세요.');
setDocList((prev) => ({
...prev,
DOCUMENT: [
...prev.DOCUMENT,
...files.map((file) => ({
key: file.name.toString(),
name: file.name,
content: file,
})),
],
DOCUMENT: [...prev.DOCUMENT, ...filteredFiles],
}));
},
URL: () => {
Expand Down Expand Up @@ -179,10 +211,10 @@ const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: Docume
<ActionModal
isOpen={isOpen}
size="xl"
onClose={onClose}
onClose={handleCloseModal}
title="학습자료 등록"
subButtonText="취소"
onSubButtonClick={onClose}
onSubButtonClick={handleCloseModal}
mainButtonText="등록"
onMainButtonClick={onConfirmButtonClick}
>
Expand Down