All files / src/chap06 MyButton.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// import '../stories/button.css';
 
// export default function MyButton ({
//     primary = false,
//     backgroundColor = null,
//     size = 'medium',
//     label = 'Button',
//     ...props
//   }) {
//   // primary 속성에 따라 스타일 클래스 결정
//   const mode = primary ?
//     'storybook-button--primary' : 'storybook-button--secondary';
//   return (
//     // Props를 기반으로 button 요소를 조립
//     <button
//       type="button"
//       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
//       style={backgroundColor && { backgroundColor }}
//       {...props}
//     >
//       {label}
//     </button>
//   );
// };
 
 
 
// Code 6-2-6
// import PropTypes from 'prop-types';
// import '../stories/button.css';
 
// /**
//  * 속성 설정에 따라 다양한 버튼 생성
//  */
// export default function MyButton ({
//     primary = false,
//     backgroundColor = null,
//     size = 'medium',
//     label = 'Button',
//     ...props
//   }) {
//   // primary 속성에 따라 스타일 클래스 결정
//   const mode = primary ?
//     'storybook-button--primary' : 'storybook-button--secondary';
//   return (
//     // Props를 기반으로 button 요소를 조립
//     <button
//       type="button"
//       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
//       style={backgroundColor && { backgroundColor }}
//       {...props}
//     >
//       {label}
//     </button>
//   );
// };
 
// // Props의 타입 정보 선언
//   /**
//    * Primary 색상 활성화 여부
//    */
// MyButton.propTypes = {
//   primary: PropTypes.bool,
//   /**
//    * 배경색
//    */
//   backgroundColor: PropTypes.string,
//   /**
//    * 버튼 크기
//    */
//   size: PropTypes.oneOf(['small', 'medium', 'large']),
//   /**
//    * 버튼 캡션
//    */
//   label: PropTypes.string.isRequired,
//   /**
//    * 클릭 핸들러
//    */
//   onClick: PropTypes.func,
// };
 
 
 
// Code 6-2-10
import PropTypes from 'prop-types';
import '../stories/button.css';
 
/**
 * 속성 설정에 따라 다양한 버튼 생성
 */
export default function MyButton ({
    primary = false,
    backgroundColor = null,
    size = 'medium',
    label = 'Button',
    handleClick,
    ...props
  }) {
  // primary 속성에 따라 스타일 클래스 결정
  const mode = primary ?
    'storybook-button--primary' : 'storybook-button--secondary';
  return (
    // Props를 기반으로 button 요소를 조립
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      onClick={handleClick}
      {...props}
    >
      {label}
    </button>
  );
};
 
// Props의 타입 정보 선언
  /**
   * Primary 색상 활성화 여부
   */
MyButton.propTypes = {
  primary: PropTypes.bool,
  /**
   * 배경색
   */
  backgroundColor: PropTypes.string,
  /**
   * 버튼 크기
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  /**
   * 버튼 캡션
   */
  label: PropTypes.string.isRequired,
  /**
   * 클릭 핸들러
   */
  handleClick: PropTypes.func,
};
 
// import PropTypes from 'prop-types';
// import '../stories/button.css';
 
// /**
//  * 属性の設定に応じて種々のボタンを生成
//  */
// export default function MyButton ({
//     primary = false,
//     backgroundColor = null,
//     size = 'medium',
//     label = 'Button',
//     // handleClick,
//     ...props
//   }) {
//   // primary 속성에 따라 스타일 클래스 결정
//   const mode = primary ?
//     'storybook-button--primary' : 'storybook-button--secondary';
//   return (
//     // Props를 기반으로 button 요소를 조립
//     <button
//       type="button"
//       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
//       style={backgroundColor && { backgroundColor }}
//       // onClick={handleClick}
//       {...props}
//     >
//       {label}
//     </button>
//   );
// };
 
// // Propsの型情報を宣言
//   /**
//    * Primaryカラーを有効にするか
//    */
// MyButton.propTypes = {
//   primary: PropTypes.bool,
//   /**
//    * 背景色
//    */
//   backgroundColor: PropTypes.string,
//   /**
//    * ボタンの大きさ
//    */
//   size: PropTypes.oneOf(['small', 'medium', 'large']),
//   /**
//    * ボタンのキャプション
//    */
//   label: PropTypes.string.isRequired,
//   /**
//    * clickハンドラー
//    */
//   onClick: PropTypes.func,
//   // handleClick: PropTypes.func,
// };