파일 test

public/index.html

@@ -11,7 +11,7 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
-      manifest.json provides metadata used when your web app is installed on a
+      manifest.json provides lodata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

src/App.js

@@ -1,24 +1,34 @@
-import logo from './logo.svg';
-import './App.css';
+// import logo from './logo.svg';
+// import './App.css';
+
+// function App() {
+//   return (
+//     <div className="App">
+//       <header className="App-header">
+//         <img src={logo} className="App-logo" alt="logo" />
+//         <p>
+//           Edit <code>src/App.js</code> and save to reload.
+//         </p>
+//         <a
+//           className="App-link"
+//           href="https://reactjs.org"
+//           target="_blank"
+//           rel="noopener noreferrer"
+//         >
+//           Learn React
+//         </a>
+//       </header>
+//     </div>
+//   );
+// }
+
+// export default App;
+
+import Page1 from "./components/main/Page1.jsx";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Page1 />
   );
 }
 

src/components/main/Page1.jsx

@@ -0,0 +1,38 @@
+
+// src/components/main/Page1.jsx
+import "./css/Page1.css";
+
+function Page1() {
+  return (
+    <div className="page1">
+      <div className="bg-image">
+      </div>
+      {/* 헤더 */}
+      <header className="header">
+        <img src="/logo.png" alt="Code-Us" className="logo" style={{ width: "120px" }} />
+
+        <nav className="nav">
+          <span>Introduce</span>
+          <span>Project</span>
+          <span>Support</span>
+          <span className="blog">
+            Blog <span className="arrow">↗</span>
+          </span>
+        </nav>
+      </header>
+
+      {/* 메인 히어로 영역 */}
+      <main className="hero">
+        <div className="planet"></div>
+        <h1>
+          <span className="highlight">5기</span> 멤버를 찾습니다
+        </h1>
+        <p>협업으로 완성하는 IT & Design 동아리</p>
+
+        <button className="apply-btn">지원하기</button>
+      </main>
+    </div>
+  );
+}
+
+export default Page1;

src/components/main/css/Page1.css

@@ -0,0 +1,153 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+/* 전체 배경 */
+.page1 {
+  min-height: 100vh;
+  background: radial-gradient( 
+    ellipse at bottom,
+    #1c2330 0%, /* 배경이 밝은 지점 */
+    #0b0b0b 70%, /* 배경이 어두워지는 지점 */
+    #000 100%
+  );
+  color: white;
+  font-family: sans-serif;
+  position: relative;
+  overflow: hidden;
+
+}
+
+.bg-image {
+  position: absolute;
+  inset: 0;
+  width: 87.1275rem;
+  height: 28.05925rem;
+
+  background-image: url("/public/page1-bg.png"); /* 네 이미지 경로 */
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  z-index: 0;
+}
+
+/* 글씨는 위로 */
+.header,
+.hero {
+  position: relative;
+  z-index: 1;
+  color: white;         /* 배경 어두우면 필요 */
+}
+
+/* 헤더 */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 24px 48px;
+}
+
+.logo {
+  font-weight: bold;
+  font-size: 10px;
+}
+
+.nav {
+  display: flex;
+  gap: 32px;
+  font-size: 15px;
+}
+
+.nav span {
+  cursor: pointer;
+  opacity: 0.9;
+}
+
+.nav span:hover {
+  opacity: 1;
+}
+
+.blog .arrow {
+  margin-left: 4px;
+}
+
+/* 히어로 영역 */
+.hero {
+  text-align: center;
+  margin-top: 160px;
+  position: relative;
+}
+
+.planet {
+  position: absolute; 
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -1050px;
+
+  width: 2300px;
+  height: 1000px;
+
+  background-color : black;
+  border-radius: 50%;
+
+  box-shadow:
+    0 -2px 6px rgba(255,255,255,0.25),
+    0 -5px 80px rgba(255,255,255,0.15),
+    0 -15px 40px rgba(255,255,255,0.08),
+
+    inset 0 10px 30px rgba(255, 255, 255, 0.511),
+    inset 0 1px 10px white;
+
+  z-index: 1;
+}
+
+.background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.1;
+}
+
+.hero h1 {
+  font-size: 75px;
+  font-weight: 850;
+  text-align : center;
+  margin-bottom: 10px;
+}
+
+.highlight {
+  color: #f5c400;
+}
+
+.hero p {
+  font-size: 30px;
+  font-weight: 400;
+  color: white;
+  margin-top: 10px;
+  margin-bottom: 40px;
+}
+
+/* 지원하기 버튼 */
+.apply-btn {
+  padding: 14px 80px;
+  font-size: 28px;
+  border-radius: 30px;
+
+  border: 1px solid #444444;
+  background-color: rgba(255, 255, 255, 0.05);
+  color: white;
+
+  cursor: pointer;
+  background: #191919;
+}
+
+.apply-btn:hover {
+  background-color: rgba(255, 255, 255, 0.12);
+}