refactor: 타입 마이그레이션 (#122)

[AndyH0ng]

📌 관련 이슈

• close refactor: 타입 마이그레이션 #122

✨ 변경 내용

• deprecated된 Slide 타입을 SlideListItem으로 마이그레이션
• deprecated된 useOpinions을 useComments으로 마이그레이션
• 미사용 훅(useToggle, useOpinions) 제거 및 내부 전용 export 정리
• 리액션 API를 백엔드 명세에 맞게 수정
• 프로젝트 이름 변경 시 모달로 처리
• 헤더의 종료 버튼, 프로젝트/슬라이드 이름 변경 팝오버 공통 컴포넌트로 분리
• 피드백 화면 모바일 뷰 헤더 구현
• VolumeIndicator 리디자인
• "3 레이어 아키텍처" (하단 참조) 위반한 코드 수정
• MSW 백엔드 코드 반영

💡 참고 사항

Data Fetching (TanStack Query + Axios)

Three-layer architecture:

1. Axios Client (src/api/client.ts)

   • Centralized instance with automatic Bearer token injection
   • Hybrid error handling: Critical errors (401, 5xx) handled in interceptor, business errors (4xx) pass to React Query

2. API Endpoints (src/api/endpoints/)

   • Organized by domain: slides.ts, opinions.ts, reactions.ts
   • Plain async functions that use apiClient

3. Query Hooks (src/hooks/queries/)

   • TanStack Query wrappers: useSlides(), useUpdateSlide(), etc.
   • Cache invalidation pattern: Mutations invalidate related query keys
   • Hierarchical query keys for granular cache control

프롬프트를 넣어놓은 CLAUDE.md를 인용합니다.

[gemini-code-assist]

Summary of Changes

Hello @AndyH0ng, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 Pull Request는 프론트엔드 코드베이스를 새로운 백엔드 API 명세에 맞춰 대규모로 리팩토링하고 구조를 개선하는 데 중점을 둡니다. 주요 변경 사항으로는 타입 및 훅 마이그레이션, 미사용 코드 제거, API 상호작용의 현대화, 그리고 재사용 가능한 UI 컴포넌트의 추출이 포함됩니다. 이러한 변화는 코드의 유지보수성을 높이고, 개발 워크플로우를 효율적으로 만들며, 향후 기능 확장을 위한 견고한 기반을 마련합니다.

Highlights

• 타입 및 훅 마이그레이션: 더 이상 사용되지 않는 Slide 타입을 SlideListItem으로, useOpinions 훅을 useComments 훅으로 마이그레이션하여 코드의 일관성과 최신성을 확보했습니다.
• 미사용 코드 제거 및 리팩토링: useToggle 및 useOpinions와 같은 미사용 훅을 제거하고, 내부 전용 export를 정리하여 코드베이스를 간결하게 만들었습니다. 또한, apiClient의 import 경로를 명확히 하여 모듈성을 높였습니다.
• 리액션 API 백엔드 명세 일치: 리액션 관련 DTO, API 엔드포인트, TanStack Query 훅을 백엔드 명세에 맞춰 수정했습니다. 특히 ReactionCountDto의 reactions 타입을 유연하게 변경하고, 캐시 무효화 전략을 개선했습니다.
• 공통 UI 컴포넌트 분리 및 재사용: 프로젝트 및 슬라이드 이름 변경 기능을 위한 TitleEditorPopover와 TextField 컴포넌트를 새로 추가하고, 녹화 종료 버튼을 위한 StopButton 컴포넌트를 분리하여 UI 재사용성을 높였습니다. 이로 인해 프로젝트 이름 변경 방식이 인라인 편집에서 모달 방식으로 변경되었습니다.
• VolumeIndicator 리디자인: 마이크 볼륨 인디케이터의 시각적 디자인을 점 형태에서 막대 형태로 변경하여 가독성을 개선했습니다.
• MSW 핸들러 대규모 업데이트: Mock Service Worker(MSW) 핸들러를 새로운 백엔드 API 구조와 응답 포맷에 맞춰 대규모로 리팩토링하여, 개발 환경에서의 API 모킹 정확도를 향상시켰습니다.

Changelog

• src/api/dto/index.ts
  • 리액션 관련 DTO 임포트 확장 및 CreateOpinionDto를 CreateCommentDto로 이름 변경
• src/api/dto/reactions.dto.ts
  • 새로운 리액션 응답 DTO 추가 (ToggleSlideReactionResponseDto, ToggleVideoReactionDto, ToggleVideoReactionResponseDto)
  • ReactionCountDto의 reactions 필드 타입을 Record<ReactionType, number>로 일반화
• src/api/dto/video.dto.ts
  • CreateOpinionDto를 CreateCommentDto로 이름 변경 및 관련 주석 수정
• src/api/endpoints/*.ts
  • apiClient 임포트 경로를 src/api/client로 통일하여 모듈성 강화
• src/api/endpoints/reactions.ts
  • toggleReaction의 반환 타입을 ToggleSlideReactionResponseDto로 변경하고 에러 처리 로직 추가
  • getSlideReactionSummary의 반환 로직 및 에러 처리 개선
• src/api/endpoints/videoReactions.ts
  • 영상 리액션 관련 타입 및 함수를 reactions.dto.ts의 DTO로 통합 및 에러 처리 추가
• src/api/index.ts
  • apiClient의 직접적인 재내보내기 제거
• src/api/queryClient.ts
  • 댓글 관련 (comments) 새로운 쿼리 키 추가 (all, list, replies)
• src/components/comment/CommentPopover.tsx
  • useSlideOpinions를 useSlideComments로, opinions 변수를 comments로 변경
  • deleteOpinion을 deleteComment로 변경
• src/components/common/Modal.tsx
  • 모달 백드롭의 z-index를 z-50에서 z-80으로 상향 조정
• src/components/common/TextField.tsx
  • 재사용 가능한 TextField 컴포넌트 추가
• src/components/common/TitleEditorPopover.tsx
  • 제목 편집 기능을 위한 재사용 가능한 TitleEditorPopover 컴포넌트 추가
• src/components/common/index.ts
  • 새로운 공통 컴포넌트 (TextField, TitleEditorPopover) 내보내기 추가
• src/components/common/layout/Layout.tsx
  • 테마 관련 배경색 스타일링 로직 간소화
• src/components/common/layout/Logo.tsx
  • 로고 클릭 시 사용자 정의 동작을 위한 onClick prop 추가
• src/components/common/layout/PresentationTitleEditor.tsx
  • TitleEditorPopover를 사용하여 제목 편집 UI 리팩토링
• src/components/feedback/ProgressBar.tsx
  • 슬라이드 타입을 SlideListItem으로 변경하고 썸네일 속성을 imageUrl로 업데이트
• src/components/feedback/ScriptSection.tsx
  • 슬라이드 타입을 SlideListItem으로 변경하고 키 속성을 slideId로 업데이트
• src/components/feedback/video/SlideWebcamStage.tsx
  • 슬라이드 타입을 SlideListItem으로 변경하고 썸네일 속성을 imageUrl로 업데이트
• src/components/feedback/video/VideoPlaybackBar.tsx
  • 슬라이드 타입을 SlideListItem으로 변경
• src/components/insight/TopSlideCard.tsx
  • 반응 메트릭스 컨테이너에 min-h-15 스타일 추가
• src/components/presentation/PresentationCard.tsx
  • 프로젝트 이름 변경 로직을 RenamePresentationModal 및 useRename 훅으로 통합하여 모달 기반으로 변경
• src/components/presentation/PresentationList.tsx
  • 프로젝트 이름 변경 로직을 RenamePresentationModal 및 useRename 훅으로 통합하여 모달 기반으로 변경
• src/components/presentation/RenamePresentationModal.tsx
  • 프로젝트 이름 변경을 위한 새로운 모달 컴포넌트 추가
• src/components/slide/script/CommentPopover.tsx
  • useSlideOpinions를 useSlideComments로 변경하고 관련 변수 이름 업데이트
• src/components/slide/script/SlideTitle.tsx
  • TitleEditorPopover를 사용하여 슬라이드 제목 편집 UI 리팩토링
• src/components/video/DeviceTestSection.tsx
  • 드롭다운 트리거 및 비디오 컨테이너 스타일 조정, 스트림 복제 관련 콘솔 로그 제거
• src/components/video/RecordingSection.tsx
  • StopButton 컴포넌트 통합, z-index 및 스타일 조정, 사이드바 배경색 변경
• src/components/video/StopButton.tsx
  • 재사용 가능한 녹화 중지 버튼 컴포넌트 추가
• src/components/video/VolumeIndicator.tsx
  • 볼륨 인디케이터를 점 형태에서 막대 형태로 리디자인
• src/components/video/index.ts
  • StopButton 컴포넌트 내보내기 추가
• src/hooks/index.ts
  • useOpinions 내보내기를 useComments로 대체하고 useToggle 내보내기 제거
• src/hooks/queries/useOpinions.ts
  • 파일 제거 (관련 로직이 useComments.ts로 마이그레이션됨)
• src/hooks/queries/usePresentations.ts
  • useCreatePresentation 훅 및 관련 임포트 제거
• src/hooks/queries/useReactionQueries.ts
  • 여러 슬라이드의 리액션 집계를 조회하는 useSlideReactionSummaries 훅 추가
  • useToggleReaction의 캐시 무효화 로직을 더 세분화된 쿼리 키로 변경
• src/hooks/queries/useSlides.ts
  • useSlide, useCreateSlide, useDeleteSlide 훅 및 관련 임포트 제거
• src/hooks/useComments.ts
  • 댓글 관리 로직을 TanStack Query와 Zustand를 결합한 옵티미스틱 UI 패턴으로 대규모 리팩토링
  • 내부적으로 useCreateCommentMutation, useCreateReplyMutation, useDeleteCommentMutation 훅 사용
• src/hooks/useRename.ts
  • 이름 변경 로직을 모달 기반으로 리팩토링하고 관련 상태 및 핸들러 업데이트
• src/hooks/useSlideSelectors.ts
  • useSlideOpinions를 useSlideComments로 이름 변경
  • useSlideHistory 훅 제거
  • 슬라이드 액션에서 deleteOpinion을 deleteComment로, setOpinions를 setComments로 변경
• src/hooks/useToggle.ts
  • 파일 제거 (미사용 훅)
• src/mocks/analytics.ts
  • 슬라이드 ID 및 댓글 속성 이름을 새로운 타입에 맞춰 업데이트
• src/mocks/handlers.ts
  • MSW 핸들러를 ok, fail 헬퍼 함수를 사용하여 대규모로 리팩토링
  • 핸들러를 기능별로 (auth, session, project, slide, script, comment, reaction, video, share, file, analytics) 분리
  • 모든 관련 엔드포인트를 새로운 백엔드 API 구조 및 DTO에 맞춰 업데이트
• src/mocks/slides.ts
  • Slide 타입을 SlideListItem으로 변경하고, id를 slideId, thumb를 imageUrl, opinions를 comments로 속성 이름 업데이트
• src/pages/FeedbackSlidePage.tsx
  • 댓글 처리 로직 및 슬라이드 속성을 새로운 타입에 맞춰 업데이트
• src/pages/InsightPage.tsx
  • 슬라이드 리액션 요약 조회를 useSlideReactionSummaries 훅으로 변경
• src/pages/VideoRecordPage.tsx
  • 새로운 공통 컴포넌트 (StopButton, Logo의 onClick) 통합 및 녹화 종료 모달 스타일 조정
• src/stores/slideStore.ts
  • 슬라이드 상태 관리 스토어의 주석을 '의견'에서 '댓글'로 변경
  • deleteOpinion을 deleteComment로, addOpinion을 addComment로, setOpinions를 setComments로 액션 이름 변경
  • 슬라이드 상태 내 opinions 속성을 comments로 변경
• src/types/index.ts
  • Slide 타입 대신 SlideListItem 타입 내보내기
• src/types/recording.ts
  • 녹화 관련 타입 및 변환 함수를 SlideListItem에 맞춰 업데이트
• src/types/script.ts
  • ReactionType에 백엔드 emojiType과의 정렬을 위한 TODO 주석 추가
• src/types/slide.ts
  • Slide 인터페이스 제거
  • SlideListItem 인터페이스 내 opinions를 comments로, thumb를 imageUrl로 속성 이름 변경

Activity

• 이 Pull Request는 refactor: 타입 마이그레이션 #122 이슈를 해결합니다.
• 프론트엔드 코드베이스의 대규모 리팩토링이 진행되었습니다.
• 새로운 백엔드 API 명세에 맞춰 데이터 모델 및 API 호출 로직이 업데이트되었습니다.
• 재사용 가능한 UI 컴포넌트들이 추출되어 코드의 모듈성과 유지보수성이 향상되었습니다.
• Mock Service Worker(MSW) 핸들러가 새로운 API 구조를 반영하도록 전면 개편되었습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 Pull Request는 타입 마이그레이션, API 레이어 및 컴포넌트 구조 개선 등 대규모 리팩토링을 포함하고 있습니다. 전반적으로 코드의 일관성과 재사용성이 크게 향상되었습니다. 특히, 중복 로직을 공통 컴포넌트(TitleEditorPopover, TextField 등)로 추출하고, API 호출 구조를 3-레이어 아키텍처에 맞게 정리한 점이 인상적입니다. 또한, MSW 핸들러를 실제 백엔드 명세에 맞춰 재작성하여 테스트 환경의 신뢰도를 높인 점도 훌륭합니다. 한 가지 개선점으로, useComments 훅 내부의 TanStack Query 뮤테이션에서 사용하는 쿼리 무효화(invalidation) 범위를 더 명확하게 지정하여 불필요한 데이터 리페칭을 줄일 수 있는 부분을 발견했습니다. 이에 대한 구체적인 제안을 리뷰 코멘트에 남겼습니다. 전반적으로 매우 훌륭한 리팩토링 작업입니다.

[AndyH0ng]

@claude 코드 리뷰해줘

[claude]

Claude finished @AndyH0ng's task in 2m 31s —— View job

---

코드 리뷰 완료 ✅

전체 평가

이 PR은 대규모 타입 마이그레이션과 아키텍처 개선을 포함한 훌륭한 리팩토링 작업입니다. 76개 파일에 걸쳐 일관성 있게 변경사항을 적용하고, CLAUDE.md에 명시된 3-레이어 아키텍처를 철저히 준수했습니다. 특히 공통 컴포넌트 추출과 MSW 핸들러 재작성이 인상적입니다.

---

주요 강점 💪

1. 타입 마이그레이션 (Slide → SlideListItem)

• 완벽한 일관성: 76개 파일에 걸쳐 Slide → SlideListItem, opinions → comments, thumb → imageUrl 등의 속성명 변경이 일관되게 적용됨
• 타입 안정성: TypeScript strict mode 하에서 모든 타입 변경이 안전하게 이루어짐
• 백엔드 정렬: API 응답 DTO와 프론트엔드 타입이 정확히 일치

2. 3-레이어 아키텍처 준수

✅ Axios Client (src/api/client.ts) - 중앙화된 인스턴스
✅ API Endpoints (src/api/endpoints/) - apiClient 임포트 경로 통일 (모든 파일에서 @/api/client로 일관되게 변경)
✅ Query Hooks (src/hooks/queries/) - TanStack Query 래퍼로 계층 분리

특히 모든 엔드포인트 파일에서 apiClient 임포트 경로를 src/api/client로 통일한 점이 좋습니다.

3. 공통 컴포넌트 추출의 우수성

TitleEditorPopover (src/components/common/TitleEditorPopover.tsx:1):

• 프로젝트/슬라이드 제목 편집 로직을 완벽하게 추상화
• readOnlyContent prop으로 정보 팝오버와 편집 팝오버 양쪽 모두 처리
• 재사용성이 매우 높은 설계

TextField (src/components/common/TextField.tsx:1):

• 간결하고 재사용 가능한 입력 필드 컴포넌트
• 접근성(aria-label) 고려

4. 개선된 UX 패턴

• 프로젝트 이름 변경: 인라인 편집 → 모달 방식으로 변경하여 오작동 위험 감소
• Optimistic UI: useComments 훅에서 즉시 업데이트 후 실패 시 롤백하는 패턴 잘 구현됨

5. MSW 핸들러 전면 개편

• 헬퍼 함수(ok, fail) 도입으로 응답 포맷 일관성 확보
• 백엔드 API 구조를 정확히 반영
• 도메인별 분리 (auth, session, project, slide, script, comment, reaction, video, share, file, analytics)

---

개선 제안 🔧

1. ⚠️ 중요: Query 무효화 범위 최적화 필요

위치: src/hooks/useComments.ts:34,49,63

현재 뮤테이션 성공 시 queryKeys.slides.lists() 또는 queryKeys.comments.all을 사용하여 모든 프로젝트의 슬라이드 목록 또는 모든 댓글 관련 쿼리를 무효화하고 있습니다. 이는 불필요한 네트워크 요청을 유발합니다.

문제점:

// useCreateCommentMutation - 34번째 줄
void queryClient.invalidateQueries({ queryKey: queryKeys.slides.lists() }); 
// ❌ 모든 프로젝트의 슬라이드 목록을 다시 불러옴

// useCreateReplyMutation - 49번째 줄  
void queryClient.invalidateQueries({ queryKey: queryKeys.comments.all });
// ❌ 모든 댓글 관련 쿼리를 다시 불러옴

해결 방법:
뮤테이션 변수에 projectId를 추가하여 더 구체적인 쿼리 키를 무효화:

function useCreateCommentMutation() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: ({ 
      slideId, 
      projectId,  // 추가
      data 
    }: { 
      slideId: string; 
      projectId: string;  // 추가
      data: CreateCommentDto 
    }) => createSlideComment(slideId, data),

    onSuccess: (_, { slideId, projectId }) => {
      void queryClient.invalidateQueries({ queryKey: queryKeys.comments.list(slideId) });
      void queryClient.invalidateQueries({ queryKey: queryKeys.slides.list(projectId) }); // ✅ 특정 프로젝트만
      void queryClient.invalidateQueries({ queryKey: queryKeys.slides.detail(slideId) });
    },
  });
}

이 패턴을 useCreateReplyMutation, useDeleteCommentMutation에도 동일하게 적용하세요.

참고: Gemini의 리뷰 코멘트와 동일한 이슈입니다.

Fix query invalidation scope →

---

2. 💡 권장: 리액션 Query Key 일관성

위치: src/api/queryClient.ts:99-101

현재 리액션 쿼리 키만 다른 패턴을 사용:

reactions: {
  all: ['reactions'] as const,
  summary: (slideId: string) => ['reactions', 'summary', slideId] as const,
  // ❌ 다른 쿼리 키들은 ...all을 spread하는데 여기만 직접 작성
},

개선안:

reactions: {
  all: ['reactions'] as const,
  summaries: () => [...queryKeys.reactions.all, 'summary'] as const,
  summary: (slideId: string) => [...queryKeys.reactions.summaries(), slideId] as const,
},

일관성을 위해 slides, comments 등과 동일한 계층적 패턴 권장.

Fix reaction query keys pattern →

---

3. 📝 문서화: TODO 주석 추적

위치: src/api/dto/reactions.dto.ts:6,22,39

백엔드 필드명 변경 대기 중인 TODO 주석이 3곳에 있습니다:

// TODO: 백엔드 확정 시 필드명 `type` → `emojiType`으로 변경 필요
// TODO: 백엔드 확정 시 필드명 `type` → `emojiType`, `timestamp` → `timestampMs`(밀리초)로 변경 필요
// TODO: 백엔드 emojiType 확정 후 키 이름 변경 필요

제안: 이슈 트래커에 별도 이슈로 등록하여 추적하는 것을 권장합니다.

---

4. 🎨 마이너: 파일 헤더 주석 일관성

위치: src/components/common/ActionButton.tsx:1-4 등 여러 파일

일부 공통 컴포넌트에 JSDoc 스타일 파일 헤더가 추가되었습니다:

/**
 * @file ActionButton.tsx
 * @description 하단 영역 주요 액션 버튼
 */

관찰 사항:

• 좋은 문서화 습관이지만, 모든 파일에 일관되게 적용되지 않음
• @file 태그는 파일명과 중복

제안: 팀 컨벤션으로 채택할지 결정 후 일관되게 적용하거나, 중복을 피하기 위해 @file 태그 제거 고려

---

세부 검토 사항 ✓

타입 안정성 ✅

• TypeScript strict mode 준수
• any 타입 사용 없음
• 모든 타입 변경이 안전하게 전파됨

네이밍 컨벤션 ✅

• 폴더: kebab-case
• 컴포넌트: PascalCase
• 훅/유틸: camelCase
• 모두 일관되게 준수됨

Export 패턴 ✅

• 컴포넌트: export default (하단에 위치)
• 훅/유틸: named export
• 타입: export type / export interface
• 모두 올바르게 적용됨

Selector 패턴 ✅

useSlideSelectors.ts에서 세분화된 셀렉터 훅 제공:

• useSlideTitle(), useSlideComments() 등
• 불필요한 리렌더링 방지
• CLAUDE.md의 권장 패턴 완벽히 준수

에러 핸들링 ✅

• Hybrid 전략 잘 구현됨 (인프라 에러 vs 비즈니스 에러)
• reactions.ts:29,46에서 적절한 에러 throw
• 옵티미스틱 UI에서 롤백 패턴 올바름

접근성 ✅

• TitleEditorPopover에 ariaLabel prop 포함
• TextField에 aria-label 전달

---

테스트 권장사항 🧪

PR 머지 전 다음 시나리오 테스트 권장:

1. 댓글 기능:

   • 댓글 추가/삭제/답글 시 optimistic UI 동작 확인
   • 네트워크 실패 시 롤백 테스트

2. 프로젝트 이름 변경:

   • 새로운 모달 방식으로 이름 변경 테스트
   • ESC 키, 저장 버튼, Enter 키 모두 테스트

3. 리액션:

   • 슬라이드 리액션 토글
   • exclusive 그룹(좋아요/싫어요) 동작 확인

4. MSW 모킹:

   • npm run dev:local로 모든 API가 정상 작동하는지 확인

---

최종 의견

이 PR은 머지 가능 상태입니다. 제안한 개선사항들은 대부분 성능 최적화 또는 일관성 개선에 관한 것으로, 핵심 기능에는 영향을 주지 않습니다.

우선순위:

1. 🔴 높음: Query 무효화 범위 최적화 (chore: 프로젝트 세팅 #1) - 성능에 직접적 영향
2. 🟡 중간: 리액션 Query Key 일관성 (chore/프로젝트 세팅 #2), TODO 이슈 트래킹 (Closed #3)
3. 🟢 낮음: 파일 헤더 주석 일관성 (design: 디자인 시스템 구축 #4)

칭찬할 점:

• 76개 파일에 걸친 일관된 마이그레이션
• 아키텍처 원칙 철저한 준수
• 재사용 가능한 컴포넌트 설계
• 완벽한 타입 안정성

수고하셨습니다! 🎉

---

참고: 이 리뷰는 PR의 변경사항을 분석한 것이며, GitHub의 공식 PR 승인(approve) 기능은 사용할 수 없습니다. 승인은 팀원이 직접 진행해주세요.

---

[kimyw1018]

확실히 보기 좋네요 수고하셨슴다