[#86] feat: implement disabled theme button

2022-2-Graduation-Project · Mar 12, 2023 · 47ca161 · 47ca161
1 parent b8cd357
commit 47ca161
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/bowwowcare/src/components/ThemeBox.js b/bowwowcare/src/components/ThemeBox.js
@@ -1,15 +1,15 @@
-import styled from "styled-components";
 import { useContext } from 'react'
 import { ThemeContext } from './../context/ThemeProvider.js';
 import { colorVariants } from "../utils/Dictionary";
 
-function ThemeBox({onClick, title, status, rewards, mainColor, subColor}) {
+function ThemeBox({onClick, title, status, rewards, mainColor, subColor, disabled, id}) {
   const [themeMode, setThemeMode] = useContext(ThemeContext);
   return (
-    <button onClick={onClick} className={`shadow-lg px-6 py-3 rounded-lg border ${status ? colorVariants['border'+themeMode] : null}`}>
+    <button onClick={onClick} disabled={disabled} className={`shadow-lg px-6 py-3 rounded-lg border disabled:bg-gray-100 ${status ? colorVariants['border'+themeMode] : null}`}>
         <div className='flex justify-between mb-4'>
           <span>{title}</span>
-          <span className=" text-gray-500">{status}</span>
+          <span>{disabled && '🔒'}</span>
+          {status && <span className="text-gray-500">{status}</span>}
         </div>
         <div className='w-full flex justify-between content-center mb-2'>
           <div className='flex gap-x-4 w-3/4'>

diff --git a/bowwowcare/src/components/ThemeSwitcher.js b/bowwowcare/src/components/ThemeSwitcher.js
@@ -1,10 +1,14 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { ThemeContext } from '../context/ThemeProvider.js';
 import ThemeBox from './ThemeBox.js';
 
-function ThemeSwitcher() {
+function ThemeSwitcher(props) {
   const [themeMode, setThemeMode] = useContext(ThemeContext);
-
+  const [availableTheme, setAvailableTheme] = useState([]);
+
+  useEffect(() => {
+    setAvailableTheme(props.availableTheme);
+  }, [])
 
   const switchPrimary = () => {
     setThemeMode("primary");
@@ -23,9 +27,9 @@ function ThemeSwitcher() {
 
   return (
       <div className='flex flex-col gap-6'>
-        <ThemeBox onClick={switchPrimary} title={"Theme 1"} status={themeMode === 'primary' ? '적용중' : null} rewards={10} mainColor={"primary-theme"} subColor={"primary-theme-s"}></ThemeBox>
-        <ThemeBox onClick={switchSecondary} title={"Theme 2"} status={themeMode === 'secondary' ? '적용중' : null} rewards={20} mainColor={"secondary-theme"} subColor={"secondary-theme-s"}></ThemeBox>
-        <ThemeBox onClick={switchThird} title={"Theme 3"} status={themeMode === 'third' ? '적용중' : null} rewards={30} mainColor={"third-theme"} subColor={"third-theme-s"}></ThemeBox>
+        <ThemeBox onClick={switchPrimary} title={"Theme 1"} status={themeMode === 'primary' ? '적용중' : null} rewards={10} mainColor={"primary-theme"} subColor={"primary-theme-s"} disabled={availableTheme.indexOf(0) < 0}></ThemeBox>
+        <ThemeBox onClick={switchSecondary} title={"Theme 2"} status={themeMode === 'secondary' ? '적용중' : null} rewards={20} mainColor={"secondary-theme"} subColor={"secondary-theme-s"} disabled={availableTheme.indexOf(1) < 0}></ThemeBox>
+        <ThemeBox onClick={switchThird} title={"Theme 3"} status={themeMode === 'third' ? '적용중' : null} rewards={30} mainColor={"third-theme"} subColor={"third-theme-s"} disabled={availableTheme.indexOf(2) < 0} ></ThemeBox>
       </div>
   );
 }

diff --git a/bowwowcare/src/views/UserPage/UserPage.js b/bowwowcare/src/views/UserPage/UserPage.js
@@ -10,6 +10,7 @@ function UserPage() {
   const [rewards, setRewards] = useState(0);
   const [fileImg, setFileImg] = useState("");
   const [userName, setUserName] = useState("");
+  const [availableTheme, setAvailableTheme] = useState([])
 
   useEffect(() => {
     getUser();
@@ -24,9 +25,11 @@ function UserPage() {
     .then( (response) => {
       if(response.status === 200) {
       const user = response.data;
+      console.log(user);
       setUserName(user.username);
       setRewards(user.reward);
       setFileImg(user.profileImage);
+      setAvailableTheme(user.availableTheme);
       }
     }
     ).catch((e) => {console.log(e.response.data)})
@@ -49,7 +52,7 @@ function UserPage() {
         <span>내 리워드</span>
         <span>{rewards}</span>
       </div>
-      <ThemeSwitcher></ThemeSwitcher>
+      <ThemeSwitcher availableTheme={availableTheme}></ThemeSwitcher>
     </div>
   );
 }