From cff91442258f7af16239d0994080bae0f1484076 Mon Sep 17 00:00:00 2001
From: platinouss <platinouss@gmail.com>
Date: Sat, 17 Aug 2024 22:54:20 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[BBB-124]=20=E2=9C=A8Feat:=20=EA=B8=B0?=
 =?UTF-8?q?=EC=88=A0=20=EC=84=9C=EC=A0=81=20=EC=8A=A4=ED=84=B0=EB=94=94=20?=
 =?UTF-8?q?=EA=B3=BC=EC=A0=9C=20=ED=88=AC=ED=91=9C=EC=A7=80=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=88=AC=ED=91=9C=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/study/[id]/page.tsx                       |  76 +++++---
 components/study/dashboard/about.tsx          |  14 +-
 .../study/task/book-study-task-form.tsx       |  89 +++++++++
 .../study/task/book-study-task-list-modal.tsx | 165 ++++++++++++++++
 .../study/task/book-study-task-vote-modal.tsx | 119 ++++++++++++
 components/ui/button/button.tsx               |   2 +-
 components/ui/icon/icon.tsx                   |  21 +++
 components/ui/switch/switch.tsx               |  29 +++
 package-lock.json                             | 176 +++++++++++++++++-
 package.json                                  |   3 +-
 public/placeholder.svg                        |   1 +
 types/study/book-task-form.ts                 |  23 +++
 types/study/book-task-vote.ts                 |   4 +
 13 files changed, 687 insertions(+), 35 deletions(-)
 create mode 100644 components/study/task/book-study-task-form.tsx
 create mode 100644 components/study/task/book-study-task-list-modal.tsx
 create mode 100644 components/study/task/book-study-task-vote-modal.tsx
 create mode 100644 components/ui/switch/switch.tsx
 create mode 100644 public/placeholder.svg
 create mode 100644 types/study/book-task-form.ts
 create mode 100644 types/study/book-task-vote.ts

diff --git a/app/study/[id]/page.tsx b/app/study/[id]/page.tsx
index 0a45d5b..cb8f4cb 100644
--- a/app/study/[id]/page.tsx
+++ b/app/study/[id]/page.tsx
@@ -15,6 +15,8 @@ import { userState } from '@/recoil/userAtom';
 import { 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();
@@ -28,6 +30,10 @@ export default function StudyPage() {
   const [myData, setMyData] = useRecoilState(userState);
   const [trigger, setTrigger] = useState(Date.now());
   const [showPostBoard, setShowPostBoard] = useState(false);
+  const [showBookStudyTaskListModal, setShowBookStudyTaskListModal] =
+    useState(false);
+  const [showBookStudyTaskVoteModal, setShowBookStudyTaskVoteModal] =
+    useState(false);
 
   const handleStart = async () => {
     try {
@@ -77,40 +83,52 @@ 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}
-        />
-      )}
-      <div className="mt-4">
-        {isParticipant ? (
-          canStart ? (
-            <Button onClick={handleStart} className="bg-cyan-300 w-full">
-              시작하기
-            </Button>
-          ) : (
-            ''
-          )
+    <>
+      <div className="flex space-x-4 justify-center">
+        {showPostBoard ? (
+          <PostBoard></PostBoard>
         ) : (
-          <JoinStudyDialog
+          <StudyDashBoard
             details={details}
             studyId={studyId}
-            refresh={refresh}
+            round={round}
+            setRound={setRound}
           />
         )}
-        <StudyAbout
-          details={details}
-          users={round.users}
-          showPostBoard={showPostBoard}
-          setShowPostBoard={setShowPostBoard}
-        />
+        <div className="mt-4">
+          {isParticipant ? (
+            canStart ? (
+              <Button onClick={handleStart} className="bg-cyan-300 w-full">
+                시작하기
+              </Button>
+            ) : (
+              ''
+            )
+          ) : (
+            <JoinStudyDialog
+              details={details}
+              studyId={studyId}
+              refresh={refresh}
+            />
+          )}
+          <StudyAbout
+            details={details}
+            users={round.users}
+            showPostBoard={showPostBoard}
+            setShowPostBoard={setShowPostBoard}
+            setShowBookStudyTaskListModal={setShowBookStudyTaskListModal}
+            setShowBookStudyTaskVoteModal={setShowBookStudyTaskVoteModal}
+          />
+        </div>
       </div>
-    </div>
+      <BookStudyTaskListModal
+        isOpen={showBookStudyTaskListModal}
+        setOpen={setShowBookStudyTaskListModal}
+      ></BookStudyTaskListModal>
+      <BookStudyTaskVoteModal
+        isOpen={showBookStudyTaskVoteModal}
+        openChange={setShowBookStudyTaskVoteModal}
+      ></BookStudyTaskVoteModal>
+    </>
   );
 }
diff --git a/components/study/dashboard/about.tsx b/components/study/dashboard/about.tsx
index 73c597f..7b9d0f8 100644
--- a/components/study/dashboard/about.tsx
+++ b/components/study/dashboard/about.tsx
@@ -16,12 +16,16 @@ export default function StudyAbout({
   details,
   users,
   showPostBoard,
-  setShowPostBoard
+  setShowPostBoard,
+  setShowBookStudyTaskListModal,
+  setShowBookStudyTaskVoteModal
 }: {
   details: StudyDetails;
   users: { [userId: number]: StudyMemberInfo };
   showPostBoard: boolean;
   setShowPostBoard: (arg0: boolean) => void;
+  setShowBookStudyTaskListModal: (value: boolean) => void;
+  setShowBookStudyTaskVoteModal: (value: boolean) => void;
 }) {
   const endDate = new Date(details.startDate);
   endDate.setDate(endDate.getDate() + details.weeks * 7);
@@ -100,7 +104,9 @@ export default function StudyAbout({
               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>과제 선택지 수정 </b>
+              <b onClick={() => setShowBookStudyTaskListModal(true)}>
+                과제 선택지 수정{' '}
+              </b>
             </div>
 
             <div
@@ -108,7 +114,9 @@ export default function StudyAbout({
               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>과제 투표 </b>
+              <b onClick={() => setShowBookStudyTaskVoteModal(true)}>
+                과제 투표{' '}
+              </b>
             </div>
           </>
         )}
diff --git a/components/study/task/book-study-task-form.tsx b/components/study/task/book-study-task-form.tsx
new file mode 100644
index 0000000..ef4f7cf
--- /dev/null
+++ b/components/study/task/book-study-task-form.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { Input } from '@/components/ui/input/input';
+import { Label } from '@/components/ui/label/label';
+import { Textarea } from '@/components/ui/textarea/textarea';
+import { Button } from '@/components/ui/button/button';
+import { CheckIcon, FilePenIcon, TrashIcon } from '@/components/ui/icon/icon';
+import React from 'react';
+import { BookTaskForm } from '@/types/study/book-task-form';
+
+export function BookStudyTaskForm({
+  key,
+  assignment,
+  index,
+  editingIndex,
+  handleSaveAssignment,
+  setEditingIndex
+}: BookTaskForm) {
+  return (
+    <div key={index} className="rounded-md border bg-card p-4">
+      <div className="flex items-center justify-between">
+        <div className="space-y-1">
+          {editingIndex === index ? (
+            <div className="space-y-2">
+              <div className="text-muted-foreground">Title</div>
+              <Input id={`title-${index}`} defaultValue={assignment.chapter} />
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <Label htmlFor={`start-page-${index}`}>Start Page</Label>
+                  <Input
+                    id={`start-page-${index}`}
+                    defaultValue={assignment.startPage}
+                  />
+                </div>
+                <div>
+                  <Label htmlFor={`end-page-${index}`}>End Page</Label>
+                  <Input
+                    id={`end-page-${index}`}
+                    defaultValue={assignment.endPage}
+                  />
+                </div>
+              </div>
+              <div>
+                <Label htmlFor={`content-${index}`}>Content</Label>
+                <Textarea
+                  id={`content-${index}`}
+                  defaultValue={assignment.contents}
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-1">
+              <h4 className="text-lg font-medium">{assignment.chapter}</h4>
+              <p className="text-muted-foreground text-sm text-slate-500">
+                {assignment.startPage} ~ {assignment.endPage} page
+              </p>
+              <p className="text-muted-foreground">{assignment.contents}</p>
+            </div>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="ghost"
+            onClick={() => {
+              if (editingIndex === index) {
+                handleSaveAssignment(index);
+              } else {
+                setEditingIndex(index);
+              }
+            }}
+          >
+            {editingIndex === index ? (
+              <CheckIcon className="h-5 w-5 text-green-500" />
+            ) : (
+              <>
+                <FilePenIcon className="h-5 w-5" />
+                <span className="sr-only">Edit</span>
+              </>
+            )}
+          </Button>
+          <Button variant="ghost" className="text-red-500">
+            <TrashIcon className="h-5 w-5" />
+            <span className="sr-only">Delete</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/study/task/book-study-task-list-modal.tsx b/components/study/task/book-study-task-list-modal.tsx
new file mode 100644
index 0000000..99c2810
--- /dev/null
+++ b/components/study/task/book-study-task-list-modal.tsx
@@ -0,0 +1,165 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog/dialog';
+import { Button } from '@/components/ui/button/button';
+import { Label } from '@/components/ui/label/label';
+import { Switch } from '@/components/ui/switch/switch';
+import { PlusIcon } from '@/components/ui/icon/icon';
+import { BookStudyTaskListFormProps } from '@/types/study/book-task-form';
+import { BookStudyTaskForm } from '@/components/study/task/book-study-task-form';
+
+export function BookStudyTaskListModal({
+  isOpen,
+  setOpen
+}: BookStudyTaskListFormProps) {
+  const [canMemberEdit, setCanMemberEdit] = useState(false);
+  const [enableDuplicateAssignment, setEnableDuplicateAssignment] =
+    useState(false);
+  const [editingIndex, setEditingIndex] = useState(-1);
+
+  const bookImgUrl =
+    'https://shopping-phinf.pstatic.net/main_3248573/32485737619.20240209092102.jpg';
+  const bookTitle = '가상 면접 사례로 배우는 대규모 시스템 설계 기초';
+  const author = '알렉스 쉬 저/이병준 역';
+  const publisher = '인사이트';
+
+  const [assignments, setAssignments] = useState([
+    {
+      chapter: '1장. 사용자 수에 따른 규모 확장성',
+      startPage: 1,
+      endPage: 32,
+      contents: ' '
+    },
+    {
+      chapter: '2장. 계략적인 규모 추정',
+      startPage: 33,
+      endPage: 38,
+      contents: ' '
+    },
+    {
+      chapter: '3장. 시스템 설계 면접 공략법',
+      startPage: 39,
+      endPage: 50,
+      contents: ' '
+    }
+  ]);
+
+  const handleAddAssignment = () => {
+    setAssignments([
+      ...assignments,
+      {
+        chapter: 'New Assignment',
+        startPage: 0,
+        endPage: 0,
+        contents: ''
+      }
+    ]);
+    setEditingIndex(assignments.length);
+  };
+
+  const handleCanMemberEditSwitchChange = (checked: boolean) => {
+    setCanMemberEdit(checked);
+  };
+
+  const handleDuplicateAssignmentSwitchChange = (checked: boolean) => {
+    setEnableDuplicateAssignment(checked);
+  };
+
+  const handleSaveAssignment = (index: number) => {
+    // TODO: 과제 저장 로직 추가
+    // const updatedAssignments = [...assignments];
+    // updatedAssignments[index] = {
+    //   chapter: document.getElementById(`chapter-${index}`).value,
+    //   startPage: parseInt(document.getElementById(`start-page-${index}`).value),
+    //   endPage: parseInt(document.getElementById(`end-page-${index}`).value),
+    //   contents: document.getElementById(`content-${index}`).value
+    // };
+    // setAssignments(updatedAssignments);
+    // setEditingIndex(-1);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setOpen}>
+      <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto z-50">
+        <div className="flex items-start gap-4 mt-6 mb-4">
+          <img
+            src={bookImgUrl}
+            alt="Logo"
+            width={96}
+            height={96}
+            className="w-24 h-24"
+            style={{ aspectRatio: '96/96', objectFit: 'contain' }}
+          />
+          <div>
+            <DialogHeader>
+              <DialogTitle>{bookTitle}</DialogTitle>
+              <DialogDescription>{`${author} | ${publisher}`}</DialogDescription>
+            </DialogHeader>
+          </div>
+        </div>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-4 mb-4">
+            <div className="flex items-center justify-between gap-2">
+              <Label htmlFor="duplicate-check" className="flex flex-col gap-1">
+                <span>편집 허용</span>
+                <span className="font-normal leading-snug text-muted-foreground text-slate-500">
+                  스터디원도 편집할 수 있도록 허용합니다.
+                </span>
+              </Label>
+              <Switch
+                id="duplicate-check"
+                checked={canMemberEdit}
+                onCheckedChange={handleCanMemberEditSwitchChange}
+              />
+            </div>
+            <div className="flex items-center justify-between gap-2">
+              <Label htmlFor="duplicate-check" className="flex flex-col gap-1">
+                <span>챕터 중복 할당 허용</span>
+                <span className="font-normal leading-snug text-muted-foreground text-slate-500">
+                  두 명 이상이 투표한 챕터는 해당 챕터를 선택한 스터디원
+                  모두에게 과제로 할당됩니다.
+                </span>
+              </Label>
+              <Switch
+                id="duplicate-check"
+                checked={enableDuplicateAssignment}
+                onCheckedChange={handleDuplicateAssignmentSwitchChange}
+              />
+            </div>
+          </div>
+          {assignments.map((assignment, index) => {
+            return (
+              <BookStudyTaskForm
+                key={index}
+                assignment={assignment}
+                index={index}
+                editingIndex={editingIndex}
+                handleSaveAssignment={handleSaveAssignment}
+                setEditingIndex={setEditingIndex}
+              ></BookStudyTaskForm>
+            );
+          })}
+          <div className="flex justify-center">
+            <Button variant="ghost" onClick={handleAddAssignment}>
+              <PlusIcon className="h-5 w-5" />
+              <span className="sr-only">Add Assignment</span>
+            </Button>
+          </div>
+        </div>
+        <DialogFooter className="z-55">
+          <div>
+            <Button>투표 생성하기</Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/study/task/book-study-task-vote-modal.tsx b/components/study/task/book-study-task-vote-modal.tsx
new file mode 100644
index 0000000..099cbaa
--- /dev/null
+++ b/components/study/task/book-study-task-vote-modal.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle
+} from '@/components/ui/dialog/dialog';
+import { Button } from '@/components/ui/button/button';
+import { CheckIcon } from '@/components/ui/icon/icon';
+import { BookStudyTaskListFormProps } from '@/types/study/book-task-vote';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+
+export function BookStudyTaskVoteModal({
+  isOpen,
+  openChange
+}: BookStudyTaskListFormProps) {
+  const [firstChoice, setFirstChoice] = useState(-1);
+  const [secondChoice, setSecondChoice] = useState(-1);
+
+  const items = [
+    {
+      id: 1,
+      title: '1장. 사용자 수에 따른 규모 확장성',
+      description: ' '
+    },
+    {
+      id: 2,
+      title: '2장. 계략적인 규모 추정',
+      description: ' '
+    },
+    {
+      id: 3,
+      title: '3장. 시스템 설계 면접 공략법',
+      description: ' '
+    }
+  ];
+
+  const handleFirstChoiceClick = (id: number) => {
+    if (id === firstChoice) {
+      setFirstChoice(-1);
+      return;
+    }
+    setFirstChoice(id);
+  };
+
+  const handleSecondChoiceClick = (id: number) => {
+    if (id === secondChoice) {
+      setSecondChoice(-1);
+      return;
+    }
+    setSecondChoice(id);
+  };
+
+  const handleSubmit = () => {
+    console.log('First choice:', firstChoice);
+    console.log('Second choice:', secondChoice);
+    console.log('제출');
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={openChange}>
+      <VisuallyHidden>
+        <DialogTitle>Book Study Task Vote Modal</DialogTitle>
+      </VisuallyHidden>
+      <DialogContent className="sm:max-w-[500px] max-h-[80vh] items-center overflow-y-auto z-50">
+        <h2 className="text-2xl font-bold items-center mt-6">
+          스터디 과제 투표하기
+        </h2>
+        <p className="text-muted-foreground mb-6">
+          스터디 과제로 할당 받고 싶은 목차를 선택해 주세요.
+        </p>
+        <div className="grid gap-4">
+          <div
+            key="0"
+            className="bg-card p-5 rounded-md flex justify-end items-center"
+          >
+            <div className="flex gap-6">
+              <p className="flex items-center justify-end text-lg"> 1순위 </p>
+              <p className="flex items-center justify-end text-lg"> 2순위 </p>
+            </div>
+          </div>
+          {items.map((item) => (
+            <div
+              key={item.id}
+              className="bg-card p-4 rounded-md flex justify-between items-center"
+            >
+              <div>
+                <h3 className="text-lg font-semibold">{item.title}</h3>
+                <p className="text-muted-foreground">{item.description}</p>
+              </div>
+              <div className="flex gap-4">
+                <Button
+                  className={`flex items-center justify-center ${firstChoice === item.id ? 'bg-slate-800' : ''}`}
+                  onClick={() => handleFirstChoiceClick(item.id)}
+                >
+                  <CheckIcon
+                    className={`w-4 h-4 ${firstChoice === item.id ? 'text-slate-50' : ''}`}
+                  />
+                </Button>
+                <Button
+                  onClick={() => handleSecondChoiceClick(item.id)}
+                  className={`flex items-center justify-center ${secondChoice === item.id ? 'bg-slate-800' : ''}`}
+                >
+                  <CheckIcon
+                    className={`w-4 h-4 ${secondChoice === item.id ? 'text-slate-50' : ''}`}
+                  />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="flex justify-end mt-6">
+          <Button onClick={handleSubmit}>제출</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/ui/button/button.tsx b/components/ui/button/button.tsx
index 2e8cf5e..cb11737 100644
--- a/components/ui/button/button.tsx
+++ b/components/ui/button/button.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
diff --git a/components/ui/icon/icon.tsx b/components/ui/icon/icon.tsx
index 3062b5e..d56cc6e 100644
--- a/components/ui/icon/icon.tsx
+++ b/components/ui/icon/icon.tsx
@@ -458,3 +458,24 @@ export function LayoutGridIcon(props: Record<string, string>) {
     </svg>
   );
 }
+
+export function TrashIcon(props: Record<string, string>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 6h18" />
+      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+    </svg>
+  );
+}
diff --git a/components/ui/switch/switch.tsx b/components/ui/switch/switch.tsx
new file mode 100644
index 0000000..53ad68a
--- /dev/null
+++ b/components/ui/switch/switch.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cn } from '@/lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-0 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-gray-300',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-md ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/package-lock.json b/package-lock.json
index 3bf2a5a..fa18243 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,13 +11,14 @@
         "@hookform/resolvers": "^3.6.0",
         "@radix-ui/react-avatar": "^1.1.0",
         "@radix-ui/react-checkbox": "^1.1.1",
-        "@radix-ui/react-dialog": "^1.1.0",
+        "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-navigation-menu": "^1.1.4",
         "@radix-ui/react-radio-group": "^1.2.0",
         "@radix-ui/react-select": "^2.1.0",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.0",
         "axios": "^1.7.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
@@ -886,6 +887,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
       "integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.0",
         "@radix-ui/react-compose-refs": "1.1.0",
@@ -1322,6 +1324,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz",
       "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/react-primitive": "2.0.0"
       },
@@ -2335,6 +2338,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
       "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.0"
       },
@@ -2362,6 +2366,175 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.0.tgz",
+      "integrity": "sha512-OBzy5WAj641k0AOSpKQtreDMe+isX0MQJ1IVyF03ucdF3DunOnROVrjWs8zsXUxC3zfZ6JL9HFVCUlMghz9dJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -5917,6 +6090,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
diff --git a/package.json b/package.json
index 1bddc54..402c3ba 100644
--- a/package.json
+++ b/package.json
@@ -12,13 +12,14 @@
     "@hookform/resolvers": "^3.6.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-select": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
diff --git a/public/placeholder.svg b/public/placeholder.svg
new file mode 100644
index 0000000..e763910
--- /dev/null
+++ b/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/types/study/book-task-form.ts b/types/study/book-task-form.ts
new file mode 100644
index 0000000..7b15b33
--- /dev/null
+++ b/types/study/book-task-form.ts
@@ -0,0 +1,23 @@
+import { Dispatch, SetStateAction } from 'react';
+
+export interface BookStudyTaskListFormProps {
+  isOpen: boolean;
+  setOpen: (arg0: boolean) => void;
+}
+
+export interface BookTaskForm {
+  key: number;
+  assignment: BookTaskAssignment;
+  index: number;
+  editingIndex: number;
+  handleSaveAssignment: (index: number) => void;
+  setEditingIndex: Dispatch<SetStateAction<number>>;
+  children?: React.ReactNode;
+}
+
+export interface BookTaskAssignment {
+  chapter: string;
+  startPage: number;
+  endPage: number;
+  contents: string;
+}
diff --git a/types/study/book-task-vote.ts b/types/study/book-task-vote.ts
new file mode 100644
index 0000000..28370ec
--- /dev/null
+++ b/types/study/book-task-vote.ts
@@ -0,0 +1,4 @@
+export interface BookStudyTaskListFormProps {
+  isOpen: boolean;
+  openChange: (arg0: boolean) => void;
+}

From d93456b1b990c2ced9637c5e34714368f9a113bc Mon Sep 17 00:00:00 2001
From: msjang4 <msjang7115@gmail.com>
Date: Thu, 19 Sep 2024 20:14:52 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[BBB-124]=20Feat:=20=EA=B8=B0=EC=88=A0?=
 =?UTF-8?q?=EC=84=9C=EC=A0=81=20=EC=8A=A4=ED=84=B0=EB=94=94=20API=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/login/page.tsx                            |  13 +-
 app/page.tsx                                  |   9 +-
 app/study/[id]/page.tsx                       |  67 +++---
 components/book/book-search-table.tsx         |   2 +-
 components/study/dashboard/about.tsx          |  63 +++---
 components/study/dashboard/book-row.tsx       |  12 +-
 components/study/post-board.tsx               |  40 ++--
 components/study/study-group.tsx              |   4 +-
 .../study/task/book-study-task-form.tsx       |  42 ++--
 .../study/task/book-study-task-list-modal.tsx | 190 +++++++++++++-----
 .../study/task/book-study-task-vote-modal.tsx |  90 +++++----
 lib/api/algo/update-task-status.ts            |   2 +-
 lib/api/study/assignments.ts                  |  74 +++++++
 lib/api/study/config-study.ts                 |  22 ++
 lib/api/study/start-voting.ts                 |  16 ++
 lib/api/study/vote.ts                         |  22 ++
 next.config.mjs                               |   2 +-
 package-lock.json                             |   7 +-
 types/study/book-task-form.ts                 |  14 +-
 types/study/book-task-vote.ts                 |   4 +
 types/study/register-study.ts                 |   3 +
 types/study/study-detail.ts                   |  29 ++-
 22 files changed, 518 insertions(+), 209 deletions(-)
 create mode 100644 lib/api/study/assignments.ts
 create mode 100644 lib/api/study/config-study.ts
 create mode 100644 lib/api/study/start-voting.ts
 create mode 100644 lib/api/study/vote.ts

diff --git a/app/login/page.tsx b/app/login/page.tsx
index 20bcf3b..6099bce 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -37,10 +37,10 @@ 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}
@@ -48,25 +48,26 @@ export default function Page() {
             />
           </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
index ccbd333..c5f5b3c 100644
--- 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
index cb8f4cb..ed5d503 100644
--- 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
index 3498b3c..afa4dee 100644
--- 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
index 7b9d0f8..3d9f081 100644
--- a/components/study/dashboard/about.tsx
+++ b/components/study/dashboard/about.tsx
@@ -10,12 +10,18 @@ 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
@@ -23,6 +29,7 @@ export default function StudyAbout({
   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
index e5252e8..3e260c9 100644
--- 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">
diff --git a/components/study/post-board.tsx b/components/study/post-board.tsx
index cc9d11e..6ad370f 100644
--- a/components/study/post-board.tsx
+++ b/components/study/post-board.tsx
@@ -15,38 +15,26 @@ export default function PostBoard() {
       <Card className="relative overflow-hidden rounded-lg shadow-lg transition-transform duration-300 ease-in-out hover:-translate-y-2 hover:shadow-xl">
         <CardHeader className="bg-primary p-4 text-primary-foreground">
           <CardTitle className="text-xl font-bold">
-            스터디 입장 전 필독
-          </CardTitle>
-          <CardDescription className="text-base">
-            오프라인 주 1회
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="flex p-4 gap-2">
-          <CalendarIcon className="w-4 h-4"></CalendarIcon>
-          <p className="text-sm text-muted-foreground">8월 17일 </p>
-        </CardContent>
-      </Card>
-      <Card className="relative overflow-hidden rounded-lg shadow-lg transition-transform duration-300 ease-in-out hover:-translate-y-2 hover:shadow-xl">
-        <CardHeader className="bg-primary p-4 text-primary-foreground">
-          <CardTitle className="text-xl font-bold">
-            스터디 입장 전 필독
+            스터디 오프라인 모각코
           </CardTitle>
           <CardDescription className="text-base">
-            오프라인 주 1회
+            스터디 종료일에 다같이 모각코 후 놀아요! 저녁은 백소정, 1차는
+            상상호프 입니다.
           </CardDescription>
         </CardHeader>
         <CardContent className="flex p-4 gap-2">
           <CalendarIcon className="w-4 h-4"></CalendarIcon>
-          <p className="text-sm text-muted-foreground">8월 17일 </p>
+          <p className="text-sm text-muted-foreground">8월 23일 </p>
         </CardContent>
       </Card>
       <Card className="relative overflow-hidden rounded-lg shadow-lg transition-transform duration-300 ease-in-out hover:-translate-y-2 hover:shadow-xl">
         <CardHeader className="bg-primary p-4 text-primary-foreground">
           <CardTitle className="text-xl font-bold">
-            스터디 입장 전 필독
+            알고리즘 강의 및 책 추천
           </CardTitle>
           <CardDescription className="text-base">
-            오프라인 주 1회
+            서적 추천 1. 종만북 2. 프로그래밍 콘테스트 챌린징 강의 추천 1.
+            Barking Dog 2. 나동빈
           </CardDescription>
         </CardHeader>
         <CardContent className="flex p-4 gap-2">
@@ -55,18 +43,26 @@ export default function PostBoard() {
         </CardContent>
       </Card>
 
-      <Card className="relative overflow-hidden rounded-lg shadow-lg transition-transform duration-300 ease-in-out hover:-translate-y-2 hover:shadow-xl">
+      <Card
+        onClick={() => {
+          location.href = '/post/1';
+        }}
+        className="relative overflow-hidden rounded-lg shadow-lg transition-transform duration-300 ease-in-out hover:-translate-y-2 hover:shadow-xl"
+      >
         <CardHeader className="bg-primary p-4 text-primary-foreground">
           <CardTitle className="text-xl font-bold">
             스터디 입장 전 필독
           </CardTitle>
           <CardDescription className="text-base">
-            오프라인 주 1회
+            1. 9시 1분은 9시가 아니다 2. 실행은 수직적 문화는 수평적 3. 잡담을
+            많이 나누는 것이 경쟁력이다 4. 휴가나 퇴근 시 눈치주는 농담을 하지
+            않는다 5. 보고는 팩트에 기반한다 6. 오프라인 모임은 100% 자율적으로
+            참석한다
           </CardDescription>
         </CardHeader>
         <CardContent className="flex p-4 gap-2">
           <CalendarIcon className="w-4 h-4"></CalendarIcon>
-          <p className="text-sm text-muted-foreground">8월 17일 </p>
+          <p className="text-sm text-muted-foreground">8월 13일 </p>
         </CardContent>
       </Card>
     </div>
diff --git a/components/study/study-group.tsx b/components/study/study-group.tsx
index 7bc87b5..c385230 100644
--- a/components/study/study-group.tsx
+++ b/components/study/study-group.tsx
@@ -116,8 +116,8 @@ export default function StudyGroup({
         <AlgorithmStudyInfo {...(study as AlgorithmStudy)} />
       )}
       <p className="text-left text-gray-600 dark:text-gray-400 mb-4">
-        {study.introduce.length > 200
-          ? study.introduce.substring(0, 200) + '...'
+        {study.introduce.length > 100
+          ? study.introduce.substring(0, 100) + '...'
           : study.introduce}
       </p>
     </button>
diff --git a/components/study/task/book-study-task-form.tsx b/components/study/task/book-study-task-form.tsx
index ef4f7cf..663ff7b 100644
--- a/components/study/task/book-study-task-form.tsx
+++ b/components/study/task/book-study-task-form.tsx
@@ -1,19 +1,18 @@
 'use client';
 
+import { Button } from '@/components/ui/button/button';
+import { CheckIcon, FilePenIcon, TrashIcon } from '@/components/ui/icon/icon';
 import { Input } from '@/components/ui/input/input';
 import { Label } from '@/components/ui/label/label';
 import { Textarea } from '@/components/ui/textarea/textarea';
-import { Button } from '@/components/ui/button/button';
-import { CheckIcon, FilePenIcon, TrashIcon } from '@/components/ui/icon/icon';
-import React from 'react';
 import { BookTaskForm } from '@/types/study/book-task-form';
 
 export function BookStudyTaskForm({
-  key,
   assignment,
   index,
   editingIndex,
   handleSaveAssignment,
+  handleDeleteAssignment,
   setEditingIndex
 }: BookTaskForm) {
   return (
@@ -22,21 +21,26 @@ export function BookStudyTaskForm({
         <div className="space-y-1">
           {editingIndex === index ? (
             <div className="space-y-2">
+              <Input
+                id={`id-${index}`}
+                defaultValue={assignment.id ?? ''}
+                type="hidden"
+              />
               <div className="text-muted-foreground">Title</div>
-              <Input id={`title-${index}`} defaultValue={assignment.chapter} />
+              <Input id={`title-${index}`} defaultValue={assignment.title} />
               <div className="grid grid-cols-2 gap-2">
                 <div>
                   <Label htmlFor={`start-page-${index}`}>Start Page</Label>
                   <Input
                     id={`start-page-${index}`}
-                    defaultValue={assignment.startPage}
+                    defaultValue={assignment.pageStart}
                   />
                 </div>
                 <div>
                   <Label htmlFor={`end-page-${index}`}>End Page</Label>
                   <Input
                     id={`end-page-${index}`}
-                    defaultValue={assignment.endPage}
+                    defaultValue={assignment.pageEnd}
                   />
                 </div>
               </div>
@@ -44,17 +48,22 @@ export function BookStudyTaskForm({
                 <Label htmlFor={`content-${index}`}>Content</Label>
                 <Textarea
                   id={`content-${index}`}
-                  defaultValue={assignment.contents}
+                  defaultValue={assignment.description}
                 />
               </div>
             </div>
           ) : (
             <div className="space-y-1">
-              <h4 className="text-lg font-medium">{assignment.chapter}</h4>
+              <Input
+                id={`id-${index}`}
+                defaultValue={assignment.id ?? ''}
+                type="hidden"
+              />
+              <h4 className="text-lg font-medium">{assignment.title}</h4>
               <p className="text-muted-foreground text-sm text-slate-500">
-                {assignment.startPage} ~ {assignment.endPage} page
+                {assignment.pageStart} ~ {assignment.pageEnd} page
               </p>
-              <p className="text-muted-foreground">{assignment.contents}</p>
+              <p className="text-muted-foreground">{assignment.description}</p>
             </div>
           )}
         </div>
@@ -78,7 +87,16 @@ export function BookStudyTaskForm({
               </>
             )}
           </Button>
-          <Button variant="ghost" className="text-red-500">
+          <Button
+            onClick={() => {
+              if (editingIndex === index) {
+                setEditingIndex(-1);
+              }
+              handleDeleteAssignment(index);
+            }}
+            variant="ghost"
+            className="text-red-500"
+          >
             <TrashIcon className="h-5 w-5" />
             <span className="sr-only">Delete</span>
           </Button>
diff --git a/components/study/task/book-study-task-list-modal.tsx b/components/study/task/book-study-task-list-modal.tsx
index 99c2810..f1b4910 100644
--- a/components/study/task/book-study-task-list-modal.tsx
+++ b/components/study/task/book-study-task-list-modal.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import React, { useState } from 'react';
+import { BookStudyTaskForm } from '@/components/study/task/book-study-task-form';
+import { Button } from '@/components/ui/button/button';
 import {
   Dialog,
   DialogContent,
@@ -9,58 +10,65 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog/dialog';
-import { Button } from '@/components/ui/button/button';
+import { PlusIcon } from '@/components/ui/icon/icon';
 import { Label } from '@/components/ui/label/label';
 import { Switch } from '@/components/ui/switch/switch';
-import { PlusIcon } from '@/components/ui/icon/icon';
-import { BookStudyTaskListFormProps } from '@/types/study/book-task-form';
-import { BookStudyTaskForm } from '@/components/study/task/book-study-task-form';
+import {
+  addAssignments,
+  editAssignments,
+  getAssignments,
+  removeAssignments
+} from '@/lib/api/study/assignments';
+import configStudy from '@/lib/api/study/config-study';
+import startVoting from '@/lib/api/study/start-voting';
+import {
+  BookStudyTaskListFormProps,
+  BookTaskAssignment
+} from '@/types/study/book-task-form';
+import { ConfigStudyReq } from '@/types/study/register-study';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
 
 export function BookStudyTaskListModal({
   isOpen,
-  setOpen
+  setOpen,
+  details,
+  refresh,
+  nextRoundIdx
 }: BookStudyTaskListFormProps) {
   const [canMemberEdit, setCanMemberEdit] = useState(false);
-  const [enableDuplicateAssignment, setEnableDuplicateAssignment] =
-    useState(false);
+  const [enableDuplicateAssignment, setEnableDuplicateAssignment] = useState(
+    details.duplicated
+  );
   const [editingIndex, setEditingIndex] = useState(-1);
-
-  const bookImgUrl =
-    'https://shopping-phinf.pstatic.net/main_3248573/32485737619.20240209092102.jpg';
-  const bookTitle = '가상 면접 사례로 배우는 대규모 시스템 설계 기초';
-  const author = '알렉스 쉬 저/이병준 역';
-  const publisher = '인사이트';
-
-  const [assignments, setAssignments] = useState([
-    {
-      chapter: '1장. 사용자 수에 따른 규모 확장성',
-      startPage: 1,
-      endPage: 32,
-      contents: ' '
-    },
-    {
-      chapter: '2장. 계략적인 규모 추정',
-      startPage: 33,
-      endPage: 38,
-      contents: ' '
-    },
-    {
-      chapter: '3장. 시스템 설계 면접 공략법',
-      startPage: 39,
-      endPage: 50,
-      contents: ' '
+  const [assignments, setAssignments] = useState<BookTaskAssignment[]>([]);
+  const bookInfo = details.bookInfo;
+  const bookImgUrl = bookInfo.imageUrl;
+  const bookTitle = bookInfo.title;
+  const author = bookInfo.author;
+  const publisher = bookInfo.publisher;
+  const [isLoading, setLoading] = useState<boolean>(false);
+  const [trash, setTrash] = useState<number[]>([]);
+  const reloadAssignments = async () => {
+    if (details.weeks == nextRoundIdx) {
+      return;
     }
-  ]);
+    setAssignments(await getAssignments(details.id, nextRoundIdx));
+  };
+  useEffect(() => {
+    reloadAssignments();
+  }, []);
 
   const handleAddAssignment = () => {
     setAssignments([
       ...assignments,
       {
-        chapter: 'New Assignment',
-        startPage: 0,
-        endPage: 0,
-        contents: ''
-      }
+        id: null,
+        title: '과제명',
+        pageStart: 0,
+        pageEnd: 0,
+        description: ''
+      } as BookTaskAssignment
     ]);
     setEditingIndex(assignments.length);
   };
@@ -70,20 +78,94 @@ export function BookStudyTaskListModal({
   };
 
   const handleDuplicateAssignmentSwitchChange = (checked: boolean) => {
-    setEnableDuplicateAssignment(checked);
+    if (isLoading) {
+      return;
+    }
+    const configStudyReq = {
+      duplicated: checked
+    } as ConfigStudyReq;
+
+    configStudy(details.id, configStudyReq)
+      .then(() => {
+        setEnableDuplicateAssignment(checked);
+        setLoading(false);
+      })
+      .catch((error) => {
+        toast.error(error.response.data.error);
+        setLoading(false);
+      });
+
+    setLoading(true);
   };
 
   const handleSaveAssignment = (index: number) => {
-    // TODO: 과제 저장 로직 추가
-    // const updatedAssignments = [...assignments];
-    // updatedAssignments[index] = {
-    //   chapter: document.getElementById(`chapter-${index}`).value,
-    //   startPage: parseInt(document.getElementById(`start-page-${index}`).value),
-    //   endPage: parseInt(document.getElementById(`end-page-${index}`).value),
-    //   contents: document.getElementById(`content-${index}`).value
-    // };
-    // setAssignments(updatedAssignments);
-    // setEditingIndex(-1);
+    const assign = {
+      id:
+        parseInt((document.getElementById(`id-${index}`) as any).value) || null,
+      title: (document.getElementById(`title-${index}`) as any).value,
+      pageStart: parseInt(
+        (document.getElementById(`start-page-${index}`) as any).value
+      ),
+      pageEnd: parseInt(
+        (document.getElementById(`end-page-${index}`) as any).value
+      ),
+      description: (document.getElementById(`content-${index}`) as any).value
+    } as BookTaskAssignment;
+    assignments[index] = assign;
+
+    setAssignments(assignments);
+    setEditingIndex(-1);
+  };
+
+  const handleDeleteAssignment = (index: number) => {
+    const id = assignments.splice(index, 1)[0].id;
+    if (id !== null) {
+      trash.push(id);
+    }
+
+    setAssignments([...assignments]);
+    setEditingIndex(-1);
+  };
+  const handleStartVote = () => {
+    startVoting(details.id)
+      .then(() => {
+        toast.success('투표가 시작되었습니다.');
+        refresh();
+        setOpen(false);
+      })
+      .catch((error) => {
+        toast.error(error.response.data.error);
+      });
+  };
+
+  const saveBtnClickListener = () => {
+    if (isLoading) {
+      return;
+    }
+    Promise.all([
+      addAssignments(
+        details.id,
+        nextRoundIdx,
+        assignments.filter((a) => a.id === null)
+      ),
+      trash.length && removeAssignments(details.id, nextRoundIdx, trash),
+      editAssignments(
+        details.id,
+        nextRoundIdx,
+        assignments.filter((a) => a.id !== null)
+      )
+    ])
+      .then((response) => {
+        toast.success('과제 목록을 저장하였습니다');
+        return reloadAssignments();
+      })
+      .then(() => setLoading(false))
+      .catch((error) => {
+        toast.error(error.response.data.message ?? error.response.data.error);
+        setLoading(false);
+      });
+    setLoading(true);
+    setTrash([]);
   };
 
   return (
@@ -143,6 +225,7 @@ export function BookStudyTaskListModal({
                 index={index}
                 editingIndex={editingIndex}
                 handleSaveAssignment={handleSaveAssignment}
+                handleDeleteAssignment={handleDeleteAssignment}
                 setEditingIndex={setEditingIndex}
               ></BookStudyTaskForm>
             );
@@ -150,13 +233,16 @@ export function BookStudyTaskListModal({
           <div className="flex justify-center">
             <Button variant="ghost" onClick={handleAddAssignment}>
               <PlusIcon className="h-5 w-5" />
-              <span className="sr-only">Add Assignment</span>
+              <span className="sr-only">선택지 추가하기</span>
             </Button>
           </div>
         </div>
         <DialogFooter className="z-55">
           <div>
-            <Button>투표 생성하기</Button>
+            <Button onClick={saveBtnClickListener}>저장하기</Button>
+          </div>
+          <div>
+            <Button onClick={handleStartVote}>투표 시작하기</Button>
           </div>
         </DialogFooter>
       </DialogContent>
diff --git a/components/study/task/book-study-task-vote-modal.tsx b/components/study/task/book-study-task-vote-modal.tsx
index 099cbaa..2f3dffa 100644
--- a/components/study/task/book-study-task-vote-modal.tsx
+++ b/components/study/task/book-study-task-vote-modal.tsx
@@ -1,46 +1,47 @@
 'use client';
 
-import { useState } from 'react';
+import { Button } from '@/components/ui/button/button';
 import {
   Dialog,
   DialogContent,
   DialogTitle
 } from '@/components/ui/dialog/dialog';
-import { Button } from '@/components/ui/button/button';
 import { CheckIcon } from '@/components/ui/icon/icon';
+import { getAssignments } from '@/lib/api/study/assignments';
+import voteAssignment from '@/lib/api/study/vote';
+import { BookTaskAssignment } from '@/types/study/book-task-form';
 import { BookStudyTaskListFormProps } from '@/types/study/book-task-vote';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
 
 export function BookStudyTaskVoteModal({
   isOpen,
-  openChange
+  openChange,
+  details,
+  nextRoundIdx
 }: BookStudyTaskListFormProps) {
   const [firstChoice, setFirstChoice] = useState(-1);
   const [secondChoice, setSecondChoice] = useState(-1);
+  const [assignments, setAssignments] = useState<BookTaskAssignment[]>([]);
 
-  const items = [
-    {
-      id: 1,
-      title: '1장. 사용자 수에 따른 규모 확장성',
-      description: ' '
-    },
-    {
-      id: 2,
-      title: '2장. 계략적인 규모 추정',
-      description: ' '
-    },
-    {
-      id: 3,
-      title: '3장. 시스템 설계 면접 공략법',
-      description: ' '
+  const reloadAssignments = async () => {
+    if (details.weeks == nextRoundIdx) {
+      return;
     }
-  ];
-
+    setAssignments(await getAssignments(details.id, nextRoundIdx));
+  };
+  useEffect(() => {
+    reloadAssignments();
+  }, [details.votingProcess]);
   const handleFirstChoiceClick = (id: number) => {
     if (id === firstChoice) {
       setFirstChoice(-1);
       return;
     }
+    if (id === secondChoice) {
+      setSecondChoice(-1);
+    }
     setFirstChoice(id);
   };
 
@@ -49,13 +50,30 @@ export function BookStudyTaskVoteModal({
       setSecondChoice(-1);
       return;
     }
+    if (id === firstChoice) {
+      setFirstChoice(-1);
+    }
     setSecondChoice(id);
   };
 
   const handleSubmit = () => {
-    console.log('First choice:', firstChoice);
-    console.log('Second choice:', secondChoice);
-    console.log('제출');
+    if (firstChoice === -1) {
+      toast.error('1순위 투표는 필수 입니다.');
+      return;
+    }
+
+    voteAssignment(details.id, {
+      first: firstChoice,
+      ...(secondChoice !== -1 && { second: secondChoice })
+    })
+      .then(() => {
+        toast.success('투표를 완료하였습니다.');
+      })
+      .catch((error) => {
+        toast.error(error.response.data.error);
+      });
+
+    openChange(false);
   };
 
   return (
@@ -77,10 +95,12 @@ export function BookStudyTaskVoteModal({
           >
             <div className="flex gap-6">
               <p className="flex items-center justify-end text-lg"> 1순위 </p>
-              <p className="flex items-center justify-end text-lg"> 2순위 </p>
+              {details.duplicated === false && (
+                <p className="flex items-center justify-end text-lg"> 2순위 </p>
+              )}
             </div>
           </div>
-          {items.map((item) => (
+          {assignments.map((item) => (
             <div
               key={item.id}
               className="bg-card p-4 rounded-md flex justify-between items-center"
@@ -92,20 +112,22 @@ export function BookStudyTaskVoteModal({
               <div className="flex gap-4">
                 <Button
                   className={`flex items-center justify-center ${firstChoice === item.id ? 'bg-slate-800' : ''}`}
-                  onClick={() => handleFirstChoiceClick(item.id)}
+                  onClick={() => handleFirstChoiceClick(item.id!)}
                 >
                   <CheckIcon
                     className={`w-4 h-4 ${firstChoice === item.id ? 'text-slate-50' : ''}`}
                   />
                 </Button>
-                <Button
-                  onClick={() => handleSecondChoiceClick(item.id)}
-                  className={`flex items-center justify-center ${secondChoice === item.id ? 'bg-slate-800' : ''}`}
-                >
-                  <CheckIcon
-                    className={`w-4 h-4 ${secondChoice === item.id ? 'text-slate-50' : ''}`}
-                  />
-                </Button>
+                {details.duplicated === false && (
+                  <Button
+                    onClick={() => handleSecondChoiceClick(item.id!)}
+                    className={`flex items-center justify-center ${secondChoice === item.id ? 'bg-slate-800' : ''}`}
+                  >
+                    <CheckIcon
+                      className={`w-4 h-4 ${secondChoice === item.id ? 'text-slate-50' : ''}`}
+                    />
+                  </Button>
+                )}
               </div>
             </div>
           ))}
diff --git a/lib/api/algo/update-task-status.ts b/lib/api/algo/update-task-status.ts
index 931cf89..6694ec0 100644
--- a/lib/api/algo/update-task-status.ts
+++ b/lib/api/algo/update-task-status.ts
@@ -1,6 +1,6 @@
 import { getAuthenticationConfig } from '@/lib/utils';
-import axios from 'axios';
 import { UpdateTaskStatusReq } from '@/types/algo/update-task-status';
+import axios from 'axios';
 
 /**
  * 알고리즘 과제 해결 여부 갱신 API
diff --git a/lib/api/study/assignments.ts b/lib/api/study/assignments.ts
new file mode 100644
index 0000000..b4a3ecc
--- /dev/null
+++ b/lib/api/study/assignments.ts
@@ -0,0 +1,74 @@
+import { getAuthenticationConfig } from '@/lib/utils';
+import { BookTaskAssignment } from '@/types/study/book-task-form';
+import axios from 'axios';
+
+/**
+ * 과제목록 조회 API
+ */
+export async function getAssignments(
+  id: number,
+  idx: number
+): Promise<BookTaskAssignment[]> {
+  return axios
+    .get(
+      `${process.env.NEXT_PUBLIC_API_SERVER_URL}/api/v1/studies/${id}/assignments`,
+      { params: { roundIdx: idx } }
+    )
+    .then((response) => response.data);
+}
+
+/**
+ * 과제목록 추가 API
+ */
+export async function addAssignments(
+  id: number,
+  idx: number,
+  assignments: BookTaskAssignment[]
+): Promise<BookTaskAssignment[]> {
+  const token = localStorage.getItem('accessToken');
+
+  return axios
+    .post(
+      `${process.env.NEXT_PUBLIC_API_SERVER_URL}/api/v1/studies/${id}/assignments`,
+      { roundIdx: idx, assignments },
+
+      getAuthenticationConfig()
+    )
+    .then((response) => response.data);
+}
+
+/**
+ * 과제목록 수정 API
+ */
+export async function editAssignments(
+  id: number,
+  idx: number,
+  assignments: BookTaskAssignment[]
+): Promise<BookTaskAssignment[]> {
+  return axios
+    .put(
+      `${process.env.NEXT_PUBLIC_API_SERVER_URL}/api/v1/studies/${id}/assignments`,
+      { roundIdx: idx, assignments },
+      getAuthenticationConfig()
+    )
+    .then((response) => response.data);
+}
+
+/**
+ * 과제목록 삭제 API
+ */
+export async function removeAssignments(
+  id: number,
+  idx: number,
+  assignmentIds: number[]
+): Promise<BookTaskAssignment[]> {
+  return axios
+    .delete(
+      `${process.env.NEXT_PUBLIC_API_SERVER_URL}/api/v1/studies/${id}/assignments`,
+      {
+        ...getAuthenticationConfig(),
+        data: { roundIdx: idx, assignmentIds }
+      }
+    )
+    .then((response) => response.data);
+}
diff --git a/lib/api/study/config-study.ts b/lib/api/study/config-study.ts
new file mode 100644
index 0000000..cdd4bfc
--- /dev/null
+++ b/lib/api/study/config-study.ts
@@ -0,0 +1,22 @@
+import { getAuthenticationConfig } from '@/lib/utils';
+import { ConfigStudyReq } from '@/types/study/register-study';
+import axios from 'axios';
+
+/**
+ * 스터디설정 API
+ * @param {ConfigStudyReq} configStudyReq 스터디 설정 정보
+ *
+ */
+export default async function configStudy(
+  id: number,
+  configStudyReq: ConfigStudyReq
+): Promise<void> {
+  return axios
+    .patch(
+      `${process.env.NEXT_PUBLIC_API_SERVER_URL}/api/v1/studies/${id}/config`,
+
+      configStudyReq,
+      getAuthenticationConfig()
+    )
+    .then((response) => response.data);
+}
diff --git a/lib/api/study/start-voting.ts b/lib/api/study/start-voting.ts
new file mode 100644
index 0000000..c43f726
--- /dev/null
+++ b/lib/api/study/start-voting.ts
@@ -0,0 +1,16 @@
+import { getAuthenticationConfig } from '@/lib/utils';
+import axios from 'axios';
+
+/**
+ * 스터디 투표 시작 API
+ *
+ */
+export default async function startVoting(id: number): Promise<void> {
+  return axios
+    .post(
+      `${process.env.NEXT_PUBLIC_API_SERVER_URL}/api/v1/studies/${id}/start-voting`,
+      {},
+      getAuthenticationConfig()
+    )
+    .then((response) => response.data);
+}
diff --git a/lib/api/study/vote.ts b/lib/api/study/vote.ts
new file mode 100644
index 0000000..333ba18
--- /dev/null
+++ b/lib/api/study/vote.ts
@@ -0,0 +1,22 @@
+import { getAuthenticationConfig } from '@/lib/utils';
+import { VoteAssignmentReq } from '@/types/study/study-detail';
+import axios from 'axios';
+
+/**
+ * 과제 투표 API
+ * @param {VoteAssignmentReq} voteAssignmentReq 스터디 설정 정보
+ *
+ */
+export default async function voteAssignment(
+  id: number,
+  voteAssignmentReq: VoteAssignmentReq
+): Promise<void> {
+  return axios
+    .put(
+      `${process.env.NEXT_PUBLIC_API_SERVER_URL}/api/v1/studies/${id}/vote`,
+
+      voteAssignmentReq,
+      getAuthenticationConfig()
+    )
+    .then((response) => response.data);
+}
diff --git a/next.config.mjs b/next.config.mjs
index b97ca4f..9fbab95 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   swcMinify: true,
   async rewrites() {
     return [
diff --git a/package-lock.json b/package-lock.json
index fa18243..e490c4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2370,7 +2370,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.0.tgz",
       "integrity": "sha512-OBzy5WAj641k0AOSpKQtreDMe+isX0MQJ1IVyF03ucdF3DunOnROVrjWs8zsXUxC3zfZ6JL9HFVCUlMghz9dJw==",
-      "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.0",
         "@radix-ui/react-compose-refs": "1.1.0",
@@ -3191,9 +3190,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
-      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
diff --git a/types/study/book-task-form.ts b/types/study/book-task-form.ts
index 7b15b33..3e73cfe 100644
--- a/types/study/book-task-form.ts
+++ b/types/study/book-task-form.ts
@@ -1,8 +1,12 @@
 import { Dispatch, SetStateAction } from 'react';
+import { BookStudyDetails } from './study-detail';
 
 export interface BookStudyTaskListFormProps {
   isOpen: boolean;
   setOpen: (arg0: boolean) => void;
+  details: BookStudyDetails;
+  refresh: () => void;
+  nextRoundIdx: number;
 }
 
 export interface BookTaskForm {
@@ -11,13 +15,15 @@ export interface BookTaskForm {
   index: number;
   editingIndex: number;
   handleSaveAssignment: (index: number) => void;
+  handleDeleteAssignment: (index: number) => void;
   setEditingIndex: Dispatch<SetStateAction<number>>;
   children?: React.ReactNode;
 }
 
 export interface BookTaskAssignment {
-  chapter: string;
-  startPage: number;
-  endPage: number;
-  contents: string;
+  title: string;
+  id: number | null;
+  pageStart: number;
+  pageEnd: number;
+  description: string;
 }
diff --git a/types/study/book-task-vote.ts b/types/study/book-task-vote.ts
index 28370ec..186c5d9 100644
--- a/types/study/book-task-vote.ts
+++ b/types/study/book-task-vote.ts
@@ -1,4 +1,8 @@
+import { BookStudyDetails } from './study-detail';
+
 export interface BookStudyTaskListFormProps {
   isOpen: boolean;
   openChange: (arg0: boolean) => void;
+  details: BookStudyDetails;
+  nextRoundIdx: number;
 }
diff --git a/types/study/register-study.ts b/types/study/register-study.ts
index e60dc4d..7f17fb9 100644
--- a/types/study/register-study.ts
+++ b/types/study/register-study.ts
@@ -23,6 +23,9 @@ export interface RegisterStudyReq {
   penalty: number;
 }
 
+export interface ConfigStudyReq {
+  duplicated?: boolean;
+}
 export interface RegisterAlgorithmStudyReq extends RegisterStudyReq {
   difficultyBegin: number;
 
diff --git a/types/study/study-detail.ts b/types/study/study-detail.ts
index f9ae53e..2f4beef 100644
--- a/types/study/study-detail.ts
+++ b/types/study/study-detail.ts
@@ -1,5 +1,6 @@
 import { BookResult } from '../book/book-result';
-import { Spread } from './study';
+import { User } from '../user/user';
+import { BookTaskAssignment } from './book-task-form';
 
 export interface StudyDetailsAndRound {
   details: StudyDetails;
@@ -7,26 +8,38 @@ export interface StudyDetailsAndRound {
 }
 
 export interface StudyDetails {
+  id: number;
   studyType: string;
   name: string;
   introduce: string;
   headCount: number;
   capacity: number;
   penalty: number;
-  leaderId: number;
+  leader: User;
   reliabilityLimit: number;
   startDate: Date;
   weeks: number;
-  status: StudyStatus;
+  state: StudyStatus;
 }
 
 export interface BookStudyDetails extends StudyDetails {
-  book: BookResult;
+  bookInfo: BookResult;
+  duplicated: boolean;
+  votingProcess: VotingProcess;
+}
+
+export enum VotingProcess {
+  READY = 'READY',
+  ONGOING = 'ONGOING'
+}
+export interface VoteAssignmentReq {
+  first: number;
+  second?: number;
 }
 
 export interface BookRound extends Round {
   assignments: {
-    [assignmentId: number]: StudyAssignmentInfo;
+    [assignmentId: number]: BookTaskAssignment;
   };
   users: {
     [userId: number]: BookMemberInfo;
@@ -65,12 +78,6 @@ export interface AlgorithmProblemInfo {
   difficulty: number;
 }
 
-export interface StudyAssignmentInfo {
-  title: string;
-  content: string;
-  page: Spread;
-}
-
 export interface StudyMemberInfo {
   username: string;
 }