diff --git a/client/src/components/Modal/SettingModal/SettingModal.styles.tsx b/client/src/components/Modal/SettingModal/SettingModal.styles.tsx index 8bf7b58..25e85c6 100644 --- a/client/src/components/Modal/SettingModal/SettingModal.styles.tsx +++ b/client/src/components/Modal/SettingModal/SettingModal.styles.tsx @@ -51,7 +51,7 @@ export const BlockContainer = styled.div` export const HeaderText = styled.div` ${TYPO.BOLD_M} - margin-bottom: 0.9375rem; + margin-top: 0.625rem; line-height: 2.25rem; ` @@ -59,6 +59,7 @@ export const BodyText = styled.div` ${TYPO.MEDIUM_M} display: flex; line-height: 2.25rem; + margin-top: 0.625rem; ` export const InputContainer = styled.div` @@ -66,7 +67,6 @@ export const InputContainer = styled.div` justify-content: space-between; width: 100%; height: 2.25rem; - margin-bottom: 0.625rem; ` export const Input = styled.input` @@ -105,6 +105,7 @@ export const SettingContainer = styled.div` justify-content: space-between; width: 100%; height: 2.25rem; + margin-top: 0.625rem; ` export const ToggleContainer = styled.div<{ isToggle: boolean }>` diff --git a/client/src/components/Modal/SettingModal/SettingModal.tsx b/client/src/components/Modal/SettingModal/SettingModal.tsx index f3dc566..458ce51 100644 --- a/client/src/components/Modal/SettingModal/SettingModal.tsx +++ b/client/src/components/Modal/SettingModal/SettingModal.tsx @@ -20,16 +20,15 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => { const [streamKey, setStreamKey] = useState('') const [streamLink, setStreamLink] = useState('') const isDarkMode = currentTheme === ThemeFlag.dark - const isFilter = filter === true const onThemeToggle = () => { - setTheme(isDarkMode ? ThemeFlag.light : ThemeFlag.dark) localStorage.setItem('theme', `${currentTheme}`) + setTheme(isDarkMode ? ThemeFlag.light : ThemeFlag.dark) } const onFilterToggle = () => { - setFilter(isFilter ? false : true) - localStorage.setItem('filter', `${filter}`) + localStorage.setItem('filter', `${!filter}`) + setFilter(!filter) } const onIdInputButton = () => { @@ -67,9 +66,9 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => { const userId = res.userId const userNickname = res.nickname + localStorage.setItem('user', JSON.stringify({ id: userId, nickname: userNickname })) setUser({ id: userId, nickname: userNickname }) setChangeUser(true) - localStorage.setItem('user', JSON.stringify({ id: userId, nickname: userNickname })) alert('ID가 저장되었습니다.') }) .catch((err) => { @@ -117,9 +116,9 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => { const userId = res.userId const userNickname = res.nickname + localStorage.setItem('user', JSON.stringify({ id: userId, nickname: userNickname })) setUser({ id: userId, nickname: userNickname }) setChangeUser(true) - localStorage.setItem('user', JSON.stringify({ id: userId, nickname: userNickname })) alert('닉네임이 저장되었습니다.') }) .catch((err) => { @@ -240,11 +239,15 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => { - 자동 채팅 필터링 - - - + {user.id !== '' && ( + + 자동 채팅 필터링 + + + + + )}