Portfolio


const temp() {
  return (
    <div>
      
    </div>
  )
}

export default temp;


// 부모
const openModal = () => {}

<자식 onClickModalCancel={openModal} />


interface CommonInputProps {
	width: string;
	errorMsg: string;
}

function CommonInput(props: CommonInputProps) {
	const { width, errorMsg } = props;
	...
}


// 예시 - 직접 짰는데 좀 이상하니까 진지하게 보시지 말규 네이밍과 패턴만 봐주세요 . .
// ParentsComponent.jsx
function ParentsComponent() {
	const [buttonContent, setButtonContent] = useState("등록");
	const changeContent = (key, value) => { // 네이밍 기준 - 함수의 기능 
		setButtonContent("삭제");


c
...
	};
	const props = {}
...
	return(
		<>
			<ChildrenComponent onClickButton={changeContent} /> // prop 네이밍 기준 - 이벤트 핸들러 비스무리 onClick~
...

// ChildrenComponent.jsx
function ChildrenComponent({ onClickButton }) {
...
	return(
		<>
			<Button onClick={changeContent} />
...


import { css } from 'styled-components';

export const Z_INDEX = {
  closeUp: 0,
  camOn: 10,
  camOff: 20,
  nickname: 25,
  question: 30,
  cheers: 40,
  modal: 50,
  updownNum: 55,
  toast: 60,
};

export const FULL_WIDTH_BUTTON = css`
  width: 100%;
  height: 58px;
  border-radius: 14px;
  font-size: 16px;
`;