기본프로필 svg이미지 생성함수, Dashboard페이지 반응형 적용

[foxholic9]

=====================================

• svg이미지 생성기
  svg 이미지를 코드상에서 만들고, 해당 이미지 파일 전체를 url로 변환하는 함수입니다.
  일단 색상은 전에 썼던걸 재사용하긴했는데 수정할 수 있게 해놨습니다.

컴포넌트 로직은 이렇습니다.

1. 랜덤 색상 선택
2. 색상과 이름 첫글자로 svg 이미지를 생성
3. svg 이미지를 url화

그래서 결과물이 url코드(문자열)인데 0.6kb정도 됩니다. 이미지임에도 매우 작습니다.

이 url은 그대로 이미지태그 src속성에 넣어도 확인 가능합니다.
위 사진처럼 새로고침시마다 배경이 바뀝니다. 이는 의도한 결과입니다.
회원가입시 이미지를 기본으로 추가하는 로직은 이렇게 구상해봤습니다.

1. 회원가입 하는 코드 이후 다시 await 으로 프로필 변경 api 호출
2. 혹시나 1번에서 프로필이 적용되지 않았을 경우에 대비해 null일 경우 기본이미지 출력

1번이 실패할 경우에 대한 방어코드는 필요하긴합니다만..( 느린 인터넷에서 회원가입 중 새로고침을 누른다 등)

프로젝트 결과물이 어느정도 나온 이후에 수정해도 될 것 같습니다.

테스트해보면 새로고침마다 다른 배경색으로 이미지가 생깁니다. 이는 의도한 스펙입니다
현 프로젝트에서는 defaultProfileImgMaker 함수만 쓰면 될 것 같습니다.
현재 간단한 디자인만 적용되어있습니다.. 더 나은 디자인 의견 받습니다.

=====================================

• Dashboard 페이지 반응형디자인 적용됨.
  새로운 칼럼 추가하기 및 task 추가 버튼 페이지에 추가했습니다.
  사용한 두 버튼의 width값과 일부 scss값을 수정했습니다.
  overflow관련 옵션 수정.
  100vh로 높이 지정. 카드가 없더라도 화면 바닥까지 닿도록 만듬.

scroll.scss
스크롤바 디자인 추가. import만 해주면 간단하게 사용할 수 있습니다.
회색 얇은 막대로, 아이폰 스크롤 디자인을 참고한 스크롤바입니다.

[ssumai-kr]

확인 했습니다!! 만들어주신 이미지 생성기 따라서 프로필 컴포넌트 수정하겠습니다!

[eunji-0623]

프로필 이미지 생성 부분 잘 작성해주신 것 같습니다! 굿~~!

[ghost]

확인했습니다!