feat : Web-15 신청 부원 조회 페이지 by chlgusdn0203 · Pull Request #4 · DongyangOne/web_front

chlgusdn0203 · 2026-06-01T10:18:35Z

📌 작업 내용

신청 부원 조회 페이지 구현
신청자 목록 UI 구성
테이블 레이아웃 및 기본 스타일 적용
CSS Modules를 사용하여 페이지 스타일 분리

🔗 관련 이슈

📸 스크린샷 / 화면 녹화

🧪 테스트 방법

1.http://localhost:5173/admin 로 접근
2.
3.

✅ 체크리스트

npm run lint 통과를 확인했습니다
npm run format 을 적용했습니다
디버깅용 console.log 를 제거했습니다
사용하지 않는 import / 변수를 정리했습니다
컨벤션 (README.md) 을 준수했습니다
base 브랜치가 develop 인지 확인했습니다

💬 리뷰어에게 한 마디

takjinwu · 2026-06-01T17:16:13Z

/gemini review

gemini-code-assist

Code Review

This pull request integrates Tailwind CSS into the project, updates global styles and fonts, and implements a detailed applicant management view on the Admin page alongside a redesigned Header component. The review feedback highlights two key areas for improvement: adding a visible label to the empty admin navigation link in the Header, and enhancing the Admin page modal UX by allowing users to close it when clicking on the backdrop.

gemini-code-assist · 2026-06-01T17:17:03Z

+        <NavLink
+          to={ROUTES.ADMIN_APPLICANTS}
+          className={({ isActive }) =>
+            isActive ? `${styles.navLink} ${styles.active}` : styles.navLink
+          }
+        >
+
+        </NavLink>


관리자 확인용 임시 메뉴인 NavLink 내부에 텍스트나 자식 요소가 누락되어 있어 화면에 아무것도 표시되지 않습니다. 사용자가 클릭하여 이동할 수 있도록 링크 텍스트(예: <span>지원자 관리</span>)를 추가해 주세요.

Suggested change

<NavLink

to={ROUTES.ADMIN_APPLICANTS}

className={({ isActive }) =>

isActive ? `${styles.navLink} ${styles.active}` : styles.navLink

}

>

</NavLink>

<NavLink

to={ROUTES.ADMIN_APPLICANTS}

className={({ isActive }) =>

isActive ? `${styles.navLink} ${styles.active}` : styles.navLink

}

>

<span>지원자 관리</span>

</NavLink>

NavLink삭제했습니다

gemini-code-assist · 2026-06-01T17:17:03Z

+        <div className={styles.modalBackdrop} role="presentation">
+          <section
+            className={styles.modal}
+            role="dialog"
+            aria-modal="true"
+            aria-label="신청 부원 상세 정보"
+          >


모달 백드롭(배경) 영역을 클릭했을 때 상세 모달창이 닫히도록 설정하면 사용자 경험(UX)이 향상됩니다. 백드롭에 onClick={handleCloseDetail}을 추가하고, 모달 내부 콘텐츠 영역 클릭 시 이벤트가 상위로 전파되어 모달이 의도치 않게 닫히는 것을 방지하기 위해 onClick={(e) => e.stopPropagation()}을 추가하는 것을 권장합니다.

<div className={styles.modalBackdrop} onClick={handleCloseDetail} role="presentation"> <section className={styles.modal} role="dialog" aria-modal="true" aria-label="신청 부원 상세 정보" onClick={(e) => e.stopPropagation()} >

handleOpenDetail, handleCloseDetail 핸들러 분리 (컨벤션: handle + 동작)
백드롭 클릭 시 모달 닫힘 (onClick={handleCloseDetail})
모달 내부 클릭 시 이벤트 버블링 차단 (stopPropagation)
X 버튼도 인라인 익명 함수 → handleCloseDetail로 교체
수정완료했습니다

This reverts commit 861eb9a, reversing changes made to b10b239.

This reverts commit 1ae3b0e.

takjinwu · 2026-06-08T15:37:34Z

@@ -1,17 +1,69 @@
-import { Link } from 'react-router-dom';


디자인과 다른 부분들 수정해주세요

추가로 픽셀 안 맞는 부분들 24px로 수정해주세요.

신청 부원 조회도 figma 상에서 40px입니다. 현재는 42px에요

전부 수정했습니다

takjinwu · 2026-06-08T15:44:49Z

@@ -0,0 +1,259 @@
+.page {


CSS modules 사용하는것이 아닌 tailwind css만 사용해주세요. 파일 삭제 부탁드립니다

수정완료했습니다

chlgusdn0203 · 2026-06-12T02:07:30Z

AdminPage 파일의 내용을 RecruitManagePage 파일로 옮겼고
테스트방법은
http://localhost:5173/admin/Memberpage
로 수정했습니다

takjinwu · 2026-06-12T16:08:08Z

NO 밑의 열 안맞는것 디자인과 다릅니다. 수정해주세요

takjinwu · 2026-06-12T16:08:55Z

이부분 FF6B00에서 70퍼센트의 투명도를 주어야 합니다. figma 디자인 다시 확인해주세요

takjinwu · 2026-06-12T16:09:54Z

이 부분 지원동기,사용해봤거나 들어본 언어 및 라이브러리, 동아리에서 해 보고 싶은 것,마지막으로 하고 싶은 말입니다. 화면설계서 참고해서 수정해주세요.

takjinwu · 2026-06-12T16:11:27Z

+
+  return (
+    <section className="min-h-[calc(100vh-112px)] bg-brand-soft px-[5.75rem] py-7 max-lg:px-6">
+      <div className="mx-auto min-h-[842px] max-w-[1254px] rounded-card bg-white px-[60px] pt-[52px] pb-[28px] shadow-[0_4px_4px_rgba(0,0,0,0.25)]">


shadow값 하드코딩 금지 tailwind.config.js에서 import해서 사용해주세요.

takjinwu · 2026-06-12T16:12:10Z

+
+      {selectedApplicant && (
+        <div
+          className="fixed inset-x-0 bottom-0 top-[112px] flex items-center justify-center bg-[rgba(238,238,238,0.78)] p-8"


rgb 토큰 이미 EEEEEE(line)으로 tailwind.config.js에 정의되어 있습니다. 수정해 주세요.

takjinwu · 2026-06-12T16:12:42Z

+        <nav className="mt-8 flex items-center justify-center gap-9">
+          <button type="button" aria-label="이전 페이지">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M15 18l-6-6 6-6" stroke="#1A1A1A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />


1A1A1A 토큰 이미 ink로 정의되어있습니다 import해서 사용해주세요

takjinwu · 2026-06-12T16:13:24Z

+  </p>
+</div>
+
+        <div className="overflow-hidden rounded-[50px] border border-tag max-lg:overflow-x-auto">


rounded-50은 tailwind.config.js에 이미 borderRadius.card 50px 토큰으로 정의되어 있습니다. 수정해 주세요

수정완료했습니다

chlgusdn0203 · 2026-06-23T05:09:49Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a new administrator page, RecruitManagePage, for viewing and managing applicant details, along with corresponding routing configurations, custom SVG icons, and an updated Header component that utilizes NavLink for active state styling. Feedback on these changes focuses on improving routing consistency by renaming the /admin/Memberpage path to a lowercase kebab-case format, fixing indentation and simplifying ternary operators in the Header component, addressing accessibility (a11y) and ESLint concerns regarding static click handlers and close buttons in the modal, and refactoring the hardcoded pagination UI to support dynamic data rendering.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

gemini-code-assist · 2026-06-23T05:11:16Z

  SCHEDULE: '/schedule',
  ABOUT: '/about',
  ADMIN: '/admin',
+  ADMIN_RECRUIT: '/admin/Memberpage',


ADMIN_RECRUIT 경로가 /admin/Memberpage로 설정되어 있습니다. 이 설정은 다음과 같은 문제가 있습니다:\n\n1. 일관성 결여: 다른 관리자 경로인 /admin/members 등은 소문자 케밥 케이스를 사용하는 반면, 이 경로는 대소문자가 섞인 Memberpage를 사용하고 있어 URL 컨벤션에 맞지 않습니다.\n2. 의미적 혼동: 이 페이지는 신청 부원을 관리하는 RecruitManagePage인데, URL 경로명이 Memberpage로 되어 있어 실제 역할과 일치하지 않으며 개발자에게 혼동을 줄 수 있습니다.\n\n따라서 경로를 /admin/recruits 또는 /admin/recruit-manage와 같이 소문자 기반의 직관적인 이름으로 변경하는 것을 권장합니다.

Suggested change

ADMIN_RECRUIT: '/admin/Memberpage',

ADMIN_RECRUIT: '/admin/recruits',

gemini-code-assist · 2026-06-23T05:11:16Z

+        <NavLink to={ROUTES.SCHEDULE}>
+  {({ isActive }) => (
+    <div className="flex items-center gap-3">
+      <img
+        src={
+          isActive
+            ? calendarOrangeIcon
+            : calendarBlackIcon
+        }
+        alt=""
+        className="h-10 w-10 object-contain"
+      />
+
+      <span
+        className="text-xl font-medium"
+        style={{
+          color: isActive ? COLORS.orange : '#000000',
+        }}
+      >
+        연간 계획
+      </span>
+    </div>
+  )}
+</NavLink>


NavLink 내부의 자식 요소들의 들여쓰기(Indentation)가 올바르지 않아 코드 가독성이 떨어집니다. 또한 src 속성 내의 삼항 연산자를 한 줄로 정리하면 코드가 훨씬 깔끔해집니다.\n\n일관된 들여쓰기를 적용하여 가독성을 높이는 것을 권장합니다.

<NavLink to={ROUTES.SCHEDULE}> {({ isActive }) => ( <div className="flex items-center gap-3"> <img src={isActive ? calendarOrangeIcon : calendarBlackIcon} alt="" className="h-10 w-10 object-contain" /> <span className="text-xl font-medium" style={{ color: isActive ? COLORS.orange : '#000000', }} > 연간 계획 </span> </div> )} </NavLink>

gemini-code-assist · 2026-06-23T05:11:16Z

+        <NavLink to={ROUTES.RECRUIT}>
+  {({ isActive }) => (
+    <div className="flex items-center gap-3">
+      <img
+        src={
+          isActive
+            ? userOrangeIcon
+            : userBlackIcon
+        }
+        alt=""
+        className="h-10 w-10 object-contain"
+      />
+
+      <span
+        className="text-xl font-medium"
+        style={{
+          color: isActive ? COLORS.orange : '#000000',
+        }}
+      >
+        신입 부원 모집
+      </span>
+    </div>
+  )}
+</NavLink>


위의 '연간 계획' 링크와 마찬가지로, '신입 부원 모집' 링크 부분도 들여쓰기가 올바르지 않습니다. 일관된 코드 스타일과 가독성을 위해 들여쓰기를 수정하고 삼항 연산자를 정리하는 것을 권장합니다.

<NavLink to={ROUTES.RECRUIT}> {({ isActive }) => ( <div className="flex items-center gap-3"> <img src={isActive ? userOrangeIcon : userBlackIcon} alt="" className="h-10 w-10 object-contain" /> <span className="text-xl font-medium" style={{ color: isActive ? COLORS.orange : '#000000', }} > 신입 부원 모집 </span> </div> )} </NavLink>

gemini-code-assist · 2026-06-23T05:11:16Z

+            <button
+              type="button"
+              className="absolute right-6 top-6 text-[32px]"
+              onClick={handleCloseDetail}
+            >
+              ×
+            </button>


모달의 닫기 버튼 내부 텍스트로 × (곱하기 기호) 문자가 사용되었습니다. 이 기호는 스크린 리더 등 보조 기기를 사용하는 사용자에게 "곱하기" 또는 "times"로 읽혀 닫기 버튼의 역할을 명확히 전달하지 못할 수 있습니다.\n\n웹 접근성(a11y)을 향상시키기 위해 aria-label="닫기" 속성을 추가하는 것을 권장합니다.

Suggested change

<button

type="button"

className="absolute right-6 top-6 text-[32px]"

onClick={handleCloseDetail}

>

×

</button>

<button

type="button"

className="absolute right-6 top-6 text-[32px]"

onClick={handleCloseDetail}

aria-label="닫기"

>

×

</button>

gemini-code-assist · 2026-06-23T05:11:16Z

+        <div
+          className="fixed inset-x-0 bottom-0 top-[112px] flex items-center justify-center bg-line/[0.78] p-8"
+          onClick={handleCloseDetail}
+        >


배경 div에 onClick 이벤트 핸들러가 지정되어 있으나, 키보드 이벤트 핸들러나 role 속성이 없어 ESLint 경고(jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions)가 발생할 수 있으며, 스크린 리더 사용자에게 혼동을 줄 수 있습니다.\n\n상호작용 가능한 모달 배경임을 명시하기 위해 적절한 role과 키보드 지원을 추가하거나, 단순 배경 클릭 닫기 기능을 보완하는 것이 좋습니다.

gemini-code-assist · 2026-06-23T05:11:16Z

+        <nav className="mt-8 flex items-center justify-center gap-9">
+          <button type="button" aria-label="이전 페이지" className="text-ink">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M15 18l-6-6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </button>
+          <button type="button" className="text-[20px] text-brand">1</button>
+          <button type="button" className="text-[20px]">2</button>
+          <button type="button" className="text-[20px]">3</button>
+          <button type="button" className="text-[20px]">4</button>
+          <button type="button" aria-label="다음 페이지" className="text-ink">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M9 18l6-6-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </button>
+        </nav>


현재 페이지네이션 UI가 1부터 4까지 하드코딩되어 있으며, 실제 데이터(APPLICANTS 배열의 길이)나 페이지 전환 상태와 연동되어 있지 않습니다.\n\n추후 API 연동이나 실제 데이터 추가 시 동적으로 페이지 번호를 렌더링하고, 현재 페이지 상태(currentPage)에 따라 활성화 스타일(text-brand)이 적용되도록 상태 관리를 추가하는 것이 좋습니다.

chlgusdn0203 added 2 commits June 1, 2026 03:31

feat: 상단바 구현

9d9d6a9

feat: 신청 부원 조회 페이지 구현

7a4d4f2

chlgusdn0203 requested a review from takjinwu June 1, 2026 10:21

gemini-code-assist Bot reviewed Jun 1, 2026

View reviewed changes

chlgusdn0203 added 8 commits June 2, 2026 13:26

feat: 상단바 구현

4053281

fix: 상단바 그림자 수정

13f22b8

fix: 상단바 그림자, 색상 수정

384c91f

Merge branch 'develop' into feature-web-6

6ed6cb3

Merge branch 'develop' into feature-web-15

b10b239

Merge branch 'feature-web-6' into feature-web-15

861eb9a

Revert "Merge branch 'feature-web-6' into feature-web-15"

1ae3b0e

This reverts commit 861eb9a, reversing changes made to b10b239.

Reapply "Merge branch 'feature-web-6' into feature-web-15"

c2a63ea

This reverts commit 1ae3b0e.

chlgusdn0203 changed the title ~~Web 15~~ feat : Web-15 신청 부원 조회 페이지 Jun 8, 2026

chlgusdn0203 changed the base branch from main to develop June 8, 2026 08:37

takjinwu reviewed Jun 8, 2026

View reviewed changes

fix: 리뷰내용, 추가 오류 수정

6cc727a

takjinwu reviewed Jun 12, 2026

View reviewed changes

chlgusdn0203 added 2 commits June 14, 2026 13:30

fix: 피드백 수정

745ec22

fix: 피드백 수정

2748835

gemini-code-assist Bot reviewed Jun 23, 2026

View reviewed changes

	ADMIN_RECRUIT: '/admin/Memberpage',
	ADMIN_RECRUIT: '/admin/recruits',

Uh oh!

Conversation

chlgusdn0203 commented Jun 1, 2026 • edited by takjinwu Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 작업 내용

🔗 관련 이슈

📸 스크린샷 / 화면 녹화

🧪 테스트 방법

✅ 체크리스트

💬 리뷰어에게 한 마디

Uh oh!

takjinwu commented Jun 1, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jun 1, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jun 1, 2026

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!

chlgusdn0203 commented Jun 12, 2026

Uh oh!

takjinwu commented Jun 12, 2026

Uh oh!

takjinwu commented Jun 12, 2026

Uh oh!

takjinwu commented Jun 12, 2026

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!

chlgusdn0203 commented Jun 23, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jun 23, 2026

Choose a reason for hiding this comment

chlgusdn0203 commented Jun 1, 2026 •

edited by takjinwu

Loading