Skip to content
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.

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

[FE] FEAT: topNav 다크모드 토글 추가 #1649 #1690

Merged
merged 57 commits into from
Dec 19, 2024
Merged
Changes from 1 commit
Commits
Show all changes
57 commits
Select commit Hold shift + click to select a range
90924d2
[FE] FEAT: admin TopNavDomainGroup 우측 상단에 toggle 버튼 추가 #1649
gykoh42 Jun 30, 2024
10d7b0a
[FE] FEAT: ToggleContainer right 속성 조정 #1649
gykoh42 Jun 30, 2024
123f69d
[FE] FEAT: ToggleSwitch 클릭시 localStorage 값 update 하는 로직 추가 #1649
gykoh42 Jun 30, 2024
c6cc4ab
[FE] FEAT: ToggleSwitch 대신 DarkModeToggleSwitch 로 대체 #1649
gykoh42 Jul 2, 2024
5e5f59e
[FE] FEAT: DarkModeToggleSwitch 구현 #1649
gykoh42 Jul 2, 2024
dc5c993
[FE] REFACT: DisplayStyleCard.container.tsx 리팩토링#1649
jnkeniaem Jul 2, 2024
3cbb2c1
[FE] FEAT: ToggleKnob 크기 및 left 속성 조정 #1649
gykoh42 Jul 14, 2024
ff63c15
[FE] FEAT: 다크모드 토글을 위한 moonAdmin.svg 추가 #1649
gykoh42 Jul 14, 2024
5ce56b8
[FE] FEAT: 다크모드 토글을 위한 sunAdmin.svg 추가 #1649
gykoh42 Jul 14, 2024
bd01622
[FE] FEAT: 다크모드 토글에 아이콘 적용 #1649
gykoh42 Jul 14, 2024
3a4a27b
[FE] FEAT: 다크모드 토글에 아이콘 색상 변경 #1649
gykoh42 Jul 14, 2024
c11e56f
[FE] FIX: admin coin그래프 깨지는 버그 수정 #1649
Minkyu01 Jul 14, 2024
319bb33
[FE] FEAT: sunAdmin.svg 색상 변경 #1649
gykoh42 Jul 14, 2024
957002f
[FE] FIX: TopNavDomainGroup 에 올바르지 않은 로고 색상 적용되는 문제 해결 #1649
gykoh42 Jul 16, 2024
a63da51
[FE] FEAT: DisplayStyleCard.container 파일 dev 브랜치 파일로 복구 #1649
gykoh42 Jul 22, 2024
22593b5
[FE] FEAT: DarkModeToggleSwitch 의 초기값을 기기 설정값으로 적용하는 로직 추가 #1649
gykoh42 Jul 22, 2024
392abb3
[FE] FEAT: TopNavDomainGroup 에 수정한 DarkModeToggleSwitch 추가 #1649
gykoh42 Jul 22, 2024
35ef96c
[FE] FIX: 토글 버튼으로 화면 모드 설정한 상태에서 기기 설정으로 모드 변경시 토글 버튼을 두번 클릭해야 값이 변경되…
gykoh42 Jul 22, 2024
03219d3
[FE] FEAT: tmp push
gykoh42 Aug 1, 2024
c420d0e
[FE] Chore: tmp push
gykoh42 Sep 3, 2024
1ae685a
[FE] FEAT: displayStyleState 추가 #1649
gykoh42 Sep 9, 2024
05459aa
[FE] FEAT: recoil로 토글 스위치와 프로필 버튼 통합 #1649
gykoh42 Sep 9, 2024
e4e88ce
[FE] FEAT: DisplayStyleCard 및 DisplayStyleCard container 에 props 받아지도…
gykoh42 Sep 10, 2024
274efd7
[FE] FEAT: useRecoilState 적용 #1649
gykoh42 Sep 10, 2024
bba18dc
[FE] FEAT: useEffect 에 body 부분 바꾸는 로직 추가 #1649
gykoh42 Sep 10, 2024
0b7e061
[FE] FIX: DarkModeToggleSwitch 버그 해결 및 코드 리팩토링 #1649
gykoh42 Sep 24, 2024
6cd7b0a
[FE] FEAT: 컨벤션에 맞도록 컴포넌트명 수정 #1649
gykoh42 Sep 25, 2024
8a64ec8
[FE] FEAT: toggleType이 DEVICE 일때만 darkMode 상태가 업데이트 되도록 구현 #1649
gykoh42 Sep 25, 2024
60dfde7
[FE] FIX: 화면 새로고침 시 displayStyleType 의 초깃값으로 인해 다크 모드 토글 노브가 깜빡이는 문제 …
gykoh42 Sep 25, 2024
140aae1
[FE] FEAT: 불필요한 출력문 삭제 #1649
gykoh42 Sep 25, 2024
1c02d72
[FE] REMOVE: sunAdmin, moonAdmin 아이콘 삭제 #1649
gykoh42 Sep 25, 2024
c1c17b9
[FE] FEAT: 토글 스위치에 포함된 아이콘 파일명 변경 #1649
gykoh42 Sep 25, 2024
56ae503
[FE] FEAT: 일관성 유지를 위해 key 값 명칭 변경 #1649
gykoh42 Sep 25, 2024
93da392
[FE] displayStyleSate 의 타입을 string 에서 DisplayStyleToggleType 으로 변경 #1649
gykoh42 Sep 25, 2024
8c84ec4
[FE] FEAT: 불필요한 import 문 삭제 #1649
gykoh42 Sep 25, 2024
5b5f2c4
[FE] FEAT: IToggleItemSeparated 의 key 값 수정에 따른 코드 수정 #1649
gykoh42 Sep 25, 2024
8ac486d
[FE] FEAT: toggleType 의 타입 재정의에 따른 불필요한 코드 삭제 #1649
gykoh42 Sep 25, 2024
2680023
[FE] REFACTOR: useEffect 중복 로직 삭제 및 코드 간소화 #1649
gykoh42 Sep 25, 2024
fb6b9cb
[FE] FIX: AdminSlackNoti 페이지에 다크모드 적용시 텍스트 색상이 흰색으로 바뀌지 않는 버그 해결 #1649
gykoh42 Sep 26, 2024
c430816
[FE] REFACTOR: DarkModeToggleSwitch 코드 리팩토링 #1649
gykoh42 Sep 26, 2024
eb933b5
[FE] FEAT: DisplayStyleCard.container 에 불필요한 handleButtonClick props …
gykoh42 Sep 30, 2024
d9d38ad
[FE] FEAT: DisplayStyleCard.container 에 불필요한 handleButtonClick props …
gykoh42 Sep 30, 2024
1fae244
[FE] FEAT: 불필요한 의존성 삭제 및 함수명 변경 #1649
gykoh42 Oct 22, 2024
547fe37
[FE] FEAT: getSavedToggleType 대신 savedDisplayStyleToggle 을 export 해서 …
gykoh42 Oct 22, 2024
abbdaff
[FE] FIX: device 모드일 때 토글을 두번 클릭해야 모드가 바뀌는 버그 해결 #1649
gykoh42 Oct 22, 2024
b1415b8
[FE] FEAT: currentSectionNameState 추가 #1649
gykoh42 Oct 25, 2024
601939e
Merge branch 'dev' into fe/dev/feat_admin_dark/#1649
gykoh42 Oct 25, 2024
dfa5d9b
[FE] Chore: 임시 커밋 #1649
gykoh42 Nov 30, 2024
c21ce67
[FE] FIX: 토글 변경 후 까비와 수지회를 이동할 시 토글 적용 안되는 버그 해결 #1649
gykoh42 Dec 17, 2024
9c57158
Merge branch 'dev' of github.com:innovationacademy-kr/Cabi into fe/de…
gykoh42 Dec 17, 2024
35de4ca
[FE] FIX: 초기 깜빡임 문제 해결을 위한 getDisplayStyleFromLocalStorage 함수 도입 #1649
gykoh42 Dec 19, 2024
4301c42
[FE] FIX: updateBodyDisplayStyle 생성 & 적용 #1649
jnkeniaem Dec 19, 2024
15bba7a
[FE] FIX: updateLocalStorageDisplayStyleToggle 생성 & 적용 #1649
jnkeniaem Dec 19, 2024
fb0c171
[FE] FIX: isDeviceDarkMode 생성 & 적용 #1649
jnkeniaem Dec 19, 2024
6d0b837
[FE] FEAT: 가독성을 위해 displayStyleToggle 을 toggleType 으로 변경 #1649
gykoh42 Dec 19, 2024
ad9486c
[FE] REFACTOR: 반복되는 로직 utils 파일과 custom hook 으로 분리 #1649
gykoh42 Dec 19, 2024
9038ebd
[FE] REFACTOR: 반복되는 로직 custom hook 에 추가 #1649
gykoh42 Dec 19, 2024
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
Prev Previous commit
Next Next commit
[FE] FEAT: TopNavDomainGroup 에 수정한 DarkModeToggleSwitch 추가 #1649
gykoh42 committed Jul 22, 2024
commit 392abb37e3f812cdfeaad96a73a8c2c4c67852cd
Original file line number Diff line number Diff line change
@@ -33,23 +33,6 @@ const domains: ITopNavDomain[] = [
const TopNavDomainGroup = ({ isAdmin = false }: { isAdmin?: boolean }) => {
const navigator = useNavigate();
const { pathname } = useLocation();
const [isDarkMode, setIsDarkMode] = useState(() => {
const mode = localStorage.getItem("display-style") || "LIGHT";
return mode === "DARK";
});

const handleToggleChange = (checked: boolean) => {
setIsDarkMode(checked);
const mode = checked ? "DARK" : "LIGHT";
localStorage.setItem("display-style", mode);
document.body.setAttribute("display-style", mode);
};

useEffect(() => {
const mode = localStorage.getItem("display-style") || "LIGHT";
document.body.setAttribute("display-style", mode);
}, []);

return (
<DomainGroupContainerStyled>
{domains.map((domain, index) => (
@@ -77,15 +60,9 @@ const TopNavDomainGroup = ({ isAdmin = false }: { isAdmin?: boolean }) => {
{index < domains.length - 1 && <DomainSeparatorStyled />}
</DomainWrapperStyled>
))}
{pathname.includes("/admin") && (
<ToggleContainerStyled>
<DarkModeToggleSwitch
id="dark-mode-toggle"
checked={isDarkMode}
onChange={handleToggleChange}
/>
</ToggleContainerStyled>
)}
<ToggleWrapperStyled>
<DarkModeToggleSwitch id="darkModeToggleSwitch" />
</ToggleWrapperStyled>
</DomainGroupContainerStyled>
);
};
@@ -154,10 +131,12 @@ const DomainSeparatorStyled = styled.div`
margin: 0 8px;
background-color: var(--service-man-title-border-btm-color);
`;
const ToggleContainerStyled = styled.div`

const ToggleWrapperStyled = styled.div`
position: absolute;
right: 20px;
right: 18px;
display: flex;
align-items: center;
`;

export default TopNavDomainGroup;