업로드 컴포넌트 작업을 시작하려면, 컴포넌트 폴더로 이동한 다음 upload.tsx라는 새 컴포넌트를 생성해 보겠습니다.

그 안에서 RAFCE를 실행하여 빠르게 만들 수 있으며, 그런 다음 홈 라우트 내에 불러와 사용할 수 있습니다.

바로 여기, '업로드'라고 적힌 텍스트가 있는 곳입니다. 이는 메인 영역 하단부, 이미지 업로드라고 표시된 곳에 위치하고 있습니다.

이 p 태그를 컴포넌트의 업로드 컴포넌트 호출로 간단히 대체해주세요. 그렇게 하시면 제대로 작동할 것이고, 아무것도 바뀌지 않을 겁니다. 왜냐하면 이 컴포넌트는 단순히 '업로드'라는 텍스트를 표시하기 때문입니다.

테스트를 작성하시면 여기에서 업로드 테스트를 확인할 수 있습니다. 즉, 이 업로드 컴포넌트 내부 개발을 시작할 수 있습니다. 이제 jsx 부분을 먼저 시작해서 클래스 이름을 upload로 설정해 보겠습니다.

그 다음에는 이 안에 파일이 있는지 없는지 확인해야 합니다. 아직 업로드된 파일이 없는 경우도 있을 수 있습니다. 그리고 그를 위해 새로운 변수를 맨 위에 만들 수 있습니다.

실제로 추적할 수 있는 주 데이터 필드가 될 겁니다.

알겠습니다. 새로운 유스 스테이트 스니펫을 만들어서 'file'이라고 이름을 짓고, 초기값은 null로 설정하겠습니다. 이 파일은 파일 또는 다른 유형의 데이터가 될 것입니다.

시작 시 null로 설정한 다음, 드래그 중인지 여부를 판단하는 다른 상태 스니펫을 몇 개 더 만들 수도 있습니다. 파일이 현재 드래그 중인지 확인하기 위해, 시작 시 false로 설정할 수 있습니다.

또 다른 변수로는 '진행률'이 있는데, 진행률을 시작 시 0으로 설정하여 업로드 로더의 진행 상황을 추적할 것입니다.

이와 함께, 사용자께서 로그인 여부도 확인해야 합니다.

저는 이제 `is signed in` 변수에 접근할 수 있습니다. 이 변수는 `useOutletContext`의 컨텍스트 타입인 `auth context`에서 가져온 것이며, 이렇게 접근할 수 있습니다.

지금 업로드 과정에서 파일이 없는 경우를 바로 확인할 수 있습니다.

그렇다면, div 요소를 렌더링할 수 있습니다. 이 div는 '파일 없음'과 같은 내용을 표시할 것입니다. 그렇지 않고 파일이 있다면 다른 것을 렌더링할 수 있으며, 이 경우에는 단순히 '파일'이라고 표시하겠습니다. 파일이 있으므로요.

지금은 파일이 없는데, 좀 더 크게 만들어드릴게요. 이렇게 보이시죠. 파일이 없는 경우에는 사용자에게 그 점을 알려드려야 합니다.

이것을 드래그 앤 드롭 방식으로 넣어주시면 됩니다. 이 과정은 이렇게 div 안에 있어야 합니다. div를 하나 만들어 보겠습니다.

파일도 없고 클래스 이름도 있는데, 드롭 영역의 동적 클래스 이름이 될 것입니다. 그리고 저희는...

현재 드래그 중인지 확인하고, 드래그 중이라면 해당 클래스를 적용하고, 그렇지 않다면 비워두겠습니다. 현재는 파일이 없는 상태이고, 호버하거나 드래그하면 어떤 일이 발생하는지 확인하실 수 있습니다. 그런 다음 이 div 영역 내에서요.

파일 형식을 갖는 입력 요소를 렌더링해 보겠습니다. 해당 요소의 클래스 이름은 'drop-input'으로 설정할 것입니다.

또한 accept 속성도 포함될 텐데, 이것은 점 jpeg 점 jpeg처럼 이렇게 받아들일 것입니다.

그리고 .bng 도요. 그리고 저희가 로그인하지 않았다면 비활성화 상태가 될 겁니다.

그렇다면 그냥 비활성화할 수 있겠죠. 이걸 모두 새 줄에 추가해볼게요.

그리고 이 accept가 왜 불평하는지 살펴봅시다. 아, 등호가 빠졌었네요. 자, 이제 됐습니다. 그리고 이제 이 input 아래에 drop dash content 클래스 이름을 가진 div와 drop 클래스 이름을 가진 div를 렌더링할 수 있습니다.

대시 아이콘을 넣어 사용자들이 무언가를 드래그 앤 드롭할 수 있다는 것을 알 수 있도록 하고, 루시드 아이콘에서 가져온 업로드 아이콘을 크기 20으로 설정해 줍니다. 이렇게 하면 조금 더 의미가 명확해지는 것 같습니다. 그리고 이 div 아래에…

저희는 또한 p 태그를 렌더링할 텐데요, 이 태그는 로그인 여부를 확인하고, 로그인한 상태라면 저희는...

업로드 버튼을 클릭하시거나, 파일을 직접 끌어서 놓으셔도 됩니다. 만약 현재 로그인하지 않으셨다면, 로그인하라는 메시지가 나올 수 있습니다.

피우터(Pewter)를 통해 업로드를 진행하시려면, 로그인하거나 회원가입을 해주세요.

자, 거의 다 왔어요. 이제 확실히 보이네요. 화면을 조금 확대해서 잘 보이도록 할게요. 그리고 나서 이 p 태그 아래로 내려가서 help라는 클래스 이름을 가진 또 다른 p 태그를 렌더링할 겁니다.

추가적인 정보, 예를 들어 최대 파일 크기가 어느 정도인지 같은 정보는 잘 모르겠습니다.

용량은 10메가바이트에서 50메가바이트 정도 될 텐데요, 우선은 50메가바이트로 이렇게 설정해 보겠습니다. 괜찮습니다.

이제 이미 파일을 업로드한 경우에 어떤 일이 발생하는지 파악해 볼 수 있습니다. 이는 여기 두 번째 div 안에 발생할 것이며, 이 div에는 'upload'라는 클래스 이름이 설정되어 있을 것입니다.

업로드 진행 상황을 표시할 수 있도록, 클래스 이름을 가진 div를 사용하여 상태 정보를 보여주는 기능이 필요합니다.

상태 내용으로 설정하고, 상태 아이콘 클래스 이름을 가진 div를 만들어서 진행률이 100으로 설정되었는지 확인해 보겠습니다.

그렇다면, 점검 표시 2를 표시할 텐데, 이는 단순히 점검된 것으로 분류될 것임을 의미합니다.

체크 표시처럼요.

만약 진행 상황이 100%가 아니라면, Lucid React에서 가져온 'image' 클래스 이름을 가진 이미지 아이콘을 표시하고 바로 닫을 수 있습니다.

물론 지금은 볼 수 없습니다. 아직 이미지를 업로드하지 않았기 때문입니다.

이 div 아래에 파일을 업로드한 후에, 파일 이름을 표시할 h3 요소를 렌더링할 수 있습니다. 그리고 그 h3 아래에는 진행 상황을 추적하는 div 요소를 표시할 예정입니다.

따라서 클래스 이름은 'progress'가 되고, 바(bar) 역할을 하는 div 요소의 클래스 이름도 'progress'로 설정될 것입니다.

그리고 이 진행률 표시줄은 진행률에 따라 너비를 조절하여 진행 정도에 해당하는 퍼센트(percentage)만큼 표현될 것입니다.

이것은 자가 닫힘 div 태그가 될 것입니다. 기본적으로 왼쪽에서 오른쪽으로 이동하면서 100%를 채울 거예요.

그 다음에는 체크 표시를 보여드릴 텐데요. 그리고 이 자체 닫힘 div 바로 아래, 진행 div 안에 계속해서 렌더링을 할 예정입니다.

클래스 이름이 status-text로 설정된 p 태그를 사용하고, 진행률이 100% 미만이라면, '분석 중'과 같은 문구를 표시할 수 있습니다.

평면도입니다. 그렇지 않으면 진행 상황이 완료되면 AI 결과를 사용자에게 표시하기 위해 리디렉션된다고 말씀드릴 것입니다.

이것이 제대로 작동하려면, 진행 상황이 이동함에 따라 얼마나 증가시킬 것인지와 같이, 많은 다양한 상수를 추적해야 합니다.

혹시 401 또는 403 에러가 발생할 경우 어떻게 되는 건지, 그리고 여기서 표시될 이미지의 크기는 어떻게 되는 건지, 무엇보다도 프롬프트가 어떻게 보일지 궁금합니다.

그런 식으로 이 2D 도면을 3D 건축 렌더링으로 변환하는 것은 아닙니다. 저희는 해당 정보를 이 컴포넌트 내부에 직접 저장하지 않으려고 합니다.

대신, lib 폴더 안에 constants.ts라는 새로운 파일을 만들고 싶습니다.

그리고 영상 키트 링크에 설명란에 해당 상수 파일을 제공해 드릴 예정이니, 간단히 복사해서 붙여넣으시면 됩니다.

이 부분은 저희가 최종 이미지를 저장할 위치인 저장 경로와, 제가 말씀드렸던 진행 상황에 필요한 시간 상수를 포함하고 있습니다.

몇 가지 UI 상수, 이미지 크기, 그리고 무엇보다 중요한 룸피 렌더 프롬프트가 있습니다. 최상의 결과를 얻을 수 있도록 실제로 작성하는 데 시간을 들였습니다.

자, 그럼 함께 진행해 보도록 하겠습니다. 이번 과제는 입력받은 2D 평면도를 사실적인 탑-다운 3D 건축 렌더링으로 변환하는 것입니다.

엄격한 기준을 적용하고, 그러한 기준을 어기지 않도록 부탁드립니다.

렌더링에서 모든 텍스트를 제거해주세요. 글자, 숫자, 라벨, 치수 등은 렌더링하지 마세요. 기하학적 구조는 반드시 일치해야 합니다. 벽, 방, 문, 창문은 설계도에 있는 정확한 선과 위치를 따라야 합니다.

이동하거나 크기를 조절하지 마세요. 깨끗하고 사실적인 결과물을 선명한 가장자리, 균형 잡힌 조명, 사실적인 재료로 제공하는 것을 확인하고 싶습니다. 그리고 다른 것은 추가하지 않도록 요청합니다.

벽, 문, 창문은 모두 2D 렌더링을 기준으로 그대로 복사해야 합니다.

그리고 저희는 원본 2D 설계도에 명확하게 표시된 경우에는 침대 아이콘, 소파, 식탁 등 가구와 공간 매핑을 추가하도록 요청하기도 합니다.

조명은 밝고 중립적으로 하도록 요청하고, 훌륭합니다. 그래서 저희는 앱 렌더링을 만들 때 이걸 사용할 겁니다.

이제 실제로 드래그 앤 드롭 업로드 로직을 구현할 때입니다. 하지만 드래그 앤 드롭을 해보신 분들은 아시겠지만, 매우 수동적인 과정이라는 것을요.

간단해 보이지만, 제대로 하려면 많은 코드가 필요합니다. 그래서 인공지능을 이용해서 우리를 위해 해 줄 수 있는 완벽한 상황이죠.

자, 그럼 주니를 열고 업로드 드래그 앤 드롭 기능을 만들라는 작업을 시켜볼게요. 영상 설명에 있는 링크에 전체 프롬프트를 드릴 테니 참고하세요.

붙여넣으시면 함께 검토해 드릴 수 있습니다. 업로드 컴포넌트를 업데이트하여 드래그 앤 드롭 핸들러와 변경 시 동작하는 함수를 추가하고, 데이터를 전달해야 합니다.

파일들을 새로운 프로세스 파일 함수 내부에 넣고, 해당 함수 안에서 파일 리더 기능을 사용하여 base64 문자열을 얻은 다음, 상수를 사용하여 진행률을 늘립니다. 진행률이 100에 도달하면 지워주세요.

특정 간격을 두고 완료 시 데이터를 함께 호출하며, 특정 지연 후에 완료를 확인합니다. 로그인하지 않은 경우에는 업로드 로직을 차단하고, 드래그 중 상태를 반영하여 드롭 영역 UI를 표시해 주세요.

다시 말씀드리지만, 여기서는 제가 최대한 자세하게 설명드린 이유가 바로 여러분께서 저와 동일한 결과를 얻으셨으면 하기 위해서입니다.

만약 제가 이걸 직접 개발했다면, 아마 드래그 앤 드롭 업로드 기능을 구현하도록 지시할 수 있었을 거예요. 그리고 Junie가 그걸 잘 해낼 거라고 확신해요. 자, 그럼 이 작업을 시켜서 어떻게 되는지 한번 살펴볼까요.

업로드 파일을 편집하고 있어요. 그리고 꽤 빠르게 처리할 것 같아요. 자, 됐어요.

끝났어요. 홈페이지를 업데이트했고, 거기서 기본적으로 몇 가지 추가 프로프를 제공했어요.

현재는 업로드 완료 기능을 콘솔에 기록하고 있지만, 대부분의 로직은 upload.tsx 파일 내에서 처리되고 있습니다.

자, 그럼 열어보도록 하겠습니다. 어떤 변화가 있는지 확인해 볼게요. 업로드 진행 상태를 알 수 있도록 업로드 관련 속성들이 추가되었네요.

그리고 이 프로세스 파일 함수를 만들었고요. 그리고 캐시되도록 useCallback까지 사용했답니다.

로그인이 안 되어있는지 확인하고, 만약 그렇다면 함수에서 빠져나옵니다. 하지만 로그인되어 있다면, 사용자가 업로드하려는 파일을 업데이트하고 진행률을 0으로 재설정합니다.

그런 다음, base64 이미지에서 파일을 읽어들입니다. 업로드 진행 상황을 지속적으로 업데이트하기 위해 간격을 설정한 뒤에 파일을 읽어들입니다.

드래그 오버, 드래그 리브, 드래그 앤 드롭 기능도 구현했어요. 파일을 드롭할 때나, 수동으로 이미지를 다시 선택할 때도 파일을 처리합니다.

자, 그럼 한번 테스트해 볼까요? 직접 아파트 리모델링을 하지 않으시는 분들은 구글에서 간단한 2D 도면을 검색하신 후 개발하신 앱으로 다시 돌아가시면 됩니다.

파일을 단순히 드래그 앤 드롭하면 어떻게 반응하는지 확인할 수 있습니다. 호버 시 반응도 좋고, 업로드 후 체크 표시도 잘 되고, 현재는 모든 것이 잘 보입니다. 다만, 저희 코드는 아직 해당 파일에 대한 처리를 하고 있지 않습니다.

만약 제가 잘못 기억하지 않는다면, 저희 경로 홈으로 가시면 전체 업로드를 콘솔 로그로 기록하고 있을 겁니다. 혹시 여기로 오셔서 검사 도구를 열고 콘솔 탭으로 가시면, 확인하실 수 있을 거예요.

완료된 업로드의 base64 버전을 확인할 수 있어서 다행입니다.

이제 작업할 데이터가 어느 정도 확보되었지만, 이제 실제로 그 파일을 시각화하고 싶습니다.

그렇게 하기 위해서는 routes 폴더 아래에 새로운 경로를 만들어서 visualizer dot dollar sign id dot tsx라고 이름을 지을 수 있습니다. 이렇게 경로를 생성할 수 있습니다.

리액트 라우터 내에서 동적인 파일을 만들 때에는 rafce를 사용하여 초기화할 수 있으며, routes.ts 파일 내에 새로운 경로를 추가해야 합니다. 현재는 인덱스 홈 경로만 간단하게 설정해 두었습니다.

콤마로 분리하고, 리액트 라우터 개발 경로를 새로 추가할 수 있습니다.

경로는 비주얼라이저 슬래시 콜론 ID로 진행될 예정입니다. 동적인 경로가 될 것이고, 파일은 슬래시 루트에 위치할 것입니다.

포워드 슬래시 비주얼라이저. 달러 기호 ID, TSX입니다.

마지막으로, 저희 홈페이지 완료 후 수정 작업을 진행하고자 합니다.

네, 바로 여기입니다. 단순히 로그를 기록하는 것이 아니라 실제로 이 시각화 페이지로 리디렉션되도록 새로운 함수를 컴포넌트 최상단에서 만들어서 navigate에 접근할 수 있습니다.

리액트 라우터에서 navigate 훅을 불러오셔야 합니다. 그런 다음, `handleUploadComplete`이라는 비동기 함수를 정의할 수 있습니다.

기본 64비트 이미지의 문자열을 받아들이는 기능 블록을 열 수 있습니다.

이 이미지의 ID를 얻고 싶지만, 새로운 ID를 생성해야 합니다. 가장 간단한 방법은 현재 날짜를 가져와 문자열로 변환하는 것입니다.

정말 독특하네요. 그리고 나서 슬래시 visualizer 슬래시, 방금 생성한 새로운 플랜의 ID로 이동해서 true를 반환할 수 있습니다.

자, 이제 여기에서 업로드할 때 콘솔에 기록하는 대신, 여기에서 handle upload complete를 호출할 수 있습니다.

업로드된 새로운 이미지에 자동으로 들어가고, 이 base64 이미지를 받아 리디렉션을 수행해야 합니다.

자, 한번 테스트해 보겠습니다. 새로운 파일을 업로드하면 404 페이지로 리디렉션되는 것을 확인해 볼 수 있을 거예요.

그것은 저희가 시각화로 옮겨가게 되는데, 사실은 시각화기(visualizer)가 되어야 했기 때문입니다.

수정해서 다시 업로드하면 이번에는 비주얼라이저 ID로 돌아오게 될 거예요. 그러면 곧 동적인 페이지가 될 겁니다.

여기서 이 이미지를 실제로 표시할 수 있습니다. 하지만 그걸 하기 전에, 방금 우리가 만든 이 드래그 앤 드롭 업로더 컴포넌트를 위한 새로운 PR을 열어볼까요. 아니면 좀 더 정확히 말하면, 드래그 앤 드롭 기능은 제가 만들었어요.

인공지능이 만들었더라고요. 코드래빗에서도 최근에 인공지능과 인간 코딩의 상태에 대한 보고서를 발표한 게 흥미롭네요. 주요 발견사항은 인공지능 코드가 1.7배 더 많은 문제를 야기한다는 거랍니다.

음, 확실히 속도를 상당히 높여주기는 하지만, 아마도 자세히 확인하지 못했을 가능성이 있는 것 같습니다.

그러다 보니 문제가 더 많이 발생하게 되고, 바로 그런 이유로 이 새로운 브랜치에 변경 사항들을 일단 적용해 보겠습니다. 저희가 파일 업로드 브랜치에 있다는 점을 잊지 마시고, 방금 그 기능이 구현되었음을 알려드립니다.

그래서 git add dot, git commit dash m, 그리고 드래그 앤 드롭 업로더를 구현하고 git push를 할 수 있습니다.

물론이고, 새로운 브랜치를 생성했으니 업스트림을 설정해야 합니다. 이 명령어를 복사해서 붙여 넣으시면 됩니다. 그리고 GitHub 저장소 안에서 바로 확인해보시면, 'upload files'에 최근 푸시가 있었다는 것을 보실 수 있습니다.

2초 전이라는 뜻이니, 저희 메인 브랜치와 비교하여 어떤 변경 사항이 있었는지 확인할 수 있습니다.

특히 7개의 다른 파일에서 확인하실 수 있습니다. 그리고 이 PR을 병합하기 전에, CodeRabbit이 바로 나타나는 것을 보실 수 있어야 합니다.

엣지 케이스는 그냥 가운데 케이스일 뿐이라고 하네요. 그래서 PR을 검토할 때까지 잠시만 기다려 봅시다. 문제가 없는지 확인하기 위해서요.

그리고 그렇게 된다면 진행할 수 있습니다. 아주 간단한 PR이기 때문에, 잠시 후에 CodeRabbit이 요약본을 생성해 줍니다. 이 기능에서 저희가 추가한 내용이 담겨 있습니다.

이미지 업로드 기능을 드래그 앤 드롭을 지원하여 구현하고, 시각적인 진행률 표시줄을 통해 업로드 진행 상황을 추적합니다. 업로드된 이미지를 처리하기 위한 새로운 시각화 뷰를 제공하며, 업로드 완료 후에는 자동으로 시각화 뷰로 이동하도록 하겠습니다.

필요하시다면 CodeRabbit에서 이 유용한 코드 다이어그램과 함께 더 자세한 설명을 제공해 드릴 수 있습니다. 저희는 이 다이어그램을 확장하여 더 자세히 살펴보실 수도 있습니다.

이건 사실 상당히 자세한 내용입니다. 현재까지의 애플리케이션 작동 방식과 특히 이번 PR에서 구현하고 있는 기능에 대해 구체적으로 보여주고 있습니다.

아마도 같이 일하시는 다른 분께서 이 PR을 검토하시면서 내용을 좀 더 쉽게 이해하실 수 있을 것 같습니다.

혹시 이 작동 방식에 대한 요약이 필요하시거나, 제대로 작동하는지 확인하고 싶으시다면, 바로 확인해 보실 수 있습니다. 이 경우에는 사용자가 홈페이지로 이동하게 됩니다.

여기에 홈 라우트가 있습니다. 그리고 onComplete 콜백과 함께 업로드 컴포넌트를 렌더링합니다. 사용자가 이미지 파일을 선택하거나 드롭하면, 사용자가 로그인했는지 확인합니다.

인증이 완료되면, 파일을 Base64로 읽고, 진행률 표시줄을 애니메이션으로 표시하며, 진행률을 완료한 후, onComplete 함수를 호출합니다. 이 함수는 고유한 파일 ID를 생성하고, 시각화 ID 페이지로 이동합니다.

그런 다음 사용자에게 표시합니다. 하지만 사용자가 인증되지 않은 경우, 모든 업로드 상호작용을 비활성화합니다.

원하는 대로 작동하고 있습니다. 이 경우 몇 가지 의견이 있습니다. 흥미롭게도, 아주 작은 PR이지만 애플리케이션 내부에 심각한 잠재적 문제가 있을 수 있습니다.

업로드된 이미지 데이터 및 base64 인코딩된 이미지는 폐기됩니다.

네, 시각화 페이지에서는 접근할 수 없습니다. 현재 표시하고 있지 않다는 것은 알고 있습니다. 즉, 이 Base64 이미지 데이터를 새로운 페이지로 전달해야 한다는 의미입니다.

다음 수업에서 다루어질 예정입니다. 또한 잠재적인 불일치에 대한 내용도 다루고 있습니다.

네, 홈페이지에는 최대 10메가바이트라고 언급했는데, 실제 업로드 과정에서는 50메가바이트라고 설명드렸습니다. 일관성을 좀 더 갖춰야 할 것 같습니다. 그렇지 않으면 사용자분들이 혼란스러워하시고 어느 정보가 정확한지 알 수 없으실 테니까요.

그리고 또 중요한 문제인데요, 컴포넌트가 unmount 될 때 set interval과 set timeout이 제대로 정리되지 않습니다.

만약 진행 애니메이션이 실행 중인 상태에서 컴포넌트가 마운트 해제된다면, 예를 들어 사용자가 다른 페이지로 이동하는 경우, 간격(interval)과 타임아웃(timeout)이 계속 실행될 수 있습니다. 이는 예상치 못한 방식으로 완료되지 않은 상태를 호출할 수 있는 잠재적인 문제입니다.

그래서, 저희가 그 인터벌을 지울 수 있도록 하는 수정안을 제안했죠. 수동으로 수정 내용을 복사해서 붙여넣어도 되고, 아니면 AI 에이전트를 이용해서 구현하도록 이 프롬프트를 사용해도 됩니다.

한번 그렇게 해보겠습니다. 어플리케이션으로 돌아가서 Juni를 열고 CodeRabbit이 준 코드를 붙여넣어 볼게요. 업로드 컴포넌트에서 unmount될 때 타이머를 정리하고, 그동안 다른 어떤 일이 일어나고 있는지 확인해 보겠습니다.

파일 리더 에러 처리가 빠져있네요. 읽어서 데이터 URL로 변환하는 과정에서 실패하면 파일 읽기 에러로 처리되는 거죠. reader.onError 컴포넌트가 없네요. const reader new File 바로 아래에 추가해야겠어요.

리더 에러를 추가할 수 있습니다. 자, 그렇게 진행해 보겠습니다. 그리고 그동안 변경 사항이 제대로 구현된 것 같아서 다행입니다.

업로드 컴포넌트로 넘어가 볼게요. 독자 부분 아래에 에러 발생 시 독자 점을 추가할 수도 있어요. 그래야 문제가 발생했을 때 추적할 수 있답니다.

네, 좋습니다. 이건 괜찮네요. 드래그 앤 드롭은 어떤 이미지 형식이든 허용하지만, 파일 입력은 특정 파일 형식으로 제한되므로, 드래그 앤 드롭에서도 허용하는 형식을 명시하는 것이 좋겠습니다.

파일이 드롭되는 바로 아래에 이 텍스트가 위치할 것입니다. 이 줄들을 허용된 파일과 교환하고, 드롭된 파일 아래에 방금 복사한 내용을 붙여넣을 수 있습니다. 이 내용에는 새로 추가된 내용도 포함됩니다.

허용되는 유형이요. 드롭된 파일이 있고, 허용되는 유형 중 하나와 일치하면 파일을 처리할 수 있다는 뜻이요.

이렇게 검토는 끝이 났네요.

자, 그럼 이제 변경 사항을 반영하기 위해 'git add .', 'git commit', 그리고 코드 토끼가 제안한 수정 사항들을 반영한 뒤 'git push'를 실행해 보겠습니다.

솔직히 말씀드리면, 이번 PR은 규모가 아주 작았고 CodeRabbit에서 이렇게 많은 중요한 문제들, 경미한 문제들, 그리고 큰 문제들이 있을 거라고 예상하지 못했습니다. 하지만 AI가 잊고 있었던 몇 가지 좋은 수정 사항들을 찾아냈습니다.

이것은 제 생각에 좋은 결과라고 할 수 있겠습니다. 변경 사항을 적용했으니, 이제 이 풀 리퀘스트를 병합해 나아가도록 하겠습니다.

그리고 나서 코드로 다시 돌아가서, `git checkout main` 명령어를 통해 main 브랜치로 전환한 다음, `git pull` 명령어로 변경 사항을 가져올 수 있습니다.

최근 변경 사항들을 확인한 후, `git checkout -b hosting-images` 명령어를 통해 새로운 브랜치를 생성할 수 있습니다. 그 다음으로 우리가 집중해야 할 부분은 이미지들을 실제로 표시하는 것이 될 것 같습니다.

시각화 도구를 만들고, 그 파일을 적절한 위치에 호스팅하도록 하겠습니다. 다음 단계로 진행해 볼까요?