์ํ๊ณผ ๊ด๋ จ๋ ๊ธฐ๋ณธ ์ ๋ณด, ๋ฑ๋ก, ์ฃผ๋ฌธ, ๋ฐฐ์ก, ํ๋ก๋ชจ์ ๋ฑ ์ฌ๋ฌ ์ต์ ์ ๊ด๋ฆฌํ ์ ์๋ ์ฌ์ดํธ๋ฅผ ๊ตฌํํ ํ๋ก์ ํธ. ํํฐ ํจ์์ ์ปค์คํ ํ ๊ธ ๋ฒํผ์ ํ์ฉํ์ฌ ์ํ์ ๋ ธ์ถ์ ๋ณ๊ฒฝํ๋ ๊ฒ์ด ์ฃผ๋ ๊ธฐ๋ฅ์ด๋ค.
ํจ์ ์์ ์์ผ๋ฉด ๋ฆฌ๋ ๋ ๋ ๋๋ง๋ค ๋ฐ์ดํฐ๊ฐ ๋ถ๋ฌ์์ง๋๋ฐ, ์์๋ฐ์ดํฐ๋ ๋ณํ์ง ์๋ ๋ฐ์ดํฐ์ด๋ฏ๋ก ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ํ๋ฉด์ ํจ์ ์์ ์์น์ํฌ ํ์๊ฐ ์๋ค.
const CATEGORY_LIST = [
{ id: 0, data: '๊ตฌ์ด์ฉ' },
{ id: 1, data: '์์ฌ' },
{ id: 2, data: '๋ฑ์ฌ' },
{ id: 3, data: '์ฑ๋' },
{ id: 4, data: 'ํน์' },
{ id: 5, data: '์๋
' },
{ id: 6, data: 'Bone' },
{ id: 7, data: '์ ๋ฌผ์ ์' },
{ id: 8, data: '์ด๋ฒคํธ' },
{ id: 9, data: '์๋ฆฌ์ฉ' },
{ id: 10, data: '๋ฌด๋ฃ๋ฐฐ์ก' },
{ id: 11, data: '์ธํธ' },
];
function ProdBasicInfo() {
// ์นดํ
๊ณ ๋ฆฌ๋ฅผ ํด๋ฆญํ์ ๋ ๊ฐ์ ๋ฐ๊ฟ์ฃผ๋ state. ์ด๊ธฐ๊ฐ์ ๋น๋ฐฐ์ด.
const [checkedList, setCheckedList] = useState([]);
// onChange์ด๋ฒคํธ๋ฅผ ํตํด์ checked(Boolean)๊ฐ, item(value)๊ฐ์ ๋ฐ์์จ๋ค.
const onCheckedElement = (checked, item) => {
// check๋์์๋ check๋ value๊ฐ์ ๋น๋ฐฐ์ด์ธ checkedList์ ์
๋ฐ์ดํธ๋ฅผ ํด์ค๋ค
if (checked) {
setCheckedList([...checkedList, item]);
}
/* filterํจ์๋ ๋ฐํ๊ฐ์ด true์ธ๊ฒ๋ง ๊ตฌ์ฑ๋ ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํ๋ค.
ํด๋ฆญ๋๊ฐ์ด item์ด๊ณ item์ด el๋ ๋ค๋ฅธ ๊ฒฝ์ฐ๊ฐ true, ์ฆ ํด๋ฆญ๋ ์์๊ฐ ๋น ์ง ๋ฐฐ์ด์ ๋ฐํํ๋ ๊ฒ์. */
else if (!checked) {
setCheckedList(checkedList.filter(el => el !== item));
}
};
/*์ฒดํฌ๋ฐ์ค๊ฐ ์๋ ์นดํ
๊ณ ๋ฆฌ ๋ฐฐ๋์ x๋ฅผ ํด๋ฆญํ์ ๋ ํด์ ๋๋ ๊ธฐ๋ฅ.
์์์๋ ์ฒดํฌ๋ฐ์ค ํด์ ํ๋ ์๋ฆฌ์ ๋์ผํ๊ฒ ๋์ํจ!*/
const onRemove = item => {
setCheckedList(checkedList.filter(el => el !== item));
};
return (
<S.CategoryContainer>
<S.SubTitle>์นดํ
๊ณ ๋ฆฌ *</S.SubTitle>
<S.SelectContainer>
<S.CheckBox>
// ์์๋ฐ์ดํฐ ์นดํ
๊ณ ๋ฆฌ ๋ฆฌ์คํธ์ ๋งต์ ํ์ฉํ์ฌ ๋ ๋๋ง ํจ
{CATEGORY_LIST.map(item => {
return (
/* ๊ณ ์ key๊ฐ ๋ถ์ฌ.
๋ฐฐ์ด์ ๋ ๋๋ง ํ์ ๋ key๊ฐ์ ํตํด ๋ฐฐ์ด์ ์ด๋ค ์์์ ๋ณํ๊ฐ ์์๋์ง๋ฅผ ์์๋ธ๋ค.*/
<S.Label key={item.id}>
/*์ฌ๊ธฐ์ Check๋ Inputํ๊ทธ. type์ ์ฒดํฌ๋ฐ์ค๋ก ์ง์ ํ๊ณ
value๊ฐ์ CATEGORT_LIST์ data๊ฐ์ผ๋ก ์ง์ */
<S.Check
type="checkbox"
value={item.data}
// onChange์ด๋ฒคํธ๋ฅผ ํตํด ๋ณํ๋ฅผ ๊ฐ์งํ๊ณ onCheckedElementํจ์์ check์ฌ๋ถ์ check๋ value๊ฐ์ ์ ๋ฌํด์ค๋ค.
onChange={e => {
onCheckedElement(e.target.checked, e.target.value);
}}
// ์ ํ๋ ์ํ๋ฅผ ๋งํ๋ ๊ฒ. checkeList์ ์์๊ฐ ์์ผ๋ฉด true, ์์ผ๋ฉด false.
checked={checkedList.includes(item.data) ? true : false}
/>
// ์ฒดํฌ๋ฐ์ค ๋ฆฌ์คํธ์ ์ถ๋ ฅ๋ data๊ฐ.
<S.Type>{item.data}</S.Type>
</S.Label>
);
})}
</S.CheckBox>
<S.SelectedBox>
/* ์นดํ
๊ณ ๋ฆฌ๋
checkedList์ ๊ธธ์ด๊ฐ 0์ด๋ผ๋ฉด ๋น๋ฐฐ์ด์ด๋ ๋ป์ผ๋ก ๊ธฐ๋ณธ๊ฐ์ด '์นดํ
๊ณ ๋ฆฌ๋ฅผ ์ง์ ํด ์ฃผ์ธ์' ๋ฌธ๊ตฌ๋ฅผ ์ถ๋ ฅํ๋ค.*/
{checkedList.length === 0 && (
<S.AlertMessage>์นดํ
๊ณ ๋ฆฌ๋ฅผ ์ง์ ํด ์ฃผ์ธ์.</S.AlertMessage>
)}
// ์ ํ๋ ๊ฐ๋ค์ ๊ด๋ฆฌํ๋ ๊ฒ์ด๋ฏ๋ก checkedList์ map์ ํ์ฉํ๋ค.
{checkedList.map(item => {
return (
<S.SelectedCategory key={item}>
<S.Selected>{item}</S.Selected>
<S.CancelChecked onClick={() => onRemove(item)}>
X
</S.CancelChecked>
</S.SelectedCategory>
);
})}
</S.SelectedBox>
</S.SelectContainer>
</S.CategoryContainer>
);
}
const PRODUCT_DATA = [
{ id: null, value: '์ํ์ ์ ํํ์ธ์.' },
{ id: '0001', value: '์๊ผฌ๋ฆฌ 300g' },
{ id: '0002', value: '๋ฏธ๋์คํ 150g' },
{ id: '0003', value: '์์ฌ์ถ๋ฆฌ 150g' },
{ id: '0004', value: '์์ฌ์ฌ๋ผ์ด์ค 150g' },
{ id: '0005', value: '๋ฆฝ์์ด' },
{ id: '0006', value: '๋ก์ค ๋ฑ์ฌ 200g' },
{ id: '0007', value: '๊ฝ๋ฑ์ฌ 200g' },
{ id: '0008', value: '์ฑ๋ ๋ฑ์ฌ 200g' },
];
function ProdBasicInfo() {
// ์ํ๋ช
, ์ํ์ฝ๋ ์ถ๋ ฅ์ ์ํ state
const [selectedDropValue, setSelectedDropValue] =
useState('์ํ์ ์ ํํ์ธ์.');
const handleDropProduct = e => {
// e.target.value. ๊ตฌ์กฐ๋ถํด๋ก e.target์์ ํ๊ฒํ
๋ ์์์ value๋ฅผ ๊ฐ์ ธ์ด. ์ฆ, ์ ํ๋ ์์!
const { value } = e.target;
// PRODUCT_DATA๋ id(์ํ์ฝ๋)์ value(์ํ๋ช
)๋ก ๊ตฌ์ฑ๋ ๊ฐ์ฒด๋ค๋ก ๊ตฌ์ฑ๋ ๋ฐฐ์ด. filterํจ์๋ฅผ ์จ์ ์ ํ๋ ์ํ๋ช
๊ณผ PRODUCT_DATA ์ ์๋ ์ํ๋ช
์ด ์ผ์นํ๋ ๋ฐฐ์ด์ ๋ฐํ. ์ธ๋ฑ์ค 0๊ณผ id๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฐ์ด ์์ ์๋ ๊ฐ์ฒด์ ์ ๊ทผํ์ฌ id๊ฐ์ ์ถ์ถํ๋ค. id๊ฐ์ด ์ํ์ฝ๋. ์ด id๊ฐ์ selectedDropValue์ ์
๋ฐ์ดํธ.
setSelectedDropValue(PRODUCT_DATA.filter(el => PRODUCT_DATA.filter(el => el.value === value)[0].id));
};
return (
<S.ProductNameContainer>
<S.SubTitle>์ํ๋ช
*</S.SubTitle>
<S.ProductBar>
// selectํ๊ทธ์ optionํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ๋๋กญ๋ค์ด ๋ฉ๋ด๋ฅผ ๋ง๋ค์๋ค.
<S.ProductSearch onChange={handleDropProduct}>
{PRODUCT_DATA.map(el => {
return (
<option key={el.id}>
{el.value}
</option>
);
})}
</S.ProductSearch>
</S.ProductBar>
<S.ProductCode>
<S.Code>์ํ ์ฝ๋</S.Code>
// ์ํ์ฝ๋ ์ถ๋ ฅ
<S.ShowingCode>{selectedDropValue}</S.ShowingCode>
</S.ProductCode>
</S.ProductNameContainer>
);
}