Skip to content

[feat] info loading 추가 #85

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
psm1st merged 1 commit into from
May 29, 2025
Merged

[feat] info loading 추가 #85

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 14 additions & 1 deletion src/components/productComponents/infoComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { sendOutlineInfoRequest } from "../../content/apiSetting/sendInfoRequest
import { BaseFillButton } from "../baseFillButton/component";
import { BaseButton } from "../baseButton/component";
import { useTheme } from "@src/contexts/ThemeContext";
import Loading from "../Loading/component";

type OutlineCategory = "MAIN" | "USAGE" | "WARNING" | "SPECS" | "CERTIFICATION";

Expand Down Expand Up @@ -89,7 +90,19 @@ export const InfoComponent: React.FC<InfoComponentProps> = ({
}`}
>
{loading ? (
"불러오는 중..."
<div
style={{
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "320px",
}}
>
<Loading />
<div>불러오는 중</div>
</div>
Comment on lines +93 to +105
Copy link

@coderabbitai coderabbitai bot May 29, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

로딩 UI 개선을 위한 몇 가지 최적화를 제안합니다.

로딩 상태 UI가 시각적으로 개선된 것은 좋은 변화입니다. 하지만 다음과 같은 개선사항을 고려해보세요:

  1. 인라인 스타일을 CSS 클래스로 대체: 기존 코드베이스와의 일관성을 위해
  2. 고정 높이 대신 반응형 디자인 고려: 다양한 화면 크기에 대응
  3. 성능 최적화: 인라인 스타일 객체가 매 렌더링마다 재생성됨

다음과 같이 개선할 수 있습니다:

-                                    <div
-                                        style={{
-                                            padding: "16px",
-                                            display: "flex",
-                                            flexDirection: "column",
-                                            justifyContent: "center",
-                                            alignItems: "center",
-                                            height: "320px",
-                                        }}
-                                    >
-                                        <Loading />
-                                        <div>불러오는 중</div>
-                                    </div>
+                                    <div className="p-4 flex flex-col justify-center items-center min-h-80">
+                                        <Loading />
+                                        <div className="mt-2" role="status" aria-live="polite">
+                                            불러오는 중
+                                        </div>
+                                    </div>

이 변경사항은:

  • Tailwind CSS 클래스를 사용하여 일관성 유지
  • min-h-80 대신 고정 높이로 반응형 개선
  • 접근성을 위한 role과 aria-live 속성 추가
  • mt-2로 Loading 컴포넌트와 텍스트 간 간격 추가
🤖 Prompt for AI Agents 
In src/components/productComponents/infoComponent.tsx around lines 93 to 105,
replace the inline style object on the div containing the Loading component with
Tailwind CSS classes to maintain consistency with the codebase. Use responsive
height classes instead of a fixed height to support various screen sizes. Add
accessibility attributes like role="status" and aria-live="polite" to the
container div for better screen reader support. Also, add margin-top spacing
(e.g., mt-2) between the Loading component and the text to improve layout and
visual clarity.

) : (
<ul className="pl-6 space-y-2 list-disc">
{info
Expand Down
Loading