[FEAT/#102] 학생 - 계정관리 자주묻는질문 FAQ UI

[eunhyekimyeah]

📝 요약

• 학생 - 계정관리 자주묻는질문 FAQ UI

⚙️ 작업 내용

• student FAQ 페이지 구현: FaqPage.tsx, FaqItem.tsx UI 구현
• 라우팅 추가: src/app/(protected)/student/faq.tsx 라우트 연결
• AppTopBar 정렬문제해결 및 텍스트 크기 수정

🔗 관련 이슈

• Closes [FEAT/#102] 사용자 - 자주묻는질문 UI #102

✅ 체크리스트

• 코딩 컨벤션(Biome/Lint)을 준수하였습니다.
• 모든 타입 에러를 해결하였습니다. (Typecheck)
• 변경 사항에 대한 테스트를 마쳤습니다.
• 불필요한 로그(console.log)를 제거하였습니다.

💬 리뷰어에게

Screen_Recording_20260506_014723_Expo.Go.mp4

[github-actions]

Thanks for the contribution!
I have applied any labels matching special text in your title and description.

Please review the labels and make any necessary changes.

[gemini-code-assist]

Code Review

This pull request introduces a new FAQ feature for students, including the necessary UI components, mock data, and navigation from the profile page. Feedback includes a suggestion to define a color for the BackArrowIcon, a recommendation to use ItemSeparatorComponent for list borders to avoid trailing lines, and a warning regarding global style changes to the shared AppTopBar component.

I am having trouble creating individual review comments. Click here to see my feedback.

src/pages/student/faq/ui/FaqItem.tsx (58)

BackArrowIcon에 색상이 지정되지 않았습니다. Figma 디자인 명세를 확인하여 시스템 테마와 일치하는 색상을 적용해 주세요. UI 컴포넌트의 값과 아이콘 선택은 Figma 디자인 명세를 최우선으로 합니다.

					<BackArrowIcon width={20} height={20} color={colorTokens.contentPrimary} />

References

1. Ensure that user-facing text maintains correct spelling, grammar, and consistent punctuation, and prioritize Figma design specifications as the source of truth for UI component values.

src/pages/student/faq/ui/FaqPage.tsx (18)

리스트 아이템 사이의 구분선은 FaqItem 내부에서 borderBottomWidth를 주는 것보다 FlatList의 ItemSeparatorComponent를 사용하는 것이 더 권장되는 패턴입니다. 이 방식을 사용하면 마지막 아이템 하단에 불필요한 선이 생기는 것을 방지할 수 있습니다.

src/shared/ui/app-top-bar/AppTopBar.tsx (13)

AppTopBar는 여러 페이지에서 공유되는 공통 컴포넌트입니다. 여기서 변경된 여백(mt-3, py-4)과 폰트 크기(text-xl)는 이 컴포넌트를 사용하는 모든 화면의 레이아웃에 영향을 미칩니다. 전역적인 디자인 변경이 Figma 명세에 따른 의도된 것이 아니라면, 스타일을 props로 분리하여 기존 화면들에 영향이 없도록 하는 것이 안전합니다.

References

1. UI component values should follow the design specifications (e.g., Figma) as the source of truth, even if it leads to apparent inconsistencies in the code.