From 4b3384600cd55911036ef88fb1ec4610cab411a6 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Fri, 20 Oct 2023 23:51:10 +0900 Subject: [PATCH] =?UTF-8?q?themeColor=20container=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Profile/ThemeColor.container.tsx | 218 ++++++------------ .../src/components/Profile/ThemeColor.tsx | 78 ++----- frontend/src/pages/ProfilePage.tsx | 16 +- 3 files changed, 97 insertions(+), 215 deletions(-) diff --git a/frontend/src/components/Profile/ThemeColor.container.tsx b/frontend/src/components/Profile/ThemeColor.container.tsx index 9d8092f4a..e702ec5ef 100644 --- a/frontend/src/components/Profile/ThemeColor.container.tsx +++ b/frontend/src/components/Profile/ThemeColor.container.tsx @@ -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>; -// }> = ({ showColorPicker, setShowColorPicker }) => { -// const savedColor = localStorage.getItem("mainColor"); -// const [mainColor, setMainColor] = useState( -// 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 ( -// -// ); -// }; - -// 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>; +}> = ({ showColorPicker, setShowColorPicker }) => { + const savedColor = localStorage.getItem("mainColor"); + const defaultColor = "#9747ff"; + const [mainColor, setMainColor] = useState( + 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 ( + + ); +}; + +export default ThemeColorContainer; diff --git a/frontend/src/components/Profile/ThemeColor.tsx b/frontend/src/components/Profile/ThemeColor.tsx index 75e0257e4..9b725a90e 100644 --- a/frontend/src/components/Profile/ThemeColor.tsx +++ b/frontend/src/components/Profile/ThemeColor.tsx @@ -1,64 +1,24 @@ 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>; - handleChange: Function; -}> = ({ showColorPicker, setShowColorPicker }) => { - const savedColor = localStorage.getItem("mainColor"); - const [mainColor, setMainColor] = useState( - 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 ( @@ -66,19 +26,21 @@ const ThemeColor: React.FC<{ {showColorPicker ? ( <> - 저장 - 취소 + handleSave()}>저장 + handleCancel()}> + 취소 + ) : ( - 초기화 + handleReset()}>초기화 )} 메인 컬러 toggleColorPicker(!showColorPicker)} + onClick={() => setShowColorPicker(!showColorPicker)} /> {showColorPicker && ( diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx index 1f08e8cb0..b08bae54e 100644 --- a/frontend/src/pages/ProfilePage.tsx +++ b/frontend/src/pages/ProfilePage.tsx @@ -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 ( - {showColorPicker && ( - - )} + {showThemeChange && } -