From 700a493e4af34a9c8188fe3e377f8535e32b44d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=97=B0=EC=A7=84?= Date: Sun, 26 Oct 2025 19:33:05 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B3=A0=20svg=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20switcher=20=EA=B8=80=EB=9E=98?= =?UTF-8?q?=EC=8A=A4=EB=AA=A8=ED=94=BC=EC=A6=98=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/X.svg | 4 +-- src/assets/logo.svg | 18 ++++++------ src/core/constants/modes.ts | 7 ++--- src/icons/Logo.tsx | 20 ++++++------- src/icons/X.tsx | 4 +-- src/react/ThemeSwitcher.tsx | 56 ++++++++++++++++++++++++++----------- src/styles.css | 2 +- 7 files changed, 65 insertions(+), 46 deletions(-) diff --git a/src/assets/X.svg b/src/assets/X.svg index 66fc819..f3aa827 100644 --- a/src/assets/X.svg +++ b/src/assets/X.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/logo.svg b/src/assets/logo.svg index 1cbdf24..65dd5c8 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1,10 +1,10 @@ - - - - - - - - - + + + + + + + + + diff --git a/src/core/constants/modes.ts b/src/core/constants/modes.ts index 3a649b7..8227929 100644 --- a/src/core/constants/modes.ts +++ b/src/core/constants/modes.ts @@ -4,15 +4,12 @@ import { TThemeKey, VisionMode } from '../types.js'; export type SimulationMode = Exclude; export const SIMULATION_MODES: SimulationMode[] = [ - 'deuteranopia', 'protanopia', + 'deuteranopia', 'tritanopia', ]; -export const THEME_MODES: TThemeKey[] = [ - 'default', - ...SIMULATION_MODES, -]; +export const THEME_MODES: TThemeKey[] = ['default', ...SIMULATION_MODES]; export const VISION_MODES: VisionMode[] = ['none', ...SIMULATION_MODES]; diff --git a/src/icons/Logo.tsx b/src/icons/Logo.tsx index 8702e2d..d325c19 100644 --- a/src/icons/Logo.tsx +++ b/src/icons/Logo.tsx @@ -4,37 +4,37 @@ const SvgLogo = (props: SVGProps) => ( - + ); diff --git a/src/icons/X.tsx b/src/icons/X.tsx index 016967a..36dc54f 100644 --- a/src/icons/X.tsx +++ b/src/icons/X.tsx @@ -8,13 +8,13 @@ const SvgX = (props: SVGProps) => ( {...props} >
{/* 토글 버튼 */} + @@ -88,7 +113,7 @@ export function ThemeSwitcher({ options, position }: TThemeSwitcherProps) { role="menu" aria-label="Select theme" className={` - fixed flex-col bg-[#ffffff] rounded-[18px] w-[220px] gap-[11px] filter drop-shadow-[0_0_1.3px_rgba(0,0,0,0.25)] + fixed flex-col bg-[#252525] px-[10px] py-[14px] border-[1px] border-[#8144FF] rounded-[18px] w-[220px] gap-[11px] filter drop-shadow-[0_0_1.3px_rgba(0,0,0,0.25)] ${switcherMenuClass} `} > @@ -113,9 +138,9 @@ export function ThemeSwitcher({ options, position }: TThemeSwitcherProps) { setHovered(null) } className={[ - 'hover:cursor-pointer group text-[18px] text-[#3D4852] py-1 w-full h-[50px] text-center gap-[8px] flex items-center justify-center rounded-[18px] hover:bg-[#3D4852]', + 'hover:cursor-pointer group text-[18px] px-[15px] text-[#909090] py-1 w-full h-[50px] text-start gap-[8px] flex items-center rounded-[9px] hover:bg-[#884DFF]', theme === opt.key - ? 'bg-[#3D4852] text-[#ffffff]' + ? 'bg-[#884DFF] text-[#ffffff]' : '', ].join(' ')} > @@ -126,39 +151,36 @@ export function ThemeSwitcher({ options, position }: TThemeSwitcherProps) { theme === opt.key || hovered === opt.key ? 'text-white' - : 'text-[#3D4852]' + : 'text-[#909090]' }`} /> {opt.label} - {opt.key !== 'tritanopia' && ( -
- )}
); })} -
+
-
+
{language === 'English' ? (
updateLanguage('Korean')} > - + English
) : (
updateLanguage('English')} > - - Korean + + 한국어
)}
diff --git a/src/styles.css b/src/styles.css index b80468a..6ba3306 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1 @@ -@source "./src/**/*.{js,ts,jsx,tsx}"; +@source "./src/**/*.{js,ts,jsx,tsx}"; \ No newline at end of file From 305014094b4d36874bad2937ca86fb0aceae71b8 Mon Sep 17 00:00:00 2001 From: hyeseong Date: Sun, 26 Oct 2025 22:03:55 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=92=84=20ui:=20SimulationFilter=20ui?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/constants/modes.ts | 7 ++++++- src/core/constants/position.ts | 4 ++-- src/react/SimulationFilter.tsx | 17 +++++++++++++---- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/core/constants/modes.ts b/src/core/constants/modes.ts index 3a649b7..a7d6a5a 100644 --- a/src/core/constants/modes.ts +++ b/src/core/constants/modes.ts @@ -4,8 +4,8 @@ import { TThemeKey, VisionMode } from '../types.js'; export type SimulationMode = Exclude; export const SIMULATION_MODES: SimulationMode[] = [ - 'deuteranopia', 'protanopia', + 'deuteranopia', 'tritanopia', ]; @@ -46,6 +46,11 @@ export const THEME_LABEL: Record> = { }, }; +export const SIMULATE_LABEL: Record = { + English: 'Simulate', + Korean: '시뮬레이션', +}; + export function isVisionMode(value: string | null): value is VisionMode { return (value ?? '') !== '' && VISION_MODES.includes(value as VisionMode); } diff --git a/src/core/constants/position.ts b/src/core/constants/position.ts index cbec751..766fca1 100644 --- a/src/core/constants/position.ts +++ b/src/core/constants/position.ts @@ -28,6 +28,6 @@ export const SWITCHER_MENU_POSITION: Record = { export const TOOLBAR_POSITION: Record = { 'left-bottom': 'left-[16px] bottom-[16px]', 'right-bottom': 'right-[16px] bottom-[16px]', - 'left-top': 'left-[16px] top-[16px]', - 'right-top': 'right-[16px] top-[16px]', + 'left-top': 'left-[16px] top-[100px]', + 'right-top': 'right-[16px] top-[100px]', }; diff --git a/src/react/SimulationFilter.tsx b/src/react/SimulationFilter.tsx index 00baf8d..26cffa6 100644 --- a/src/react/SimulationFilter.tsx +++ b/src/react/SimulationFilter.tsx @@ -6,6 +6,7 @@ import { } from '../core/constants/simulation.js'; import { MODE_LABELS, + SIMULATE_LABEL, SIMULATION_MODES, isVisionMode, } from '../core/constants/modes.js'; @@ -167,21 +168,29 @@ export default function SimulationFilter(props?: SimulationFilterProps) {
+ + + + setOpen(!open)} > - Vision + {SIMULATE_LABEL[language]} + {open && ( +
+ )} + {open && MODES.map((value) => (