aside 우측
스택오버플로우 사이트에서 공용 컴포넌트로 사용되는 header, nav, aside, footer 을 나누어 작업하기로 했다. 분배받은 aisde 부분은 홈화면이나 Question페이지, 상세 질문 페이지에서 공통적으로 우측에 나오는 부분이다.
우리 팀은 리액트, 스타일드 컴포넌트를 사용하고 리덕스로 상태관리를 하자고 정했고 일단 컴포넌트를 나중에 불러와 사용할 수 있도록 작업해 두었다.
경로
~
~
└─src
├─assets
│ └─favicons-sprite16.png
~
~
├─shared
│ ├─Footer
│ ├─Header
│ ├─Sidebar // aside 부분
│ ├─Nav
│
├─App.jsx
├─index.css
└─index.js
Sidebar.jsx
import {
Container,
SidebarWrap,
ChatIcon,
LogoIcon,
NumberBadge,
} from './style';
const Sidebar = () => {
const penIcon = (
<svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14">
<path d="m11.1 1.71 1.13 1.12c.2.2.2.51 0 .71L11.1 4.7 9.21 2.86l1.17-1.15c.2-.2.51-.2.71 0ZM2 10.12l6.37-6.43 1.88 1.88L3.88 12H2v-1.88Z"></path>
</svg>
);
return (
<Container>
<SidebarWrap>
<header>The Overflow Blog</header>
<ul>
<li>
{penIcon}Are meetings making you less productive?
</li>
<li>
{penIcon}The philosopher who believes in Web Assembly
</li>
</ul>
<header>Featured on Meta</header>
<ul>
<li>
<ChatIcon />
<span>Improving the copy in the close modal and post notices - 2023 edition</span>
</li>
<li>
<LogoIcon />
Temporary policy: ChatGPT is banned
</li>
<li>
<LogoIcon />
The [protection] tag is being burninated
</li>
<li>
<LogoIcon />
Content Discovery initiative 4/13 update: Related questions using a Machine...
</li>
</ul>
<header>Hot Meta Posts</header>
<ul>
<li>
<NumberBadge>11</NumberBadge>
How to review First Answers that repeat previously posted answers
</li>
</ul>
</SidebarWrap>
</Container>
);
}
export default Sidebar;
style.jsx (Sidebar의 스타일)
import styled from 'styled-components';
import Icons from '../assets/favicons-sprite16.png';
export const Container = styled.aside`
*{
padding: 0;
margin: 0;
text-decoration:none;
list-style: none;
}
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
& > a {
width: 100%;
& > img {
width: 100%;
}
}
`;
export const Sidebar = styled.div`
border-radius: 3px;
color: hsl(210,8%,25%);
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05),
0 2px 8px hsla(0, 0%, 0%, 0.05);
header {
padding: 12px 15px;
font-size: 13px;
font-weight: 700;
text-align: left;
}
ul {
padding: 4px 15px;
}
`;
export const SidebarWrap = styled(Sidebar)`
border: 1px solid hsl(47, 65%, 84%);
background-color: hsl(47, 83%, 91%);
header {
border-top: 1px solid hsl(47, 65%, 84%);
border-bottom: 1px solid hsl(47, 65%, 84%);
&:first-child {
border-top: none;
}
}
ul {
padding: 4px 15px;
background-color: #faf5e6;
}
li {
display: flex;
align-items: flex-start;
gap: 7px;
margin: 12px 0;
font-size: 13px;
list-style: inside;
list-style-type: none;
text-align: left;
cursor: pointer;
:hover{
color:hsl(210,8%,35%)
}
}
svg {
flex-shrink: 0;
}
`;
// Icons ChatIcon
export const ChatIcon = styled.div`
background-image: url(${Icons});
background-size: 16px 7038px;
background-position: 0 -6120px;
width: 16px;
height: 16px;
flex-shrink: 0;
`;
export const LogoIcon = styled(ChatIcon)`
background-position: 0 -6156px;
`;
export const NumberBadge = styled.span`
color: hsl(210, 8%, 45%);
`;
assets 의 favicon 이미지
스프라이트 형태로 css에서 해당 아이콘의 포지션값을 사용해서 적용
favicons-sprite16.png
0.08MB