오류 개요
일시: 06월26일(월) 23:24
작성자: 정종미
내용
•
채팅룸 헤더에 클릭한 아이템의 이름값을 넘겨 받아서 띄우기
해결
해당기능 pr 링크 
3d15294f38e9d90b0c5e2c21c339fbd5ca42fd83
•
아이템을 만드는 컴포넌트의 li하나씩 onclick 이벤트로 네비게이트 띄우기
<li
className={styles['chat-item']}
onClick={() => navigate(`/chat/${chat.name}`)}
>
JavaScript
복사
chatitem.jsx
•
라우터 /chat에 path 값 accountname으로 onClick에서 보내는 chat.name으로 연결
<Route path="/chat">
<Route index element={<ChatList />} />
{/* 변경 예정: chat/{id} */}
<Route path=":accountname" element={<ChatRoom />} />
JavaScript
복사
App.js
•
채팅룸 헤더에서 받은 경로값을 디코딩해서 값으로 넘겨주기
const [currentPath, setCurrentPath] = useState('');
useEffect(() => {
const decodedPath = decodeURI(
document.location.pathname.replace('/chat/', ''),
);
setCurrentPath(decodedPath);
}, []);
// 리턴 안에다가 헤더에 값을 줘야함으로 currentPath 넘김
return (
<>
<Layout chatTitle={currentPath}>
JavaScript
복사
ChatRoom.jsx
•
헤더타입이 있는 쪽에 챗타이틀을 넣어주고
export default function Header({ type, chatTitle }) {
const HeaderUI = {
none: <></>,
chatHeader: (
<header className={styles['header-wrap']}>
<div className={styles['left']}>
<button className={styles['btn-back']} onClick={goBack}>
<img src={IconArrowLeft} alt="뒤로가기" />
</button>
<span className={['chat-title']}>{chatTitle}</span>
</div>
<button className={styles['btn-more']}>
<img src={IconMoreVertical} alt="메뉴보기" />
</button>
</header>
JavaScript
복사
Header.jsx
•
전체 레이아웃을 하는 곳에 가서 헤더 채팅룸에서 chatTitle 넘겨 받은 값을 헤더에 챗타이틀에 넣어줌
// 받는 값 추가
export default function Layout({ children, btnHandler, chatTitle }) {
//<생략>
const path = document.location.pathname;
if (path.includes('/profile/m')) {
pathToCheck = '/profile/m';
} else if (path.includes('/profile/')) {
pathToCheck = '/profile/:accountname';
} else if (path.includes('/followers/')) {
pathToCheck = '/followers';
} else if (path.includes('/followings/')) {
pathToCheck = '/followings';
} else if (path.includes('/post/upload')) {
pathToCheck = '/post/upload';
} else if (path.includes('/post/')) {
pathToCheck = '/post';
} else if (path.includes('/chat/')) {
pathToCheck = '/chat/:accountname';
} else {
pathToCheck = path;
}
// 케이스 추가
switch (pathToCheck) {
case '/chat/:accountname':
}
//리턴 안에다가는 헤더 타입과 챗 타이틀을 넘겨서
return (
<>
<Header type={headerType} btnHandler={btnHandler} chatTitle={chatTitle} />
<main>{children}</main>
{footerType === 'input' ||
footerType === 'comment' ||
footerType === 'chatting' ? (
<footer>
<Input type={footerType} />
</footer>
) : (
<TabMenu type={footerType} />
)}
</>
);
JavaScript
복사
Layout.jsx
