[React] 프로젝트 폴더 구조 정리부터 퍼블리싱까지(작업 기록)

타입스크립트 설치를 끝내고 이제 본격적으로 퍼블리싱 작업에 들어갔다.

처음엔 페이지가 많이 안나올거라고 예상했는데 자꾸 이것저것 추가하는 바람에 늘어나버렸다.

게다가 팀원중에 리액트를 쓸 줄 아는사람이 나 뿐이었다.

그래서 프론트 작업은 나와 리액트를 해보고 싶다는 팀원 한명과 둘이서 진행되었다..

 

프로젝트 폴더 구조

먼저 프로젝트 폴더 구조를 정리했다.

원래는 크게 pages, assets 폴더를 생성하고 안에 각각 하위 폴더를 추가해서 tsx 파일은 pages에 넣고 css 파일은 assets에 넣었는데 팀장이 폴더 구조가 마음에 들지 않았는지  tsx파일과 css 파일을 같이 넣어두는 방식으로 바꿔버렸다.

폴더 구조

내가 했던 폴더 구조

src
│
├── assets
│   └── css
│       └── user
│           ├── Loginform.css
│       └── include
|           ├── effect.css
│           ├── reset.css
│           └── variables.css
│
├── components
│   ├── buttons
│   ├── footer
│   ├── header
│   ├── input
│   ├── layout
│   └── main
│
└── pages
    ├── main
    ├── plan
    └── user
        └── Loginform.tsx

현재 폴더 구조

src
│
├── assets
│   └── css
│       └── common
│           ├── effect.css
│           ├── reset.css
│           └── variables.css
│
├── components
│   ├── buttons
│   ├── footer
│   ├── header
│   ├── input
│   ├── layout
│   └── main
│
└── pages
    ├── main
    ├── plan
    └── user

 

레이아웃 설정

아무튼 폴더 구조 정리를 끝내고 화면 레이아웃 규격 잡는걸 시작했다.

레이아웃 배치는 워낙 종류가 많아서 프로젝트에서 하는 웹 사이트 디자인에 따라서 진행하면 되는데 우리팀은 2 COLUMN, LEFT 디자인이었다.

 

프로젝트 할때마다 느끼지만 프론트나 백이나 항상 개발 환경 세팅하는게 제일 손이 많이 가는것 같다.

레이아웃과 관련된 컴포넌트나 공통으로 자주 쓰이는 button, input은 components에 정리했다.(button, input은 팀장이 작업)

 

레이아웃 규격 width나 height를 어떻게 할거냐고 물어봐도 팀원들이 별 말이 없어서 그냥 내가 피그마에 되어있는 디자인 보고 대략 크기 잡고 만들었다.

폴더 구조

• Layout: Header, Footer, MainContent을 가지고 있는 최상위 컴포넌트

.layout-container {
  width: 100%;
  max-width: var(--max-width);
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

• MainContent: sidebar, content를 가지고 있는 컴포넌트

페이지마다 높이가 달라서 따로 지정해두지 않고 flex: 1로 설정해서 남은 공간을 채우게 했다.

.main-content {
  flex: 1;
  width: 100%;
  max-width: inherit;
  margin: 50px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
 
}

• App.tsx

레이아웃 규격 잡기를 끝내고 라우터를 등록했다.

// 전역 스타일 및 공통 레이아웃 컴포넌트
import "./assets/css/common/variables.css";
import Layout from "./components/layout/Layout";

function App() {
  return (
    <div>
      <BrowserRouter>
        <Layout>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/loginform" element={<LoginForm />} />
          </Routes>
        </Layout>
      </BrowserRouter>
    </div>
  );
}

export default App;

 

로그인 화면

이제 본격적으로 화면 퍼블리싱을 시작했다.

가장 기본이 되는 로그인 기능을 끝내야해서 백엔드와 연결을 위해 로그인 화면을 먼저 퍼블리싱 했다. 

카카오 로그인은 카카오에서 제공해주는 버튼 이미지만 사용하고 네이버와 구글은 제공해주는 버튼 이미지를 그냥 넣으면 카카오 로그인 버튼과 안맞길래 html 구조와 css로 요리조리 수정해서 통일되어 보이게 완성했다.

• LoginForm.tsx

<div className="kakao-login-button">
          <img
            src="/images/kakao_login_btn.jpg"
            alt="카카오 로그인 버튼"
            onClick={handleKakaoLogin}
          />
        </div>
        <div className="naver-login-button">
          <button onClick={handleNaverLogin}>
            <img src="/images/naver-logo.jpg" alt="네이버" />
            <span>네이버 로그인</span>
          </button>
        </div>
        <div className="google-login-button">
          <button onClick={handleGoogleLogin}>
            <img src="/images/google-logo.jpg" alt="구글" />
            <span>Google 계정으로 로그인</span>
          </button>
        </div>

• LoginForm.css

/* 카카오 로그인 */
.kakao-login-button img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 8px;
}

/* 네이버 로그인 */
.naver-login-button button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #03c75a;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0 0 0 6px;
  position: relative;
}

.naver-login-button img {
  width: 45px;
  height: 45px;
}

.naver-login-button span {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 17px;
  color: white;
  font-family: "Noto Sans KR", sans-serif;
  padding-left: 20px;
}

/* 구글 로그인 */
.google-login-button button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: white;
  border: 1px solid #dadce0;
  border-radius: 8px;
  cursor: pointer;
  padding: 0 0 0 8px;
  position: relative;
}

.google-login-button img {
  width: 35px;
  height: 35px;
}

.google-login-button span {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 17px;
  color: #3c4043;
  font-family: "Noto Sans KR", sans-serif;
  padding-left: 20px;
}

 

홈 화면

메인은 나중에 많이 수정되니까 디자인 하신분이 대충 느낌만 잡아 놓은것 같았다. 그런데 나는 어쨌든 퍼블리싱을 해야하니.. 똑같이 만들어뒀다.  voice, text 버튼은 공통 컴포넌트라 import해서 사용했다.

홈 화면

• Home.tsx

import React from "react";
import ShortBtn from "../../components/buttons/ShortBtn";
import "./home.css";

const Home: React.FC = () => {
  return (
    <div className="travel-buttons">
            <div className="travel-plan-button">
              <ShortBtn content="voice" />
            </div>
            <div className="travel-plan-button">
              <ShortBtn content="text" />
            </div>
          </div>
   );
};

export default Home;

 

추후에 반응형까지 고려해야해서 디자인 수정될때마다 html,css는 계속 수정해야 한다.

아직 페이지 두개 밖에 못했지만 여행 일정 입력하는 페이지도 현재 작업중이다.

 

퍼블리싱만 하면 그래도 작업이 비교적 빨리 끝날것 같은데 이벤트처리(버튼 클릭, 입력 등)까지 생각해서 작업하느라 너무 오래 걸린다..~~~~ㅠㅠ