feat(fe): remove sidebar and implement course tabs by yunseo904 · Pull Request #3505 · skkuding/codedang

yunseo904 · 2026-03-25T18:24:10Z

코스 상세 페이지 내 사이드바 컴포넌트 제거
사이드바 제거에 따른 메인 컨텐츠 레이아웃 조정
제거한 사이드바에 있던 컴포넌트를 course 페이지의 tab으로 구현

closes TAS-2568

- 코스 상세 페이지 내 사이드바 컴포넌트 제거 - 사이드바 제거에 따른 메인 컨텐츠 레이아웃 조정 - 제거한 사이드바에 있던 컴포넌트를 course 페이지의 tab으로 구현

gemini-code-assist · 2026-03-25T18:24:39Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refactors the frontend course management interface by removing the secondary course-specific sidebar and introducing a new tab-based navigation system within a dedicated course detail layout. This change aims to provide a more intuitive and consistent user experience for navigating course-related content, centralizing common UI elements and improving the overall visual presentation of the administrative pages.

Highlights

Course Sidebar Removal: The dedicated course-specific sidebar component has been completely removed from the course detail pages, streamlining the navigation experience.
Tab-Based Course Navigation: A new CourseDetailLayout has been introduced, implementing a tab-based navigation system for course-specific pages (Home, Member, Assignment, Exercise), replacing the functionality previously provided by the removed sidebar.
UI Refactoring for Course Pages: Course-related pages (Assignment, Exercise, User) have been refactored to remove their individual titles, descriptions, and 'Create' buttons, which are now managed and displayed centrally by the new CourseDetailLayout and integrated within their respective data tables.
Main Sidebar Styling Updates: The main ManagementSidebar has received styling adjustments, including updated widths for expanded/collapsed states, padding, shadow effects, and improved logo display.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces significant UI and structural changes across the admin section of the frontend application. Key updates include a complete redesign of the ManagementSidebar with updated animation logic and styling, and the removal of the 'Course Sidebar'. Data table components (DataTablePagination, DataTableRoot, DataTableSearchBar) received extensive styling and layout adjustments. A new course/[courseId]/layout.tsx was added to provide a consistent header and tab navigation for course-specific pages, leading to the removal of redundant titles and 'Create' buttons from assignment/page.tsx, exercise/page.tsx, and user/page.tsx. The GroupTable and AssignmentTable components were refactored to integrate search and action buttons more effectively. Additionally, the DuplicateCourseButton was updated to use an inline GraphQL mutation definition. Review feedback points out a Tailwind CSS syntax error, suggests optimizing a GraphQL query for efficiency, recommends simplifying a redundant CSS class condition, raises a maintainability concern about inline GraphQL mutations, and advises against using fractional pixel values in Tailwind CSS for better UI consistency.

apps/frontend/app/admin/course/_components/AssignmentTable.tsx

apps/frontend/app/admin/course/[courseId]/layout.tsx

gemini-code-assist · 2026-03-25T18:26:41Z

apps/frontend/app/admin/_components/ManagementSidebar.tsx

+            'mb-6 flex items-center justify-center',
+            isMainSidebarExpanded ? 'w-full' : 'w-full'


cn 함수 내에서 isMainSidebarExpanded 조건부 클래스가 항상 'w-full'을 반환하여 불필요합니다. 코드를 단순화하고 가독성을 높이기 위해 조건문을 제거하는 것이 좋습니다.

Suggested change

'mb-6 flex items-center justify-center',

isMainSidebarExpanded ? 'w-full' : 'w-full'

'mb-6 flex w-full items-center justify-center'

gemini가 잘 써줬네요ㅋㅋ 필요 없는 삼항 연산자는 없애주세요~

gemini-code-assist · 2026-03-25T18:26:41Z

apps/frontend/app/admin/course/_components/DuplicateCourseButton.tsx

+  const [duplicateCourse] = useMutation<
+    unknown,
+    {
+      groupId: number
+      input: {
+        classNum: number
+        courseNum: string
+        semester: string
+      }
+    }
+  >(gql`
+    mutation duplicateCourseRemote(
+      $groupId: Int!
+      $input: DuplicateCourseInput!
+    ) {
+      duplicateCourse(groupId: $groupId, input: $input) {
+        duplicatedCourse {
+          id
+          groupName
+        }
+      }
+    }
+  `)


eslint-disable-next-line no-restricted-imports를 사용하여 gql을 직접 임포트하고 컴포넌트 내에 GraphQL 뮤테이션을 인라인으로 정의하고 있습니다. 이는 중앙에서 관리되는 graphql/course/mutation.ts 파일의 DUPLICATE_COURSE와 로직이 분리되어 코드 중복 및 유지보수의 어려움을 야기할 수 있습니다.

가능하다면 중앙의 DUPLICATE_COURSE 뮤테이션을 사용하거나 필요한 필드를 추가하여 업데이트하는 것을 권장합니다. 만약 이 컴포넌트에서만 특별히 다른 필드셋이 필요하다면, 그 이유를 주석으로 남겨두는 것이 좋겠습니다.

apps/frontend/app/admin/course/[courseId]/layout.tsx

skkuding-bot · 2026-03-26T00:50:07Z

✅ Syncing Preview App Succeeded

Application: frontend
Revision: 80f35973890285c8dc2f3d3751f74e50ccbe1a72
Health Status: Healthy

Open Preview | View in Argo CD

seoeun9

볼륨이 꽤 큰 태스크였는데 넘넘 고생하셨습니다~~
아래 리뷰 참고해주시고, 텍스트 추가하신 거 폰트 토큰으로 디자인 변경 부탁드립니다!!

피그마에 이렇게 되어있으면 text-sub3_sb_16 이런 식으로 추가해주심 돼요! 그러면 font-weight, font-size 정의할 필요 없고 색상만 지정해주면 됩니다

seoeun9 · 2026-03-26T01:01:49Z

apps/frontend/app/admin/course/_components/DuplicateCourseButton.tsx

+        }
+      }
+    }
+  `)


요거는 어쩌다 이렇게 바꾸셨나요?!

seoeun9 · 2026-03-26T01:06:04Z

apps/frontend/app/admin/course/[courseId]/layout.tsx

+    { name: 'Exercise', href: `/admin/course/${courseId}/exercise` }
+  ]
+
+  const activeTabName = `${tabs.find((tab) => pathname === tab.href)?.name || 'Home'} LIST`


Home 은 Home LIST 대신 Home으로만 나오게 하는 게 어떨까요?

seoeun9 · 2026-03-26T01:14:36Z

apps/frontend/app/admin/_components/ManagementSidebar.tsx

+              />
            </Link>
          )}
        </div>


사이드바에 구분선 (Seperator) 사라진 거 같아요! 추가 부탁드립니다

seoeun9 · 2026-03-26T01:24:40Z

apps/frontend/app/admin/course/[courseId]/layout.tsx

+
+  const currentCourse = data?.getCoursesUserLead?.find(
+    (course: { id: string | number }) => String(course.id) === String(courseId)
+  )


Course Id 만 인자로 받아서 개별 강의의 정보를 가져오는 graphql이 이미 정의되어 있을 거예요~ 한번 찾아보시고 get courses user lead 대신 다른 걸 사용해주세요! 못 찾으시겠으면 콜하셔도 돼여

seoeun9 · 2026-03-26T01:27:44Z

apps/frontend/app/admin/_components/ManagementSidebar.tsx

+            'mb-6 flex items-center justify-center',
+            isMainSidebarExpanded ? 'w-full' : 'w-full'


gemini가 잘 써줬네요ㅋㅋ 필요 없는 삼항 연산자는 없애주세요~

seoeun9 · 2026-03-26T01:30:23Z

apps/frontend/app/admin/course/[courseId]/layout.tsx

+      <div className="mx-auto w-full pb-[71px] pl-[86px] pr-[106px] pt-[80px]">
+        <div className="w-full">
+          <h1 className="text-[28px] font-bold uppercase leading-[130%] tracking-[-0.84px] text-black">
+            {activeTabName}


탭 이름 아래에도 구분선이 있어야 할 거 같아요! 피그마 참고해주세요

seoeun9 · 2026-03-26T01:37:45Z

apps/frontend/app/admin/course/[courseId]/layout.tsx

+                    className={cn(
+                      'relative flex h-[40px] w-[285.5px] items-center justify-center pb-4 text-sm font-semibold transition-colors',
+                      isActive
+                        ? 'text-blue-500 after:absolute after:bottom-[-1px] after:left-0 after:h-[2px] after:w-full after:bg-blue-500'


text-blue-500 은 탭 활성됐을 때 텍스트죠? text-primary나 text-color-primary 둘 중 하나로 바꿔주세요! 둘중 뭐더라,,

feat(fe): remove sidebar and implement course tabs

80f3597

- 코스 상세 페이지 내 사이드바 컴포넌트 제거 - 사이드바 제거에 따른 메인 컨텐츠 레이아웃 조정 - 제거한 사이드바에 있던 컴포넌트를 course 페이지의 tab으로 구현

yunseo904 requested a review from seoeun9 March 25, 2026 18:24

yunseo904 self-assigned this Mar 25, 2026

gemini-code-assist bot reviewed Mar 25, 2026

View reviewed changes

seoeun9 added ⛳️ team-frontend preview 이 라벨이 붙어있어야 프론트엔드 Preview 환경이 생성됩니다 labels Mar 26, 2026

seoeun9 reviewed Mar 26, 2026

View reviewed changes

		'mb-6 flex items-center justify-center',
		isMainSidebarExpanded ? 'w-full' : 'w-full'

Conversation

yunseo904 commented Mar 25, 2026

Uh oh!

gemini-code-assist bot commented Mar 25, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

skkuding-bot bot commented Mar 26, 2026

Uh oh!

seoeun9 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants