현재까지 게시글, 헤더, 프로필을 완성했다. 그런데 생각보다 수정해야할 부분이 많아서 전체적인 코드 정리를 위한 이슈를 팠다!

px => %로 레이아웃 크기 단위 변경

지금까지 모든 작업을 px로 조정했는데 문제가 생겼다. px로 레이아웃 크기를 조절할 경우 컴퓨터마다 화면 크기가 달라 레이아웃이 안예뻐지는 이슈가 발생했다! 이를 해결하기 위해 %를 단위로 사용할까했지만 그 경우 폰트는 %를 사용할 수 없어(폰트 % 단위 : 화면 기준X) 폰트를 제외한 요소들만 비율이 맞춰지는 문제가 있었다.




치열한 토론의 흔적

REM,EM 등등도 알아보고 배민,네이버 등 여러 웹사이트를 줄여보며(?) 고민한 결론은 %를 사용하되 글씨만 px로 조금 작게 하기가 됐다.

태그 여러 줄로 표시

처음 생각했던 게시글 디자인인데 이 때는 이상하게 태그를 작성자 정보 옆 쪽에 배치하는게 예뻐보였다🤔





팀원 의견을 반영해 작성자 정보 밑에 배치했다. 원래 디자인상 이유와 어차피 태그를 그렇게 많이 달지 않을 것 같아서 5개까지 제한하기로 했는데 이제 굳이 그럴 필요가 없기 때문에 제한을 없앴다. 그리고 태그가 많아졌을 시에 밑 줄로 넘어가게 하기 위해 flexWrap 속성의 wrap을 써줬다.

flexWrap="wrap"

nowrap: 모든 요소를 한 줄에 배치하고, 내용이 넘칠 경우 스크롤이 생성
wrap: 요소들을 여러 줄로 나누어 배치하며, 내용이 넘치더라도 다음 줄로 이동하여 배치





사실 작성자 정보 옆 쪽에 배치했을 때도 태그 글자수가 많을 경우에 이 작업을 해줬어야 했다.

map 사용

pm님이 알려주신 방법으로 효율적인 코드를 작성했다!

  const tags = [
    "이봉이 좋아",
    "이봉이 싫어",
    "메롱",
    "메롱롱",
    "메롱롱롱롱롱롱롱",
    "메롱롱롱롱롱롱롱",
    "메롱롱롱롱롱롱롱",
    "메롱롱롱롱롱롱롱",
  ];

임시로 배열 생성

 {tags.map((tag, i) => {
              return (
                <Chip
                  label={tag}
                  variant="outlined"
                  color="primary"
                  style={{ cursor: "pointer", fontSize: "15px" }}
                />
              );
            })}

알고리즘 풀 때만 사용하던 map
여기서 보니까 반갑다!

함수 이용해서 깔끔하게!

헤더 우측은 로그인 시와 아닐 시에 레이아웃이 바뀐다. 그래서 임시로 주석 처리를 해놨는데 임시로 함수를 만드는게 더 깔끔할 것 같았다.

const login = true;

{login ? (
            <Stack width="12%" height="70%">
              <img
                alt="profileImage"
                src={profileImage}
                width="100%"
                height="100%"
                style={{ cursor: "pointer", borderRadius: "50%" }}
                aria-controls={open ? "basic-menu" : undefined}
                aria-haspopup="true"
                aria-expanded={open ? "true" : undefined}
                onClick={handleClick}
              />
            </Stack>
          ) : (
            <Stack
              width="50%"
              height="10%"
              alignItem="flex-end"
              justifyContent="center"
              direction="row"
              gap="10%"
            >
              <Stack style={{ cursor: "pointer", fontSize: "150%" }}>
                로그인
              </Stack>
              <Stack style={{ fontSize: "150%" }}>|</Stack>
              <Stack style={{ cursor: "pointer", fontSize: "150%" }}>
                회원 가입
              </Stack>
            </Stack>
          )}

매번 드래그해서 주석 열고 닫고 했는데 이제 함수의 boolean 값만 바꿔주면 된다.

 const login = false;

이 밖에도 헤더 메뉴를 MUI 메뉴로 바꾸는 등 여러 작업을 했다.
코드 리뷰도 잘 진행되고 있다😸





생각보다 리팩토링에 시간이 오래 걸렸다. 오늘도 늦게까지 해야될 것 같다,,