[FE] 프론트 웹 성능 최적화 (#375)

* refactor: api type 개선 (#318)

* [FE] issue319:  테마 리팩토링 (#321)

* feat: theme 수정

screens, fontSize, fontWeight, radius 추가

* refactor: fontSize, fontWeight theme 사용

* refactor: radius theme 적용

* fix: theme 오류 수정

* fix: theme 오류 수정

* refactor: lint 적용

* chore: esbuild대신 babel을 사용한다

* chore: esbuild minimizer와 persistent cache 적용

* refactor: PathMatcherInterceptor 생성 및 로그인 인터셉터 개선 (#307)

* [BE] issue320: 기존 인증에서 githubId 가 아닌 memberId 사용하도록 리팩터링 (#327)

* chore: 불필요한 import 구문 제거

* refactor: MemberService memberId 받도록 변경 & MemberData `memberId` 를 담아서 반환

* refactor: ReferenceRoom `memberId` 사용하도록 변경

* refactor: SearchingReferenceRoom `memberId` 사용하도록 변경

* refactor: Review `memberId` 사용하도록 변경

* refactor: Study `memberId` 사용하도록 변경

* refactor: AuthenticationPrincipal 제거

* refactor: 액세스 토큰 재발급 memberId 사용

* refactor: token 엔티티 memberId 가지도록 수정

* fix: Auth 인수 테스트 수정

* feat: 사용하지 않는 필드 제거 및 DB 조회 최소화

* refactor: orElseThrow 예외 타입 명시

* test: orElseThrow -> get 으로 수정

* refactor: 스터디장 Fixture 제거

* chore: 코드 냄새 제거

* feta: 충돌 해결

* Merge branch 'develop' of https://github.com/woowacourse-teams/2022-moamoa into refactor/320-auth-memberid

# Conflicts:
#	backend/src/main/java/com/woowacourse/moamoa/auth/config/AuthConfig.java

* Revert "[BE] issue320: 기존 인증에서 githubId 가 아닌 memberId 사용하도록 리팩터링 (#327)" (#354)

This reverts commit b272482.

* Refactor/320 auth memberid (#355)

* chore: 불필요한 import 구문 제거

* refactor: MemberService memberId 받도록 변경 & MemberData `memberId` 를 담아서 반환

* refactor: ReferenceRoom `memberId` 사용하도록 변경

* refactor: SearchingReferenceRoom `memberId` 사용하도록 변경

* refactor: Review `memberId` 사용하도록 변경

* refactor: Study `memberId` 사용하도록 변경

* refactor: AuthenticationPrincipal 제거

* refactor: 액세스 토큰 재발급 memberId 사용

* refactor: token 엔티티 memberId 가지도록 수정

* fix: Auth 인수 테스트 수정

* feat: 사용하지 않는 필드 제거 및 DB 조회 최소화

* refactor: orElseThrow 예외 타입 명시

* test: orElseThrow -> get 으로 수정

* refactor: 스터디장 Fixture 제거

* chore: 코드 냄새 제거

* feta: 충돌 해결

* Merge branch 'develop' of https://github.com/woowacourse-teams/2022-moamoa into refactor/320-auth-memberid

# Conflicts:
#	backend/src/main/java/com/woowacourse/moamoa/auth/config/AuthConfig.java

* feat: 로그 추가

* test: 테스트 수정

Co-authored-by: Donggyu <a29661498@gmail.com>

* [FE] issue323: 컴포넌트 개선 (#345)

* feat: theme 수정

screens, fontSize, fontWeight, radius 추가

* refactor: fontSize, fontWeight theme 사용

* refactor: radius theme 적용

* fix: theme 오류 수정

* fix: theme 오류 수정

* refactor: lint 적용

* chore: design 폴더 경로 추가

* feat: -Icon 컴포넌트 구현

* feat: Image 컴포넌트 구현

* feat: Avatar 컴포넌트 구현

* feat: -Button 컴포넌트 구현

* feat: Card 관련 컴포넌트 구현

* refactor: 버튼 컴포넌트 폴더 구조 변경

* feat: Chip 컴포넌트 구현

* feat: input, textarea, checkbox 컴포넌트 구현

* feat: StudyCard 컴포넌트 수정

* feat: CreateNewStudyButton 컴포넌트 수정

* refactor: 폴더 구조 변경

* feat: FilterButton 컴포넌트 수정

* feat: ButtonGroup 컴포넌트 구현

* feat: FilterButtonList 컴포넌트 수정

* refactor: 폴더 구조 변경

* feat: Divider 컴포넌트 구현

* feat: FilterSlideButton 컴포넌트 수정

* feat: FilterSection 컴포넌트 수정

* refactor: 폴더 변경

* refactor: 폴더 이동

* feat: 스터디 생성 페이지 컴포넌트들 수정

스터디 생성 페이지 오류도 수정(날짜 최소, 최댓값)

* fix: 스터디 생성 모킹 api 수정

* feat: 스터디 수정 페이지 컴포넌트 수정

* refactor: Card 컴포넌트 수정

Card에 CardHeading, CardContent 포함

* refactor: 폴더 이동 및 파일명 수정

* feat: 상세 페이지 컴포넌트 수정

* feat: 에러 페이지 컴포넌트 수정

* feat: 내 스터디 목록 페이지 컴포넌트 수정

* feat: 링크 모음 페이지 컴포넌트 수정

+
fix: 링크 수정/생성 시 person으로 보이는 오류 수정
fix: 링크 생성/수정 폼 작성시 최소 조건(1글자) 제거 및 모킹 api 수정
feat: 링크 정규식 수정

* feat: layout 컴포넌트 수정

* refactor: 사용하지 않는 컴포넌트 삭제

* feat: 스터디 후기 탭 컴포넌트 수정

* refactor: 사용하지 않는 컴포넌트 삭제

* refactor: 상수 분리

* refactor: hover 트랜지션 스타일 분리

* feat: 스터디방 게시판 컴포넌트 수정

* feat: 게시글 모킹 api 수정

* fix: 소개글 preview 에러 수정

* feat: 스터디방 공지사항 컴포넌트 수정

* feat: 공지사항 모킹 api 수정

* refactor: 사용하지 않는 컴포넌트 삭제

* feat: article 수정

* refactor: 컴포넌트 폴더 변경

@design/components -> @components

* chore: @design 경로 삭제

* test: 테스트 수정

* refactor: Style -> Styled

* refactor: 폰트크기 타입 분리

* feat: BoxButton 수정

* refactor: Item -> UserInfoItem

* refactor: StudyChip 수정

* feat: 모킹 api 에러 메세지 및 타입 수정

* refactor: Title -> SectionTitle, PageTitle로 분리

* feat: ButtonGroup ul -> div

* fix: 탈퇴 버튼 클릭시 링크 이동되는 오류 수정

* refactor: ~tabIds -> tabMode

* refactor: 스타일에서 삼항 연산자 줄이기

* feat: Image 컴포넌트 수정

* refactor: !important 삭제

* feat: end -> done

기존 api 명세를 참고하여 네이밍 변경

* refactor: rem -> px

* refactor: is(.+?)Valid -> isValid

* refactor: hover 애니메이션 스타일 함수 이름 변경

* refactor: 색상 상수 분리

* refactor: Divider props 이름 수정

* refactor: state명 변경

* refactor: getToday, getNextYear 수정

* refactor: tsc, eslint, prettier 적용

* feat: UnstyledButton 컴포넌트 추가

* feat: Center 컴포넌트 추가

* feat: 아이콘 추가

* feat: MultiTagSelect 컴포넌트 추가

* fix: sidebar 가로길이 조정

* [FE] issue 326: 태그 다중 선택 기능 (#358)

* feat: 기타 태그를 기본 주제로 설정한다

* fix: 올바른 양식으로 서버에 전송합니다

* fix: 태그가 없는 경우 대응

* fix: 스터디 수정시 다중 태그 전송되도록 수정

* feat: UnstyledButton을 컴포넌트로 분리

* typo: 오타 수정

* feat: font-size에 아이콘이 반응한다

* chore: 속도 측정하는 플러그인 제거

* chore: 웹팩 이전 설정으로 되돌린다

* refactor: 0px을 삭제한다

* feat: MultiTagSelect 디자인 수정

* fix: ESBuildMinifyPlugin 추가

* chore: speed 측정하는 plugin 제거

* feat: type 개선

* refactor: 코드 짧게 쓰기

* refactor: 코드 짧게 쓰기

* refactor: 코드 컨밴션 적용

* refactor: 개행

* feat: DropDownBox 재활용

* refactor: MultiTagSelect에서 ref를 관리하는 방식을 변경한다

* refactor: DropDownBox에 isOpen을 넣는다

* fix: DropDownBox 오류 수정

* refactor: css 순서 정리

* refactor: 사용하지 않는 import 삭제

* refactor: early return 적용

* refactor: 상수 분리

* refactor: 상수 분리

* refactor: early return 적용

* refactor: 로직을 읽기 좋게 개선한다

* refactor: 컴포넌트 구조 개선

* feat: 에러의 강도를 낮춘다

* refactor: 함수의 작동 방식을 명확하게 기술한다

* refactor: 쉬운 로직으로 변경한다

* feat: UnstyledButton의 스타일을 가둔다

* refactor: 로직을 단순화 한다

* refactor: 일관성 유지

* feat: scroll -> auto

* refactor: 사용하지 않는 모듈을 import하지 않는다

* refactor: event -> e

* feat: UnstyledButton에 font-size속성 추가

* feat: DropDownBox의 스타일을 props로 전해준다

* refactor: 불필요한 연산을 줄인다

* feat: 유틸 함수 개선

* refactor: DropDownBox 응집도 향상

* refactor: 불필요한 코드 삭제

* feat: 임시 이미지 저장

* feat: 이미지 비율 지정

* feat: 이미지 저장 위치 변경

* clfeat: 폰트 preload

* chore: code splitting 적용

* chore: persistent cache 적용

* fix: woff -> woff2

* feat: aggressive code spliting 제거

* perf: layout shift 줄이기

* perf: 이미지 리사이징

* fix: font 주소 수정

Co-authored-by: TaeYoon <uni613@naver.com>

backend/src/main/java/com/woowacourse/moamoa/auth/config/AuthConfig.java

@@ -2,16 +2,18 @@
 
 import com.woowacourse.moamoa.auth.controller.AuthenticatedMemberResolver;
 import com.woowacourse.moamoa.auth.controller.AuthenticatedRefreshArgumentResolver;
-import com.woowacourse.moamoa.auth.controller.AuthenticationArgumentResolver;
-import com.woowacourse.moamoa.auth.controller.AuthenticationInterceptor;
-
+import com.woowacourse.moamoa.auth.controller.interceptor.AuthenticationInterceptor;
+import com.woowacourse.moamoa.auth.controller.interceptor.PathMatcherContainer;
+import com.woowacourse.moamoa.auth.controller.interceptor.PathMatcherInterceptor;
+import com.woowacourse.moamoa.auth.infrastructure.TokenProvider;
 import java.util.List;
-
 import lombok.RequiredArgsConstructor;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.http.HttpMethod;
 import org.springframework.web.client.RestTemplate;
 import org.springframework.web.method.support.HandlerMethodArgumentResolver;
+import org.springframework.web.servlet.HandlerInterceptor;
 import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
@@ -20,23 +22,37 @@
 public class AuthConfig implements WebMvcConfigurer {
 
     private final AuthenticatedRefreshArgumentResolver authenticatedRefreshArgumentResolver;
-    private final AuthenticationInterceptor authenticationInterceptor;
-    private final AuthenticationArgumentResolver authenticationArgumentResolver;
     private final AuthenticatedMemberResolver authenticatedMemberResolver;
 
+    private final PathMatcherContainer pathMatcherContainer;
+    private final TokenProvider jwtTokenProvider;
+
     @Override
     public void addArgumentResolvers(final List<HandlerMethodArgumentResolver> resolvers) {
-        resolvers.add(authenticationArgumentResolver);
         resolvers.add(authenticatedMemberResolver);
         resolvers.add(authenticatedRefreshArgumentResolver);
     }
 
     @Override
     public void addInterceptors(final InterceptorRegistry registry) {
-        registry.addInterceptor(authenticationInterceptor)
+        registry.addInterceptor(loginInterceptor())
                 .addPathPatterns("/**");
     }
 
+    private HandlerInterceptor loginInterceptor() {
+        return new PathMatcherInterceptor(new AuthenticationInterceptor(jwtTokenProvider), pathMatcherContainer)
+                .excludePathPattern("/**", HttpMethod.OPTIONS)
+                .includePathPattern("/api/studies/**", HttpMethod.POST)
+                .includePathPattern("/api/studies/**", HttpMethod.PUT)
+                .includePathPattern("/api/study/\\d+", HttpMethod.PUT)
+                .includePathPattern("/api/studies/**", HttpMethod.DELETE)
+                .includePathPattern("/api/members/me/**", HttpMethod.GET)
+                .includePathPattern("/api/auth/refresh", HttpMethod.GET)
+                .includePathPattern("/api/my/studies", HttpMethod.GET)
+                .includePathPattern("/api/studies/\\w+/community/articles/**", HttpMethod.GET)
+                .includePathPattern("/api/studies/\\d+/reference-room/links", HttpMethod.GET);
+    }
+
     @Bean
     public RestTemplate restTemplate() {
         return new RestTemplate();

backend/src/main/java/com/woowacourse/moamoa/auth/config/AuthenticatedMember.java → backend/src/main/java/com/woowacourse/moamoa/auth/config/AuthenticatedMemberId.java

@@ -7,5 +7,5 @@
 
 @Target(ElementType.PARAMETER)
 @Retention(RetentionPolicy.RUNTIME)
-public @interface AuthenticatedMember {
+public @interface AuthenticatedMemberId {
 }

backend/src/main/java/com/woowacourse/moamoa/auth/controller/AuthController.java

@@ -1,7 +1,7 @@
 package com.woowacourse.moamoa.auth.controller;
 
+import com.woowacourse.moamoa.auth.config.AuthenticatedMemberId;
 import com.woowacourse.moamoa.auth.config.AuthenticatedRefresh;
-import com.woowacourse.moamoa.auth.config.AuthenticationPrincipal;
 import com.woowacourse.moamoa.auth.service.AuthService;
 import com.woowacourse.moamoa.auth.service.response.AccessTokenResponse;
 import com.woowacourse.moamoa.auth.service.response.TokensResponse;
@@ -35,13 +35,13 @@ public ResponseEntity<AccessTokenResponse> login(@RequestParam final String code
     }
 
     @GetMapping("/api/auth/refresh")
-    public ResponseEntity<AccessTokenResponse> refreshToken(@AuthenticatedRefresh Long githubId, @CookieValue String refreshToken) {
-        return ResponseEntity.ok().body(authService.refreshToken(githubId, refreshToken));
+    public ResponseEntity<AccessTokenResponse> refreshToken(@AuthenticatedRefresh Long memberId, @CookieValue String refreshToken) {
+        return ResponseEntity.ok().body(authService.refreshToken(memberId, refreshToken));
     }
 
     @DeleteMapping("/api/auth/logout")
-    public ResponseEntity<Void> logout(@AuthenticationPrincipal Long githubId) {
-        authService.logout(githubId);
+    public ResponseEntity<Void> logout(@AuthenticatedMemberId Long memberId) {
+        authService.logout(memberId);
 
         return ResponseEntity.noContent().header("Set-Cookie", removeCookie().toString()).build();
     }

backend/src/main/java/com/woowacourse/moamoa/auth/controller/AuthenticatedMemberResolver.java

@@ -1,12 +1,9 @@
 package com.woowacourse.moamoa.auth.controller;
 
-import com.woowacourse.moamoa.auth.config.AuthenticatedMember;
+import com.woowacourse.moamoa.auth.config.AuthenticatedMemberId;
 import com.woowacourse.moamoa.auth.config.AuthenticationExtractor;
 import com.woowacourse.moamoa.auth.infrastructure.TokenProvider;
 import com.woowacourse.moamoa.common.exception.UnauthorizedException;
-import com.woowacourse.moamoa.member.domain.Member;
-import com.woowacourse.moamoa.member.domain.repository.MemberRepository;
-import com.woowacourse.moamoa.member.service.exception.MemberNotFoundException;
 import javax.servlet.http.HttpServletRequest;
 import lombok.RequiredArgsConstructor;
 import org.springframework.core.MethodParameter;
@@ -20,12 +17,11 @@
 @RequiredArgsConstructor
 public class AuthenticatedMemberResolver implements HandlerMethodArgumentResolver {
 
-    private final MemberRepository memberRepository;
     private final TokenProvider tokenProvider;
 
     @Override
     public boolean supportsParameter(final MethodParameter parameter) {
-        return parameter.hasParameterAnnotation(AuthenticatedMember.class);
+        return parameter.hasParameterAnnotation(AuthenticatedMemberId.class);
     }
 
     @Override
@@ -38,9 +34,6 @@ public Object resolveArgument(final MethodParameter parameter, final ModelAndVie
             throw new UnauthorizedException("인증 타입이 올바르지 않습니다.");
         }
 
-        final Long githubId = Long.valueOf(tokenProvider.getPayload(token));
-
-        final Member member = memberRepository.findByGithubId(githubId).orElseThrow(MemberNotFoundException::new);
-        return member.getId();
+        return Long.valueOf(tokenProvider.getPayload(token));
     }
 }

backend/src/main/java/com/woowacourse/moamoa/auth/controller/AuthenticationInterceptor.java → backend/src/main/java/com/woowacourse/moamoa/auth/controller/interceptor/AuthenticationInterceptor.java

@@ -1,15 +1,13 @@
-package com.woowacourse.moamoa.auth.controller;
+package com.woowacourse.moamoa.auth.controller.interceptor;
 
 import com.woowacourse.moamoa.auth.config.AuthenticationExtractor;
-import com.woowacourse.moamoa.auth.controller.matcher.AuthenticationRequestMatcher;
 import com.woowacourse.moamoa.auth.infrastructure.TokenProvider;
 import com.woowacourse.moamoa.common.exception.UnauthorizedException;
 
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 
 import lombok.AllArgsConstructor;
-import org.springframework.http.HttpMethod;
 import org.springframework.stereotype.Component;
 import org.springframework.web.servlet.HandlerInterceptor;
 
@@ -18,35 +16,22 @@
 public class AuthenticationInterceptor implements HandlerInterceptor {
 
     private final TokenProvider tokenProvider;
-    private final AuthenticationRequestMatcher authenticationRequestMatcher;
 
     @Override
     public boolean preHandle(final HttpServletRequest request, final HttpServletResponse response, final Object handler) {
-
-        if (isPreflight(request)) {
-            return true;
-        }
-
-        if (authenticationRequestMatcher.isRequiredAuth(request)) {
-            final String token = AuthenticationExtractor.extract(request);
-            validateToken(token, request.getRequestURI());
-
-            request.setAttribute("payload", token);
-        }
+        final String token = AuthenticationExtractor.extract(request);
+        validateToken(token, request.getRequestURI());
 
+        request.setAttribute("payload", token);
         return true;
     }
 
-    private boolean isPreflight(HttpServletRequest request) {
-        return HttpMethod.OPTIONS.matches(request.getMethod());
-    }
-
-    private void validateToken(String token, String requestURI) {
+    private void validateToken(final String token, final String requestURI) {
         if (requestURI.equals("/api/auth/refresh") && token != null) {
             return;
         }
         if (token == null || !tokenProvider.validateToken(token)) {
-            throw new UnauthorizedException("유효하지 않은 토큰입니다.");
+            throw new UnauthorizedException(String.format("유효하지 않은 토큰[%s]입니다.", token));
         }
     }
 }

backend/src/main/java/com/woowacourse/moamoa/auth/controller/interceptor/PathMatcherContainer.java

@@ -0,0 +1,40 @@
+package com.woowacourse.moamoa.auth.controller.interceptor;
+
+import java.util.ArrayList;
+import java.util.List;
+import org.springframework.http.HttpMethod;
+import org.springframework.stereotype.Component;
+import org.springframework.util.AntPathMatcher;
+import org.springframework.util.PathMatcher;
+
+@Component
+public class PathMatcherContainer {
+
+    private final PathMatcher pathMatcher;
+    private final List<PathRequestMatcher> includePathPatterns;
+    private final List<PathRequestMatcher> excludePathPatterns;
+
+    public PathMatcherContainer() {
+        this.pathMatcher = new AntPathMatcher();
+        this.includePathPatterns = new ArrayList<>();
+        this.excludePathPatterns = new ArrayList<>();
+    }
+
+    public boolean isNotIncludePath(final String targetPath, final String pathMethod) {
+        final boolean excludePattern = excludePathPatterns.stream()
+                .anyMatch(requestPath -> requestPath.match(pathMatcher, targetPath, pathMethod));
+
+        final boolean isNotIncludePattern = includePathPatterns.stream()
+                .noneMatch(requestPath -> requestPath.match(pathMatcher, targetPath, pathMethod));
+
+        return excludePattern || isNotIncludePattern;
+    }
+
+    public void includePathPattern(final String path, final HttpMethod method) {
+        this.includePathPatterns.add(new PathRequestMatcher(path, method));
+    }
+
+    public void excludePathPattern(final String path, final HttpMethod method) {
+        this.excludePathPatterns.add(new PathRequestMatcher(path, method));
+    }
+}

backend/src/main/java/com/woowacourse/moamoa/auth/controller/interceptor/PathMatcherInterceptor.java

@@ -0,0 +1,38 @@
+package com.woowacourse.moamoa.auth.controller.interceptor;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+import lombok.AllArgsConstructor;
+import org.springframework.http.HttpMethod;
+import org.springframework.stereotype.Component;
+import org.springframework.web.servlet.HandlerInterceptor;
+
+@Component
+@AllArgsConstructor
+public class PathMatcherInterceptor implements HandlerInterceptor {
+
+    private final HandlerInterceptor handlerInterceptor;
+    private final PathMatcherContainer pathMatcherContainer;
+
+    @Override
+    public boolean preHandle(final HttpServletRequest request, final HttpServletResponse response, final Object handler)
+            throws Exception {
+
+        if (pathMatcherContainer.isNotIncludePath(request.getRequestURI(), request.getMethod())) {
+            return true;
+        }
+
+        return this.handlerInterceptor.preHandle(request, response, handler);
+    }
+
+    public PathMatcherInterceptor includePathPattern(final String pathPattern, final HttpMethod method) {
+        this.pathMatcherContainer.includePathPattern(pathPattern, method);
+        return this;
+    }
+
+    public PathMatcherInterceptor excludePathPattern(final String pathPattern, final HttpMethod method) {
+        this.pathMatcherContainer.excludePathPattern(pathPattern, method);
+        return this;
+    }
+}

backend/src/main/java/com/woowacourse/moamoa/auth/controller/interceptor/PathRequestMatcher.java

@@ -0,0 +1,18 @@
+package com.woowacourse.moamoa.auth.controller.interceptor;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import org.springframework.http.HttpMethod;
+import org.springframework.util.PathMatcher;
+
+@AllArgsConstructor
+@Getter
+public class PathRequestMatcher {
+
+    private final String path;
+    private final HttpMethod method;
+
+    public boolean match(final PathMatcher pathMatcher, final String targetPath, final String pathMethod) {
+        return pathMatcher.match(path, targetPath) && this.method.matches(pathMethod);
+    }
+}