Merge branch 'main' of https://github.com/hackersground-kr/hg-crescen…

…do-server

crescendo-web/src/pages/Guide.css

@@ -23,29 +23,4 @@
 
 .whatDo input[type="button"] {
   width: 100%;
-  padding: 20 px;
-  font-size: 16px;
-  background-color: #f0f0f0;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.3s ease, transform 0.2s ease;
-  box-sizing: border-box;
-}
-
-.whatDo input[type="button"]:hover {
-  background-color: #e0e0e0;
-  transform: translateY(-2px);
-}
-
-.whatDo input[type="button"]:active {
-  background-color: #d0d0d0;
-  transform: translateY(0);
-}
-
-@media (max-width: 600px) {
-  .whatDo {
-    grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
-    grid-template-rows: repeat(3, 1fr); /* 3 rows */
-  }
 }

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,6 +24,7 @@ function Toggles() {
   );
 }
 
+// 가이드를 렌더링하는 컴포넌트
 function Guide() {
   return (
     <div className="container">
@@ -34,16 +36,20 @@ function Guide() {
       </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")} />
       </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")} />
       </div>
+
       <Toggles />
     </div>
   );