[Spring Boot] SVG와 PNG , 준우승 은별 표시

TIL 41일차 개인프로젝트2

svg 파일

• Scalabe Vector Graphics 의 약자로, 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일형식 ( w3c 주도하에 개발된 오픈 표준의 벡터 그ㅐ픽 파일 형식이다.)
• xml 텍스트파일들로 정의되어 검색화,목록화,스크립트화, 압축이 가능하다.

 

png파일

• Portable Network Graphics 비손실 그래픽 파일 포맷. bitmap으로 되어있다

 

PNG의 경우, 확대 축소시에 aliasing 현상이 생기는데 SVG의 경우 형태가 유지된다.

 

색 표현이 수학 계산이 필요하기 때문에 이미지가 복잡할수록 로딩 시간이 오래걸린다. css의 style="fill:color"로 색을 제어할 수 있다.

출처 wiki

---

그래서 우승자 금별에 준우승자 은별을 달아주는기능을 추가하기로 했다.

여기서 걸리는 문제는,, 내가 우승자만 확인하는 용으로 디비 설계를 대충해버린것..? ㅠ_ㅠ

일단은 그냥 우승 : 양수 / 준우승 : 음수로 해서 절댓값으로 리그 구분하는 방식으로 구현해보았다.

그러면 등록은 바로 할 수 있고,

{{#hasLeagueResults member.leagueResults}}
<div style="margin-top: -15px;">
  {{#each member.leagueResults as |result|}}
  {{#isWinner result}}
  <img src="/etc/star.svg" class="star"  data-bs-toggle="tooltip" data-bs-placement="bottom" title='{{result}}회 대회 우승멤버🎉' />
  {{else}}
  <img src="/etc/star-silver.svg" class="star"  data-bs-toggle="tooltip" data-bs-placement="bottom" title='{{getLeagueId result}}회 대회 준우승멤버' />
  {{/isWinner}}
  {{/each}}
  <br/>
  {{member.summonerName}}</div>
{{else}}
{{member.summonerName}}
{{/hasLeagueResults}}

hasLeagueResults(값 있는지)->isWinner(양수인지)->getLeagueId(절댓값 반환) 으로 가져올 수 있다.

 

여기서 문제가 생긴게 등록한 시점이 다르면 리그결과가 sorting이 안되는것,

    @Test
    public void 리그결과_정렬(){
        //given
        String summonerName = "롤xx";

        MemberEntity memberEntity = memberRepository.findMemberEntityBySummonerName(summonerName);
        List<Long> results = memberEntity.getLeagueResults();

        Assertions.assertThat(results.get(0)).isEqualTo(2);
        Collections.sort(results, (r1,r2)-> {
            return Long.valueOf(Math.abs(r1)).compareTo(Math.abs(r2));
        });

        Assertions.assertThat(results.get(0)).isEqualTo(-1);
    }

////
        if(member.getLeagueResults().size()!=0){
            memberDto.setLeagueResults(member.getLeagueResults().stream()
                    .sorted( (r1,r2) -> Long.valueOf(Math.abs(r1)).compareTo(Math.abs(r2)))
                    .collect(Collectors.toList())
            );
        }

 

sort , 그리고 Stream으로 sorting하는 함수로 1회가 2회보다 먼저 나타나게 했다.

나중에는 양수먼저,오름차순->음수오름차순 (금별다음 은별이 나타나도록) 하는 방식도 생각해봐야겠다.

 

챠란~

1회 준우승을 했었어서 이제 내이름에도 별이 달렸다 ~ 호호