Skip to content

Commit

Permalink
themeColor container 분리
Browse files Browse the repository at this point in the history
  • Loading branch information
@seong-hui
seong-hui committed Oct 20, 2023
1 parent dab312b commit 4b33846
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 215 deletions.
218 changes: 71 additions & 147 deletions frontend/src/components/Profile/ThemeColor.container.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,147 +1,71 @@
// import React from "react";
// import { useEffect, useState } from "react";
// import { TwitterPicker } from "react-color";
// import styled from "styled-components";
// import ThemeColor from "./ThemeColor";

// const ThemeColorContainer: React.FC<{
// showColorPicker: boolean;
// setShowColorPicker: React.Dispatch<React.SetStateAction<boolean>>;
// }> = ({ showColorPicker, setShowColorPicker }) => {
// const savedColor = localStorage.getItem("mainColor");
// const [mainColor, setMainColor] = useState<string>(
// savedColor ? savedColor : "#9747ff"
// );

// const root: HTMLElement = document.documentElement;

// const handleChange = (mainColor: { hex: string }) => {
// const selectedColor: string = mainColor.hex;
// setMainColor(selectedColor);
// };

// const handleReset = () => {
// const defaultColor = "#9747ff";
// setMainColor(defaultColor);
// root.style.setProperty("--main-color", defaultColor);
// root.style.setProperty("--lightpurple-color", "#b18cff");
// localStorage.setItem("mainColor", defaultColor);
// };

// const handleSave = () => {
// localStorage.setItem("mainColor", mainColor);
// root.style.setProperty("--main-color", mainColor);
// toggleColorPicker(true);
// };

// const handleCancel = () => {
// const savedColor = localStorage.getItem("mainColor");
// root.style.setProperty("--main-color", savedColor);
// toggleColorPicker(true);
// };

// const toggleColorPicker = (isChange: boolean) => {
// if (isChange) setShowColorPicker(!showColorPicker);
// };

// const confirmBeforeUnload = (e: BeforeUnloadEvent) => {
// if (mainColor !== localStorage.getItem("mainColor")) {
// e.returnValue =
// "변경된 색상이 저장되지 않을 수 있습니다. 계속하시겠습니까?";
// }
// };

// useEffect(() => {
// root.style.setProperty("--main-color", mainColor);
// window.addEventListener("beforeunload", confirmBeforeUnload);
// return () => {
// window.removeEventListener("beforeunload", confirmBeforeUnload);
// };
// }, [mainColor]);

// return (
// <ThemeColor
// handleSave={handleSave}
// handleCancel={handleCancel}
// handleReset={handleReset}
// handleChange={handleChange}
// toggleColorPicker={toggleColorPicker}
// />
// );
// };

// const ThemeColorStyled = styled.div`
// width: 350px;
// height: 215px;
// background-color: var(--lightgary-color);
// border-radius: 10px;
// padding: 30px;
// `;

// const TableTitleStyled = styled.div`
// font-size: 18px;
// font-weight: bold;
// `;

// const TableTopStyled = styled.div`
// display: flex;
// align-items: center;
// justify-content: space-between;
// margin-bottom: 20px;
// `;

// const BtnWrapStyled = styled.div`
// display: flex;
// `;

// const ResetBtnStyled = styled.div`
// width: 54px;
// height: 23px;
// background-color: white;
// border-radius: 4px;
// color: var(--gray-color);
// font-size: 12px;
// display: flex;
// align-items: center;
// justify-content: center;
// `;

// const SaveBtnStyled = styled.div`
// width: 54px;
// height: 23px;
// background-color: var(--main-color);
// border-radius: 4px;
// color: white;
// font-size: 12px;
// display: flex;
// align-items: center;
// justify-content: center;
// margin-right: 15px;
// `;

// const MainColorButtonStyled = styled.button`
// width: 28px;
// height: 28px;
// background-color: var(--main-color);
// border-radius: 8px;
// `;

// const ColorSelectStyled = styled.div`
// padding: 20px;
// width: 100%;
// display: flex;
// align-items: center;
// justify-content: space-between;
// `;

// const TableBodyStyled = styled.div`
// background-color: white;
// width: 290px;
// height: 120px;
// border-radius: 8px;
// display: flex;
// flex-direction: column;
// align-items: center;
// `;

// export default ThemeColorContainer;
import { useEffect, useState } from "react";
import ThemeColor from "./ThemeColor";

const ThemeColorContainer: React.FC<{
showColorPicker: boolean;
setShowColorPicker: React.Dispatch<React.SetStateAction<boolean>>;
}> = ({ showColorPicker, setShowColorPicker }) => {
const savedColor = localStorage.getItem("mainColor");
const defaultColor = "#9747ff";
const [mainColor, setMainColor] = useState<string>(
savedColor ? savedColor : defaultColor
);
const root: HTMLElement = document.documentElement;

const handleChange = (mainColor: { hex: string }) => {
const selectedColor: string = mainColor.hex;
setMainColor(selectedColor);
};

const handleReset = () => {
setMainColor(defaultColor);
root.style.setProperty("--main-color", defaultColor);
root.style.setProperty("--lightpurple-color", "#b18cff");
localStorage.setItem("mainColor", defaultColor);
};

const handleSave = () => {
localStorage.setItem("mainColor", mainColor);
root.style.setProperty("--main-color", mainColor);
toggleColorPicker(true);
};

const handleCancel = () => {
const savedColor = localStorage.getItem("mainColor");
root.style.setProperty("--main-color", savedColor);
toggleColorPicker(true);
};

const toggleColorPicker = (isChange: boolean) => {
if (isChange) setShowColorPicker(!showColorPicker);
};

const confirmBeforeUnload = (e: BeforeUnloadEvent) => {
if (mainColor !== localStorage.getItem("mainColor")) {
e.returnValue =
"변경된 색상이 저장되지 않을 수 있습니다. 계속하시겠습니까?";
}
};

useEffect(() => {
root.style.setProperty("--main-color", mainColor);
window.addEventListener("beforeunload", confirmBeforeUnload);
return () => {
window.removeEventListener("beforeunload", confirmBeforeUnload);
};
}, [mainColor]);

return (
<ThemeColor
showColorPicker={showColorPicker}
setShowColorPicker={setShowColorPicker}
handleChange={handleChange}
handleReset={handleReset}
handleSave={handleSave}
handleCancel={handleCancel}
mainColor={mainColor}
/>
);
};

export default ThemeColorContainer;
78 changes: 20 additions & 58 deletions frontend/src/components/Profile/ThemeColor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,46 @@
import React from "react";
import { useEffect, useState } from "react";
import { TwitterPicker } from "react-color";
import styled from "styled-components";

const ThemeColor: React.FC<{
showColorPicker: boolean;
setShowColorPicker: React.Dispatch<React.SetStateAction<boolean>>;
handleChange: Function;
}> = ({ showColorPicker, setShowColorPicker }) => {
const savedColor = localStorage.getItem("mainColor");
const [mainColor, setMainColor] = useState<string>(
savedColor ? savedColor : "#9747ff"
);

const root: HTMLElement = document.documentElement;

const handleChange = (mainColor: { hex: string }) => {
const selectedColor: string = mainColor.hex;
setMainColor(selectedColor);
};

const handleReset = () => {
const defaultColor = "#9747ff";
setMainColor(defaultColor);
root.style.setProperty("--main-color", defaultColor);
root.style.setProperty("--lightpurple-color", "#b18cff");
localStorage.setItem("mainColor", defaultColor);
};

const handleSave = () => {
localStorage.setItem("mainColor", mainColor);
root.style.setProperty("--main-color", mainColor);
toggleColorPicker(true);
};

const handleCancel = () => {
const savedColor = localStorage.getItem("mainColor");
root.style.setProperty("--main-color", savedColor);
toggleColorPicker(true);
};

const toggleColorPicker = (isChange: boolean) => {
if (isChange) setShowColorPicker(!showColorPicker);
};

const confirmBeforeUnload = (e: BeforeUnloadEvent) => {
if (mainColor !== localStorage.getItem("mainColor")) {
e.returnValue =
"변경된 색상이 저장되지 않을 수 있습니다. 계속하시겠습니까?";
}
};

useEffect(() => {
root.style.setProperty("--main-color", mainColor);
window.addEventListener("beforeunload", confirmBeforeUnload);
return () => {
window.removeEventListener("beforeunload", confirmBeforeUnload);
};
}, [mainColor]);

handleChange: (mainColor: { hex: string }) => void;
handleReset: Function;
handleSave: Function;
handleCancel: Function;
mainColor: string;
}> = ({
showColorPicker,
setShowColorPicker,
handleChange,
handleReset,
handleSave,
handleCancel,
mainColor,
}) => {
return (
<ThemeColorStyled>
<TableTopStyled>
<TableTitleStyled>테마 컬러</TableTitleStyled>
{showColorPicker ? (
<>
<BtnWrapStyled>
<SaveBtnStyled onClick={handleSave}>저장</SaveBtnStyled>
<ResetBtnStyled onClick={handleCancel}>취소</ResetBtnStyled>
<SaveBtnStyled onClick={() => handleSave()}>저장</SaveBtnStyled>
<ResetBtnStyled onClick={() => handleCancel()}>
취소
</ResetBtnStyled>
</BtnWrapStyled>
</>
) : (
<ResetBtnStyled onClick={handleReset}>초기화</ResetBtnStyled>
<ResetBtnStyled onClick={() => handleReset()}>초기화</ResetBtnStyled>
)}
</TableTopStyled>
<TableBodyStyled>
<ColorSelectStyled>
메인 컬러
<MainColorButtonStyled
onClick={() => toggleColorPicker(!showColorPicker)}
onClick={() => setShowColorPicker(!showColorPicker)}
/>
</ColorSelectStyled>
{showColorPicker && (
Expand Down
16 changes: 6 additions & 10 deletions frontend/src/pages/ProfilePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import { useState } from "react";
import styled from "styled-components";
import ThemeColor from "@/components/Profile/ThemeColor";
import ThemeColorContainer from "@/components/Profile/ThemeColor.container";

const ProfilePage = () => {
const handleBackgroundClick = () => {};

const [showColorPicker, setShowColorPicker] = useState(false);
const [showThemeChange, setShowThemeChange] = useState(false);
return (
<WrapperStyled>
{showColorPicker && (
<BackgroundOverlayStyled onClick={handleBackgroundClick} />
)}
{showThemeChange && <BackgroundOverlayStyled />}
<ItemStyeld>
<ThemeColor
showColorPicker={showColorPicker}
setShowColorPicker={setShowColorPicker}
<ThemeColorContainer
showColorPicker={showThemeChange}
setShowColorPicker={setShowThemeChange}
/>
</ItemStyeld>
</WrapperStyled>
Expand Down

0 comments on commit 4b33846

Please sign in to comment.