feat :: add

hackersground-kr · Aug 26, 2024 · 49ceab8 · 49ceab8
1 parent 6f904d8
commit 49ceab8
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git a/crescendo-web/src/pages/Guide.css b/crescendo-web/src/pages/Guide.css
@@ -31,4 +31,15 @@ h6 {
 }
 .HStack {
   width: 100%;
+}
+.image-button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0 5px; /* 이미지 버튼 간의 간격 설정 */
+  cursor: pointer;
+}
+
+.image-button img {
+  display: block;
 }
diff --git a/crescendo-web/src/pages/Guide.js b/crescendo-web/src/pages/Guide.js
@@ -2,6 +2,7 @@ import React from "react";
 import "./Guide.css";
 import { useNavigate } from "react-router-dom";
 
+// 토글 버튼을 렌더링하는 컴포넌트
 function Toggles() {
   const navigate = useNavigate();
 
@@ -23,24 +24,49 @@ function Toggles() {
   );
 }
 
+// 가이드를 렌더링하는 컴포넌트
 function Guide() {
   return (
     <div className="container">
       <div className="box"></div>
-      <img src={require("../image/var.png")} width="440px" className="var" />
-      <h4>예비 상주님을 위한 <br/>사망진단부터 장례까지</h4>
+      <img
+        src={require("../image/var.png")}
+        width="440px"
+        className="var"
+        alt="var"
+      />
+      <h4>
+        예비 상주님을 위한 <br />
+        사망진단부터 장례까지
+      </h4>
       <p>장례 전과 진행 중, 꼭 필요한 정보만을 모았어요.</p>
       <h6>무엇을 해야 하나요?</h6>
+
+      {/* HStack 안에 버튼으로 이미지들을 감쌈 */}
       <div className="HStack" align="center" justify="center">
-      <img src={require("../image/1.png")}/>
-      <img src={require("../image/2.png")}/>
-      <img src={require("../image/3.png")}/>
+        <button className="image-button">
+          <img src={require("../image/1.png")} alt="step 1" />
+        </button>
+        <button className="image-button">
+          <img src={require("../image/2.png")} alt="step 2" />
+        </button>
+        <button className="image-button">
+          <img src={require("../image/3.png")} alt="step 3" />
+        </button>
       </div>
+
       <div className="HStack" align="center" justify="center">
-      <img src={require("../image/4.png")}/>
-      <img src={require("../image/5.png")}/>
-      <img src={require("../image/6.png")}/>
+        <button className="image-button">
+          <img src={require("../image/4.png")} alt="step 4" />
+        </button>
+        <button className="image-button">
+          <img src={require("../image/5.png")} alt="step 5" />
+        </button>
+        <button className="image-button">
+          <img src={require("../image/6.png")} alt="step 6" />
+        </button>
       </div>
+
       <Toggles />
     </div>
   );