[FEAT] sidebar 구현 #2
+200
−5
There are no files selected for viewing
Empty file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Contributor
There was a problem hiding this comment. 사이드바 컴포넌트만 만들어주시고 페이지는 제가 생성할게요! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import React from 'react'; | ||
| // 아이콘 파일 import | ||
| import profileIcon from '../assets/profileIcon.svg'; | ||
| import logoutIcon from '../assets/logoutIcon.svg'; | ||
|
|
||
| interface SidebarProps { | ||
| role: 'mentor' | 'mentee'; | ||
| userName: string; | ||
| students?: string[]; | ||
| selectedStudent?: string | null; | ||
| onStudentSelect?: (name: string) => void; | ||
| } | ||
|
|
||
| const Sidebar: React.FC<SidebarProps> = ({ | ||
| role, | ||
| userName, | ||
| students = [], | ||
| selectedStudent, | ||
| onStudentSelect, | ||
| }) => { | ||
| return ( | ||
| <aside className="w-[12.5vw] h-screen bg-white border-r border-gray-200 flex flex-col p-[2.22vh_1.25vw] sticky top-0 shadow-sm overflow-x-hidden"> | ||
| {/* 상단 프로필 영역 */} | ||
| <div className="mb-[3.7vh]"> | ||
| <div className="text-[0.78vw] text-[#FF6738] font-bold mb-[1.48vh]">설 스터디</div> | ||
| <div className="flex items-center gap-[0.625vw] mb-[0.09vh]"> | ||
| <div className="w-[1.45vw] h-[2.59vh] flex items-center justify-center overflow-hidden"> | ||
| <img src={profileIcon} alt="프로필" className="w-full h-full object-contain" /> | ||
| </div> | ||
| <span className="text-[1.25vw] font-bold text-[#111111] tracking-tight">{userName}</span> | ||
| </div> | ||
|
|
||
| {role !== 'mentor' && ( | ||
| <button className="text-[0.78vw] text-[#505050] mt-[0.09vh] ml-[2.08vw] transition-colors"> | ||
| 마이페이지 > | ||
| </button> | ||
| )} | ||
| </div> | ||
|
|
||
| {/* 중앙 영역 */} | ||
| <div className="flex-1 overflow-y-auto overflow-x-hidden [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"> | ||
|
|
||
| {/* 학생 목록 영역 (멘토 전용) */} | ||
| {role === 'mentor' && ( | ||
| <div className="mb-[4.44vh]"> | ||
| <div className="text-[0.67vw] text-[#111111] font-extrabold mb-[1.85vh] uppercase tracking-wider">학생 목록</div> | ||
| <ul className="space-y-[1.85vh] pl-[0.41vw]"> | ||
| {students.map((student) => ( | ||
| <li | ||
| key={student} | ||
| onClick={() => onStudentSelect?.(student)} | ||
| className={`cursor-pointer text-[0.78vw] ${ | ||
| student === selectedStudent | ||
| ? 'text-[#FF6738] font-bold' | ||
| : 'text-[#505050]' | ||
| }`} | ||
| > | ||
| {student} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| )} | ||
|
|
||
| {/* 메뉴 영역 */} | ||
| <nav> | ||
| <div className="text-[0.67vw] text-[#111111] font-extrabold mb-[1.85vh] uppercase tracking-wider">메뉴</div> | ||
| <ul className="space-y-[2.59vh] pl-[0.41vw]"> | ||
| {['질의응답', '서울대생칼럼', '줌미팅 피드백', '약점 맞춤 솔루션'].map((menu) => ( | ||
| <li | ||
| key={menu} | ||
| className="text-[0.78vw] text-[#505050] cursor-pointer font-medium transition-colors" | ||
| > | ||
| {menu} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
|
|
||
| {/* 로그아웃 */} | ||
| <div className="mt-auto"> | ||
| <button className="flex items-center gap-[0.41vw] text-[0.78vw] text-[#111111]"> | ||
| <img src={logoutIcon} alt="로그아웃" className="w-[0.93vw] h-[0.93vw]" /> | ||
| 로그아웃 | ||
| </button> | ||
| </div> | ||
| </aside> | ||
| ); | ||
| }; | ||
|
|
||
| export default Sidebar; |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
여기 라우팅 경로 설정 지우시면 안되고 메인 화면은 페이지 따로 생성해서 구현하셔야 할 것 같아요!