[Tars] 회고록 1일차

항상 프로젝트가 시작되고나서 정신없이 달리고 나면 머리속에 남는 것이 없었다. 그래서 회의록을 통해서 내 머리속에 제대로 기억되길 바라며 매일 회의록을 작성하겠다.

 

진행상황

현재 프로젝트는 디자인나왔고 프로젝트 세팅이 다 끝나고 각자 맡은 역할과 공통적인 부분을 만들기 시작하는 시기이다.

 나는 프론트엔드 팀장을 맡아서 노션에 팀에 관한 규칙과 일정을 정하고 일주일에 2번씩 회의를 하고있다. 팀장을 맡으면서 가장 중요하게 생각하고 있는 부분은 코드리뷰이다. 반드시 다른 사람들의 PR에 메시지를 작성하게 하여 모두 다른 팀원의 코드를 꼼꼼히 읽으며 피드백을 하도록 하고있다.

 

 

 

공통 컴포넌트 제작(공통 버튼)

 

자주 사용되는 하단 버튼을 공통 컴포넌트 제작을 하였다.

처음으로 합성 컴포넌트 방식으로 제작을 하였는데 버튼을 제작하는데에는 별로 좋은 방식이 아니였다.

const HomePage = () => {
	return (
		<div>
			<CommonButton>
				<CommonButton.Round cancle blur>
					확인
				</CommonButton.Round>
				<CommonButton.Square cancle blur>
					확인
				</CommonButton.Square>
			</CommonButton>
		</div>
	);
};

네모난 버튼은 가로가 꽉차야하고 둥근버튼은 max-width : 500px이여서 같은 <CommonButton>태그로 묶는데 한계가 있었다.

그래서 cancle blur text도 모두 props로 만들었는데 이럴거면 합성컴포넌트로 제작을 할 필요가 없었다.

그리고 두 개 버튼을 위의 코드처럼 같이 쓰게되면 바닥에서 겹쳐버렸다.

 

합성컴포넌트를 사용하려면 부모 엘리먼트의 UI가 비슷하고 todo처럼 무한히 늘어나는 것에 적용을 해야겠다.

내일 다시 보통의 컴포넌트로 되돌리도록 리팩토링하자.

 

globalStyle 변경

export const theme = {
	font: {
		head_a: {
			fontSize: "1.5rem",
			fontWeight: "500",
		},
		head_b: {
			fontSize: "1rem",
			fontWeight: "500",
		},
		head_c: {
			fontSize: "0.875rem",
			fontWeight: "700",
		},
		body_a: {
		...
	},
	color: {
		// 폰트 색상
		font_black: "#111111",
		font_deepGray: "#505050",
		font_gray: "#767676",

		// 색상
		main_deepBlue: "#385678",
		main_Blue: "#0176F9",
		main_lightBlue: "#E6F1FE",
		main_yellow: "#FFE276",

		// 줄, 배경
		line: "#F0F0F6",
		bg: "#F7F7FB",

		// 버튼
		button_disabled: "#E5E5EC",
		button_deactivated: "#999999",

		// 시스템 색상
		success: "#04B014",
		error: "#DC0000",
	},
};

 

요런식으로 글로벌스타일을 지정하고 있는데 스네일케이스를 사용하려고 했는데 main_Blue, main_deepBlue처럼 이상한게 있어서 전부 스네일케이스로 변경하였다.

 

node_module

현재 프로젝트는 vite와 yarn berry를 사용하는데 yarn dev를 하면 자꾸 node_module이 생긴다.

이건 내일 고쳐보자.