Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Feat: #BBB-124 기술 서적 스터디 과제 투표지 및 투표 모달 구현 #34

Merged
merged 2 commits into from
Sep 19, 2024
Merged

Feat: #BBB-124 기술 서적 스터디 과제 투표지 및 투표 모달 구현 #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cff9144
[BBB-124] ✨Feat: 기술 서적 스터디 과제 투표지 및 투표 모달 구현
platinouss Aug 17, 2024
d93456b
[BBB-124] Feat: 기술서적 스터디 API 연동
msjang4 Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 리뷰:

  1. 오타 수정:

    • 11번째 줄에서 type="id"가 아닌 type="text"가 되어야 함
    • 37번째 줄의 id="username"는 id="아이디"로, placeholder="아이디"는 placeholder="아이디를 입력하세요"와 같이 더 구체적인 내용이 좋을 수 있음

  2. 보안 상 고려:

    • 비밀번호는 평문으로 저장하지 말고 해싱하여 안전하게 저장하는 방법 검토

  3. UX 향상을 위한 제안:

    • 사용자가 비밀번호를 안전하게 입력할 수 있도록 비밀번호 입력 필드에 패스워드 가리기 기능 추가
    • 입력란에 유효성 검사 및 오류 메시지 표시

  4. 문구 변경:

    • "회원 가입" 버튼의 문구를 "계정 만들기"와 같이 더 자연스럽고 명확한 것으로 변경할 수 있음

  5. UI/UX 디자인 개선:

    • 컴포넌트 사이의 간격 및 레이아웃을 개선해서 UI가 더 통일되고 직관적이 되도록 함

  6. i18n(Internationalization)과 l10n(Localization):

    • 문자열을 변수화하여 다국어 지원을 용이하게 할 수 있음
    • 그러나 현재 코드 스니펫에 이에 대한 값보다 커버리지가 없으므로 당장은 이 부분을 적용하는 것은 어려울 수 있습니다.

코드 리뷰가 끝나셨습니다. 위의 제안 사항 중 필요한 것을 선택하여 코드를 개선해 보십시오.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 패치에 대한 간단한 코드 리뷰를 제공하겠습니다.

  1. 좋은 점:

    • 한글화 작업이 잘 이루어졌습니다.
    • JSX 마크업 및 스타일링이 명확하게 구성되어 있습니다.

  2. 개선 사항:

    • Input 컴포넌트의 type="id"는 기본적으로 지원하지 않는 속성입니다. 올바른 값을 입력해야 합니다 (text, email, password 등).
    • label 요소의 htmlFor 속성 값과 input 요소의 id 속성 값이 서로 일치해야 합니다. 현재 "username"과 "id"가 일치하지 않습니다.
    • 번역에 따라 "비밀번호 찾기"와 "회원 가입"이 맞는지 확인이 필요합니다. 보다 사용자 친화적인 번역이 가능할 수 있습니다.

  3. 버그 위험:

    • 입력 필드의 id 값과 htmlFor 값이 일치하지 않으면 화면 낭독기 또는 키보드 탐색 시에 접근성 문제가 발생할 수 있습니다.

개선을 위해서는 유효한 input type을 사용하고, id 값과 htmlFor 값이 일치하도록 수정하는 것이 좋습니다. 또한 번역 부분을 다시 검토하여 UX를 향상시킬 수 있는 방향으로 조정하는 것이 필요할 것으로 보입니다.

Expand Down
9 changes: 6 additions & 3 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

주요 변경 사항:

  1. 위치 이동 버튼에 클릭 이벤트가 추가되었습니다.
  2. 홈 화면의 정보 표시 부분이 주석 처리되어 있습니다.

개선 제안:

  1. 클릭 이벤트 핸들링을 위한 onClick 콜백 함수 내에 더 많은 유효성 검사를 추가해보세요.
  2. 로그인 정보를 나타내는 부분이 주석 처리되어 있으므로, 해당 정보를 다시 표시하도록 개선할 수 있습니다.
  3. CSS 클래스 명명에 일관성을 유지하는 것이 중요합니다. 코드베이스 전체에서 같은 방식으로 클래스를 명명하도록 하세요.

잠재적 버그:

  1. location 객체는 직접 수정되어 사용되었기 때문에 이것이 의도한 동작인지 확인해야 합니다.
  2. 주석 처리된 코드는 코드베이스를 혼란스럽게 할 수 있습니다. 왜 해당 부분이 주석처리 되었는지 이유를 알려주는 주석을 남기는 것이 좋습니다.

Expand Down
95 changes: 65 additions & 30 deletions app/study/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,21 @@ 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';

Expand All @@ -28,6 +35,11 @@ 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 [nextRoundIdx, setNextRoundIdx] = useState(0);

const handleStart = async () => {
try {
Expand All @@ -45,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
)) {
Expand All @@ -53,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 {
Expand All @@ -77,40 +93,59 @@ export default function StudyPage() {
}

return (
<div className="flex space-x-4 justify-center">
{showPostBoard ? (
<PostBoard></PostBoard>
) : (
<>
<div className="flex space-x-4 justify-center">
<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="mt-4">
{isParticipant ? (
canStart ? (
<Button onClick={handleStart} className="bg-cyan-300 w-full">
시작하기
</Button>
) : (
''
)
) : (
''
)
) : (
<JoinStudyDialog
<JoinStudyDialog
details={details}
studyId={studyId}
refresh={refresh}
/>
)}
<StudyAbout
details={details}
studyId={studyId}
refresh={refresh}
nextRoundIdx={nextRoundIdx}
users={round.users}
showPostBoard={showPostBoard}
setShowPostBoard={setShowPostBoard}
setShowBookStudyTaskListModal={setShowBookStudyTaskListModal}
setShowBookStudyTaskVoteModal={setShowBookStudyTaskVoteModal}
/>
)}
<StudyAbout
details={details}
users={round.users}
showPostBoard={showPostBoard}
setShowPostBoard={setShowPostBoard}
/>
</div>
</div>
</div>
{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>
</>
)}
</>
);
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 패치는 다음과 같은 개선점과 버그 리스크가 있습니다:

  1. 개선 제안:

    • 예기치 않게 노출될 수 있는 변수들을 줄이고 싶다면, PostBoard, StudyDashBoard, JoinStudyDialog을 컴포넌트화하여 재사용성을 높일 수 있습니다.
    • CSS 클래스명을 상수로 추출하여 중복 사용을 방지하거나 재사용 가능한 CSS 모듈을 고려할 수 있습니다.

  2. 버그 리스크:

    • handleStart 함수에서 발생할 수 있는 오류 처리가 충분히 강력하지 않을 수 있습니다. 에러 핸들링을 더 강화해야 합니다.
    • setDetails와 setRound 등의 상태 업데이트 시 비동기 문제가 발생할 수 있으니 주의해야 합니다.

위의 내용을 참고하여 코드를 보다 안정적이고 유지 보수가 쉬운 상태로 개선할 수 있습니다.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 패치의 간략한 코드 리뷰입니다:

버그 리스크:

  1. details와 round 상태를 업데이트하는 로직에서 데이터 무결성 검사가 부족할 수 있습니다.
  2. 콜백 함수에서 오류 처리가 충분하지 않을 수 있습니다.
  3. 상태 관리가 여러 개의 useState로 이루어지므로, 상태 업데이트의 일관성이 유지되지 않을 수 있습니다.

개선 제안:

  1. 세부 정보 및 라운드에 대한 서버에서 추가적인 데이터 유효성 검사를 수행하는 로직을 포함하여 완료성을 확보하세요.
  2. 에러 처리를 보강하고 비동기 함수에 대한 오류 핸들링을 강화하세요.
  3. 상태 관리를 단일 객체에 통합하여 상태 업데이트의 일관성을 유지해야 합니다.

이외에도 UI/UX 측면에서 개선 사항이 필요할 수 있습니다.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 리뷰:

  1. AlgorithmRound과 Round은 같은 의미이므로, 컴포넌트 내부에서 사용되는 이름을 통일하면 좋습니다.
  2. 초기 상태를 나타내는 state 변수가 많이 선언되어 있습니다. 이는 관리가 복잡해질 수 있으니 필요한 경우 그룹화하는 방법을 고려해볼 수 있습니다.
  3. JSX에서 비어 있는 문자열('') 대신에 컨디셔널 렌더링을 사용하여 가독성을 높일 수 있습니다.
  4. 조건부 렌더링을 위한 state 변수(showPostBoard, showBookStudyTaskListModal, showBookStudyTaskVoteModal)들은 적절히 관리되고 있어야 하며 업데이트 로직이 정확해야 합니다.
  5. 컴포넌트 구조 및 스타일 클래스명, 멤버 함수 추가 등에 대한 변경 사항은 해당 앱의 디자인과 일관성을 유지하면서 결정되어야 합니다.

개선 사항의 적용 여부 및 오류 위험이나 보안 문제는 전체 코드 범위와 애플리케이션 동작 방식을 고려하여 판단할 수 있습니다.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드는 다음과 같은 개선 및 버그 위험 사항이 있습니다:

  1. 버그 위험:

    • showPostBoard와 관련된 상태 값들이 적절히 처리되지 않았을 수 있음.
    • 조건문 내의 표현식에서 변수 이름 불일치 (studyDetailsAndRound.details.leaderId, studyDetailsAndRound.details.leader.id) 발생 가능성 있음.

  2. 개선 제안:

    • StudyType 열거형 대신, 직접 비교할 문자열을 사용하여 비교하면 가독성을 향상시킬 수 있음.
    • 코드 구조를 보다 읽기 쉽게 구성할 수 있도록 JSX 마크업 정렬 및 들여쓰기를 일관되게 유지하는 것이 좋음.
    • 페이지에 들어가는 각 컴포넌트들을 작은 단위로 분할하고 컴포넌트 간의 연결을 간소화하여 가독성을 향상시킬 수 있음.

  3. 예외처리:

    • handleStart 메서드의 서버 호출 시 예외를 적절히 처리하고 오류 핸들링하는 부분을 추가하는 것이 중요함.

이러한 점들을 고려하여 코드를 개선하고 디버깅할 수 있도록 구조를 개선하는 것이 좋습니다.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 리뷰에서 다음과 같은 사항을 고려할 수 있습니다:

버그 위험:

  1. studyDetailsAndRound.details.leader.id 에서 leader가 null인 경우를 처리해야 함.
  2. 조건문에서 if (studyDetailsAndRound.details.state === StudyStatus.READY)와 같이 상수 값과 비교할 때, null 체크가 필요할 수 있음.

개선 제안:

  1. 코딩 스타일을 통일시키기 위해 들여쓰기를 일관되게 수정.
  2. 변수명을 좀 더 명확하게 지으면 코드의 가독성이 향상될 수 있음.
  3. UI 컴포넌트 로직을 개선하기 위해 상태 관리 및 렌더링 로직을 확인할 필요가 있음.
  4. 코드 중복 or 유사한 부분을 함수로 추출하여 재사용 가능하도록 리팩토링할 수 있음.

위의 내용들을 고려하여 코드를 개선하고 수정함으로써 프로그램의 안전성을 높일 수 있습니다.

2 changes: 1 addition & 1 deletion components/book/book-search-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 리뷰:

  1. import문의 순서를 일관되게 유지해야 합니다.
  2. 코드 품질을 유지하고 확장성을 강화하기 위해 주석 작성을 고려하십시오.
  3. BookSearchTableProps import 문을 여러 번 사용하는 대신, 한 번만 import 하는 것이 좋습니다.
  4. 함수 or 변수 명명 규칙에 대한 일관된 접근 방식을 유지하는 것이 중요합니다.
  5. 에러 처리 또는 예외 상황에 대한 추가 로직이 필요할 수 있습니다.

위 수정 사항을 고려하여 코드 품질 및 유지보수성을 향상시킬 수 있습니다.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 리뷰:

  1. 잠재적 버그 위험:

    • import 구문의 순서가 변경되었는데, 빌드 도구나 런타임 환경에서 오류를 일으킬 수 있습니다.
    • setStudyBook 함수를 호출한 후에 toast 함수를 바로 호출하므로, 네트워크 요청이 비동기적으로 이루어질 경우 토스트 메시지 전에 결과가 나와 문제가 될 수 있습니다.

  2. 개선 제안:

    • import 구문을 코드 파일 상단에 모아 통일성 있게 작성하는 것이 좋습니다.
    • setStudyBook 함수 호출 후 콜백으로 성공/실패 여부에 따라 토스트 메시지를 보여주도록 수정하면 사용자 경험이 향상될 수 있습니다.

  3. 추가적인 확인 사항:

    • setStudyBook 및 toast 함수의 사용법과 의미를 정확히 이해하고 있는지 확인이 필요합니다.
    • 다른 부분의 코드에서 해당 컴포넌트 및 함수들이 어떻게 사용되는 지 확인하고 일관성 유지에 주의해야 합니다.

Expand Down
65 changes: 43 additions & 22 deletions components/study/dashboard/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,29 @@ 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,
setShowPostBoard
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;
}) {
const endDate = new Date(details.startDate);
endDate.setDate(endDate.getDate() + details.weeks * 7);
Expand Down Expand Up @@ -55,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>
Expand All @@ -71,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">
Expand All @@ -91,25 +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>과제 선택지 수정 </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>과제 투표 </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>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 리뷰에서는 몇 가지 개선 사항과 버그 리스크가 있습니다:

  1. ShowPostBoard 및 NextRoundIdx 변수:

    • ShowPostBoard (포스트 보드 표시) 변수 뒤에 쉼표가 빠져있습니다.
    • NextRoundIdx 변수가 추가되었는데, 해당 변수의 역할이 코드에 어떻게 영향을 주는지 주석으로 간단히 추가하는 것이 도움이 됩니다.

  2. details.state와 details.startDate.toLocalDateString():

    • 'Status'에서 'State'로 변경된 변수에 대한 처리가 필요합니다.
    • endDate.toLocaleDateString() 내 메소드에 대한 인자 'fr-CA' 추가로 지정하여 로케일 설정이 되도록 합니다.

  3. Book 관련 기능:

    • <span>자바의 정석</span> 부분은 bookInfo.title를 사용하도록 수정되어야 합니다.
    • 과제 선택 및 투표 관련 아이콘이 항상 렌더되도록 로직 수정이 필요합니다.
    • onClick 함수에 대한 구현이 없기 때문에 해당 기능에 적절한 기능을 구현해야 합니다.

이외에도 코드 반복을 최소화하고 확장성과 가독성을 향상시킬 수 있는 방법을 탐색해보시는 것이 좋겠습니다.

Expand Down
12 changes: 6 additions & 6 deletions components/study/dashboard/book-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -21,7 +21,7 @@ export function BookRow({
studyId: number;
roundIdx: number;
userId: number;
assignment: StudyAssignmentInfo;
assignment: BookTaskAssignment;
user: BookMemberInfo;
}) {
const [isLoading, setIsLoading] = useState(false);
Expand All @@ -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">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. BookTaskAssignment로 속성 유형 변경 후 BookMemberInfo가 삭제되었습니다. 이러한 변화에 대해 현재 코드에서 BookMemberInfo 멤버들을 어떻게 사용하는지 확인하여야 합니다.
  2. assignment.title, assignment.content, assignment.pageStart, assignment.pageEnd에 접근하기 전에 해당 속성이 null이 아닌지 확인 (예: assignment?.title)
  3. isLoading은 현재 사용되지 않는 변수처럼 보입니다. 필요 없는 변수인 경우 제거하는 것이 좋습니다.
  4. useRecoilState 호출이 남아 있는지 확인하십시오. 불필요한 상태 관리 기능은 코드를 혼란스럽게 할 수 있습니다.
  5. 코드 스타일 일관성을 위해 들여쓰기와 공백을 확인하십시오.

이 코드 리뷰 참고 사항은 코드 안정성 및 유지보수에 도움이 될 수 있습니다.

Expand Down
Loading
Loading