✨Feat : 세팅 사이드 바 UI / 로직 #50
Conversation
…IRVANA_Gidong into feat/profile/settings
src/pages/profile/Profile.tsx
Outdated
|
|
||
| const Profile = () => { | ||
| const { userId } = useParams<{ userId: string }>(); | ||
| const location = useLocation(); | ||
| const [sidebarVisible, setSidebarVisible] = useState(false); |
There was a problem hiding this comment.
visible 을 모달에서도 쓰고, 검색에서도 쓰일 것 같은데 전역 커스텀 훅으로 뺄까요? openSidebar, closeSidebar 함수랑 같이요!
src/pages/profile/Profile.tsx
Outdated
| const openSidebar = () => { | ||
| setSidebarVisible(true); | ||
| }; | ||
|
|
||
| const closeSidebar = () => { | ||
| setSidebarVisible(false); | ||
| }; |
There was a problem hiding this comment.
| const openSidebar = () => { | |
| setSidebarVisible(true); | |
| }; | |
| const closeSidebar = () => { | |
| setSidebarVisible(false); | |
| }; | |
| const showSidebar = () => { | |
| setSidebarVisible(prev => !prev); | |
| }; |
이렇게 하나로 묶을 수도 있습니다!
|
|
||
| const SettingSideBar = () => { | ||
| return ( | ||
| <SettingSideBarBackground> |
There was a problem hiding this comment.
p5
까만 배경화면을 Deem 이라고 쓴다고 강의해서 하던데 혹시 이 단어를 사용해서 변수명을 짓는 건 어떠실까요?!
src/pages/profile/Profile.tsx
Outdated
| @@ -30,7 +30,7 @@ const Profile = () => { | |||
|
|
|||
| return ( | |||
| <ProfilePage> | |||
| {editMode && <SettingSideBar />} | |||
| <SettingSideBar active={editMode ? true : false} /> | |||
There was a problem hiding this comment.
p2
editMode 도 boolean 타입의 값인 거 같은데 editMode 자체를 넣어주거나, SettingSideBar 에서 editMode 를 호출하는 것도 좋아보여요!
| } | ||
|
|
||
| const SettingSideBar = ({ active }: SettingSideBarProps) => { | ||
| const setEditMode = useSetRecoilState(editModeState); |
There was a problem hiding this comment.
p2
SettingSideBar 에서도 useSetRecoilState 를 불러온다면, props 로 editmode 에 해당하는 값을 받아올 필요가 없지 않을까요!
| </SettingRightSideBar> | ||
| </SettingSideBarSection>, | ||
| document.getElementById('modal-root') | ||
| ); |
There was a problem hiding this comment.
CreatePortal 사용법 잘 알아갑니다 혜성님! 👍
| > a { | ||
| text-decoration: none; | ||
| color: ${({ theme }) => theme.color.black}; | ||
| } |
There was a problem hiding this comment.
Link 컴포넌트의 색상 설정 css 가 잘못되어 있어서 아마 적용이 안 된 거 같아요! posts 페이지를 작성하면서 수정해놓았으니 해당 구문은 없애도 될 거 같습니다!
🪄 변경사항
index.html에 modal-root라는 div를 만들고 react.createPortal을 통해 사이드바를 트리 구조 최상위로 연결했습니다.
따라서 컴포넌트가 화면을 덮는 로직을 쉽게 구현할 수 있습니다 (z-index 꼬이지 않음)
profile.tsx에서 sidebarVisible의 상태를 컨트롤 하여 사이드바를 보여줄 지 판단합니다.
프로필 수정 클릭
주소에 #edit 해시를 주입하여 profile.tsx에서 recoil상태를 통해 현재 editmode인지 판단하게 만듭니다.
비밀번호 변경 클릭 => 이미 만들어져 있는 비밀번호 변경 페이지에 진입
로그아웃 클릭 => 세션스토리지의 유저 정보를 삭제하고 새로고침하여 로그인 페이지로 redirect해줍니다.
🖥 결과 화면
✏️ PR 포인트
화면을 덮는 사이드바를 위해 modal-root를 트리구조 가장 상위에 선언했습니다 (index.html). 이해하기 힘든 구조인지 궁급합니다.
사이드바를 보여줄지 판단하는 선택권을 profile.tsx가 가지고 결과에 따라 렌더링 하고있는데 사이드 바 스스로 자신의 컴포넌트를 보여줄지 결정해야 하는지 고민이 됩니다.