[BBB-124] Feat: 기술서적 스터디 API 연동

Team-BomBomBom · Sep 19, 2024 · d93456b · d93456b
1 parent cff9144
commit d93456b
Show file tree

Hide file tree

Showing 22 changed files with 518 additions and 209 deletions.
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -37,36 +37,37 @@ export default function Page() {
         </div>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="id">Username</Label>
+            <Label htmlFor="id">아이디</Label>
             <Input
               id="username"
-              placeholder="username"
+              placeholder="아이디"
               required
               type="id"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="password">Password</Label>
+            <Label htmlFor="password">비밀번호</Label>
             <Input
               id="password"
               required
               type="password"
+              placeholder="비밀번호"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
             />
           </div>
           <Button className="w-full" type="submit">
-            Sign In
+            로그인
           </Button>
         </form>
         <div className="flex items-center justify-between text-sm">
           <Link className="underline underline-offset-2" href="#">
-            Forgot password?
+            비밀번호 찾기
           </Link>
           <Link className="underline underline-offset-2" href="/users/signup">
-            Create account
+            회원 가입
           </Link>
         </div>
       </div>

diff --git a/app/page.tsx b/app/page.tsx
@@ -10,9 +10,9 @@ export default function Home() {
   const [myData, setMyData] = useRecoilState(userState);
   return (
     <>
-      {/* <div className="text-center">
+      <div className="text-center">
         {myData?.username + '로 로그인된 상태입니다.'}
-      </div> */}
+      </div>
       <div className="flex items-center justify-center min-h-screen bg-gradient-to-b from-white to-gray-300">
         <div className="space-y-12">
           <div className="ml-12 text-5xl grid grid-rows-3 grid-cols-2 gap-x-12 gap-y-3">
@@ -25,7 +25,10 @@ export default function Home() {
           </div>
           <div className="flex flex-col space-y-2 items-center">
             <Button className="w-1/2 bg-gray-900 text-white py-6 px-6 rounded-lg shadow-md hover:bg-gray-600">
-              <div className="text-xl flex items-center justify-center space-x-2">
+              <div
+                onClick={() => (location.href = '/study')}
+                className="text-xl flex items-center justify-center space-x-2"
+              >
                 <StudyIcon className="w-7 h-7"></StudyIcon>
                 <p>스터디 시작하기</p>
               </div>

diff --git a/app/study/[id]/page.tsx b/app/study/[id]/page.tsx
@@ -5,18 +5,23 @@ import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 import StudyDashBoard from '@/components/study/dashboard/dashboard';
-import PostBoard from '@/components/study/post-board';
 import JoinStudyDialog from '@/components/study/study-join-dialog';
+import { BookStudyTaskListModal } from '@/components/study/task/book-study-task-list-modal';
+import { BookStudyTaskVoteModal } from '@/components/study/task/book-study-task-vote-modal';
 import { Button } from '@/components/ui/button/button';
 import Spinner from '@/components/ui/spinner/spinner';
+import { StudyType } from '@/constants/study/study';
 import getStudyDetails from '@/lib/api/study/get-details';
 import startStudy from '@/lib/api/study/start';
 import { userState } from '@/recoil/userAtom';
-import { Round, StudyDetails, StudyStatus } from '@/types/study/study-detail';
+import {
+  BookStudyDetails,
+  Round,
+  StudyDetails,
+  StudyStatus
+} from '@/types/study/study-detail';
 import { toast } from 'react-toastify';
 import { useRecoilState } from 'recoil';
-import { BookStudyTaskListModal } from '@/components/study/task/book-study-task-list-modal';
-import { BookStudyTaskVoteModal } from '@/components/study/task/book-study-task-vote-modal';
 
 export default function StudyPage() {
   const params = useParams();
@@ -34,6 +39,7 @@ export default function StudyPage() {
     useState(false);
   const [showBookStudyTaskVoteModal, setShowBookStudyTaskVoteModal] =
     useState(false);
+  const [nextRoundIdx, setNextRoundIdx] = useState(0);
 
   const handleStart = async () => {
     try {
@@ -51,6 +57,11 @@ export default function StudyPage() {
         const studyDetailsAndRound = await getStudyDetails(studyId);
         setDetails(studyDetailsAndRound.details);
         setRound(studyDetailsAndRound.round);
+        if (studyDetailsAndRound.details.state === StudyStatus.READY) {
+          setNextRoundIdx(0);
+        } else {
+          setNextRoundIdx(studyDetailsAndRound.round.idx + 1);
+        }
         for (const [userId, user] of Object.entries(
           studyDetailsAndRound.round.users
         )) {
@@ -59,10 +70,9 @@ export default function StudyPage() {
             break;
           }
         }
-
         if (
-          studyDetailsAndRound.details.leaderId === myData?.id &&
-          studyDetailsAndRound.details.status === StudyStatus.READY
+          studyDetailsAndRound.details.leader.id === myData?.id &&
+          studyDetailsAndRound.details.state === StudyStatus.READY
         ) {
           setCanStart(true);
         } else {
@@ -85,16 +95,12 @@ export default function StudyPage() {
   return (
     <>
       <div className="flex space-x-4 justify-center">
-        {showPostBoard ? (
-          <PostBoard></PostBoard>
-        ) : (
-          <StudyDashBoard
-            details={details}
-            studyId={studyId}
-            round={round}
-            setRound={setRound}
-          />
-        )}
+        <StudyDashBoard
+          details={details}
+          studyId={studyId}
+          round={round}
+          setRound={setRound}
+        />
         <div className="mt-4">
           {isParticipant ? (
             canStart ? (
@@ -113,6 +119,7 @@ export default function StudyPage() {
           )}
           <StudyAbout
             details={details}
+            nextRoundIdx={nextRoundIdx}
             users={round.users}
             showPostBoard={showPostBoard}
             setShowPostBoard={setShowPostBoard}
@@ -121,14 +128,24 @@ export default function StudyPage() {
           />
         </div>
       </div>
-      <BookStudyTaskListModal
-        isOpen={showBookStudyTaskListModal}
-        setOpen={setShowBookStudyTaskListModal}
-      ></BookStudyTaskListModal>
-      <BookStudyTaskVoteModal
-        isOpen={showBookStudyTaskVoteModal}
-        openChange={setShowBookStudyTaskVoteModal}
-      ></BookStudyTaskVoteModal>
+      {StudyType[details.studyType as keyof typeof StudyType] ===
+        StudyType.BOOK && (
+        <>
+          <BookStudyTaskListModal
+            isOpen={showBookStudyTaskListModal}
+            setOpen={setShowBookStudyTaskListModal}
+            details={details as BookStudyDetails}
+            refresh={refresh}
+            nextRoundIdx={nextRoundIdx}
+          ></BookStudyTaskListModal>
+          <BookStudyTaskVoteModal
+            details={details as BookStudyDetails}
+            nextRoundIdx={nextRoundIdx}
+            isOpen={showBookStudyTaskVoteModal}
+            openChange={setShowBookStudyTaskVoteModal}
+          ></BookStudyTaskVoteModal>
+        </>
+      )}
     </>
   );
 }
diff --git a/components/book/book-search-table.tsx b/components/book/book-search-table.tsx
@@ -6,8 +6,8 @@ import {
   TableHeader,
   TableRow
 } from '@/components/ui/table/table';
-import { BookSearchTableProps } from '@/types/book/book-result';
 import { setStudyBook } from '@/lib/api/book/search';
+import { BookSearchTableProps } from '@/types/book/book-result';
 import { toast } from 'react-toastify';
 
 export default function BookSearchTable({

diff --git a/components/study/dashboard/about.tsx b/components/study/dashboard/about.tsx
@@ -10,19 +10,26 @@ import {
   LayoutGridIcon
 } from '@/components/ui/icon/icon';
 import { StudyType } from '@/constants/study/study';
-import { StudyDetails, StudyMemberInfo } from '@/types/study/study-detail';
+import {
+  BookStudyDetails,
+  StudyDetails,
+  StudyMemberInfo,
+  VotingProcess
+} from '@/types/study/study-detail';
 
 export default function StudyAbout({
   details,
   users,
   showPostBoard,
+  nextRoundIdx,
   setShowPostBoard,
   setShowBookStudyTaskListModal,
   setShowBookStudyTaskVoteModal
 }: {
   details: StudyDetails;
   users: { [userId: number]: StudyMemberInfo };
   showPostBoard: boolean;
+  nextRoundIdx: number;
   setShowPostBoard: (arg0: boolean) => void;
   setShowBookStudyTaskListModal: (value: boolean) => void;
   setShowBookStudyTaskVoteModal: (value: boolean) => void;
@@ -59,9 +66,9 @@ export default function StudyAbout({
         <div className="flex items-center space-x-2">
           <ActivityIcon className="w-5 h-5 text-muted-foreground" />
           <b>
-            {details.status == 'READY'
+            {details.state == 'READY'
               ? '시작 대기'
-              : details.status == 'RUNNING'
+              : details.state == 'RUNNING'
                 ? '진행 중'
                 : '종료'}
           </b>
@@ -75,7 +82,7 @@ export default function StudyAbout({
           <b>
             {details.startDate.toString() +
               ' ~ ' +
-              endDate.toLocaleDateString()}
+              endDate.toLocaleDateString('fr-CA')}
           </b>
         </div>
         <div className="flex items-center space-x-2">
@@ -95,29 +102,35 @@ export default function StudyAbout({
           <>
             <div className="flex items-center space-x-2">
               <BookIcon className="w-5 h-5 text-muted-foreground" />
-              {/* TODO details.book.title로 변경 */}
-              <span>자바의 정석</span>
-            </div>
-
-            <div
-              onClick={() => {}}
-              className="group w-fit hover:text-gray-900 text-blue-600 flex items-center space-x-2"
-            >
-              <FilePenIcon className="group-hover:stroke-black stroke-blue w-5 h-5 text-muted-foreground"></FilePenIcon>
-              <b onClick={() => setShowBookStudyTaskListModal(true)}>
-                과제 선택지 수정{' '}
-              </b>
+              <span>{(details as BookStudyDetails).bookInfo.title}</span>
             </div>
 
-            <div
-              onClick={() => {}}
-              className="group w-fit hover:text-gray-900 text-blue-600 flex items-center space-x-2"
-            >
-              <BoxIcon className="group-hover:stroke-black stroke-blue w-5 h-5 text-muted-foreground"></BoxIcon>
-              <b onClick={() => setShowBookStudyTaskVoteModal(true)}>
-                과제 투표{' '}
-              </b>
-            </div>
+            {(details as BookStudyDetails).votingProcess ===
+              VotingProcess.READY &&
+              details.weeks !== nextRoundIdx && (
+                <div
+                  onClick={() => {}}
+                  className="group w-fit hover:text-gray-900 text-blue-600 flex items-center space-x-2"
+                >
+                  <FilePenIcon className="group-hover:stroke-black stroke-blue w-5 h-5 text-muted-foreground"></FilePenIcon>
+                  <b onClick={() => setShowBookStudyTaskListModal(true)}>
+                    과제 선택지 수정{' '}
+                  </b>
+                </div>
+              )}
+            {(details as BookStudyDetails).votingProcess ===
+              VotingProcess.ONGOING &&
+              details.weeks !== nextRoundIdx && (
+                <div
+                  onClick={() => {}}
+                  className="group w-fit hover:text-gray-900 text-blue-600 flex items-center space-x-2"
+                >
+                  <BoxIcon className="group-hover:stroke-black stroke-blue w-5 h-5 text-muted-foreground"></BoxIcon>
+                  <b onClick={() => setShowBookStudyTaskVoteModal(true)}>
+                    과제 투표{' '}
+                  </b>
+                </div>
+              )}
           </>
         )}
       </div>

diff --git a/components/study/dashboard/book-row.tsx b/components/study/dashboard/book-row.tsx
@@ -2,12 +2,12 @@ import { PlayIcon, PuzzleIcon, XIcon } from '@/components/ui/icon/icon';
 import { TableCell, TableRow } from '@/components/ui/table/table';
 import {
   AlgorithmProblemInfo,
-  BookMemberInfo,
-  StudyAssignmentInfo
+  BookMemberInfo
 } from '@/types/study/study-detail';
 
 import { Button } from '@/components/ui/button/button';
 import { userState } from '@/recoil/userAtom';
+import { BookTaskAssignment } from '@/types/study/book-task-form';
 import { useState } from 'react';
 import { useRecoilState } from 'recoil';
 
@@ -21,7 +21,7 @@ export function BookRow({
   studyId: number;
   roundIdx: number;
   userId: number;
-  assignment: StudyAssignmentInfo;
+  assignment: BookTaskAssignment;
   user: BookMemberInfo;
 }) {
   const [isLoading, setIsLoading] = useState(false);
@@ -32,14 +32,14 @@ export function BookRow({
         <p className="text-center">{user.username}</p>
       </TableCell>
       <TableCell className="text-center">
-        <p className="text-center">{assignment.title}</p>
+        <p className="text-center">{assignment?.title}</p>
       </TableCell>
       <TableCell className="text-center">
-        <p className="text-center">{assignment.content}</p>
+        <p className="text-center">{assignment?.description}</p>
       </TableCell>
       <TableCell className="text-center">
         <p className="text-center">
-          {assignment.page.left} - {assignment.page.right}
+          {assignment?.pageStart} - {assignment?.pageEnd}
         </p>
       </TableCell>
       <TableCell className="text-center">