Skip to content

fix: 프로필 수정 필드 테두리 제거 #608

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
manNomi merged 1 commit into from
Jul 18, 2026
+3 −3
Merged

fix: 프로필 수정 필드 테두리 제거 #608

Show file tree
Hide file tree
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
4 changes: 2 additions & 2 deletions apps/web/src/app/my/modify/_ui/ModifyContent/_ui/InputFiled/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const InputField = ({ name, label, placeholder }: InputFieldProps) => {
value={(field.value as string) ?? ""} // undefined일 때 빈 문자열
placeholder={placeholder}
className={clsx(
"w-full rounded-lg border p-3 pr-12 text-primary placeholder:text-primary-200 focus:border-primary focus:outline-none",
error ? "border-red-500" : "border-gray-300",
"w-full rounded-lg bg-k-50 p-3 pr-12 text-primary placeholder:text-primary-200 focus:outline-none",

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Restore a visible focus state for the input

When the nickname field has no validation error, this removes the only focus affordance: the default border is gone and focus:outline-none suppresses the browser outline without adding a replacement focus-visible ring/border. Keyboard users on the profile edit screen will not be able to see that the text input is focused unless it is already in the error state.

Useful? React with 👍 / 👎.

error && "border border-red-500",
Comment on lines +30 to +31

@coderabbitai coderabbitai Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

sed -n '1,120p' apps/web/src/app/my/modify/_ui/ModifyContent/_ui/InputFiled/index.tsx

Repository: solid-connection/solid-connect-web

Length of output: 1500

1. 포커스 표시를 추가해주세요.
focus:outline-none으로 기본 포커스 표시를 없앴는데 대체 focus-visible:ring-* 또는 focus-visible:outline-*가 없어 키보드 사용자가 현재 입력 필드를 놓치기 쉽습니다. 기본 디자인은 유지하되 포커스 상태만 명확히 보여주세요.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/app/my/modify/_ui/ModifyContent/_ui/InputFiled/index.tsx` around
lines 30 - 31, Update the input field class list in ModifyContent’s InputFiled
component to add a keyboard-visible focus indicator using focus-visible:ring-*
or focus-visible:outline-*, while preserving the existing styling and
focus:outline-none behavior.

)}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/my/modify/_ui/ModifyContent/_ui/ReadOnlyField/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const ReadOnlyField = ({ label, value, placeholder }: ReadOnlyFieldProps) => {
return (
<div className="space-y-2">
<label className="block text-k-700 typo-medium-2">{label}</label>
<div className="w-full rounded-lg border border-gray-300 bg-k-50 p-3">
<div className="w-full rounded-lg bg-k-50 p-3">
{/* 읽기 전용 값은 primary-200, 값 없으면 k-400 */}
<span className={clsx("typo-regular-2", value ? "text-primary-200" : "text-k-400")}>
{value || placeholder}
Expand Down
Loading