[오픈마인드] git 대소문자, github merge, svg 색상 변경

 

팀원들과 상의해서 퍼블리싱을 먼저 하기로 했기 때문에 스타일드 컴포넌트로 일단 화면을 꾸미기만 했다.

 

---

git이 대문자와 소문자를 구별 못해서 git add. git commit이 안되는 이슈

On branch feature-No_Question_페이지-퍼블리싱
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified:   public/assets/images/Messages.svg

팀원의 코드를 merge하고 수정 후 커밋했더니 위에 오류가 떴다. 팀원 코드는 messages.svg이 이미지파일에 있었고 
내 파일에는 Messages.svg파일이 있어서 생긴 오류였다. 

 

깃은 대문자와 소문자를 구별 하지 못해서 대소문자가 다른 경우 위에 오류가 생긴다고 한다.

 

대소문자를 구별하는 git 명령어를 사용했다.

git config --global core.ignorecase false // true: 대소문자 구분 무시, false: 대소문자 구분

 

참고 링크
https://s0ojin.tistory.com/47

>>>> 1.22 오전 11시 수정!! 다음에는 밑에 명령어로 캐시를 꼭 지우자!

git rm -r --cached .
$ git add .

 

 

 

무언가 인식이 되어서 진행은 되었는데 여기서 나는 또 오류가 생겼다.

git checkout feature-No_Question_페이지-퍼블리싱
error: The following untracked working tree files would be overwritten by checkout:
public/assets/images/Messages.svg
Please move or remove them before you switch branches.
Aborting

이 오류는 어떤 오류인지 잘 모르겠다. 구글링 해보니 임시방편으로 강제로 푸시하면 된다고 해서 일단 그렇게 해결했다.

강제로 푸쉬하고 github에서 파일을 확인해보니 Message.svg, messsage.svg 둘다 있었다. 그래서 github에서 Message.svg 파일을 삭제시켜줬다.

 

---

 

github merge에 대하여 더 자세히 알게되었다.

 

밑에는 팀 규칙이다.

1. Approve가 2명 이상일 때 merge 한다.
2. 모든 merge는 squash and merge로 한다.

 

 

깃허브에서 승인을 2명 이상하지 않으면 merge를 못하게 규칙을 설정했다. 그리고 머지가 완료되면 upstream 레포지토리에 브랜치는 필요하지 않기 때문에  자동으로 삭제되게 설정해주었다.

 

 

머지 방법은 squash and merge 방법을 사용했는데,  upstream 레포지토리에 커밋 기록이 남지 않게 해서 merge기록들을 깔끔하게 볼 수 있다.

 

 

---

svg 색상 바꾸기

피그마에서 이미지파일을 svg 파일로 제공한다. 싫어요를 눌렀을 때도 색을 변경하고 싶다. 그런데 svg 파일은 색상을 color나 backround-color으로는 바뀌지 않는다.

filter로 색상이 변경가능한데 계산을 해줘야한다. 

계산사이트
https://codepen.io/sosuke/pen/Pjoqqp

적용

 

   .tumbs-up-image {
        filter: invert(36%) sepia(32%) saturate(6200%) hue-rotate(203deg)
          brightness(100%) contrast(91%);
      }

참고링크
https://velog.io/@pm1100tm/CSS3-HTML-img-%ED%83%9C%EA%B7%B8%EC%97%90-%EB%84%A3%EC%9D%80-svg-%ED%8C%8C%EC%9D%BC%EC%9D%98-%EC%83%89%EC%83%81-%EB%B0%94%EA%BE%B8%EA%B8%B0


색상이 회색일때는 색이 잘 바뀌는데 파란색이거나 특정한 색을 가지고 있으면 위에 방법이 적용이 안된다.. 링크 사이트에서는 여러색상의 svg 파일을 준비해서 사용한다고는 하는데 더 알아봐야 할 것 같다.

.svg 파일 안에서 fill 속성을 바꿔서 여러 색상의 .svg 파일을 만들고, 필요한 상황에 따라서 바꾸는게 좋을지

// messages.svg

.. fill="#818181"/>

// messagesBrown40.svg

.. fill="#542F1A"/>

아니면, .svg 파일은 건드리지 않고 동일한 svg 이미지에서 filter 속성을 바꾸면서 다양한 색상을 입히는 방식으로 하는게 좋을지 더 알아보자.

// style.js

.title-image.brown40{
    background-image: url('/assets/images/messages.svg');
    filter: invert(18%) sepia(12%) saturate(2556%) hue-rotate(337deg)
      brightness(99%) contrast(93%);

 

---