<aside> 💡 ‣ └─ ‣ └─ ‣
</aside>
public
└── images
└── data
└── mockData.json
**src**
└── components
│ └── Nav
│ │ ├── Nav.js
│ │ └── Nav.scss
│ └── // OtherComponent
└── pages
│ └── Login
│ │ ├── Login.js
│ │ └── Login.scss
│ └── Main
│ │ ├── Main.js
│ │ └── Main.scss
│ └── Login
│ │ ├── Login.js
│ │ └── Login.scss
│ └── Main
│ ├── Main.js
│ └── Main.scss
└── styles
│ ├── common.scss
│ ├── mediaquery.scss
│ ├── mixin.scss
│ ├── reset.scss
│ └── variables.scss
├── Router.js
└── config.js
// + 추가 예정
// package.json
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"sass": "^1.57.1",
},
"DevDependencies": {
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"prettier": "^2.8.1",
"stylelint": "^14.16.1",
"stylelint-config-prettier-scss": "^0.0.1",
"stylelint-config-property-sort-order-smacss": "^9.0.0",
"stylelint-config-standard-scss": "^6.1.0",
"stylelint-scss": "^4.3.0"
}
[CSS property 순서]
- **Layout Properties** (position, float, clear, display)
- **Box Model Properties** (width, height, margin, padding)
- **Visual Properties** (color, background, border, box-shadow)
- **Typography Properties** (font-size, font-family, text-align, text-transform)
- **Misc Properties** (cursor, overflow, z-index)