[FE] SISC1-215 [FEAT] : 외부페이지 UI #124
Conversation
Walkthrough외부용 페이지 4개(Main, Intro, Leaders, Portfolio)를 신규 추가하고 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Router as React Router
participant App
participant Main as Main Component
participant Sub as Intro/Leaders/Portfolio
User->>Router: 요청 (예: /main 또는 /main/intro)
Router->>App: 경로 매칭
App->>Main: /main 렌더링 (기본)
Main->>User: 메인 화면(메뉴, 로고) 응답
alt 메뉴 클릭
User->>Main: 메뉴 링크 클릭 (/main/intro 등)
Main->>Router: 라우트 변경
Router->>Sub: 해당 서브페이지 렌더링
Sub->>User: 서브페이지 응답
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20분
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
frontend/src/pages/external/Intro.jsx (1)
3-13: 코드 중복 문제이 컴포넌트는 Leaders.jsx, Portfolio.jsx와 동일한 구조를 가지고 있습니다. Leaders.jsx에 남긴 리팩토링 제안을 참고하세요.
frontend/src/pages/external/Portfolio.jsx (1)
3-13: 코드 중복 문제이 컴포넌트도 Intro.jsx, Leaders.jsx와 동일한 구조입니다. Leaders.jsx에 남긴 리팩토링 제안을 참고하세요.
🧹 Nitpick comments (4)
frontend/src/pages/external/Main.module.css (1)
19-23: 선택사항: 반응형 여백 고려고정 픽셀 값(55px, 108px)은 작은 화면에서 레이아웃이 좁아 보일 수 있습니다.
반응형 단위 사용을 고려하세요:
.menu { - margin-top: 55px; - margin-left: 108px; + margin-top: clamp(30px, 5vh, 55px); + margin-left: clamp(20px, 8vw, 108px); box-sizing: border-box; }frontend/src/pages/external/Leaders.jsx (1)
3-13: 코드 중복: Intro, Portfolio와 동일한 구조Leaders, Intro, Portfolio 컴포넌트가 거의 동일한 구조를 공유하고 있습니다. title prop을 받는 공통 컴포넌트로 추상화하면 유지보수성이 향상됩니다.
공통 컴포넌트를 생성하세요:
// ExternalPageTemplate.jsx const ExternalPageTemplate = ({ title, children }) => { return ( <div className={styles.container}> <div className={styles.header}> <span className={styles.title}>{title}</span> <hr className={styles.divider} /> </div> <div className={styles.info}>{children}</div> </div> ); };그런 다음 각 페이지에서 사용:
// Leaders.jsx const Leaders = () => { return <ExternalPageTemplate title="임원진 소개" />; };frontend/src/pages/external/External.module.css (2)
9-10: 선택사항: 고정 퍼센트 높이 대신 유연한 높이 고려25% 고정 높이는 콘텐츠가 많아지면 잘릴 수 있습니다.
.header { background: url('../../assets/external-detail-image.png') center no-repeat; - height: 25%; + min-height: 200px; + height: clamp(200px, 25vh, 300px); display: flex; flex-direction: column;
25-27: 선택사항: 고정 너비 대신 반응형 너비250px 고정 너비는 작은 화면에서 너무 넓을 수 있습니다.
.divider { - width: 250px; + width: min(250px, 80vw); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
frontend/src/assets/external-detail-image.pngis excluded by!**/*.pngfrontend/src/assets/external-image.pngis excluded by!**/*.pngfrontend/src/assets/logo.pngis excluded by!**/*.png
📒 Files selected for processing (7)
frontend/src/App.jsx(1 hunks)frontend/src/pages/external/External.module.css(1 hunks)frontend/src/pages/external/Intro.jsx(1 hunks)frontend/src/pages/external/Leaders.jsx(1 hunks)frontend/src/pages/external/Main.jsx(1 hunks)frontend/src/pages/external/Main.module.css(1 hunks)frontend/src/pages/external/Portfolio.jsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
frontend/src/App.jsx (4)
frontend/src/pages/external/Main.jsx (1)
Main(6-35)frontend/src/pages/external/Intro.jsx (1)
Intro(3-13)frontend/src/pages/external/Leaders.jsx (1)
Leaders(3-13)frontend/src/pages/external/Portfolio.jsx (1)
Portfolio(3-13)
🔇 Additional comments (5)
frontend/src/App.jsx (2)
18-21: LGTM: 외부 페이지 import 적절새로운 external 페이지 컴포넌트들이 적절히 import되었습니다.
27-30: LGTM: 라우팅 구조 적절외부 페이지 라우트가 Layout 밖에 배치되어 있어 네비게이션 없이 독립적으로 렌더링됩니다. 이는 외부 페이지의 의도된 동작으로 보입니다.
frontend/src/pages/external/Main.jsx (2)
6-34: 전반적인 구조 양호Main 컴포넌트의 구조와 네비게이션 구현이 적절합니다. 내부 라우팅이 올바르게 설정되어 있습니다.
2-3: 검증 완료: 모든 에셋 파일 존재참조된 이미지 파일들이 모두 실제로 존재합니다:
external-image.png✓logo.png✓임포트 경로가 올바르고 파일들이 모두 정상 위치에 있습니다.
frontend/src/pages/external/External.module.css (1)
8-16: 배경 이미지 파일 확인 완료배경 이미지 파일이
frontend/src/assets/external-detail-image.png에 정상적으로 존재합니다. CSS 경로 참조가 올바릅니다.
| <li> | ||
| <Link to="/main/leaders">임원소개</Link> | ||
| </li> |
There was a problem hiding this comment.
텍스트 불일치: "임원소개" vs "임원진 소개"
네비게이션 링크 텍스트가 "임원소개"이지만, Leaders.jsx 페이지의 실제 제목은 "임원진 소개"입니다. 일관성을 위해 동일한 텍스트를 사용하세요.
<li>
- <Link to="/main/leaders">임원소개</Link>
+ <Link to="/main/leaders">임원진 소개</Link>
</li>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <li> | |
| <Link to="/main/leaders">임원소개</Link> | |
| </li> | |
| <li> | |
| <Link to="/main/leaders">임원진 소개</Link> | |
| </li> |
🤖 Prompt for AI Agents
In frontend/src/pages/external/Main.jsx around lines 15 to 17, the navigation
link text reads "임원소개" while the Leaders.jsx page title is "임원진 소개"; update the
Link text to exactly match the page title ("임원진 소개") to ensure consistency in
the UI; locate the <Link to="/main/leaders"> element and replace its inner text
with "임원진 소개", then run a quick UI check to confirm the navigation label now
matches the Leaders page title.
| .title { | ||
| font-family: DIN Condensed; | ||
| font-weight: 700; | ||
| font-size: 80px; | ||
| line-height: 100%; | ||
| letter-spacing: 0%; | ||
| color: #ffffff; | ||
| margin: 0; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
폰트 로딩 확인 필요
'DIN Condensed' 폰트가 참조되고 있지만 이 파일에서 @font-face 선언이나 import가 보이지 않습니다. 폰트가 로드되지 않으면 fallback 폰트로 렌더링되어 의도한 디자인과 달라질 수 있습니다.
다음 스크립트로 프로젝트 내 폰트 로딩을 확인하세요:
🏁 Script executed:
#!/bin/bash
# DIN Condensed 폰트 참조를 찾아 로딩 위치 확인
rg -n "@font-face" --type=css
rg -n "DIN Condensed" --type=css
rg -n "font-family.*DIN" Length of output: 331
폰트 로딩 상황을 더 자세히 파악하기 위해 추가 검증이 필요합니다.
🏁 Script executed:
#!/bin/bash
# Check for @font-face in HTML files and global CSS
echo "=== Checking HTML files for @font-face ==="
rg -n "@font-face" --type=html
echo "=== Checking for font imports in JS/TS files ==="
rg -n "@import.*font" --type=ts --type=tsx --type=js
echo "=== Checking for font-related link tags in HTML ==="
rg -n "link.*font|@import.*http" --type=html
echo "=== Checking root/public CSS files ==="
find frontend/public frontend -maxdepth 2 -name "*.css" -type f
echo "=== Looking for global or index CSS ==="
rg -n "@font-face|DIN" --type=css --glob="**/global*" --glob="**/index*" --glob="**/App*"
echo "=== Checking package.json for font packages ==="
rg -n "font|google-font" package.json
echo "=== Checking CSS module imports ==="
head -20 frontend/src/pages/external/Main.module.css
head -20 frontend/src/components/LoginAndSignUpForm.module.cssLength of output: 1177
폰트 로딩 메커니즘을 확인하기 위해 App.css와 index.css의 전체 내용을 검토하겠습니다.
🏁 Script executed:
#!/bin/bash
# Check the full content of global CSS files
echo "=== Content of frontend/src/index.css ==="
cat frontend/src/index.css
echo -e "\n=== Content of frontend/src/App.css ==="
cat frontend/src/App.css
echo -e "\n=== Searching all CSS files for any font-face ==="
rg -A5 "@font-face" --type=cssLength of output: 460
DIN Condensed 폰트 로딩 메커니즘 추가 필요
프로젝트 전체에서 DIN Condensed 폰트에 대한 @font-face 선언이 없습니다. 현재 frontend/src/index.css에서는 Pretendard 폰트만 로드되고 있으며, frontend/src/pages/external/Main.module.css:55와 frontend/src/components/LoginAndSignUpForm.module.css:29에서 참조된 DIN Condensed는 로드되지 않아 시스템 기본 폰트로 렌더링됩니다.
- 80px 크기의
.title요소에 적용되므로 디자인 의도와 크게 다를 수 있습니다 - 웹 폰트로 DIN Condensed를 추가하거나, 로드 가능한 폰트로 변경하세요
🤖 Prompt for AI Agents
In frontend/src/pages/external/Main.module.css around lines 54 to 62 the .title
uses "DIN Condensed" but the project never declares or loads that font, so it
falls back to system fonts; either add a proper @font-face declaration (in
frontend/src/index.css or a global CSS) that points to the DIN Condensed webfont
files (woff/woff2) and includes the 700 weight, or switch the font-family to a
loaded/available font (or a defined fallback stack) to ensure the 80px title
renders as intended; place the @font-face at global scope, preload or host the
font files, and verify the weight and font-style match the usage.
2 participants
1) 작업한 이슈번호
SISC1-215
2) 변경 요약 (What & Why)
3) 스크린샷/동영상 (UI 변경 시)
4) 상세 변경사항 (전부 다)
5) 참고사항
Summary by CodeRabbit
New Features
Style