SOPT Playground 프론트엔드에서 다른 팀과 공유해야 할 컴포넌트들을 제공하는 라이브러리에요.
# yarn
yarn add @sopt-makers/playground-common
# npm
npm install @sopt-makers/playground-common데스크톱 버전의 Playground 헤더에요.
import { DesktopHeader, LinkRenderer } from '@sopt-makers/playground-common';
import { useRouter } from 'next/router';
const DesktopHeaderSample = () => {
const router = useRouter();
const handleLogout = () => {
console.log('Logout!');
};
// 링크의 a태그를 렌더링하는 render function (next/link도 사용할 수 있음)
const renderLink: LinkRenderer = ({ href, children }) => {
return <a href={href}>{children}</a>;
};
// path가 현재 경로인지를 판정하는 함수
const activePathMatcher = (path: string) => router.pathname?.startsWith(path);
const user = { id: '2', name: '박건영', image: '<Image URL>' };
return (
<DesktopHeader user={user} onLogout={handleLogout} renderLink={renderLink} activePathMatcher={activePathMatcher} />
);
};모바일 버전의 Playground 헤더에요.
import { MobileHeader, LinkRenderer } from '@sopt-makers/playground-common';
import { useRouter } from 'next/router';
const MobileHeaderSample = () => {
const router = useRouter();
const handleLogout = () => {
console.log('Logout!');
};
// 링크의 a태그를 렌더링하는 render function (next/link도 사용할 수 있음)
const renderLink: LinkRenderer = ({ href, children }) => {
return <a href={href}>{children}</a>;
};
// path가 현재 경로인지를 판정하는 함수
const activePathMatcher = (path: string) => router.pathname?.startsWith(path);
const user = { id: '2', name: '박건영', image: '<Image URL>' };
return (
<MobileHeader user={user} onLogout={handleLogout} renderLink={renderLink} activePathMatcher={activePathMatcher} />
);
};Playground 사이트의 각종 경로 모음이에요.
import { playgroundLink } from '@sopt-makers/playground-common';
console.log(playgroundLink.memberDetail('3')); /* /members?id=3 */