JS-Developer 퍼블리싱 개발세팅
퍼블리싱 작업 진행 전 디렉토리 및 다크모드 세팅
사용 라이브러리
npm install sass
Sass : CSS를 확장한 스타일시트 언어- Emotion vs Sass
- 원래 Emotion은 React의 컴포넌트-기반 설계, JS 중심 로직, 동적 스타일, 모듈화에 최적화되어 있어 쓰는게 좋지만 이 전 프로젝트에서 Emotion을 사용해봤기 때문에 Sass사용해보기로 하였음
디렉토리 구조
src
├── assets
│ └── img
├── styles
│ ├── abstracts
│ │ ├── _function.scss
│ │ ├── _mixins.scss
│ │ └── _variables.scss
│ ├── base
│ │ ├── _typography.scss
│ │ ├── _util.scss
│ │ ├── reset-css.d.ts
│ │ └── reset.ts
│ ├── components
│ │ ├── layout
│ │ │ ├── footer.module.scss
│ │ │ ├── header.module.scss
│ │ │ └── layout.module.scss
│ │ └── ui
│ │ ├── button.module.scss
│ │ ├── card.module.scss
│ │ ├── input.module.scss
│ │ └── switch.module.scss
│ └── pages
│ ├── devx.module.scss
│ ├── home.module.scss
│ └── main.scssabstracts
- 전역 설정값과 유틸리티 함수를 저장 (변수, 믹스인, 함수)
- 각 파일에 _(언더스코어)를 붙여 부분파일로 작성 후 main.scss에서 import
/* _function */
/* color와 font 내장함수 */
@use 'sass:map';
@use './variables' as *;
@use '../base/typography' as *;
// 컬러 함수
@function color($theme, $color) {
@return map.get(map.get($colors, $theme), $color);
}
/* _mixins */
/* color와 font 믹스인 */
@use 'sass:map';
@use './variables' as *;
@use '../base/typography' as *;
// 컬러 스타일
@mixin color($theme, $color) {
color: map.get(map.get($colors, $theme), $color);
}
@mixin bg-color($theme, $color) {
background-color: map.get(map.get($colors, $theme), $color);
}
/* _variables */
/* 프로젝트에 사용되는 color */
$colors: (
main: (
primary: #00b075,
primary2: #00a870,
생략 ~~~~base
- 프로젝트의 초기화 및 전역 스타일을 정의 (기본 텍스트, 문단, 타이포그래피)
/* npm i reset-css 설치 후 양식에 맞게 적용*/
/* reset.ts */
import 'reset-css';
import 'sanitize.css';
import 'sanitize.css/forms.css';
import 'sanitize.css/typography.css';
/*reset-css.d.ts*/
declare module 'reset-css';
/*_typography*/
/*텍스트 폰트패밀리, 폰트 적용, 요소*/
$font-family: (
default: (
'Wanted Sans Std Variable',
~~~~
$fonts: (
T1: (
font-weight: 600,
font-size: 36px,
line-height: 44px,
letter-spacing: 0%
~~~~
/*_util*/
/*공통 스타일링*/
.required::after {
content: '*';
color: red;
}
다크모드
body에 클래스를 넣어 다크모드 활성화
배경화면과 텍스트의 light dark모드가 하나로 정해져 있지 않아 각 클랙스 스타일에 다크모드적용 -
목표 :
<body>태그에 dark-theme 클래스를 추가하여 다크모드 전환 시 전체 배경과 텍스트 색상을 일괄 변경하는 것으로 목표
ex) light100 → dark100 -
문제점 : 디자인 시스템이 일관되지 않아 실제 적용된 컬러가 컴포넌트마다 다양하게 사용되고 있었음.
ex) light100 → dark700 -
해결방법 : 각 컴포넌트마다 다크모드 전용 클래스 또는 조건부 스타일을 별도로 지정
.home-subtitle {
@include font-style(Main-body);
color: color(light, 800);
max-width: 750px;
text-align: center;
/* 다크모드 분리 */
:global(.dark-theme) & {
color: color(dark, 400);
}
}
작은 코드 하나에도 책임을 담는 개발자입니다!