[fix] 필터링 오류 수정 (#196)

* design : 환경 설정 모달창 디자인 수정 * fix : 필터 토글이 적용되지 않는 오류 수정
boostcampwm2023 · Dec 8, 2023 · a04fd6c · a04fd6c
1 parent 33d6488
commit a04fd6c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/client/src/components/Modal/SettingModal/SettingModal.styles.tsx b/client/src/components/Modal/SettingModal/SettingModal.styles.tsx
@@ -51,22 +51,22 @@ 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;
 `
 
 export const BodyText = styled.div`
   ${TYPO.MEDIUM_M}
   display: flex;
   line-height: 2.25rem;
+  margin-top: 0.625rem;
 `
 
 export const InputContainer = styled.div`
   display: flex;
   justify-content: space-between;
   width: 100%;
   height: 2.25rem;
-  margin-bottom: 0.625rem;
 `
 
 export const Input = styled.input<ThemeInterface>`
@@ -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
@@ -20,16 +20,15 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => {
   const [streamKey, setStreamKey] = useState<string>('')
   const [streamLink, setStreamLink] = useState<string>('')
   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) => {
                 <styles.ToggleContainer isToggle={isDarkMode} onClick={onThemeToggle}>
                   <styles.ToggleKnob isToggle={isDarkMode} />
                 </styles.ToggleContainer>
-                <styles.BodyText>자동 채팅 필터링</styles.BodyText>
-                <styles.ToggleContainer isToggle={isFilter} onClick={onFilterToggle}>
-                  <styles.ToggleKnob isToggle={isFilter} />
-                </styles.ToggleContainer>
               </styles.SettingContainer>
+              {user.id !== '' && (
+                <styles.SettingContainer>
+                  <styles.BodyText>자동 채팅 필터링</styles.BodyText>
+                  <styles.ToggleContainer isToggle={filter} onClick={onFilterToggle}>
+                    <styles.ToggleKnob isToggle={filter} />
+                  </styles.ToggleContainer>
+                </styles.SettingContainer>
+              )}
             </styles.BlockContainer>
           </styles.BodyContainer>
           <styles.ButtonContainer currentTheme={currentTheme}>