From b8cd357a9fc30798ebbb6a37c5d1403af7e27f43 Mon Sep 17 00:00:00 2001
From: suzinxix <suzinxix@gmail.com>
Date: Sun, 12 Mar 2023 19:00:22 +0900
Subject: [PATCH 1/5] [#86] feat: implement user GET api

---
 bowwowcare/src/views/UserPage/UserPage.js | 32 +++++++++++++++++++----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/bowwowcare/src/views/UserPage/UserPage.js b/bowwowcare/src/views/UserPage/UserPage.js
index 2b72844..92a1743 100644
--- a/bowwowcare/src/views/UserPage/UserPage.js
+++ b/bowwowcare/src/views/UserPage/UserPage.js
@@ -1,12 +1,36 @@
-import React ,{ useState }from "react";
+import React ,{ useEffect, useState }from "react";
+import axios from "axios";
 import Header from "../../components/Header";
 import ThemeSwitcher from "../../components/ThemeSwitcher";
 import HAPPY from "../../assets/images/happy.png"
+import { API_URL } from "../../Config";
+import authHeader from "../../services/auth-header";
 
 function UserPage() {
   const [rewards, setRewards] = useState(0);
-  const [fileImg, setFileImg] = useState("string");
-  const [userName, setUserName] = useState("짱구");
+  const [fileImg, setFileImg] = useState("");
+  const [userName, setUserName] = useState("");
+
+  useEffect(() => {
+    getUser();
+  }, [])
+
+  const getUser = () => {
+    axios({
+      method: 'GET',
+      url: `${API_URL}/user`,
+      headers: authHeader(),
+    })
+    .then( (response) => {
+      if(response.status === 200) {
+      const user = response.data;
+      setUserName(user.username);
+      setRewards(user.reward);
+      setFileImg(user.profileImage);
+      }
+    }
+    ).catch((e) => {console.log(e.response.data)})
+  }
 
   return (
     <div className="container mx-auto px-8 w-screen h-screen">
@@ -20,8 +44,6 @@ function UserPage() {
         <div className="text-center">{userName}</div>
       </div>
       
-      
-      
       <hr />
       <div className='flex justify-between mx-5 my-3'>
         <span>내 리워드</span>

From 47ca16105e55dd557260299ef1533e65393f9c96 Mon Sep 17 00:00:00 2001
From: suzinxix <suzinxix@gmail.com>
Date: Sun, 12 Mar 2023 19:06:44 +0900
Subject: [PATCH 2/5] [#86] feat: implement disabled theme button

---
 bowwowcare/src/components/ThemeBox.js      |  8 ++++----
 bowwowcare/src/components/ThemeSwitcher.js | 16 ++++++++++------
 bowwowcare/src/views/UserPage/UserPage.js  |  5 ++++-
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/bowwowcare/src/components/ThemeBox.js b/bowwowcare/src/components/ThemeBox.js
index 16f11c7..b85c498 100644
--- 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
index 2a64b13..da57c82 100644
--- 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
index 92a1743..929dadf 100644
--- 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>
   );
 }

From 26091b4cdae167126da92ceefaba5caee7914972 Mon Sep 17 00:00:00 2001
From: suzinxix <suzinxix@gmail.com>
Date: Mon, 13 Mar 2023 23:23:31 +0900
Subject: [PATCH 3/5] [#86] feat: implement user POST/PUT api & unuse local
 storage about theme

---
 bowwowcare/src/components/ThemeBox.js      |   6 +-
 bowwowcare/src/components/ThemeSwitcher.js | 103 ++++++++++++++++++---
 bowwowcare/src/context/ThemeProvider.js    |  32 ++++++-
 bowwowcare/src/views/UserPage/UserPage.js  |   7 +-
 4 files changed, 129 insertions(+), 19 deletions(-)

diff --git a/bowwowcare/src/components/ThemeBox.js b/bowwowcare/src/components/ThemeBox.js
index b85c498..79eac76 100644
--- a/bowwowcare/src/components/ThemeBox.js
+++ b/bowwowcare/src/components/ThemeBox.js
@@ -2,13 +2,13 @@ import { useContext } from 'react'
 import { ThemeContext } from './../context/ThemeProvider.js';
 import { colorVariants } from "../utils/Dictionary";
 
-function ThemeBox({onClick, title, status, rewards, mainColor, subColor, disabled, id}) {
+function ThemeBox({onClick, title, status, rewards, mainColor, subColor, disabled, locked}) {
   const [themeMode, setThemeMode] = useContext(ThemeContext);
   return (
-    <button onClick={onClick} disabled={disabled} className={`shadow-lg px-6 py-3 rounded-lg border disabled:bg-gray-100 ${status ? colorVariants['border'+themeMode] : null}`}>
+    <button onClick={onClick} disabled={disabled} className={`shadow-lg px-6 py-3 rounded-lg border ${locked && "bg-gray-100"} ${status ? colorVariants['border'+themeMode] : null}`}>
         <div className='flex justify-between mb-4'>
           <span>{title}</span>
-          <span>{disabled && '🔒'}</span>
+          <span>{locked && '🔒'}</span>
           {status && <span className="text-gray-500">{status}</span>}
         </div>
         <div className='w-full flex justify-between content-center mb-2'>
diff --git a/bowwowcare/src/components/ThemeSwitcher.js b/bowwowcare/src/components/ThemeSwitcher.js
index da57c82..1fa0f10 100644
--- a/bowwowcare/src/components/ThemeSwitcher.js
+++ b/bowwowcare/src/components/ThemeSwitcher.js
@@ -1,35 +1,116 @@
+import axios from 'axios';
 import React, { useContext, useEffect, useState } from 'react';
 import { ThemeContext } from '../context/ThemeProvider.js';
 import ThemeBox from './ThemeBox.js';
+import { API_URL } from '../Config.js';
+import authHeader from '../services/auth-header.js';
 
 function ThemeSwitcher(props) {
   const [themeMode, setThemeMode] = useContext(ThemeContext);
-  const [availableTheme, setAvailableTheme] = useState([]);
-
+  const availableTheme = props.availableTheme;
+  const reward = props.reward;
+  const bones = [1,20,3];
+  const themes = [0,1,2]
+  
   useEffect(() => {
-    setAvailableTheme(props.availableTheme);
+    //setAvailableTheme(props.availableThemes);
+    //setReward(props.reward);
   }, [])
 
+  const putUser = (theme) => {
+    axios({
+      url: `${API_URL}/user`,
+      method: 'PUT',
+      headers: authHeader(),
+      data: {
+        username : "짱구",
+        profileImage : "",
+        theme : theme
+      }
+    })
+    .then((response) => {
+      if(response.data === 200){
+        console.log(response.data)
+      }
+    }).catch((e) => console.log(e.response.error))
+  }
+  
+  const postUser = (bones, theme) => {
+    axios({
+      method: 'POST',
+      url: `${API_URL}/user/theme`,
+      headers: authHeader(),
+      data: {
+        bones: bones,
+        theme: theme
+      }
+    }).then((response) => {
+      if(response.status === 200){
+        console.log(response.data);
+        axios({
+          url: `${API_URL}/user`,
+          method: 'PUT',
+          headers: authHeader(),
+          data: {
+            username : "짱구",
+            profileImage : "",
+            theme : theme
+          }
+        })
+        .then((response) => {
+          if(response.data === 200){
+            console.log(response.data)
+          }
+        }).catch((e) => console.log(e.response.error))
+      }
+    }).catch((e) => console.log(e.response.error))
+  }
+
   const switchPrimary = () => {
     setThemeMode("primary");
-    window.localStorage.setItem('theme', 'primary');
+    putUser(themes[0])
   }
 
   const switchSecondary = () => {
-    setThemeMode("secondary");
-    window.localStorage.setItem('theme', 'secondary');
+    if(props.availableTheme.indexOf(1) < 0){
+      alert("theme2 구매?");
+      console.log(reward);
+      if(reward >= bones[1]){
+        postUser(bones[1], 1);
+        window.location.reload();
+        setThemeMode("secondary");
+      }else{
+        console.log("부족!");
+      }
+    }else{
+      putUser(themes[1]);
+      setThemeMode("secondary");
+    }
+    
   }
 
   const switchThird = () => {
-    setThemeMode("third");
-    window.localStorage.setItem('theme', 'third');
+    if(props.availableTheme.indexOf(2) < 0){
+      alert("theme3 구매?");
+      //console.log(reward);
+      if(reward >= bones[2]){
+        postUser(bones[2], 2);
+        window.location.reload();
+        setThemeMode("third");
+      }else{
+        console.log("부족!");
+      }
+    }else{
+      putUser(themes[2]);
+      setThemeMode("third");
+    }
   }
 
   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"} 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>
+        <ThemeBox onClick={switchPrimary} title={"Theme 1"} status={themeMode === 'primary' ? '적용중' : null} rewards={bones[0]} mainColor={"primary-theme"} subColor={"primary-theme-s"} locked={availableTheme.indexOf(0) < 0}></ThemeBox>
+        <ThemeBox onClick={switchSecondary} title={"Theme 2"} status={themeMode === 'secondary' ? '적용중' : null} rewards={bones[1]} mainColor={"secondary-theme"} subColor={"secondary-theme-s"} locked={availableTheme.indexOf(1) < 0}></ThemeBox>
+        <ThemeBox onClick={switchThird} title={"Theme 3"} status={themeMode === 'third' ? '적용중' : null} rewards={bones[2]} mainColor={"third-theme"} subColor={"third-theme-s"} locked={availableTheme.indexOf(2) < 0} disabled={false}></ThemeBox>
       </div>
   );
 }
diff --git a/bowwowcare/src/context/ThemeProvider.js b/bowwowcare/src/context/ThemeProvider.js
index 6cfc34f..fc66425 100644
--- a/bowwowcare/src/context/ThemeProvider.js
+++ b/bowwowcare/src/context/ThemeProvider.js
@@ -1,10 +1,38 @@
-import { createContext, useState } from "react";
+import { createContext, useState, useEffect, useRef } from "react";
+import authHeader from "../services/auth-header";
+import axios from "axios";
+import { API_URL } from "../Config";
 
 export const ThemeContext = createContext({});
 
 function ThemeProvider({ children }) {
-  const localTheme = window.localStorage.getItem("theme") || "primary"
+  const theme = ["primary", "secondary", "third"];
+  const [myTheme, setMyTheme] = useState(0);
+  const localTheme = window.localStorage.getItem("theme") || theme[0];
   const [ThemeMode, setThemeMode] = useState(localTheme);
+
+  useEffect(() => {
+    getUser();
+  },[]);
+
+  useEffect(() => {
+    setThemeMode(theme[myTheme]);
+  },[myTheme])
+
+  const getUser = () => {
+    axios({
+      method: 'GET',
+      url: `${API_URL}/user`,
+      headers: authHeader(),
+    })
+    .then( (response) => {
+      if(response.status === 200) {
+      const user = response.data;
+      setMyTheme(user.theme);
+      }
+    }
+    ).catch((e) => {console.log(e.response.data)})
+  }
   
   return (
     <div>
diff --git a/bowwowcare/src/views/UserPage/UserPage.js b/bowwowcare/src/views/UserPage/UserPage.js
index 929dadf..798a3ea 100644
--- a/bowwowcare/src/views/UserPage/UserPage.js
+++ b/bowwowcare/src/views/UserPage/UserPage.js
@@ -8,9 +8,10 @@ import authHeader from "../../services/auth-header";
 
 function UserPage() {
   const [rewards, setRewards] = useState(0);
+  const [user, setUser] = useState();
   const [fileImg, setFileImg] = useState("");
   const [userName, setUserName] = useState("");
-  const [availableTheme, setAvailableTheme] = useState([])
+  const [availableThemes, setAvailableThemes] = useState([])
 
   useEffect(() => {
     getUser();
@@ -29,7 +30,7 @@ function UserPage() {
       setUserName(user.username);
       setRewards(user.reward);
       setFileImg(user.profileImage);
-      setAvailableTheme(user.availableTheme);
+      setAvailableThemes(user.availableTheme);
       }
     }
     ).catch((e) => {console.log(e.response.data)})
@@ -52,7 +53,7 @@ function UserPage() {
         <span>내 리워드</span>
         <span>{rewards}</span>
       </div>
-      <ThemeSwitcher availableTheme={availableTheme}></ThemeSwitcher>
+      <ThemeSwitcher availableTheme={availableThemes} reward={rewards}></ThemeSwitcher>
     </div>
   );
 }

From 7180e70073ba5fc8f70a7cf5e9856bc323c69035 Mon Sep 17 00:00:00 2001
From: suzinxix <suzinxix@gmail.com>
Date: Tue, 14 Mar 2023 04:41:30 +0900
Subject: [PATCH 4/5] [#86] refactor: refactoring user page

---
 bowwowcare/src/components/Header.js        |  5 +-
 bowwowcare/src/components/ThemeBox.js      |  4 +-
 bowwowcare/src/components/ThemeSwitcher.js | 80 ++++++++--------------
 bowwowcare/src/context/ThemeProvider.js    | 32 +++------
 bowwowcare/src/services/user.service.js    |  5 +-
 bowwowcare/src/views/UserPage/UserPage.js  | 34 +++------
 6 files changed, 59 insertions(+), 101 deletions(-)

diff --git a/bowwowcare/src/components/Header.js b/bowwowcare/src/components/Header.js
index fca986d..973a8dc 100644
--- a/bowwowcare/src/components/Header.js
+++ b/bowwowcare/src/components/Header.js
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 
 import { logout } from "../slices/auth";
@@ -25,6 +25,7 @@ function Header() {
 	const handleLogout = (e) => {
 		dispatch(logout());
 		navigate("/");
+		window.location.reload();
 	}
 
 	const handleUser = (e) => {
@@ -43,7 +44,7 @@ function Header() {
 				JSON.parse(localStorage.getItem("user")) ? (
 					window.location.pathname === "/user" ? <button className="text-right" onClick={handleLogout}>로그아웃</button> : window.location.pathname === "/" ? 
 					<button onClick={handleUser} >
-						<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" className="bi bi-person fill-slate-500" viewBox="0 0 16 16">
+						<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" className="bi bi-person fill-gray-500" viewBox="0 0 16 16">
   						<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z"/>
 						</svg>
 					</button> : null
diff --git a/bowwowcare/src/components/ThemeBox.js b/bowwowcare/src/components/ThemeBox.js
index 79eac76..1977647 100644
--- a/bowwowcare/src/components/ThemeBox.js
+++ b/bowwowcare/src/components/ThemeBox.js
@@ -2,10 +2,10 @@ import { useContext } from 'react'
 import { ThemeContext } from './../context/ThemeProvider.js';
 import { colorVariants } from "../utils/Dictionary";
 
-function ThemeBox({onClick, title, status, rewards, mainColor, subColor, disabled, locked}) {
+function ThemeBox({onClick, title, status, rewards, mainColor, subColor, locked}) {
   const [themeMode, setThemeMode] = useContext(ThemeContext);
   return (
-    <button onClick={onClick} disabled={disabled} className={`shadow-lg px-6 py-3 rounded-lg border ${locked && "bg-gray-100"} ${status ? colorVariants['border'+themeMode] : null}`}>
+    <button onClick={onClick} className={`shadow-lg px-6 py-3 rounded-lg border ${locked && "bg-gray-100"} ${status ? colorVariants['border'+themeMode] : null}`}>
         <div className='flex justify-between mb-4'>
           <span>{title}</span>
           <span>{locked && '🔒'}</span>
diff --git a/bowwowcare/src/components/ThemeSwitcher.js b/bowwowcare/src/components/ThemeSwitcher.js
index 1fa0f10..1d449e5 100644
--- a/bowwowcare/src/components/ThemeSwitcher.js
+++ b/bowwowcare/src/components/ThemeSwitcher.js
@@ -1,30 +1,24 @@
 import axios from 'axios';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import { ThemeContext } from '../context/ThemeProvider.js';
 import ThemeBox from './ThemeBox.js';
 import { API_URL } from '../Config.js';
 import authHeader from '../services/auth-header.js';
 
-function ThemeSwitcher(props) {
+function ThemeSwitcher({ availableTheme, reward, username, fileImg }) {
   const [themeMode, setThemeMode] = useContext(ThemeContext);
-  const availableTheme = props.availableTheme;
-  const reward = props.reward;
-  const bones = [1,20,3];
-  const themes = [0,1,2]
+  const mode = ["primary","secondary", "third"];
+  const bones = [1,2,30];
+  const themes = [0,1,2];
   
-  useEffect(() => {
-    //setAvailableTheme(props.availableThemes);
-    //setReward(props.reward);
-  }, [])
-
   const putUser = (theme) => {
     axios({
       url: `${API_URL}/user`,
       method: 'PUT',
       headers: authHeader(),
       data: {
-        username : "짱구",
-        profileImage : "",
+        username : `${username}`,
+        profileImage : `${fileImg}`,
         theme : theme
       }
     })
@@ -52,8 +46,8 @@ function ThemeSwitcher(props) {
           method: 'PUT',
           headers: authHeader(),
           data: {
-            username : "짱구",
-            profileImage : "",
+            username : `${username}`,
+            profileImage : `${fileImg}`,
             theme : theme
           }
         })
@@ -66,51 +60,37 @@ function ThemeSwitcher(props) {
     }).catch((e) => console.log(e.response.error))
   }
 
-  const switchPrimary = () => {
-    setThemeMode("primary");
-    putUser(themes[0])
-  }
-
-  const switchSecondary = () => {
-    if(props.availableTheme.indexOf(1) < 0){
-      alert("theme2 구매?");
-      console.log(reward);
-      if(reward >= bones[1]){
-        postUser(bones[1], 1);
-        window.location.reload();
-        setThemeMode("secondary");
+  const handleTheme = (theme) => {
+    // TODO: Alert component
+    if(availableTheme.indexOf(theme) < 0){
+      if(reward >= bones[theme]){
+        if (window.confirm("구매하시겠습니까?") == true){ 
+          postUser(bones[theme], theme);
+          setThemeMode(mode[theme]);
+          window.location.reload();
+        }else{
+          console.log("취소");
+        }
       }else{
-        console.log("부족!");
+        alert("리워드가 부족합니다!")
       }
     }else{
-      putUser(themes[1]);
-      setThemeMode("secondary");
+      putUser(themes[theme]);
+      setThemeMode(mode[theme]);
     }
-    
   }
 
-  const switchThird = () => {
-    if(props.availableTheme.indexOf(2) < 0){
-      alert("theme3 구매?");
-      //console.log(reward);
-      if(reward >= bones[2]){
-        postUser(bones[2], 2);
-        window.location.reload();
-        setThemeMode("third");
-      }else{
-        console.log("부족!");
-      }
-    }else{
-      putUser(themes[2]);
-      setThemeMode("third");
-    }
+  const switchTheme = (theme) => {
+    handleTheme(theme);
   }
 
   return (
       <div className='flex flex-col gap-6'>
-        <ThemeBox onClick={switchPrimary} title={"Theme 1"} status={themeMode === 'primary' ? '적용중' : null} rewards={bones[0]} mainColor={"primary-theme"} subColor={"primary-theme-s"} locked={availableTheme.indexOf(0) < 0}></ThemeBox>
-        <ThemeBox onClick={switchSecondary} title={"Theme 2"} status={themeMode === 'secondary' ? '적용중' : null} rewards={bones[1]} mainColor={"secondary-theme"} subColor={"secondary-theme-s"} locked={availableTheme.indexOf(1) < 0}></ThemeBox>
-        <ThemeBox onClick={switchThird} title={"Theme 3"} status={themeMode === 'third' ? '적용중' : null} rewards={bones[2]} mainColor={"third-theme"} subColor={"third-theme-s"} locked={availableTheme.indexOf(2) < 0} disabled={false}></ThemeBox>
+        {themes.map((theme, i) => {
+          return(
+            <ThemeBox onClick={() => switchTheme(theme)} title={`Theme ${theme}`} status={themeMode === mode[theme] ? '적용중' : null} rewards={bones[theme]} mainColor={`${mode[theme]}-theme`} subColor={`${mode[theme]}-theme-s`} locked={availableTheme.indexOf(theme) < 0} key={i}></ThemeBox>
+          );
+        })}
       </div>
   );
 }
diff --git a/bowwowcare/src/context/ThemeProvider.js b/bowwowcare/src/context/ThemeProvider.js
index fc66425..a5bf8e1 100644
--- a/bowwowcare/src/context/ThemeProvider.js
+++ b/bowwowcare/src/context/ThemeProvider.js
@@ -1,38 +1,26 @@
-import { createContext, useState, useEffect, useRef } from "react";
-import authHeader from "../services/auth-header";
-import axios from "axios";
-import { API_URL } from "../Config";
+import { createContext, useState, useEffect } from "react";
+import userService from "../services/user.service";
 
 export const ThemeContext = createContext({});
 
 function ThemeProvider({ children }) {
   const theme = ["primary", "secondary", "third"];
   const [myTheme, setMyTheme] = useState(0);
-  const localTheme = window.localStorage.getItem("theme") || theme[0];
-  const [ThemeMode, setThemeMode] = useState(localTheme);
+  const [ThemeMode, setThemeMode] = useState(theme[0]);
 
   useEffect(() => {
-    getUser();
+    userService.getUserBoard().then((response) => {
+      if(response.status === 200) {
+        const user = response.data;
+        setMyTheme(user.theme);
+      }
+    }
+    ).catch((e) => {console.log(e.response.data)})
   },[]);
 
   useEffect(() => {
     setThemeMode(theme[myTheme]);
   },[myTheme])
-
-  const getUser = () => {
-    axios({
-      method: 'GET',
-      url: `${API_URL}/user`,
-      headers: authHeader(),
-    })
-    .then( (response) => {
-      if(response.status === 200) {
-      const user = response.data;
-      setMyTheme(user.theme);
-      }
-    }
-    ).catch((e) => {console.log(e.response.data)})
-  }
   
   return (
     <div>
diff --git a/bowwowcare/src/services/user.service.js b/bowwowcare/src/services/user.service.js
index e6a98c6..4a1ad13 100644
--- a/bowwowcare/src/services/user.service.js
+++ b/bowwowcare/src/services/user.service.js
@@ -1,14 +1,15 @@
 import axios from "axios";
 import authHeader from "./auth-header";
+//import { API_URL } from "../Config";
 
-const API_URL = "http://localhost:8080/api/user/";
+const API_URL = "http://localhost:8080/api/user";
 
 const getPublicContent = () => {
   return axios.get(API_URL + "all");
 };
 
 const getUserBoard = () => {
-  return axios.get(API_URL + "user", { headers: authHeader() });
+  return axios.get("http://localhost:8080/api/v1/user" , { headers: authHeader() });
 };
 
 const userService = {
diff --git a/bowwowcare/src/views/UserPage/UserPage.js b/bowwowcare/src/views/UserPage/UserPage.js
index 798a3ea..8d59856 100644
--- a/bowwowcare/src/views/UserPage/UserPage.js
+++ b/bowwowcare/src/views/UserPage/UserPage.js
@@ -1,40 +1,28 @@
 import React ,{ useEffect, useState }from "react";
-import axios from "axios";
 import Header from "../../components/Header";
 import ThemeSwitcher from "../../components/ThemeSwitcher";
 import HAPPY from "../../assets/images/happy.png"
-import { API_URL } from "../../Config";
-import authHeader from "../../services/auth-header";
+import userService from "../../services/user.service";
 
 function UserPage() {
   const [rewards, setRewards] = useState(0);
-  const [user, setUser] = useState();
   const [fileImg, setFileImg] = useState("");
   const [userName, setUserName] = useState("");
-  const [availableThemes, setAvailableThemes] = useState([])
+  const [availableThemes, setAvailableThemes] = useState([]);
 
   useEffect(() => {
-    getUser();
-  }, [])
-
-  const getUser = () => {
-    axios({
-      method: 'GET',
-      url: `${API_URL}/user`,
-      headers: authHeader(),
-    })
-    .then( (response) => {
+      userService.getUserBoard().then((response) => {
       if(response.status === 200) {
-      const user = response.data;
-      console.log(user);
-      setUserName(user.username);
-      setRewards(user.reward);
-      setFileImg(user.profileImage);
-      setAvailableThemes(user.availableTheme);
+        const user = response.data;
+        console.log(user);
+        setUserName(user.username);
+        setRewards(user.reward);
+        setFileImg(user.profileImage);
+        setAvailableThemes(user.availableTheme);
       }
     }
     ).catch((e) => {console.log(e.response.data)})
-  }
+  }, [])
 
   return (
     <div className="container mx-auto px-8 w-screen h-screen">
@@ -53,7 +41,7 @@ function UserPage() {
         <span>내 리워드</span>
         <span>{rewards}</span>
       </div>
-      <ThemeSwitcher availableTheme={availableThemes} reward={rewards}></ThemeSwitcher>
+      <ThemeSwitcher availableTheme={availableThemes} reward={rewards} username={userName} fileImg={fileImg} ></ThemeSwitcher>
     </div>
   );
 }

From c88947eb8deee66c0ae77d5e1c7a0af5847a36e3 Mon Sep 17 00:00:00 2001
From: suzinxix <suzinxix@gmail.com>
Date: Tue, 14 Mar 2023 04:54:53 +0900
Subject: [PATCH 5/5] [#86] feat: update user service api url

---
 bowwowcare/src/services/user.service.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/bowwowcare/src/services/user.service.js b/bowwowcare/src/services/user.service.js
index 4a1ad13..0789c99 100644
--- a/bowwowcare/src/services/user.service.js
+++ b/bowwowcare/src/services/user.service.js
@@ -1,15 +1,13 @@
 import axios from "axios";
 import authHeader from "./auth-header";
-//import { API_URL } from "../Config";
-
-const API_URL = "http://localhost:8080/api/user";
+import { API_URL } from "../Config";
 
 const getPublicContent = () => {
   return axios.get(API_URL + "all");
 };
 
 const getUserBoard = () => {
-  return axios.get("http://localhost:8080/api/v1/user" , { headers: authHeader() });
+  return axios.get(API_URL + "/user" , { headers: authHeader() });
 };
 
 const userService = {