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-99 서적 스터디 대시보드 디자인 #33

Merged
merged 3 commits into from
Aug 28, 2024
Merged

Feat: #BBB-99 서적 스터디 대시보드 디자인 #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ebbd0e
[BBB-99] Build: 배포용 도커 파일 추가
msjang4 Aug 12, 2024
5ecd73b
[BBB-99] Feat: 책 스터디 대시보드 및 공지사항, 게시글 UI
msjang4 Aug 13, 2024
df78ee3
[BBB-99] Feat: 메인페이지 디자인
msjang4 Aug 14, 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
1 change: 1 addition & 0 deletions .dockerignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.env
Copy link

Choose a reason for hiding this comment

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

파일 패치에 대한 코드 리뷰:

  1. 추가된 줄인 ".env"가 표시되지만 그 이유나 콘텐츠에 대한 설명이 없어 개발자들이 변경 내용을 이해하기 어려울 수 있습니다.
  2. ".env" 파일의 끝에 새로운 줄이 없는 것은 유닉스 스타일의 텍스트 파일에서 예상되는 규칙이며, 이것이 수정되어야 하는 것은 아닙니다.
  3. 보안을 고려하여 .env 파일이 민감한 정보를 포함하고 있는 경우, 접근 제어 및 암호화 방법을 고려해야 합니다.

47 changes: 47 additions & 0 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
FROM node:20-alpine AS base

FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json package-lock.json ./
RUN npm ci

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
ENV NEXT_PUBLIC_API_SERVER_URL https://www.dev-study.com
RUN npm run build

FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
CMD node server.js
Copy link

Choose a reason for hiding this comment

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

코드 리뷰:

  1. 위험:
  • APK를 통한 libc6-compat을 추가하는 부분에 대해 특정 운영체제와 버전 호환성 문제가 발생할 수 있습니다.
  • 사용자 및 그룹 설정에서 UID 및 GID 충돌 가능성이 있습니다.
  1. 개선 사항:
  • 환경 변수를 관리하는 데 도움이 되도록 .env 파일을 사용하고 ENV 구문으로 이를 가져와 사용할 수 있습니다.
  • COPY 명령어에서 전체 디렉터리를 복사하지 않고 필요한 파일만 복사하여 이미지의 크기를 줄일 수 있습니다.
  • 최신 Next.js 버전 및 보안 업데이트를 유지하기 위해 기반 이미지를 주기적으로 업데이트할 수 있습니다.
  • 새로운 버전을 배포할 때 정확성을 확인하기 위해 CI/CD를 구축하면 좋습니다.

38 changes: 37 additions & 1 deletion app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,50 @@
'use client';

import { Button } from '@/components/ui/button/button';
import { StudyIcon } from '@/components/ui/icon/icon';
import { userState } from '@/recoil/userAtom';
import { VideoIcon } from 'lucide-react';
import { useRecoilState } from 'recoil';

export default function Home() {
const [myData, setMyData] = useRecoilState(userState);
return (
<>
<div className="text-center">
{/* <div className="text-center">
{myData?.username + '로 로그인된 상태입니다.'}
</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">
<b>개발자들의</b>
<b>Dev&apos;s</b>
<b>깊이 있는</b>
<b>Depth</b>
<b>스터디</b>
<b>Study</b>
</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">
<StudyIcon className="w-7 h-7"></StudyIcon>
<p>스터디 시작하기</p>
</div>
</Button>
<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">
<VideoIcon className="w-7 h-7"></VideoIcon>
<p>강의 둘러보기</p>
</div>
</Button>
</div>
</div>
{/* <div className="relative">
<img
src="gray-hamster.png"
alt="hamster with laptop"
className="w-full max-w-md"
/>
</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. 라이브러리를 import할 때, 모듈 이름이 일관성 없이 혼용되고 있습니다. import { userState } from '@/recoil/userAtom'; 와 같은 부분에서 '@/...'을 사용함에도 불구하고 import { VideoIcon } from 'lucide-react';는 바로 상대 경로를 사용합니다. 모든 import 구문을 동일한 스타일로 통일하는 것이 좋습니다.

  2. 이미 지정된 JSX 요소가 주석 처리되어 있습니다. 코드에 영향을 미치지 않는 주석은 제거하여 가독성을 높일 수 있습니다.

  3. CSS 클래스의 사용을 보다 일관된 방식으로 수정할 필요가 있습니다. 예를 들어, className="ml-12 text-5xl grid grid-rows-3 grid-cols-2 gap-x-12 gap-y-3"와 같은 인라인 스타일 대신 CSS 파일에 스타일을 정의하고 클래스를 사용하는 방법을 고려해 보세요.

  4. 이미지 소스 'gray-hamster.png'가 상대 경로로 제공되는데, 이 경로가 정확한지 확인하고 이미지를 올바르게 로드하는지 확인하세요.

  5. UI 구조를 간결하게 유지하면서 컴포넌트를 재사용 가능하도록 만들어야 합니다. 코드를 병합하거나 확장시 인터페이스가 유연하게 작동하도록 해야 합니다.

  6. 버튼 디자인이나 아이콘의 크기 및 디자인 일관성을 확인하고 개선해야 할 수 있습니다.

  7. 중복되는 CSS 클래스가 많이 사용되므로 효율적으로 관리할 수 있는 방안을 고려해 보세요.

  8. React 요소에 key 속성을 명시적으로 추가하는 것이 좋습니다. 이는 성능 최적화 및 리렌더링 관련 문제를 방지할 수 있습니다.

Copy link

Choose a reason for hiding this comment

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

주로 개선이 필요한 사항:

  1. use 대신에 import를 사용했는데, 이것은 오타일 가능성이 있습니다. 코드 상에서 'use client';를 import client from 'client';와 같이 수정하십시오.
  2. 주석 처리된 부분 중 정보가 유용하지 않다면 제거하는 것이 좋습니다.
  3. 이미지인 "gray-hamster.png" 파일의 경로가 상대 경로인지 절대 경로인지 확인하고 설명을 추가하십시오.
  4. 컴포넌트 이름은 Button 및 VideoIcon 등 앱 내 다른 컴포넌트와 일관성있게 명명해야 합니다.
  5. 클래스 이름과 스타일링이 비교적 하드 코딩되어 있기 때문에, 스타일링을 더 유연하게 관리할 수 있는 방법을 고려해 보세요.

잠재적 버그 위험:

  1. 이미지 소스 경로가 정확한지 확인하고 올바르게 연결되었는지 테스트합니다.
  2. 코드를 수정하고나서 UI 간 조화가 잘 맞춰졌는지 확인해야 합니다.
  3. StudyIcon 및 VideoIcon 컴포넌트에서 오류를 발생시킬 여지가 있는 데이터 포맷을 전달하거나 사용하는지 검토하세요.

Copy link

Choose a reason for hiding this comment

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

코드 리뷰 요약:

  1. 오타: 'use client' -> 'useContext'
  2. 올바르지 않은 모듈 이름 ('userState') 수정 필요
  3. 이미지 소스 경로 정확히 지정 필요
  4. 주석 처리한 코드는 삭제하거나 필요에 따라 재사용 고려
  5. UI 구성 및 스타일 일관성 확인

이외에는 주로 코드는 잘 작성되어 있으며 보다 안정적인 코드를 위해 위의 사항들을 검토 및 수정하시면 좋을 것 같습니다.

Expand Down
91 changes: 91 additions & 0 deletions app/post/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
'use client';
import {
Avatar,
AvatarFallback,
AvatarImage
} from '@/components/ui/avatar/avatar';
import { Button } from '@/components/ui/button/button';
import { Label } from '@/components/ui/label/label';
import { Textarea } from '@/components/ui/textarea/textarea';

export default function Post() {
return (
<div className="flex px-4 py-6 md:px-6 lg:py-16 md:py-12 ">
<article className="prose prose-gray mx-auto dark:prose-invert w-[600px]">
<div className="space-y-2 not-prose mb-3">
<h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl lg:leading-[3.5rem]">
스터디 입장 전 필독
</h1>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<Avatar className="w-8 h-8 border">
<AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div className="text-sm font-medium">멘토</div>
</div>
<div className="text-muted-foreground text-sm">2024. 08. 13</div>
</div>
</div>
<p>1. 9시 1분은 9시가 아니다</p>
<p>2. 실행은 수직적 문화는 수평적</p>
<p>3. 잡담을 많이 나누는 것이 경쟁력이다</p>
<p>4. 휴가나 퇴근 시 눈치주는 농담을 하지 않는다</p>
<p>5. 보고는 팩트에 기반한다</p>
<p>6. 회식은 100% 자율적으로 참석한다</p>
<br></br>
<h2 className="text-lg">댓글</h2>
<div className="space-y-4 mt-3">
<div className="flex items-start gap-4">
<Avatar className="w-10 h-10 border">
<AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div className="grid gap-1">
<div className="font-medium">장민석</div>
<div className="text-muted-foreground">
전 격주로 할 것 같은데 가능할까요?
</div>
</div>
</div>
<div className="flex items-start gap-4">
<Avatar className="w-10 h-10 border">
<AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div className="grid gap-1">
<div className="font-medium">이현종</div>
<div className="text-muted-foreground">확인했습니다!</div>
</div>
</div>
<div className="flex items-start gap-4">
<Avatar className="w-10 h-10 border">
<AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div className="grid gap-1">
<div className="font-medium">송승훈</div>
<div className="text-muted-foreground">넵 확인했습니다</div>
</div>
</div>
</div>
<div className="mt-8">
<form className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="comment">댓글 추가...</Label>
<Textarea id="comment" placeholder="..." rows={3} />
</div>
<div className="flex justify-end ">
<Button
type="submit"
className="hover:bg-gray-600 bg-gray-900 text-white"
>
작성
</Button>
</div>
</form>
</div>
</article>
</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. 접근성: 시각적인 요소나 마크업 구조를 검토하여 웹 사이트의 전반적인 접근성을 향상시킬 수 있습니다.
  3. 보안: 사용자 제공 데이터 처리 및 보안 측면을 고려해야 합니다.
  4. 최적화: 이미지 압축, 코드 번들링 등을 통해 웹 성능 최적화를 고려할 수 있습니다.

위 사항들을 고려하여 코드를 개선하고 안전성 및 효율성을 향상시킬 수 있습니다.

Copy link

Choose a reason for hiding this comment

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

이 코드에는 몇 가지 향상점과 버그 위험이 있습니다:

  1. Accessibility: <br></br> 대신 <br />를 사용하여 self-closing 태그 사용 권장.
  2. 의미 있는 제목(H1): 페이지 제목인 "스터디 입장 전 필독"을 포함한 내용을 <h1> 태그로 묶으면 SEO 및 접근성 측면에서 도움이 됨.
  3. 마크업 구조 분리: 구조에 따라 컴포넌트 분리 고려해 볼만 함 (예: PostHeader, Comment 등).
  4. 중복 코드 제거: Avatar Image와 AvatarFallback 부분을 함수나 변수로 추출하여 중복 제거.
  5. CSS 클래스 정리: CSS 클래스들을 사용할 때 일관된 순서 및 네이밍 규칙 사용.
  6. Form Validation 추가: 작성 버튼 클릭 시 댓글 입력 필드를 valid/invalid 여부에 따라 처리하기 위한 validation 추가 고려.

이러한 수정 사항을 고려하면 코드의 가독성과 유지 관리가 향상될 수 있습니다.

Copy link

Choose a reason for hiding this comment

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

코드 리뷰 요약:

  1. 잠재적 버그 위험:

    • <br></br>: React에서 <br> 태그는 닫는 태그를 사용하지 않습니다. 대신 <br /> 를 사용해야 합니다.

  2. 개선 제안:

    • CSS 클래스 관리를 위해 classnames 패키지 사용 고려.
    • 텍스트 내용이 길어질 가능성이 있다면 react-intl 또는 i18next와 같은 패키지를 사용하여 다국어 지원을 고려.
    • Avatar 컴포넌트의 이미지 로딩 실패에 대비한 오류 처리 추가.
    • 코드 일관성을 위해 모든 문자열은 한 곳에 집중하는 방식으로 관리.

  3. 기타 제안:

    • 코드 중복을 줄이기 위해 상수로 정의할 부분이 있는지 확인.
    • 컴포넌트들을 작게 분리하여 재사용성을 높일 수 있도록 구조 변경 고려.

번역하시고 어떤 질문이 있으실까요?

33 changes: 20 additions & 13 deletions app/study/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,14 @@ 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 { Button } from '@/components/ui/button/button';
import Spinner from '@/components/ui/spinner/spinner';
import getStudyDetails from '@/lib/api/study/get-details';
import startStudy from '@/lib/api/study/start';
import { userState } from '@/recoil/userAtom';
import {
AlgorithmRound,
StudyDetails,
StudyStatus
} from '@/types/study/study-detail';
import { Round, StudyDetails, StudyStatus } from '@/types/study/study-detail';
import { toast } from 'react-toastify';
import { useRecoilState } from 'recoil';

Expand All @@ -25,11 +22,12 @@ export default function StudyPage() {
const studyId = Number(params.id);

const [details, setDetails] = useState<StudyDetails | undefined>();
const [round, setRound] = useState<AlgorithmRound | undefined>();
const [round, setRound] = useState<Round | undefined>();
const [isParticipant, setIsParticipant] = useState(false);
const [canStart, setCanStart] = useState(false);
const [myData, setMyData] = useRecoilState(userState);
const [trigger, setTrigger] = useState(Date.now());
const [showPostBoard, setShowPostBoard] = useState(false);

const handleStart = async () => {
try {
Expand Down Expand Up @@ -80,12 +78,16 @@ export default function StudyPage() {

return (
<div className="flex space-x-4 justify-center">
<StudyDashBoard
details={details}
studyId={studyId}
round={round}
setRound={setRound}
/>
{showPostBoard ? (
<PostBoard></PostBoard>
) : (
<StudyDashBoard
details={details}
studyId={studyId}
round={round}
setRound={setRound}
/>
)}
<div className="mt-4">
{isParticipant ? (
canStart ? (
Expand All @@ -102,7 +104,12 @@ export default function StudyPage() {
refresh={refresh}
/>
)}
<StudyAbout details={details} users={round.users} />
<StudyAbout
details={details}
users={round.users}
showPostBoard={showPostBoard}
setShowPostBoard={setShowPostBoard}
/>
</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. Round과 같은 새로운 타입의 AlgorithmRound에 대한 변경이 진행되었습니다.
  2. showPostBoard 및 setShowPostBoard state 변수가 추가되었습니다.
  3. handleStart 함수 내 처리된 예외처리가 부족할 수 있습니다.

개선 제안:

  1. handleStart 함수에서 더 많은 예외 처리를 추가하여 예상치 못한 상황에 대비합니다.
  2. 코드 중복을 피하고 가독성을 높이기 위해 공통 컴포넌트 생성을 고려할 수 있습니다.
  3. 상황에 따라 코드 주석을 추가하여 다른 개발자들이 코드를 이해하기 쉽게 합니다.

주의할 사항:

  • Round과 AlgorithmRound 타입 간 호환성 유의 (필요 시 API 및 타입 정의 업데이트)
  • 새로운 state 변수인 showPostBoard가 어떻게 사용되는지 세심히 검토

전체적으로, 코드는 보수적이며 새 기능 추가 및 코드 리팩터링에 관한 개선점이 존재합니다.

Copy link

Choose a reason for hiding this comment

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

코드 리뷰 요소:

  1. StudyPage 함수 컴포넌트에서 사용되는 상태 showPostBoard는 게시판을 표시하는 데 사용됩니다. 이 상태의 목적이 명확하게 드러나지 않으므로 변수명을 더 명확하게 바꾸어 주십시오.

  2. setTrigger가 현재 사용되지 않습니다. 불필요한 변수일 수 있으니, 필요 없으면 삭제하거나 목적에 맞게 사용하도록 고려해 보시기 바랍니다.

  3. API 호출 시 에러 핸들링이 부족합니다. 네트워크 오류 등의 문제가 발생할 경우 해당 부분을 어떻게 처리할지 고려해보세요.

  4. handleStart 함수 내의 에러 핸들링이 충분하지 않다면, 더 강화시킬 필요가 있습니다.

  5. 조건문 안의 JSX 코드가 확장될 수 있는 가능성을 고려하고 미리 구조를 점검하여 추가 수정을 용이하게 만드는 것이 좋습니다.

  6. CSS 클래스 이름을 하드 코딩하는 대신, TailwindCSS의 동적 클래스나 classNames 패키지와 같은 방법으로 관리할 수 있도록 고려해 보세요.

  7. React Hook의 의존성 배열을 업데이트하십시오. 아래 리액트 컴포넌트 함수를 참조하세요.

    useEffect(() => {
  // side effects
}, [round, showPostBoard]); // 이 곳에 관련된 상태 변수 추가

  8. 현재 코드에서는 getStudyDetails와 startStudy의 사용 방식 및 반환 값에 대한 정보가 부족합니다. 이 동작들이 올바르게 작동하고 있는지 확인하고 예외 상황을 다룰 수 있는지 확인하세요.

이상입니다.

Copy link

Choose a reason for hiding this comment

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

이 코드 패치의 리뷰를 진행하겠습니다.

  1. 개선 사항:
  • 코드 확장성을 고려하여, 추가 모듈 및 기능이 필요할 경우 대비하여 적절한 모듈화를 고려해 볼 수 있습니다.
  • 현재는 상태 관리에 Recoil을 사용하고 있는데, Context API나 Redux와 같은 다른 상태 관리 라이브러리로도 변경 가능한지 고려해볼 수 있습니다.
  • 명확한 오류 처리가 중요한데, handleStart 내부에서 예외 처리가 충분한지 확인해야 합니다.
  1. 버그/위험 요소:
  • refresh 함수는 선언되지 않았는데 사용되고 있습니다. 이 부분에 대해서 정의가 필요합니다.
  • 컴포넌트 간 데이터 흐름과 의사소통 방법이 명확하지 않습니다. 이로 인한 잠재적인 버그 발생 가능성이 있습니다.
  1. 코드 스타일:
  • 변수명 일관성과 가독성을 높일 수 있도록 변수 명을 명확하게 지어주신 점이 좋습니다.
  • 코드의 가독성을 더 향상시키기 위해 주석을 추가하는 것도 고려해볼 만합니다.

코드 자체는 보다 구조적이며 가독성이 높은 편이지만, 위에서 언급한 부분들을 고려하여 더욱 안전하고 유지보수가 용이한 코드로 개선하는 것이 좋습니다.

Expand Down
57 changes: 56 additions & 1 deletion components/study/dashboard/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,25 @@ import {
AvatarFallback,
AvatarImage
} from '@/components/ui/avatar/avatar';
import {
BellIcon,
BoxIcon,
FilePenIcon,
LayoutGridIcon
} from '@/components/ui/icon/icon';
import { StudyType } from '@/constants/study/study';
import { StudyDetails, StudyMemberInfo } from '@/types/study/study-detail';

export default function StudyAbout({
details,
users
users,
showPostBoard,
setShowPostBoard
}: {
details: StudyDetails;
users: { [userId: number]: StudyMemberInfo };
showPostBoard: boolean;
setShowPostBoard: (arg0: boolean) => void;
}) {
const endDate = new Date(details.startDate);
endDate.setDate(endDate.getDate() + details.weeks * 7);
Expand All @@ -21,8 +32,26 @@ export default function StudyAbout({
<h2 className="text-xl font-bold">소개</h2>
<SettingsIcon className="w-5 h-5 text-muted-foreground" />
</div>

<p className="mt-2 text-muted-foreground">{details.introduce}</p>

<div className="mt-4 space-y-2">
<div
onClick={() => setShowPostBoard(!showPostBoard)}
className="group w-fit hover:text-gray-900 text-blue-600 flex items-center space-x-2"
>
{showPostBoard ? (
<>
<LayoutGridIcon className="group-hover:stroke-black stroke-blue w-5 h-5 text-muted-foreground"></LayoutGridIcon>
<b>대시보드 </b>
</>
) : (
<>
<BellIcon className="group-hover:stroke-black stroke-blue w-5 h-5 text-muted-foreground"></BellIcon>
<b>공지사항 </b>
</>
)}
</div>
<div className="flex items-center space-x-2">
<ActivityIcon className="w-5 h-5 text-muted-foreground" />
<b>
Expand Down Expand Up @@ -57,6 +86,32 @@ export default function StudyAbout({
<b>{details.reliabilityLimit}</b>
<span>이상</span>
</div>
{StudyType[details.studyType as keyof typeof StudyType] ===
StudyType.BOOK && (
<>
<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>
</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>
</>
)}
</div>
<div className="mt-6">
<h3 className="text-lg font-bold">
Copy link

Choose a reason for hiding this comment

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

이 코드에 대한 간단한 코드 리뷰:

  1. 잠재적 버그 위험:

    • StudyAbout 컴포넌트에 있는 빈 onClick 핸들러(() => {})는 아무 작업도 하지 않으므로, 클릭 이벤트를 처리해야 할 필요가 있습니다.

  2. 개선 제안:

    • TypeScript를 사용하여 정적 타입 검사를 강화할 수 있습니다.
    • 핸들러 함수 내에서 상태 변경 전에 이전 상태를 복사하여 변경하는 방식을 고려할 수 있습니다(불변성 유지).
    • UI 컴포넌트 관리를 단순화하기 위해 상태 관리 라이브러리(ex: Redux, Recoil) 고려할 수 있습니다.
    • 주석 (// TODO details.book.title로 변경) 에 명시된 작업을 완료하는 것이 좋습니다.

  3. 기타:

    • JSX의 적절한 구조 및 가독성을 유지하기 위해 요소 중첩과 들여쓰기를 조정할 수 있습니다.
    • CSS 클래스 이름을 변수로 관리하거나 Tailwind CSS의 동적 클래스를 활용하여 중복을 줄일 수 있습니다.

이것은 간략한 코드 리뷰이며, 완전한 분석을 위해서는 더 많은 시간과 코드 베이스를 살펴보아야 할 수 있습니다.

Copy link

Choose a reason for hiding this comment

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

이 코드 패치는 어플리케이션의 스터디 페이지 구성에 대한 기능 확장을 포함하고 있습니다.

잠재적인 문제:

  1. showPostBoard를 토글하기 위해 사용되는 setShowPostBoard 함수가 비어있는 상태로 전달될 수 있습니다. 이를 방지하기 위해 null 체크나 유효성 검사를 수행하는 것이 중요합니다.
  2. 클릭 핸들러 함수인 onClick={() => {}} 는 아무런 동작도 하지 않음으로, 해당 이벤트 처리가 필요없는 경우 삭제하는 것이 좋습니다.
  3. 주석이 명확한 정보를 제공하지 않거나 업데이트가 필요한 사례가 있습니다 ("TODO: details.book.title로 변경").

개선 제안:

  1. 함수 컴포넌트 내부의 중복되는 JSX 코드를 컴포넌트화하여 가독성을 높일 수 있습니다.
  2. CSS 클래스의 네이밍을 통일하고 일관된 패턴을 적용하여 유지보수성을 향상시킬 수 있습니다.

주요 강점:

  1. ES6 구문과 TypeScript의 타입 지원을 사용하여 코드의 안정성을 높였습니다.
  2. JSX 요소와 CSS 클래스를 잘 활용하여 화면 레이아웃을 구성하고 있습니다.

전반적으로 이 코드는 잘 구조화되어 있으며, 개선할 부분은 주로 예외 처리와 유지보수 용이성에 관련되어 있습니다.

Copy link

Choose a reason for hiding this comment

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

이 코드 패치의 짧은 코드 검토는 다음과 같습니다:

  1. 개선 제안:

    • 함수 선언 시 파라미터가 많고 복잡할 때는 구조체로 묶어 관리하는 것이 좋습니다.
    • 무의미한 주석 ({/* TODO details.book.title로 변경 */})은 제거해도 무방합니다.
    • Click 이벤트 처리 부분에 기능을 추가할 수 있도록 함수를 정의하거나 설명하는 주석을 달아주는 것이 좋습니다.

  2. 버그 리스크:

    • 클릭 핸들러 (onClick={() => {}})가 비어 있어 기능이 구현되지 않는 부분이 있습니다.
    • 변수 또는 상태값에 대한 유효성 검사와 확인이 부족할 수 있습니다.

  3. 일반적인 지적:

    • JSX에서 클래스 이름을 동적으로 관리할 때 classNames 라이브러리를 사용하여 관리하는 것이 깔끔하며, 가독성을 높일 수 있습니다.
    • 코드 스타일이 일관되게 유지되도록 하여 가독성을 향상시킬 수 있습니다.

추가로 실험하거나 수정할 때 문제가 없는지 확인하기 위해 적절한 테스트 케이스 및 테스트 방법을 고려하는 것이 좋습니다.

Expand Down
Loading
Loading