diff --git a/src/App.js b/src/App.js
new file mode 100755
index 0000000000000000000000000000000000000000..36e94436efd009214b3debe2bec8b449633af30c
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,63 @@
+import React, { useState, useEffect, useMemo } from 'react';
+
+const cityList = [
+  { cityName: 'LA', timezone: 'America/Los_Angeles' },
+  { cityName: 'Tokyo', timezone: 'Asia/Tokyo' },
+  { cityName: 'Campinas', timezone: 'America/Sao_Paulo'}
+];
+
+const TimeButton = ({ cityName, timezone }) => {
+  const [showTime, setShowTime] = useState(false); //토글
+  const [currentTime, setCurrentTime] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  const handleButtonClick = () => {
+    setShowTime(!showTime);
+  };
+
+  const localTime = useMemo(() => {
+    const option = {
+      timeZone: timezone,
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    };
+    return currentTime.toLocaleTimeString('ko-KR', option);
+  }, [currentTime, timezone]);
+
+  return (
+    <>
+      <div>
+       <button onClick={handleButtonClick}>
+        {cityName}
+       </button>
+      </div>
+      {showTime && <>{localTime}</>}
+    </>
+  );
+};
+
+const App = () => {
+  return (
+    <>
+      {cityList.map((city) => (
+        <TimeButton
+          key={city.cityName}
+          cityName={city.cityName}
+          timezone={city.timezone}
+        />
+      ))}
+    </>
+  );
+};
+
+export default App;
diff --git a/src/index.js b/src/index.js
new file mode 100755
index 0000000000000000000000000000000000000000..422769f3c316f9eb897542a87d4cdbbbcdabbc3f
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+var container = document.getElementById('root');
+var root = ReactDOM.createRoot(container);
+
+root.render(<App />);
+
+module.hot.accept()