[Codecamp-team project] Day 9 mock up 작업하기

📌 벼락치기 mock up 작업

1차 점검 후 내일 또 다시 점검날이라 벼락치기로 우다다다 mock up 작업을 했다
디자이너... 하
연락두절 디자이너는 수정작업을 1도 안해줬고 결국 디자인 없이 와이어 프레임으로 각자 담당 페이지 mock up 작업에 들어갔다

일단은 상상 디자인 피그마를 머릿속에 그리며 다들 mock up 작업을 시작했다

📌 비대면 팀 회의

분명 힌남노 태풍때문에 오늘 절대 밖에 못나갈거라 생각했고, 학원도 그렇게 생각해서 비대면을 시켜줬다
아침에 눈을 떴는데 날씨가 미친듯이 좋았고, 왕복 세시간을 번 나는 꽤 행복했다

비대면 회의도 생각보단 진행이 잘됐고 서로 공유해야 할 내용 공유도 잘 됐다!
실시간 채팅 기능, 명언 랜덤 기능을 미리 다 해두신 백엔드...
API도 조만간 다 나오지 않을까 싶다
이제 정말 프론트 문제인가

📌 디자인 맞추기 위한 프론트 회의

9시 (21시)에 어느정도 디자인 작업 후 다같이 공유하며 보기로 했고,
역시 결과는... 다들 상상 디자인이라 제각각이였다

차근차근 폰트 사이즈, 버튼 색상, hover 색상 등등을 맞췄고 내일 12시 점검 전까지 통일성 있게 수정하기로 했다
과연 그 통일성이 어디까지 될진 모르겠지만?

[✨ 새롭게 안 CSS 지식 : white-space]

카테고리 버튼을 모바일 크기 내에서 드래그를 활용해 일자로 쭉 정렬하고 싶었다
그런데 width 내에서 overflow: scroll을 주면 width 내에 text가 낑겨 세로로 밀려 나가는 현상이 계속 발생했다

대체 이걸 어떻게 해결하나 고민 + 걱정하다가 폭풍 구글링과 최쥥 찬스를 써서 알아낸 white-space!

white-space: nowrap을 할 경우 공백을 여러개 넣어도 1개만 표시되고 텍스트가 길어도 줄바꿈이 되지 않고 같은 줄에 계속 표시가 된다고 한다
그랬더니 감쪽같이 가로로 길게 버튼들이 생성되며 스크롤이 가능해졌다ㅠㅠ감격

기념으로 여기에 코드도 남겨둬야지!

[ styles.ts ]

export const ButtonWrapper = styled.div`
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  max-width: 390px;
  column-gap: 15px;
  padding: 10px 0px;

  ::-webkit-scrollbar {
    display: none;
  }
`;

export const Button = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;

  height: 40px;
  color: rgba(42, 47, 61, 0.64);
  font-size: 1rem;
  background-color: #f5f7fa;
  border-radius: 18px;
  padding: 20px;

  cursor: pointer;

  :hover {
    background-color: #6fe5ff;
  }
`;

[presenter.tsx]

const ButtonList = [
  "전체",
  "직업,진로",
  "연애,결혼",
  "대인관계",
  "자아,성격",
  "가족",
  "자유주제",
];

export default function CommunityListPresenter() {
  return (
      <S.ButtonWrapper>
        {ButtonList.map((el) => (
          <S.Button key={el}>{el}</S.Button>
        ))}
      </S.ButtonWrapper>
  )
}