Merge pull request #2 from pandahwang/design

design 수정사항 dev에 반영

src/pages/Results.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, CSSProperties } from "react";
 import RadarChart from "../components/RadarChart";
 import { useNavigate, useParams } from "react-router-dom";
 import { getData, postData, deleteData, updateData} from "../http";
+import '../styles.css'; 
 
 interface CustomCSSProperties extends CSSProperties {
   "--target-width"?: string;
@@ -207,8 +208,8 @@ useEffect(() => {
   }
 
   return (
-    <div className="h-auto w-full bg-black flex justify-center items-center flex-row p-16">
-      <div className="w-[450px] bg-gray-900 p-4 border border-gray-400">
+    <div className="container h-[1600px] w-full bg-black flex justify-center items-center flex-row p-16">
+      <div className="w-[450px] h-full bg-gray-900 p-4 border border-gray-400">
         <RadarChart />
         <div className="text-white border-t border-yellow-300 mt-4 pt-2 pb-2">
           <p className="mb-2">
@@ -293,7 +294,7 @@ useEffect(() => {
           </div>
         </div>
       </div>
-      <div className="w-[450px] h-[1311px] bg-gray-900 p-4 border border-gray-400">
+      <div className="w-[450px] h-full bg-gray-900 p-4 border border-gray-400">
         <h2 className="text-xl font-bold mb-4 text-start text-[#F9DA9B]">
           사용자 의견
         </h2>
@@ -327,7 +328,7 @@ useEffect(() => {
                 비밀번호
               </label>
               <input
-                type="text"
+                type="password"
                 id="password"
                 name="password"
                 value={formData.password}

src/pages/Test.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { QUESTIONS } from "../data/questions";
 import { postData } from "../http";
+import '../styles.css'; 
 
 function Test() {
   const navigate = useNavigate();

src/styles.css

@@ -0,0 +1,34 @@
+body {
+  background-color: black;
+}
+
+.container {
+    width: 100%;
+    margin: auto;
+  }
+
+  /* 작은 화면 (모바일) */
+  @media (max-width: 600px) {
+    .container {
+      display: block;
+      max-width: fit-content;
+      padding: 0px;
+      padding-top: 4rem;
+      padding-bottom: 4rem;
+    }
+  }
+
+  /* 중간 화면 (태블릿) */
+  @media (min-width: 601px) and (max-width: 1024px) {
+    .container {
+      display: block;
+      max-width: fit-content;
+    }
+  }
+
+  /* 큰 화면 (데스크탑) */
+  @media (min-width: 1025px) {
+    .container {
+      display: flex;
+    }
+  }