acisliver / goorm-team-challenge

goorm Team-Challenge

📚 참고자료

• GDS 스토리북 링크
• 피그마 시안 링크

⚙️ 프로젝트 초기 설정법

1. npm i
2. eslint & prettier 사용하실 분은 Eslint & Prettier 사용법을 확인해주세요.

Eslint & Prettier 사용법

사용하실분만 사용하시면 됩니다. (선택 사항)

1. vscode extension 중 ESLint와 Prettier 설치

2. 명령 팔레트 오픈 (command(또는 ctrl) + shift + P)

3. 사용자 설정(JSON)오픈 (Preferences: Open User Settings (JSON))

4. 아래 내용 Copy & Paste

   {
   	"workbench.colorTheme": "Default Dark+",
   	"editor.formatOnSave": false,
   	"editor.codeActionsOnSave": {
   		"source.fixAll.eslint": true
   	}
   }

🚀 프로젝트 실행법

1. npm start
2. 상단 메뉴바의 프로젝트 > 실행URL과포트 클릭하기
3. 3000포트에 등록된 URL 확인
4. URL에서 실행 화면 확인

🎨 GDS 및 alias 사용법

// GDS 컴포넌트
import { Button } from '@goorm-dev/gds-challenge';

// GDS 아이콘
import { ChevronDoubleLeftIcon } from '@goorm-dev/gds-icons';

// alias (src/* === @/*)
import { Card } from '@/components';

const Example = () => {
	return (
		<>
			<Button icon={<ChevronDoubleLeftIcon />}>GDS Example</Button>
			<Card>Alias Example</Card>
		</>
	);
};