[RELEASE] v1.3.1 (#389)

* refactor: 리더기 텍스트 분리 #322 * chore: Prometheus 매트릭 수집을 위한 Actuator 설정 #333 * chore: main에 있는 test 설정 삭제 #264 * fix: button aria-hidden 제거 #322 * fix: 카운팅 애니메이션 테스트 제거 #322 * refactor: @CookieValue 활용으로 컨트롤러 파라미터 변경 #264 * refactor: 매칭 결과 순위 리스트 시각적 요소 aria-hidden 처리 및 접근성 전용 텍스트 추가 #336 * refactor: 매칭 결과 플로팅 버튼 이미지에 대체 텍스트 추가 #336 * refactor: CookieEncryptor로 네이밍 변경 및 접근 제어자 변경 #264 * refactor: 접근 제어자 변경 및 생성자에서 시크릿 값 주입 #264 * test: 쿠키에 대한 API 문서 추가 #264 * chore: endpoint 허용 설정 #341 * docs: API 문서 개 추가 #264 * refactor: 파라미터 받지 않는 걸로 변경 #264 * test: 테스트 메서드 이름 변경 - 메서드 이름에 특정 경계 값을 표기하지 않도록 변경 * chore: 쿠키 관련 설정 정보를 시크릿 yml을 받도록 prod, dev yml 변경 #264 * refactor: 쿠키 설정 로직 분리 #264 * refactor: 쿠키 암호화를 방 재설정에만 적용하기에 범용적인 설정에서 방 재설정 관련으로 변경 #264 * fix: Dev, Prod 설정 키 변경 #345 * fix: 매칭 결과에서 플로팅 버튼으로 최하단 이동시 목록이 잘리는 문제 해결 #336 * feat: modal close 시 focus 원래대로 이동 #335 * feat: 초대하기 버튼 클릭 시 focus 원래대로 이동 #335 * feat: modal 닫힐 때 focus 원래대로 이동 #335 * feat: 방 재접속 API 함수 생성 #348 * feat: 방 재접속 API mocking 함수 생성 #348 * fix: IOS에서 키보드에 따라 버튼 안올라오는 문제 해결 #340 * fix: 입력창 클릭했을 때 확대 안되도록 수정 #340 * feat: rejoinRoom hook 구현 #348 * chore: test 설정 파일 변경 #349 * feat: 쿠키가 존재할 때와 존재하지만 유효하지 않을 때의 예외 분리 #349 * feat: 대기 페이지 쿠키 적용 #348 * refactor: 매칭 결과 시각적 요소대로 읽을 수 있도록 수정 - 접근성 전용 텍스트로 읽을 시 플로팅 버튼을 통해 목록이 업데이트 되어도 이전의 순위를 읽는 문제가 발생하여 이렇게 개선함 #336 * fix: 매칭 결과 목록 퍼센트 바가 제대로 표시되지 않는 문제, 순위 줄바꿈 되는 문제 해결 #336 * refactor: 스크린 리더가 매칭 목록을 읽기 전에 가장 낮은 순위로 이동하는 플로팅 버튼을 읽도록 수정 #336 * feat: 게임 시작 시 방장 판단 여부 recoil -> cookie 로 변경 #348 * feat: 쿠키 캐스팅 예외 핸들링 #349 * test: 쿠키 API 문서 설명 수정 #349 * fix: 접근성을 위해 user-scale 제어 삭제 #340 * fix: ios 인풋창이 확대되는 문제를 font-size 키워서 해결 #340 * fix: ios 인풋창을 클릭했을 때 포커스로 인해 자체적으로 스크롤되는 문제를 불필요한 여백을 줄여 해결 #340 * fix: 홈화면 외에 페이지에서 새로고침 후 페이지 이동시 발생하는 비동기 에러 해결 #340 * feat: 하단 또는 상단 플로팅 버튼을 누르면 목록 중 가장 하위 또는 상위 순위로 포커스가 이동하는 기능 #336 * refactor: 수정된 이미지 파일 이름 반영 #336 * feat: 방 설정에서 제한 시간 선택지 5초 삭제, 30초, 60초 추가 #352 * fix: ios에서 버튼 내 글씨 파란색으로 보이는 버그 수정 #352 * refactor: 타이머를 제한 시간으로 수정 및 ui 수정 #352 * refactor: 방설정 모달 카테고리 드롭박스 접근성 및 포커스 개선 #352 * refactor: 방설정 모달 라운드, 제한 시간 설정 접근성 개선 #352 * fix: ios 가상키보드에 스크롤 생기는 문제 해결 #340 * refactor: 방 설정 모달 테스트 수정 #352 * chore: Prod 환경도 Response 정보 로깅하도록 구성 #355 * feat: MDC 사용하여 요청단위로 traceID 제공 및 LogBack에 TraceID 사용 설정 #355 * chore: 요청/응답이 아닌 경우 traceID를 NoTraceID로 출력하도록 설정 #355 * chore: green port 확인하는 스크립트 추가 * fix: Header에 focus ref 추가 #335 * refactor: modal에 aria-modal 추가 #335 * refactor: closeRef -> returnFocusRef로 변경 #335 * fix: 커스텀 훅 네이밍 수정 #340 * refactor: 불필요한 maximum scale 제거 #340 * refactor: modal에 aria-modal 추가 #335 * refactor: 드롭다운 코드리뷰 반영 #352 * refactor: button 태그 닫힌 태그로 변경 #348 * chore: 하루 지난 로그 gz으로 압축하여 관리 #359 * refactor: handleClickOption의 이벤트 타입을 기본으로 수정 - 통일성있게 사용하기 위해 기본값을 명시하지 않고 생략 #352 * refactor: RoomSettingContainer 분기처리 삼항 연산자로 수정 #352 * refactor: 불필요한 requestAnimationFrame 삭제 #336 * refactor: 별도의 함수로 index에 따른 ref 로직 분리 #336 * refactor: A11yOnly 컴포넌트 role="text" 삭제 및 연관 코드 수정 #361 * refactor: 총 인원이 변경되었을 때 알려주는 로직 수정 - role="status"는 암묵적으로 aria-live="polite", aria-atomic=true이다. #361 * refactor: 타이머에 role="alert" 속성 추가 - role="alert" 속성은 assertive를 가지지만 앞에 조건을 붙여서 원하는 때에만 알려주도록 작성 #361 * refactor: 게임 화면에서 선택지를 선택하는 기능에 적절한 role과 속성을 추가하여 개선 #361 * refactor: role="status" 설정시 aria-atomic=true이기 때문에 코드 수정 #361 * refactor: 테스트 코드 수정 및 불필요한 속성 삭제 #361 * feat: 쿠키 보안 옵션 설정 #357 * feat: Cors를 배열로 변경 #357 * feat: allowedOriginPatterns로 변경 #357 * refactor: aria-atomic이 true가 되면서 $ 삭제 #361 * refactor: 포커스 스타일 none 처리 #361 * refactor: 총 인원 텍스트 변수로 분리 #361 * feat: 쿠키 sameSite 옵션 추가 #357 * refactor: 제한시간 변경으로 인한 에러 메시지 수정 #358 * feat: 쿠키를 통한 유저 정보 조회 API 변경 #357 * feat: API 함수 getMember로 변경 #348 * chore: 무중단 배포 github action v1.0 * refactor: mutation 공통 에러 로직을 defaultOption으로 분리 #358 * refactor: 에러 폴백에서 홈으로 가는 navigate를 window 함수로 변경 #358 * refactor: 라우팅 경로 상수 처리 #358 * refactor: 화면 순서대로 라우팅 배치 #358 * refactor: 에러 핸들링 로직 기능성 컴포넌트로 분리 (QueryClientDefaultOptionProvider) #358 * fix: 테스트 코드에서 retry default 값이 덮어씌워져 에러 폴백 테스트 케이스 돌지 않은 문제 해결 #358 * refactor: 쿠키 관련 에러 코드 및 에러 메시지 반영 #358 * feat: 멤버가 바뀔 경우 멤버 정보 초기화 #348 * fix: 무중단 배포 github action v1.1 #327 * fix: 무중단 배포 github action v1.2 #327 * fix: 무중단 배포 github action v1.3 #327 * fix: 무중단 배포 github action v1.4 #327 * fix: 무중단 배포 github action v1.5 #327 * fix: 무중단 배포 github action v1.6 #327 * fix: 무중단 배포 github action v1.7 #327 * fix: 무중단 배포 github action v1.8 #327 * fix: 무중단 배포 github action v1.9 #327 * fix: 무중단 배포 github action v1.10 #327 * fix: 무중단 배포 github action v1.11 #327 * chore: actuator port 기본값으로 변경 #327 * fix: 투표 현황 탭 클릭했을 때 API 중복 요청 보내는 에러 해결 #366 * fix: 네이밍 수정 및 투표 통계 스크롤 되는 문제 해결 #366 * design: 투표 통계에서 옵션을 keep-all 사용하고 두번째 옵션은 오른쪽 정렬 추가 #366 * chore: server port 기본값으로 변경 #327 * fix: 무중단 배포 github action v1.12 #327 * fix: 무중단 배포 github action v1.13 #327 * design: 라운드 결과 질문 텍스트 애매하게 잘리는 스타일 수정 #366 * fix: 무중단 배포 github action v1.14 #327 * feat: 쿠키 경로 설정 #357 쿠키 경로를 설정해두지 않으면 디폴트로 해당 API를 호출한 endpoint로 되는데 이러면 이후 다른 endpoint에서 사용하기 어려움. 따라서 쿠키를 활용할 Path를 지정하여 사용 * fix: 무중단 배포 github action v1.15 #327 * design: 라운드 결과 질문 줄바꿈 잘되도록 스타일 수정 #366 * chore: 스토리북 provider 설정 추가 #366 * refactor: 라운드 투표 결과를 useSuspenseQuery로 개선 #366 * fix: SuspenseQuery로 개선하면서 없어진 막대 애니메이션 적용 #366 * fix: 무중단 배포 github action v1.16 #327 * refactor: nickname도 recoil로 관리하여 내가 투표한 옵션 표시 #366 * fix: 무중단 배포 github action v1.17 #327 * refactor: 다음 라운드로 넘어가는 API 호출 시 버튼 로딩 처리 #366 * refactor: 버튼 분기 처리 개선 #366 * fix: 무중단 배포 github action v1.18 #327 * fix: API 에러도 라우터 에러 폴백에 걸리는 문제 해결 #366 * fix: 무중단 배포 github action v1.19 #327 * refactor: 로딩 시 나오는 SpinnerFallback 수정 #366 * design: 질문 line height 추가 #366 * design: 스피너 이미지 크기 수정 #366 * refactor: 옵션 퍼센트 초기값 상수화 #366 * fix: 무중단 배포 github action v1.20 #327 * fix: 무중단 배포 github action v1.21 #327 * fix: 무중단 배포 github action v1.22 #327 * fix: 쿠키 경로 설정 수정 #357 * fix: 무중단 배포 github action v1.23 #327 * fix: 무중단 배포 github action v1.24 #327 * fix: 무중단 배포 github action v1.25 #327 * fix: 무중단 배포 github action v1.26 #327 * fix: 무중단 배포 github action v1.27 #327 * refactor: 방 시작 방장 판단 cookie로 변경 #348 * refactor: 퍼센트를 나타내는 통계 막대를 컴포넌트 분리하여 렌더링 최적화 #366 * fix: 무중단 배포 github action v1.28 #327 * fix: 무중단 배포 github action v1.29 #327 * refactor: 다음 라운드로 넘어가기 기능 recoil -> cookie로 변경 #348 * refactor: 투표한 인원 있는지 판단하는 유틸함수 분리 #366 * chore: index 파일의 에러 바운더리 제거 #366 * fix: 무중단 배포 github action v1.30 #327 * fix: 무중단 배포 github action v1.31 #327 * fix: 무중단 배포 github action v1.32 #327 * refactor: TabContentContainer 내부의 분기처리를 역할에 맞게 컴포넌트 분리 #366 * test: 테스트 코드 하드코딩 값 목 데이터로 수정 #366 * refactor: 게임 진행 시 유저정보조회 recoil -> cookie로 변경 #348 * refactor: FinalButton 로딩 처리 및 분기처리 개선 #366 * refactor: 이미지 비율 깨짐 해결 #348 * refactor: 버튼 로딩 상태일 때 텍스트 다르게 처리 #366 * design: 화면이 클 때 깨지는 땅콩 이미지 크기 수정 #366 * test: 버튼 텍스트 수정으로 인한 테스트 코드 수정 #366 * refactor: mutation 성공 시 disabled 상태 유지되도록 수정 #366 * refactor: 시작 버튼 로딩 처리 #366 * fix: 땅콩이미지 비율 안 맞는 문제 해결 #348 * chore: 스토리북 provider 롤백 #366 * chore: webpack dev server 중복 설정 제거 #366 * refactor: balanceContent를 TabContentContainer 컴포넌트 내에서 호출 #366 * fix: 닉네임 페이지 isMaster 오류 해결 #348 * refactor: 컨벤션에 맞게 변수명 수정 #361 * refactor: RoomSetting 텍스트 위아래 정렬 맞춤 #348 * refactor: RoomSetting 글자 간격 넓힘 #348 * refactor: 사용하지 않는 recoil 파일 제거 #348 * feat: getMember 함수 response 예제 json 생성 #348 * refactor: queryKey, example JSON 적용 #348 * refactor: test 함수 변경 #348 * feat: 경로에 따른 쿠키 SameSite 옵션 변경 #357 * fix: localhost uri 확인 방식 변경 #357 * fix: uri -> url 변경 #357 * feat: 요청 로그 확인 #357 * feat: 요청 로그 확인을 origin으로 변경 #357 * chore: 불필요한 애노테이션 삭제 #357 * feat: origin null 체크 추가 #357 * fix: 무중단 배포 github action v1.33 #327 * fix: 무중단 배포 github action v1.34 #327 * fix: 불필요한 빈 태그 제거 #366 * refactor: 함수 아래 줄바꿈 추가 #348 * refactor: SameSite Enum 활용 #357 * fix: 무중단 배포 github action v1.35 #327 * fix: RoomSetting test 함수명 에러 수정 #348 * fix: 무중단 배포 github action v1.36 #327 * fix: 무중단 배포 github action v1.37 #327 * fix: 무중단 배포 github action v1.38 #327 * fix: 무중단 배포 github action v1.39 #327 * fix: 무중단 배포 github action v1.40 #327 * fix: 무중단 배포 github action v1.41 #327 * fix: 무중단 배포 github action v1.42 #327 * fix: 무중단 배포 github action v1.43 #327 * fix: 무중단 배포 github action v1.44 #327 * fix: 무중단 배포 github action v1.45 #327 * fix: 무중단 배포 github action v1.46 #327 * fix: 무중단 배포 github action v1.47 #327 * fix: useExit memberId 못 불러오는 에러 해결 #372 * feat: 방 나갈 때 쿠키 삭제 #371 * docs: 방 나가기 쿠키 테스트 추가 및 API 문서 추가 #371 * fix: 모바일 방 설정 컴포넌트 화면 깨짐 해결 #375 * chore: copy-webpack-plugin 설치 #377 * refactor: index 파일에서 이미지 태그를 찾기 위해 webpack 설정 #377 * refactor: job 이름 수정 및 안전 종료 #381 * refactor: Nickname 검증 규칙 수정 #383 * test: 닉네임 길이 검증 조건 변경에 따른 테스트 조건 수정 #383 * refactor: 커스텀 닉네임은 최소 1글자 이상 설정 추가 #380 * fix: 쿠키 삭제 시 설정 일치 #384 * feat: og 이미지 설정 Co-authored-by: Gyuhan Park <[email protected]> #380 * fix: 매칭 결과 ui 깨지는 문제 해결 #380 --------- Co-authored-by: novice0840 <[email protected]> Co-authored-by: PgmJun <[email protected]> Co-authored-by: rbgksqkr <[email protected]> Co-authored-by: novice0840 <[email protected]> Co-authored-by: useon <[email protected]> Co-authored-by: leegwichan <[email protected]> Co-authored-by: 커찬 <[email protected]> Co-authored-by: Yuseon Kim(썬데이) <[email protected]> Co-authored-by: Nam Gi Beom <[email protected]>
woowacourse-teams · Oct 24, 2024 · 1bf4111 · 1bf4111
1 parent 2fc363b
commit 1bf4111
Show file tree

Hide file tree

Showing 15 changed files with 56 additions and 25 deletions.
diff --git a/.github/workflows/nginx-port-forwarding.yml b/.github/workflows/nginx-port-forwarding.yml
@@ -20,7 +20,7 @@ on:
         required: true
         type: string
       old_shutdown:
-        description: 'shutdown before update'
+        description: 'old shutdown flag'
         required: false
         type: boolean
     outputs:
@@ -30,7 +30,7 @@ on:
         value: ${{ inputs.new_port }}
 
 jobs:
-  old_shutdown:
+  old-shutdown:
     if: ${{ inputs.old_shutdown }}
     uses: ./.github/workflows/shutdown.yml
     with:

diff --git a/.github/workflows/shutdown.yml b/.github/workflows/shutdown.yml
@@ -17,4 +17,4 @@ jobs:
     runs-on: ${{ inputs.self_hosted_runner }}
     steps:
       - name: Shutdown server - port ${{ inputs.port }}
-        run: sudo lsof -t -i:${{ inputs.port }} | xargs --no-run-if-empty sudo kill -9
+        run: sudo lsof -t -i:${{ inputs.port }} | xargs --no-run-if-empty sudo kill -15
diff --git a/backend/src/main/java/ddangkong/controller/room/RoomController.java b/backend/src/main/java/ddangkong/controller/room/RoomController.java
@@ -84,9 +84,10 @@ public RoomJoinResponse joinRoom(@PathVariable String uuid,
     @DeleteMapping("/balances/rooms/{roomId}/members/{memberId}")
     public void leaveRoom(@PathVariable @Positive Long roomId,
                           @PathVariable @Positive Long memberId,
+                          HttpServletRequest request,
                           HttpServletResponse response) {
         roomFacade.leaveRoom(roomId, memberId);
-        deleteCookie(response);
+        deleteCookie(request, response);
     }
 
     @ResponseStatus(HttpStatus.NO_CONTENT)
@@ -133,8 +134,10 @@ private void setEncryptCookie(HttpServletRequest request,
         response.addHeader(HttpHeaders.SET_COOKIE, encodedCookie.toString());
     }
 
-    private void deleteCookie(HttpServletResponse response) {
-        ResponseCookie deleteCookie = roomMemberCookieEncryptor.deleteCookie();
+    private void deleteCookie(HttpServletRequest request,
+                              HttpServletResponse response) {
+        String origin = request.getHeader(HttpHeaders.ORIGIN);
+        ResponseCookie deleteCookie = roomMemberCookieEncryptor.deleteCookie(origin);
         response.addHeader(HttpHeaders.SET_COOKIE, deleteCookie.toString());
     }
 }
diff --git a/backend/src/main/java/ddangkong/controller/room/RoomMemberCookieEncryptor.java b/backend/src/main/java/ddangkong/controller/room/RoomMemberCookieEncryptor.java
@@ -8,7 +8,6 @@
 @Component
 public class RoomMemberCookieEncryptor {
 
-    private static final String ROOT_PATH = "/";
     private static final String DEFAULT_PATH = "/api/balances/rooms";
     private static final String LOCALHOST = "http://localhost";
 
@@ -31,11 +30,12 @@ public ResponseCookie getEncodedCookie(Object value, String origin) {
                 .build();
     }
 
-    public ResponseCookie deleteCookie() {
+    public ResponseCookie deleteCookie(String origin) {
         return ResponseCookie.from(rejoinKey, null)
                 .httpOnly(true)
                 .secure(true)
-                .path(ROOT_PATH)
+                .path(DEFAULT_PATH)
+                .sameSite(getSameSiteOption(origin))
                 .maxAge(0)
                 .build();
     }

diff --git a/backend/src/main/java/ddangkong/domain/room/member/Member.java b/backend/src/main/java/ddangkong/domain/room/member/Member.java
@@ -15,13 +15,13 @@
 import lombok.AccessLevel;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
+import org.apache.logging.log4j.util.Strings;
 
 @Entity
 @NoArgsConstructor(access = AccessLevel.PROTECTED)
 @Getter
 public class Member {
 
-    private static final int NICKNAME_MIN_LENGTH = 2;
     private static final int NICKNAME_MAX_LENGTH = 12;
 
     @Id
@@ -46,8 +46,8 @@ private Member(String nickname, Room room, boolean isMaster) {
     }
 
     private void validateNickname(String nickname) {
-        if (nickname.length() < NICKNAME_MIN_LENGTH || nickname.length() > NICKNAME_MAX_LENGTH) {
-            throw new InvalidNicknameException(NICKNAME_MIN_LENGTH, NICKNAME_MAX_LENGTH);
+        if (Strings.isBlank(nickname) || nickname.length() > NICKNAME_MAX_LENGTH) {
+            throw new InvalidNicknameException(NICKNAME_MAX_LENGTH);
         }
     }
 

diff --git a/backend/src/main/java/ddangkong/exception/ClientErrorCode.java b/backend/src/main/java/ddangkong/exception/ClientErrorCode.java
@@ -35,7 +35,7 @@ public enum ClientErrorCode {
     NOT_EXIST_COMMON("일반 멤버가 존재하지 않습니다."),
     EXCEED_MAX_MEMBER_COUNT("방의 최대 인원을 초과했습니다. 현재 멤버 수: %d"),
     NOT_ROOM_MEMBER("방에 존재하지 않는 멤버입니다."),
-    INVALID_NICKNAME("닉네임은 최소 %d글자, 최대 %d글자여야 합니다."),
+    INVALID_NICKNAME("닉네임은 공백이어선 안되며 최대 %d글자여야 합니다."),
     INVALID_MEMBER_ID("해당 ID에 일치하는 멤버가 없습니다."),
 
     // RoomContent

diff --git a/backend/src/main/java/ddangkong/exception/room/member/InvalidNicknameException.java b/backend/src/main/java/ddangkong/exception/room/member/InvalidNicknameException.java
@@ -6,8 +6,8 @@
 
 public class InvalidNicknameException extends BadRequestException {
 
-    public InvalidNicknameException(int minLength, int maxLength) {
-        super(INVALID_NICKNAME.getMessage().formatted(minLength, maxLength));
+    public InvalidNicknameException(int maxLength) {
+        super(INVALID_NICKNAME.getMessage().formatted(maxLength));
     }
 
     @Override

diff --git a/backend/src/test/java/ddangkong/domain/room/member/MemberTest.java b/backend/src/test/java/ddangkong/domain/room/member/MemberTest.java
@@ -66,7 +66,7 @@ class 일반_유저인지_확인 {
             assertThat(actual).isFalse();
         }
     }
-    
+
     @Nested
     class 닉네임_검증 {
 
@@ -78,7 +78,7 @@ class 닉네임_검증 {
         }
 
         @ParameterizedTest
-        @ValueSource(strings = {"0", "", "0123456789123"})
+        @ValueSource(strings = {" ", "", "0123456789123"})
         void 닉네임_길이가_유효하지_않는_경우_예외를_발생시킨다(String name) {
             // when & then
             assertThatThrownBy(() -> Member.createMaster(name, ROOM))

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -13,7 +13,10 @@
       property="og:description"
       content="심심풀이 땅콩처럼 가벼운 주제로 친구들과 즐기는 단체 대화주제 제공 서비스입니다."
     />
-    <meta property="og:image" content="assets/thumbnail.png" />
+    <meta
+      property="og:image"
+      content="https://velog.velcdn.com/images/gwichanlee/post/4f042b2e-714a-4823-9815-6bfdceef6421/image.png"
+    />
     <title>땅콩 - 단체 대화주제 제공 서비스</title>
 
     <link rel="preconnect" href="https://o4507724312477696.ingest.us.sentry.io" />

diff --git a/frontend/src/components/GameResultItem/GameResultItem.styled.ts b/frontend/src/components/GameResultItem/GameResultItem.styled.ts
@@ -6,7 +6,9 @@ export const rankItem = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 0.4rem;
   width: 100%;
+
   ${Theme.typography.headline3};
 
   :focus {
@@ -34,15 +36,31 @@ export const rankNumber = css`
 export const nicknameContainer = (percent: number) => css`
   display: flex;
   overflow: visible;
+  position: relative;
   align-items: center;
   gap: 1rem;
-  width: ${percent > 5 ? percent - 5 : percent}%;
+
+  width: ${percent > 15 ? percent - 15 : percent}%;
   height: 100%;
-  padding: 1.2rem;
+  padding: 2rem 1.2rem;
   border-radius: ${Theme.borderRadius.radius20};
 
   background-color: ${Theme.color.peanut400};
-  transition: all 2s;
+  transition: all 1s;
+`;
+
+export const useInfoWrapper = css`
+  display: flex;
+  position: absolute;
+  align-items: center;
+  gap: 0.8rem;
+  width: 55vw;
+`;
+
+export const rankPercentWrapper = css`
+  display: flex;
+  justify-content: center;
+  width: 15%;
 `;
 
 export const rankPercentWrapper = css`

diff --git a/frontend/src/components/GameResultItem/GameResultItem.tsx b/frontend/src/components/GameResultItem/GameResultItem.tsx
@@ -9,6 +9,7 @@ import {
   rankNumberContainer,
   rankPercent,
   rankPercentWrapper,
+  useInfoWrapper,
 } from './GameResultItem.styled';
 
 import SillyDdangkongMedium from '@/assets/images/sillyDdangkongMedium.webp';
@@ -34,8 +35,10 @@ const GameResultItem = forwardRef<HTMLLIElement, GameResultItemProps>(
             <span css={rankNumber}>{`${rank}위`}</span>
           </div>
           <div css={nicknameContainer(animatedRankPercent)}>
-            <img src={SillyDdangkongMedium} alt="" css={profileImage} />
-            <span css={nickname}>{nickname}</span>
+            <div css={useInfoWrapper}>
+              <img src={SillyDdangkongMedium} alt="" css={profileImage} />
+              <span css={nickname}>{nickname}</span>
+            </div>
           </div>
         </div>
         <div css={rankPercentWrapper}>

diff --git a/frontend/src/constants/config.ts b/frontend/src/constants/config.ts
@@ -1,3 +1,4 @@
+export const NICKNAME_MIN_LENGTH = 1;
 export const NICKNAME_MAX_LENGTH = 12;
 export const POLLING_DELAY = 1000;
 export const POLLING_ERROR_FAILURE_COUNT = 3;

diff --git a/frontend/src/constants/message.ts b/frontend/src/constants/message.ts
@@ -8,6 +8,7 @@ export const ERROR_MESSAGE: Record<ErrorCode, string> = {
   NOT_FOUND_ROOM: '해당 방을 찾을 수 없어요. 방을 새로 만들어주세요!', // 없는 방 또는 모두 나간 방에 참여를 요청할 때
 
   // 유저 관련 에러 (master)
+  INVALID_NICKNAME: '닉네임은 최소 1글자 이상 최대 12글자 이하여야 합니다.',
   NOT_ROOM_MEMBER: '사용자가 해당 방에 존재하지 않아요. 다시 접속해볼까요?', // 잘못된 memberId를 보낼 때 (투표, 최종 결과)
   EXCEED_MAX_MEMBER_COUNT: '방의 최대 인원을 초과했습니다.', // 인원이 꽉 찬 방에 들어가려고 할 때
   ALREADY_EXIST_MASTER: '이미 방장이 존재합니다.',

diff --git a/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.tsx b/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.tsx
@@ -5,7 +5,7 @@ import { nicknameInput, nicknameInputContainer, nicknameLengthText } from './Nic
 import createRandomNickname from '../createRandomNickname';
 
 import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
-import { NICKNAME_MAX_LENGTH } from '@/constants/config';
+import { NICKNAME_MIN_LENGTH, NICKNAME_MAX_LENGTH } from '@/constants/config';
 
 interface NicknameInputProps {
   nicknameInputRef: RefObject<HTMLInputElement>;
@@ -32,6 +32,7 @@ const NicknameInput = ({ nicknameInputRef, handleMakeOrEnterRoom }: NicknameInpu
         ref={nicknameInputRef}
         css={nicknameInput}
         placeholder={randomNickname}
+        minLength={NICKNAME_MIN_LENGTH}
         maxLength={NICKNAME_MAX_LENGTH}
         value={nickname}
         onChange={handleChangeInput}

diff --git a/frontend/src/types/error.ts b/frontend/src/types/error.ts
@@ -31,7 +31,8 @@ export type ErrorCode =
   | 'METHOD_NOT_SUPPORTED'
   | 'INTERNAL_SERVER_ERROR'
   | 'NOT_FOUND_COOKIE'
-  | 'INVALID_COOKIE';
+  | 'INVALID_COOKIE'
+  | 'INVALID_NICKNAME';
 
 export interface UrlParameterError extends ResponseError {
   errorCode: 'URL_PARAMETER_ERROR';