<feat>: 메인 화면 배경 설정 및 아바타 배치

src/App.css

@@ -36,3 +36,19 @@
     transform: rotate(360deg);
   }
 }
+
+div #logo {
+  top: 50%;
+  left: 25%;
+  width: 855;
+  height: 153;
+  position: absolute;
+}
+/* 위치 수정 please */
+div #character {
+  width: 154;
+  height: 241;
+  left: 38%;
+  /* top: 300%;  */
+  position: absolute;
+}

src/App.js

@@ -1,21 +1,19 @@
 import './App.css';
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import logoRoot from "../src/resource/unisphere_logo.png";
+import chRoot from "../src/resource/character_unisphere.png";
 
-class App extends React.Component {
-  render() {
-    return <Container></Container>;
-  }
+function App() {
+  return (
+    <div className='App'>
+      <div>
+        <img id="logo" src={logoRoot} alt="logo"/>
+      </div>
+      <div>
+        <img id="character" src={chRoot} alt="ch"/>
+      </div>
+    </div>
+  );
 }
 
-const Container = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: './resource/main_background.png';
-  background-size: cover;
-`;
-
 export default App;

src/index.css

@@ -5,6 +5,13 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('./resource/main_background.png');
+  background-size: cover;
 }
 
 code {

src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';

src/screen/MainLogo.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+import logoImage from '../resource/unisphere_logo.png';  // 로고 이미지
+
+function MainLogo() {
+    return (
+        <UniLogo/>
+    );
+}
+
+const UniLogo = styled.img`
+    src: url(${logoImage});
+`;
+
+export default MainLogo;