컴포넌츠 작성 : VAC 패턴
타입스크립트 : Type Alias 방식
// Home 컴포넌츠의 props
type HomeProps = {
props: string
}
function Home({props}: HomeProps){
return <div>홈의 프롭스 : {props}</div>
}
TypeScript
복사
scss 사용법
•
컴포넌츠 각각의 tsx 파일에 해당하는 scss 파일 따로 만들기
// .scss 파일
@use '../../styles/color' as C; // 색상
@use '../../styles/utils' as U; // 유틸 (flex, size, box-shadow)
@use '../../styles/typography' as T; // 글자
.container {
// flex 기본 설정 : direction: row, justify: center, align: center
@include U.flex-c();
@include U.flex-c(column, flex-start, flex-start) // 변경해서 사용 가능
// size 기본 설정 : 가로 값 입력하면 가로 === 세로 길이 동일
@include U.size(100%); // 가로 세로 모두 100%
@include U.size(100px, 50px); // 가로, 세로 직접 입력해서 사용 가능
}
.title {
@include T.blue-regular-20; // blue 색상의 regular 두께의 글자 크기 20
}
.box {
border: 1px solid C.$blue500;
}
Scss
복사
// App 컴포넌츠
import styles from './App.module.scss'
function App(){
return <div className={styles.container}>App</div>
}
export default App
JavaScript
복사
Icon 컴포넌츠 사용방법
import Icon from './components/common/Icon'
import './styles/global.scss'
function App() {
return <Icon name='calendar' size={50} />
}
export default App
JavaScript
복사
name 속성에서 드롭 다운으로 나오는 이름 중 1가지 선택
필요한 Icon 없을 때 추가 방법
1.
피그마에서 Icon 선택하여 svg로 export
2.
•
<symbol> </symbol> 부분 복사
3.
/src/assets/sprite-icon.svg 파일의 가장 마지막 <symbol> </symbol> 밑에 추가( </svg> 바로 전)
•
원하는 아이콘 이름을 id 속성에 추가
4.
/src/components/common/Icon.tsx 파일의 type IconNameType 에 아이콘 이름 추가
•
사이즈 추가는 type IconProps 의 size 에 추가
