[StackOverflow-Clone] [재사용] Aside 컴포넌트 작업

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