🧑🏻‍💻시니어개발자🧑🏻‍💻

#9. 초화면 디자인 ( CSS 적용 및 화면 Component제작 )

지금까지 Pytho Flask Restful API 와 React 로 링크서비스의 초화면을 제작했다.

앞으로 할일을 정리해서 하나씩 진행해 보기로 한다.

⎟⎜TO-DO

-       등록화면/편집화면 제작 ( 이미지 등록 포함 )

-       상단에 커버 이미지 추가 ( 커버 이미지 변경 포함 )

-       커버 이미지 구간에 일정을 표시 ( 일정관리 CRUD포함 )

-       Drag&Drop으로 링크 리스트 순서 변경 ( 모바일에서는 Touch )

-       태그 클라우드 표시 ( CRUD는 제외)

-       로그인 처리 ( 회원가입부분은 제외 )

-       구글애널리틱스(Google Analytics)와 연결

1.1. 등록화면 제작

⌘ links.create.jsx ( 위치: linkservice/client/src/component/links.create.jsx)

---------------------------------------------------------------------------------------------------

기본적인 등록 항목을 만든다. ( LinkCreateMain )

import React from "react";

export default function LinkCreateMain() {
  return (
<>
    <div>
        <h1>링크 등록</h1>
    </div>
    <div><label>링크명</label></div>
    <div><input type="text" name="name" /></div>
    <div><label>태그정보 ( 태그 여러개 등록시 / 로 구분 )</label></div>
    <div><input type="text" name="tag" /></div>
    <div><label>링크 URL (연결하고자 하는 URL)</label></div>
    <div><input type="text" name="linkurl" /></div>
    <div><label>사진 링크 정보</label></div>
    <div><input type="text" name="imageurl" /></div>

    <div><button type="submit">등록</button></div>
</>
  )
}

⌘ App.js에서 추가적으로 Route을 지정한다.

App.js에 Route추가 후 http://localhost:3000/create 로 접속해보자.

그래도 input box에 대한 디자인과 사진을 직접(PC) 등록할 수 있도록 등록화면을 좀 개선해 보겠다.

CSS에 아래 내용을 추가한다. ( links.css ) 

.title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.text-title {
    text-align: center;
    font-size: 18px;
}
.input-wrap {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 20px;
}
.input-wrap > label {
    margin-bottom: 5px;
    font-size: 14px;
}
.input-box {
    height: 40px;
    width: 100%;
    position: relative;
}
.input-css {
    height: 44px;
    font-size: 14px;
    padding: 14px 12px;
    width: 100%;
    margin: 3px;
    box-sizing: border-box;
    color: #343434;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background-color: bisque;
}

아래와 같은 링크명과 같이 input-wrap 안으로 다른 항목들도 모두 작성한다.

input-wrap > input-box > input-css 을 각 항목에 순차적으로 적용

일반 INPUT BOX는 위와 같이 적용하면 되나, 이미지 부분은 PC에 있는 이미지를 직접 등록할 수 있게 기능을 부여하기 위해서 아래 부분을 추가적으로 반영한다.

.img_contain {
    display: flex;
margin-top: 10px;
    margin-bottom: 20px;
}
.img_wrap {
    display: flex;
    width: 50%;
 }
.img_box {
    align-items: center;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: gray;
    cursor: pointer;
}
.text_type {
    display: flex;
    align-items: flex-end;
    margin-left: 10px;
  }

http://localhost:3000/create 로 확인해보자.

디자인이 어렵다면 bootstrap에 제공되는 form styles을 활용해도 된다

참고 : https://getbootstrap.com/docs/4.0/components/forms/

⎟⎜디자인 부분은 이정도로 끝내고 다음에는 기능 구현을 해보자.