[크롬 시작화면] 스타일 설정 및 구조 변경

프로젝트 명: 나만의 크롬 시작 화면
📆 작업 기간: 2024.06.05 ~ (진행 중)
💻 Tech Skill
- 💻 Skill: TypeScript, React
- 🖌 Style: styled-components
Github Repository: https://github.com/Rayched/MyChrome_custom_page

---

1. 작업 내용

① styled-components 선정 이유

 

북마크 바 구현을 좀 수월하게 진행하기 위해서, 크롬 시작화면에 CSS Style을 설정하기로 했다.

처음 프로젝트를 계획했을 때는 웹 페이지의 스타일을 css 파일로 통합 관리하려고 했었지만

 

예전에 주간 박스오피스를 보여주는 웹페이지 개발을 진행하면서

전체적으로 코드가 한눈에 보이지 않고, '. jsx' 파일과 'style.css' 파일을 왔다 갔다 해야 한다는 점에서

 

약간의 불편함을 느꼈던 점들을 고려해서 css 파일로 스타일을 설정하지 않고

styled-components를 사용해서 웹 페이지의 스타일을 설정하는 방향으로 결정하였다.

---

 

② 크롬 시작화면 구조 수정 및 Style 설정

 

(1). MainWrapper 컴포넌트 추가, style 설정

 

크롬 시작화면의 모든 요소를 감싸는 MainWrapper 컴포넌트를 추가하고

 

MainWrapper 내부에 시계(Clock), 검색창(SearchBar) 컴포넌트를 감싸줄 MainItems 컴포넌트와

임시로 북마크 바를 담아둘 div 요소를 추가, 크롬 시작화면의 구조를 아래와 같이 수정하였다.

 

import DateTimes from "./components/DateTimes";
import SearchBar from "./components/SearchBar";

//New
import styled from "styled-components";
import Bookmarks from "./components/Bookmarks/Bookmark_Bar";

const MainWrapper = styled.div``;
const MainItems = styled.div``;

function App(){
    /*
    * Before
    return (
        <div>
            <DateTimes />
            <SearchBar />
        </div>
    );
    */

    //After
    return (
        <MainWrapper>
            <MainItems>
                <DateTimes />
                <SearchBar />
            </MainItems>
            <div>
                <Bookmarks />
            </div>
        </MainWrapper>
    );
}

 

---

(1). MainWrapper 컴포넌트, 스타일 설정

 

제일 먼저 MainWrapper의 스타일을 설정해줄 것인데

내부 요소인 MainItems 컴포넌트와 북마크 바를 요소를 가로 방향으로 배치할 생각이기 때문에

MainWrapper 컴포넌트에 flexbox를 적용해주고, 진행 방향 (flex-direction)을 'row (열)'로 설정해준다.

 

이렇게 하면 MainWrapper 내부에 존재하는 모든 요소들이 가로 방향으로 배치된다.

//MainWrapper

const MainWrapper = styled.div`
    display: flex;
    flex-direction: row;
`;

---

(2). MainItems 컴포넌트, 스타일 설정

 

이제 MainItems 컴포넌트의 스타일을 설정해줘야 한다.

MainItems의 스타일 설정 시 구현하고 싶었던 사항을 정리해 봤다.

1. 시계, 검색창 컴포넌트의 형태와 위치가 항상 일정해야 한다.
   (북마크 바 열림/닫힘에 상관없이 항상 일정함을 유지한다.)
2. [시계 - 검색창] 순으로 배치가 돼야 하며, 세로로 배치한다.
3. 시계와 검색창은 MainItems의 정중앙에 위치해야 한다.

 

위의 사항들을 참고해서 아래와 같이 MainItems 컴포넌트의 스타일을 설정해 봤다.

 

//MainItems

const MainItems = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: fixed;
    width: 70%
    height: 100%
`;

 

MainItems의 내부 요소를 세로 방향, 정중앙에 배치하기 위해서, 해당 컴포넌트에 flexbox를 적용시키고

요소 배치 방향을 column으로 설정하면 내부 요소의 배치 방향이 세로로 결정된다. (flex-direction)

 

이후 정중앙에 배치하기 위해서 justify-content와 text-align 속성의 값을 center로 설정하였다.

 

그리고 북마크 바의 열고/닫힘에 상관없이 일정한 형태와 위치를 유지하기 위해서

position 속성의 값을 'fixed'로 설정하고, 컴포넌트의 크기를 다음과 같이 설정하였다.

 

 

기본적인 컴포넌트의 구조와 스타일을 설정하는 것을 완료했으니

이제부턴 본격적으로 북마크 바를 구현해야 한다.

 

다만 북마크 바는 시계와 검색창을 구현할 때보다, 난이도가 더 어렵기도 하고

블로그에 정리할 내용도 좀 많을 것 같다는 생각이 들어서 이번 게시글에선 다루지 않을 것이다.

 

이 글을 쓰는 시점에서 북마크 바는 열고 닫힘 상태일 때 모습, CSS 스타일만 구현한 상태인데

이마저도 완벽하지도 않고, 레이아웃 설계도 아직 고민을 많이 해봐야 할 것 같다.

결국 현 시점에서 북마크 바는 아직 설계 단계에 가까울 것 같다.

 

본격적인 구현 단계로 넘어가려면 시간이 조금 더 걸릴 것 같다.

 

시계와 검색창을 구현할 때보다 더 어렵고 그리고 조금 긴 시간이 필요할 것 같다.

크롬 시작화면의 작업 과정은 계속 블로그에 업로드할 수 있도록 노력해 보겠다.

---