프론트엔드: 기본적인 Style 관련 설정

• 협업 전에 맞춰야 할 것들은 생각보다 많다.. 프론트엔드 개발자들끼리 프리티어 설정을 통일하고,

/* prettier*/
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "prettier.trailingComma": "all",
  "prettier.printWidth": 100,
  "prettier.arrowParens": "always",
  "prettier.endOfLine": "auto",
/* prettier*/

• 이번엔 일관적인 스타일 적용을 위하여 관련 파일들을 생성했다. 혼자 작업할 때도 필요한 스타일 통일성, 하지만 협업할 땐 더욱 중요한 것들! 일단 우리는 Next.js ver.13에서 Styled-component를 사용하기로 했다. 각자 본격적인 기능 개발에 들어가기 전에, 스타일 관련 파일들을 정리할, style 폴더 내부에 세 가지 파일을 생성했다. Global-style.ts, reset.css, theme.ts

---

1. Global-style.ts

• Global-style은 프로젝트의 전역 스타일을 정의하는 데 사용될 것이다. 필요에 따라 다른 전역 스타일을 추가할 예정이다. 이 파일을 프로젝트의 진입점에서 불러와서 사용하면 해당 스타일이 프로젝트 전반에 적용된다. 따라서 app > layout.tsx 파일에 적용한다.

'use client';

import { createGlobalStyle } from 'styled-components';
import './reset.css';

export const GlobalStyle = createGlobalStyle`
* {
  box-sizing: border-box;
}
`;

2. Reset CSS.ts

• Reset CSS는 웹 브라우저의 기본 스타일을 초기화하거나 일관되게 만들기 위해 사용되는 CSS 스타일 시트이다. 각 브라우저는 자체적으로 기본 스타일을 제공하며, 이러한 기본 스타일은 브라우저 간에 차이가 있을 수 있다.
• Reset CSS를 하지 않는다면? 이로 인해 동일한 HTML 요소라도 각 브라우저에서 렌더링되는 결과가 다를 수 있다. 따라서 이러한 브라우저 간의 차이를 표준화하고, 사용자가 자신만의 스타일을 적용하기 전에 모든 브라우저에서 동일한 기본 스타일을 가지도록 도와준다. 주요 목표는 각 요소의 기본 마진, 패딩, 텍스트 스타일 등을 통일시키는 것이다.

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

3. Theme.ts

• 테마 파일에 기본적인 색상, 글꼴 크기, 화면 크기 등을 정의함으로써, 스타일의 일관성을 유지할 수 있고, 향후 스타일 변경 필요 시 유지보수가 간편해지며, 여러 컴포넌트에서 재사용할 수 있어 효율적인 개발이 가능하다.

const Theme = {
  colors: {
    black: '#000000',
    white: '#FFFFFF',
    gray100: '#F2F2F2',
    gray200: '#E0E0E0',
    gray300: '#BDBDBD',
    gray400: '#828282',
    gray500: '#4F4F4F',
    gray600: '#333333',
  },
  fontSize: {
    large: '1.25rem',
    medium: '1rem',
    small: '0.875rem',
    xsmall: '0.75rem',
  },
  screen: {
    mobile: '480px',
    tablet: '1024px',
  },
};

export default Theme;