diff --git a/LOG.md b/LOG.md index 7231293..3dbe2e7 100644 --- a/LOG.md +++ b/LOG.md @@ -10,6 +10,7 @@ - Tuned the follow-up layout: main content now centers inside the area remaining after the desktop sidebar, sidebar GitHub/email shortcuts were removed, top-bar GitHub/email links now sit as plain left-side menu items, and the home labels were simplified to 홈/WYPark. - Softened the home dashboard inner popular/latest sections so they no longer render as nested macOS windows with traffic-light controls; they now read as embedded dashboard panels inside the WYPark window. - Rebuilt the admin post writing screen as a glassy Markdown Studio with a larger writing area, publish controls, category/tag/image/draft panels, and fixed MDEditor foreground colors so typed text remains readable in both light and dark themes. +- Hardened the Markdown editor text visibility fix by binding the editor color mode to the app's resolved theme and forcing the real textarea layer to use `--color-text` while hiding the syntax overlay text layer that could inherit the wrong contrast. - Validation: `npm run lint` passed, `npm run build` passed. The build logged a sitemap fetch warning because the backend API at the local default was not reachable, but the command completed successfully. - Browser verification: previously started this app on `http://localhost:3100` because ports 3000 and 3001 were already occupied; confirmed desktop background gradients, menu bar, Dock, and window surfaces on `/`, `/archive`, and `/login`. For this follow-up, the dev/standalone server started successfully in foreground but exited when launched as a background non-interactive process, so browser verification was skipped after lint/build passed. - Recommended next task: review the remaining older Korean strings in admin/editor flows and normalize any mojibake that predates this redesign. diff --git a/src/app/globals.css b/src/app/globals.css index 90b358f..81d9af4 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -432,9 +432,27 @@ html[data-theme="dark"] .w-md-editor-toolbar { color: var(--color-text) !important; } +.wy-editor-shell .w-md-editor-text { + color: var(--color-text) !important; +} + +.wy-editor-shell .w-md-editor-text-pre, +.wy-editor-shell .w-md-editor-text-pre *, +.wy-editor-shell .w-md-editor-text-pre > code, +.wy-editor-shell .w-md-editor-text-pre code, +.wy-editor-shell .w-md-editor-text-pre .token, +.wy-editor-shell .w-md-editor-text-pre .punctuation { + color: transparent !important; + -webkit-text-fill-color: transparent !important; +} + .wy-editor-shell .w-md-editor-text-input { + opacity: 1 !important; + background: transparent !important; + color: var(--color-text) !important; -webkit-text-fill-color: var(--color-text) !important; caret-color: var(--color-accent); + text-shadow: none !important; } .wy-editor-shell .w-md-editor-text-input::placeholder { @@ -442,8 +460,6 @@ html[data-theme="dark"] .w-md-editor-toolbar { -webkit-text-fill-color: var(--color-text-subtle) !important; } -.wy-editor-shell .w-md-editor-text-pre > code, -.wy-editor-shell .w-md-editor-text-pre code, .wy-editor-shell .wmde-markdown, .wy-editor-shell .wmde-markdown p, .wy-editor-shell .wmde-markdown li, diff --git a/src/components/admin/AdminPostEditor.tsx b/src/components/admin/AdminPostEditor.tsx index 4af67f8..e31c6e8 100644 --- a/src/components/admin/AdminPostEditor.tsx +++ b/src/components/admin/AdminPostEditor.tsx @@ -22,6 +22,7 @@ import { import { getCategories } from '@/api/category'; import { uploadImage } from '@/api/image'; import { createPost, getPost, updatePost } from '@/api/posts'; +import { useTheme } from '@/components/theme/ThemeProvider'; import Surface from '@/components/ui/Surface'; import WindowSurface from '@/components/ui/WindowSurface'; import { useAuthStore } from '@/store/authStore'; @@ -187,6 +188,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) { const router = useRouter(); const pathname = usePathname(); const queryClient = useQueryClient(); + const { resolvedTheme } = useTheme(); const { isLoggedIn, role, _hasHydrated, accessToken, refreshToken, login } = useAuthStore(); const isAdmin = _hasHydrated && role?.includes('ADMIN'); const isEditMode = Boolean(editSlug); @@ -528,12 +530,21 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) { className="mb-5 w-full rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] px-4 py-3 text-2xl font-bold tracking-normal text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] md:text-3xl" /> -