Skip to content

fix: 다크모드 개선 및 기타 버그 수정 #138

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
merged 3 commits into from
Aug 24, 2025
Merged

fix: 다크모드 개선 및 기타 버그 수정 #138

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0eeba3c
fix: 다크모드 개선 및 기타 버그 수정
seungwoo505 Aug 13, 2025
afcbed6
Merge branch 'main' into QI1-221-프론트-최종본
seungwoo505 Aug 13, 2025
ad15395
fix: 문법 오류 수정
seungwoo505 Aug 13, 2025
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: 8 additions & 8 deletions app/(shared)/components/BlogCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const BlogCard = ({
{/* 카테고리 배지 (주석 유지) - API에 category가 없으므로 렌더링되지 않음 */}
{/* {showCategory && (post as any).category && (
<div className="absolute top-2 left-2">
<span className="bg-blue-500 text-white text-xs px-2 py-1 rounded-full">
<span className="bg-blue-500 text-primary-foreground text-xs px-2 py-1 rounded-full">
{(post as any).category}
</span>
</div>
Expand All @@ -80,31 +80,31 @@ export const BlogCard = ({
{/* 추천 배지 (주석 유지) - API에 featured가 없으므로 렌더링되지 않음 */}
{/* {(post as any).featured && (
<div className="absolute top-2 right-2">
<span className="bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">
<span className="bg-yellow-500 text-primary-foreground text-xs px-2 py-1 rounded-full">
추천
</span>
</div>
)} */}
</div>

{!isDetailed && (
<div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/70 dark:from-black/10 via-black/30 to-transparent p-5">
<h3 className="text-white text-regular-lg font-semibold mb-2 drop-shadow-md line-clamp-2">
<div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/70 via-black/30 to-transparent p-5">
<h3 className="text-primary-foreground text-regular-lg font-semibold mb-2 drop-shadow-md line-clamp-2">
{post.title}
</h3>
<p className="text-white text-regular-sm font-medium drop-shadow-md flex items-center gap-1">
<p className="text-primary-foreground text-regular-sm font-medium drop-shadow-md flex items-center gap-1">
{author}
</p>
</div>
)}

{/* 상세 정보 (상세 모드) */}
{isDetailed && (
<div className="p-4 dark:text-white">
<h3 className="font-semibold text-gray-900 mb-2 line-clamp-2 text-regular-lg">
<div className="p-4">
<h3 className="font-semibold text-card-foreground mb-2 line-clamp-2 text-regular-lg">
{post.title}
</h3>
<p className="text-gray-600 text-sm mb-3 line-clamp-2">{author}</p>
<p className="text-muted-foreground text-sm mb-3 line-clamp-2">{author}</p>
</div>
)}
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/(shared)/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ export const Button = ({ children, className, ...props }: ButtonProps) => {
return (
<button
className={`
bg-blue-500 text-white px-4 py-2 rounded-lg
hover:bg-blue-600 active:bg-blue-700
bg-primary text-primary-foreground px-4 py-2 rounded-lg
hover:bg-primary/90 active:bg-primary/80
transition-colors duration-200
disabled:opacity-50 disabled:cursor-not-allowed
${className || ''}
Expand Down
24 changes: 12 additions & 12 deletions app/(shared)/components/ChangeNicknameModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,7 @@ export default function ChangeNicknameModal({
role="dialog"
>
<form
className="bg-white rounded-2xl shadow-xl w-[370px] max-w-full pt-6 pb-8 px-6 relative flex flex-col items-center"
className="bg-card rounded-2xl shadow-xl w-[370px] max-w-full pt-6 pb-8 px-6 relative flex flex-col items-center"
onClick={(e) => e.stopPropagation()}
onSubmit={handleSubmit}
onKeyDown={handleKeyDown}
Expand All @@ -380,20 +380,20 @@ export default function ChangeNicknameModal({
<circle cx="12" cy="7" r="4" stroke="#2563EB" strokeWidth="2" />
</svg>
</div>
<div className="text-xl font-extrabold text-black text-center">
<div className="text-xl font-extrabold text-card-foreground text-center">
닉네임 변경
</div>
<button
onClick={handleClose}
type="button"
className="absolute right-4 top-4 text-2xl text-gray-400 hover:text-gray-600"
className="absolute right-4 top-4 text-2xl text-muted-foreground hover:text-muted-foreground"
aria-label="닫기"
tabIndex={0}
>
×
</button>
</div>
<div className="w-full text-center text-gray-600 mb-4 text-sm">
<div className="w-full text-center text-muted-foreground mb-4 text-sm">
현재 닉네임을 수정해주세요.
</div>

Expand All @@ -411,7 +411,7 @@ export default function ChangeNicknameModal({
type="text"
id="nickname"
name="nickname"
className={`w-full border rounded-lg px-3 py-2 text-base focus:outline-none focus:ring-2 disabled:bg-gray-100 disabled:text-gray-500 pr-10 ${
className={`w-full border rounded-lg px-3 py-2 text-base focus:outline-none focus:ring-2 disabled:bg-secondary disabled:text-muted-foreground pr-10 ${
nickname.trim() && !nicknameValidation.isValid
? 'border-red-300 focus:ring-red-200'
: nickname.trim() &&
Expand All @@ -420,7 +420,7 @@ export default function ChangeNicknameModal({
? 'border-green-300 focus:ring-green-200'
: duplicateCheckResult?.isDuplicate === true
? 'border-red-300 focus:ring-red-200'
: 'border-gray-200 focus:ring-blue-200'
: 'border-border focus:ring-blue-200'
}`}
value={nickname}
onChange={(e) => setNickname(e.target.value)}
Expand Down Expand Up @@ -473,7 +473,7 @@ export default function ChangeNicknameModal({
</div>
)}
</div>
<div className="text-xs text-gray-500 mt-1">
<div className="text-xs text-muted-foreground mt-1">
최대 10자까지 입력 가능합니다.
</div>
{/* 닉네임 유효성 검사 체크리스트 */}
Expand All @@ -490,7 +490,7 @@ export default function ChangeNicknameModal({
>
{nicknameValidation.criteria.hasLength && (
<svg
className="w-2 h-2 text-white"
className="w-2 h-2 text-primary-foreground"
fill="currentColor"
viewBox="0 0 20 20"
>
Expand Down Expand Up @@ -522,7 +522,7 @@ export default function ChangeNicknameModal({
>
{nicknameValidation.criteria.startsWithLetter && (
<svg
className="w-2 h-2 text-white"
className="w-2 h-2 text-primary-foreground"
fill="currentColor"
viewBox="0 0 20 20"
>
Expand Down Expand Up @@ -554,7 +554,7 @@ export default function ChangeNicknameModal({
>
{nicknameValidation.criteria.hasValidChars && (
<svg
className="w-2 h-2 text-white"
className="w-2 h-2 text-primary-foreground"
fill="currentColor"
viewBox="0 0 20 20"
>
Expand Down Expand Up @@ -607,7 +607,7 @@ export default function ChangeNicknameModal({
<button
type="submit"
disabled={isButtonDisabled}
className="w-2/3 py-3 rounded-lg bg-blue-200 text-black font-bold text-lg hover:bg-blue-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:text-gray-400 disabled:cursor-not-allowed"
className="w-2/3 py-3 rounded-lg bg-blue-200 text-card-foreground font-bold text-lg hover:bg-blue-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed"
tabIndex={0}
>
{isLoading
Expand All @@ -620,7 +620,7 @@ export default function ChangeNicknameModal({
</button>
<button
type="button"
className="w-1/3 py-3 rounded-lg bg-gray-100 text-gray-700 font-bold text-lg hover:bg-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
className="w-1/3 py-3 rounded-lg bg-secondary text-foreground font-bold text-lg hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
onClick={onClose}
tabIndex={0}
>
Expand Down
34 changes: 17 additions & 17 deletions app/(shared)/components/ChangePasswordModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ export default function ChangePasswordModal({
onKeyDown={handleKeyDown}
>
<form
className="bg-white rounded-2xl shadow-xl w-[370px] max-w-full pt-6 pb-8 px-6 relative flex flex-col items-center"
className="bg-card rounded-2xl shadow-xl w-[370px] max-w-full pt-6 pb-8 px-6 relative flex flex-col items-center"
onClick={(e) => e.stopPropagation()}
onSubmit={handleSubmit}
>
Expand Down Expand Up @@ -271,7 +271,7 @@ export default function ChangePasswordModal({
/>
</svg>
</div>
<div className="text-xl font-extrabold text-black text-center">
<div className="text-xl font-extrabold text-card-foreground text-center">
비밀번호 변경
</div>
<button
Expand All @@ -280,21 +280,21 @@ export default function ChangePasswordModal({
onClose();
}}
type="button"
className="absolute right-4 top-4 text-2xl text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
className="absolute right-4 top-4 text-2xl text-muted-foreground hover:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
aria-label="닫기"
tabIndex={0}
>
×
</button>
</div>
<div className="w-full text-center text-gray-600 mb-4 text-sm">
<div className="w-full text-center text-muted-foreground mb-4 text-sm">
변경하려면 비밀번호를 입력하세요.
</div>
<div className="w-full flex flex-col gap-3 mb-4">
<div>
<label
htmlFor="current-password"
className="block text-sm font-medium text-gray-700 mb-2"
className="block text-sm font-medium text-foreground mb-2"
>
현재 비밀번호
</label>
Expand All @@ -303,7 +303,7 @@ export default function ChangePasswordModal({
ref={currentPasswordRef}
id="current-password"
type={showCurrentPassword ? 'text' : 'password'}
className="w-full px-3 py-3 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed h-[48px]"
className="w-full px-3 py-3 pr-10 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-secondary disabled:cursor-not-allowed h-[48px]"
value={current}
onChange={(e) => setCurrent(e.target.value)}
onKeyDown={handleCurrentPasswordKeyDown}
Expand Down Expand Up @@ -339,7 +339,7 @@ export default function ChangePasswordModal({
<div>
<label
htmlFor="new-password"
className="block text-sm font-medium text-gray-700 mb-2"
className="block text-sm font-medium text-foreground mb-2"
>
새 비밀번호
</label>
Expand All @@ -348,12 +348,12 @@ export default function ChangePasswordModal({
ref={newPasswordRef}
id="new-password"
type={showNewPassword ? 'text' : 'password'}
className={`w-full px-3 py-3 pr-10 border rounded-md focus:outline-none focus:ring-2 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed h-[48px] ${
className={`w-full px-3 py-3 pr-10 border rounded-md focus:outline-none focus:ring-2 focus:border-transparent disabled:bg-secondary disabled:cursor-not-allowed h-[48px] ${
next.trim() && !passwordValidation.isValid
? 'border-red-300 focus:ring-red-200'
: next.trim() && passwordValidation.isValid
? 'border-green-300 focus:ring-green-200'
: 'border-gray-300 focus:ring-blue-500'
: 'border-border focus:ring-blue-500'
}`}
value={next}
onChange={(e) => setNext(e.target.value)}
Expand Down Expand Up @@ -392,7 +392,7 @@ export default function ChangePasswordModal({
>
{next.length >= 6 && next.length <= 12 && (
<svg
className="w-2 h-2 text-white"
className="w-2 h-2 text-primary-foreground"
fill="currentColor"
viewBox="0 0 20 20"
>
Expand Down Expand Up @@ -422,7 +422,7 @@ export default function ChangePasswordModal({
>
{/[a-zA-Z]/.test(next) && (
<svg
className="w-2 h-2 text-white"
className="w-2 h-2 text-primary-foreground"
fill="currentColor"
viewBox="0 0 20 20"
>
Expand Down Expand Up @@ -450,7 +450,7 @@ export default function ChangePasswordModal({
>
{/\d/.test(next) && (
<svg
className="w-2 h-2 text-white"
className="w-2 h-2 text-primary-foreground"
fill="currentColor"
viewBox="0 0 20 20"
>
Expand Down Expand Up @@ -480,7 +480,7 @@ export default function ChangePasswordModal({
>
{/[!?@#$%^&*()~`+\-_]/.test(next) && (
<svg
className="w-2 h-2 text-white"
className="w-2 h-2 text-primary-foreground"
fill="currentColor"
viewBox="0 0 20 20"
>
Expand All @@ -507,7 +507,7 @@ export default function ChangePasswordModal({
<div>
<label
htmlFor="confirm-password"
className="block text-sm font-medium text-gray-700 mb-2"
className="block text-sm font-medium text-foreground mb-2"
>
새 비밀번호 한 번 더 입력
</label>
Expand All @@ -516,7 +516,7 @@ export default function ChangePasswordModal({
ref={confirmPasswordRef}
id="confirm-password"
type={showConfirmPassword ? 'text' : 'password'}
className="w-full px-3 py-3 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed h-[48px]"
className="w-full px-3 py-3 pr-10 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-secondary disabled:cursor-not-allowed h-[48px]"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
onKeyDown={handleConfirmPasswordKeyDown}
Expand Down Expand Up @@ -570,14 +570,14 @@ export default function ChangePasswordModal({
!passwordValidation.isValid ||
isLoading
}
className="w-2/3 py-3 rounded-lg bg-blue-200 text-black font-medium hover:bg-blue-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed"
className="w-2/3 py-3 rounded-lg bg-blue-200 text-card-foreground font-medium hover:bg-blue-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed"
tabIndex={0}
>
{isLoading ? '변경 중...' : '변경하기'}
</button>
<button
type="button"
className="w-1/3 py-3 rounded-lg bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
className="w-1/3 py-3 rounded-lg bg-secondary text-foreground font-medium hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
onClick={onClose}
disabled={isLoading}
tabIndex={0}
Expand Down
Loading