styled-components로 CSS 만지기

CSS와 친해지기

* 기능 구현은 내가 하지 않았다. 내가 맡은 역할은 다 만들어진 마이페이지 부분을 스타일드 컴포넌트를 이용해 새로 디자인하는 것이었다. *

css와 친해지고 싶었다. 내리 프로그래밍 언어만 배우다 보니 css를 만질 일이 거의 없었고 기본기라도 익히고 싶다는 마음에 + 팀에 더 보탬이 되고 싶다는 마음에 마이페이지 부분을 디자인 하겠다고 나섰다.

디자인은 손보기 전이고 기능은 전부 구현 완료된 마이페이지다.

프롭스로 연결되어 있는 부분이 많아서(팀원 분이 정말 고생 고생해서 연결해둔 부분이었기에) 자칫 어떤 부분을 건드리거나 틀어질까봐(우리에겐 ctrl + z가 있지만 혹시 모르고 지나친다면😱...) 노심초사하면서 만졌다. 전체 코드는 다음과 같다.

import styled, { keyframes }  from "styled-components";

const boxFade = keyframes`
  0% {
    transform: translateY(30px); 
    opacity: 0; 
  }
  100% {
    transform: translateY(0px);   
    opacity: 1; 
  }
`;

export const PageFormBox = styled.div`
    display: flex;
    padding-top: 40px;
    width: 100%;
    height: 85vh;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
`;

export const PageContainer = styled.div`
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: center;
    justify-content: center;
    width: 62vw;
    height: 70vh;
    background-color: #dbdccb;
    border-radius: 35px;
    max-width: 900px;
    animation: ${boxFade} 1.5s ease-in-out;
`

export const Menubox = styled.div`
    display: flex;
    flex-direction: column;
    width: 15vw;
    height: 69vh;
    align-items: center;
    padding: 0 5px;
`

export const Menus = styled.div`
    display: flex;
    border: 1px solid #01402E;
    border-radius: 10px;
    width: 100%;
    height: 60px;
    color: #01402E;
    font-size: 20px;
    justify-content: center;
    line-height: 60px;
    letter-spacing: 3px;
    margin: 5px;
    cursor: pointer;

    &:first-child {
        cursor: default;
        margin-top: 10px;
        border: none;
        font-size: 23px;
        font-weight: bolder;
        border-bottom: 3px solid #01402E;
    }
`

export const ContentBox = styled.div`
    display: flex;
    flex-direction: column;
    width: 47vw;
    height: 69vh;
    border: 1px solid #01402E;
    max-width: 635px;
    border-radius: 30px;
`

export const ProfileBox = styled.div`
    display: grid;
    grid-template-columns: 1fr 2fr;
    width: 100%;
    height: 190px;
    flex-wrap: wrap;
`

export const ProfilePB = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
`

export const ProfilePhoto = styled.div`
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #01402E;
    margin-top: 25px;
    margin-right: 10px;
    background-color: #e7e8db;
`

export const ProfileIntro = styled.div`
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 180px;
`

export const ProfileBtn = styled.div`
    border: 1px solid #01402E;
    width: 120px;
    height: 30px;
    color: #01402E;
    text-align: center;
    margin-top: 21px;
    cursor: pointer;
    background-color: #BFBEAB;
    font-size: 14px;
`

export const ProfileEmail = styled.div`
    width: 300px;
    height: 30px;
    color: #01402E;
    font-weight: bolder;
`

export const ProfileMyInfo = styled.div`
    width: 250px;
    height: 30px;
    border-bottom: 1px solid #01402E;
    color: #01402E;
    margin-top: 25px;
    margin-bottom: 10px;
    background-color: #e7e8db;
    padding-left: 5px;
`

export const ReviewBox = styled.div`
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 190px;
    flex-wrap: wrap;
    margin-top: 30px;
    color: #01402E;
    border: 1px solid #01402E;
    background-color: #e7e8db;
`

export const ReviewSquare = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
`

export const ReviewOne = styled.div`
    display: flex;
    flex-direction: column;
    border: 1px solid #01402E;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    justify-content: space-evenly;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    color: #01402E;
    background-color: #7fbfad;
    margin-top: 20px;
    
    &.second-one {
        background-color: #d0ceb8;
    }
`

export const ReviewTitle = styled.div`
    width: 130px;
    height: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #01402E;
`

export const PageFootBtnBox = styled.div`
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 250px;
    height: 60px;
    margin-top: 140px;
    padding-left: 10px;
`

export const PageFootBtn = styled.button`
    border: 1px solid #01402E;
    width: 110px;
    height: 35px;
    border-radius: 20px;
    background-color: #e7e8db;
`

이 코드로 나온 결과물이다. 여기 나오는 모든 부분, 다시 말해 페이지네이션 부분이나 카드 부분도 다시 만졌는데 코드 올리기는 생략했다.
전체적으로 우리 웹 서비스와 잘 어울려서 마음에 든다.

아쉬운 점 & 배운 점

다만 아쉬운 점이 있다면 시간이 없어 반응형을 구현해보지 못 했다. 창 확대나 축소에 따라 안에 든 내용물이 일그러지거나 밖으로 튀어나오는데 창 크기와 관계 없이 겉과 안을 어떻게 일정한 비율로 고정할 수 있을지 여러 레퍼런스를 많이 찾아봐야겠다.
또한 사전에 ui 시나리오를 꽤 꼼꼼히 작성해두었는데 실제 코드를 짤 때 반영이 잘 안 됐다. 코딩을 시작할 때 대강이라도 디자인을 잡아두고 코드를 짜면 나중에 ui 만지는 시간이 훨씬 절약될 것이라고 느꼈다. 다음 개인 프로젝트나 팀 프로젝트에는 틀이라도 먼저 잡아두고 코딩을 해야겠다.