Skip to content

feat : 로딩 컴포넌트 UI 구현 #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kangdy25 merged 3 commits into from
Feb 14, 2026
+16 −0
Merged

feat : 로딩 컴포넌트 UI 구현 #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3c407de
feat : 로딩 페이지 UI 구현
kim3360 Feb 12, 2026
73100af
remove : 테스트 로딩 페이지 제거
kim3360 Feb 12, 2026
7cbe2a9
rename : 파일명 변경
kim3360 Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions components/loading/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
'use client';

import Image from 'next/image';

export default function Loading() {
return (
<div className="lg:h-[533px] md:h-[493px] h-[413px] lg:mt-25 md:mt-20 mt-15 flex flex-col items-center justify-center gap-[37px]" >
<div className="flex flex-col items-center justify-center">
<span className="text-[24px] leading-[1.364] font-semibold tracking-[-2.3%] text-center text-gray-10 ">밍글링이 중간 위치를 <br/> 열심히 찾아보고 있어요!</span>
Copy link

@coderabbitai coderabbitai bot Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

tracking-[-2.3%]는 유효하지 않은 CSS 값입니다

CSS letter-spacing 속성은 퍼센트(%) 값을 지원하지 않습니다. Tailwind의 tracking-[-2.3%]는 letter-spacing: -2.3%로 변환되며, 브라우저에서 무시됩니다. em 단위로 변환하여 사용하세요.

🛠️ 수정 제안 
-<span className="text-[24px] leading-[1.364] font-semibold tracking-[-2.3%] text-center text-gray-10 ">
+<span className="text-[24px] leading-[1.364] font-semibold tracking-[-0.023em] text-center text-gray-10">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<span className="text-[24px] leading-[1.364] font-semibold tracking-[-2.3%] text-center text-gray-10 ">밍글링이 중간 위치를 <br/> 열심히 찾아보고 있어요!</span>
<span className="text-[24px] leading-[1.364] font-semibold tracking-[-0.023em] text-center text-gray-10">밍글링이 중간 위치를 <br/> 열심히 찾아보고 있어요!</span>
🤖 Prompt for AI Agents 
In `@components/loding/loding.tsx` at line 9, The span in the loding component
uses an invalid Tailwind class tracking-[-2.3%]; replace it with a valid
letter-spacing value in em units (percent is not supported). Update the
className on the span (the element containing "밍글링이 중간 위치를...") to use
tracking-[-0.023em] (or another appropriate em value) instead of
tracking-[-2.3%] so Tailwind emits valid CSS.

</div>
<div className="flex flex-col items-center justify-center">
<Image src="/images/loding.jpg" alt="logo" width={360} height={232} />
Copy link

@coderabbitai coderabbitai bot Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

alt 텍스트가 부정확합니다

로딩 이미지인데 alt="logo"로 되어 있습니다. 스크린 리더 사용자를 위해 이미지 내용을 정확히 설명하는 대체 텍스트로 변경해 주세요 (예: alt="로딩 중 이미지" 또는 순수 장식 이미지라면 alt="").

♻️ 수정 제안 
-<Image src="/images/loding.jpg" alt="logo" width={360} height={232} />
+<Image src="/images/loading.jpg" alt="중간 위치를 찾고 있는 밍글링 이미지" width={360} height={232} />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Image src="/images/loding.jpg" alt="logo" width={360} height={232} />
<Image src="/images/loading.jpg" alt="중간 위치를 찾고 있는 밍글링 이미지" width={360} height={232} />
🤖 Prompt for AI Agents 
In `@components/loding/loding.tsx` at line 12, 현재 Image 컴포넌트의 alt 속성값이 "logo"로
부정확합니다; components/loding/loding.tsx 파일의 Image 태그(Image src="/images/loding.jpg"
...)에서 alt 값을 실제 용도에 맞게 변경하세요 — 사용자를 위한 대체 텍스트가 필요하면 alt="로딩 중 이미지" 또는 의도적으로
장식용이면 빈 문자열 alt=""로 바꾸고 커밋 메시에 변경 의도를 명시하세요.

</div>
</div>
);
}
Comment on lines +1 to +16
Copy link

@coderabbitai coderabbitai bot Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

오타: "loding" → "loading" — 디렉토리명, 파일명, 이미지 경로 모두 수정 필요

디렉토리(components/loding/), 파일명(loding.tsx), 이미지 경로(/images/loding.jpg) 모두 "loding"으로 되어 있으며 이는 "loading"의 오타입니다. 함수명 Loading은 올바르게 작성되어 있으나, 파일/디렉토리/에셋 이름이 일관되지 않습니다. 나중에 리팩토링 비용이 커지기 전에 지금 수정하는 것을 권장합니다.

🤖 Prompt for AI Agents 
In `@components/loding/loding.tsx` around lines 1 - 16, The component, file,
directory and asset use the typo "loding" while the component function Loading
is correct; rename the directory components/loding to components/loading and the
file loding.tsx to loading.tsx, rename the image /images/loding.jpg to
/images/loading.jpg, then update all import/usage references (e.g., any imports
of the component and the Image src string) to the new names so the Loading
component and Image path stay consistent across the codebase; also check and
adjust any exports, route references, tests, or build configs that reference
"loding".

Binary file added public/images/loding.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading