From 5fa2280a8671b7b10e088ff675fa55bf8998cc2b Mon Sep 17 00:00:00 2001
From: kojesung <90428805+kojesung@users.noreply.github.com>
Date: Thu, 4 Jan 2024 22:26:16 +0900
Subject: [PATCH] =?UTF-8?q?[ADD]=20=EC=83=81=EC=84=B8=20=EC=84=A4=EB=AA=85?=
 =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=B6=94=EA=B0=80=20(#3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Qdetail.jsx | 88 +++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 85 insertions(+), 3 deletions(-)

diff --git a/src/Qdetail.jsx b/src/Qdetail.jsx
index e79dc2f..566d6ca 100644
--- a/src/Qdetail.jsx
+++ b/src/Qdetail.jsx
@@ -1,12 +1,94 @@
+import { useState } from "react";
+
 function Qdetail() {
+    const [login, setLogin] = useState(false);
+
+
     return (
-        <div style={styles.first_div}>hi</div>
+        <div style={styles.container}>
+            <div style={styles.q_a_sub}>
+                <div style={styles.q_container}>
+                    <div>돋보기 사진이 들어갈 자리</div>
+                    <div>궁금한 것을 질문해보세요</div>
+                </div>
+                <h2 style={styles.ad}>광고/배너</h2>
+
+
+            </div>
+            <div style={styles.ad_q}>
+                <div style={styles.a_b_q_container}>
+                    <div style={styles.b_q_container}>이전 질문으로 이동 칸</div>{/*Link 컴포넌트로 바꿀 태그*/}
+                    <div style={styles.a_q_contianer}>다음 질문으로 이동 칸</div>{/*Link 컴포넌트로 바꿀 태그*/}
+                </div>
+                <div style={styles.q_a_main}>
+                    질문과 대답이 나오는 칸
+                </div>
+            </div>
+            <div style={styles.profilecontainer}>
+                <div style={styles.profilecontainer2}>로그인
+                </div>
+            </div>
+        </div>
     )
 }
 export default Qdetail;
 
 const styles = {
-    first_div: {
-        color: 'red'
+    container: {
+        display: 'flex'
+    },
+    q_a_sub: {
+        flex: '1',
+        display: 'inline',
+    },
+    ad_q: {
+        flex: '3',
+        display: 'inline',
+        margin: '2%'
+    },
+    a_b_q_container: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    b_q_container: {
+        marginTop: '5px',
+        marginBottom: '10px',
+        marginleft: '5px'
+    },
+    a_q_contianer: {
+        marginTop: '5px',
+        marginBottom: '10px',
+        marginleft: '5px'
+    },
+    q_container: {
+        borderRadius: '15px',
+        width: '20.4vw',
+        height: '42.7vh',
+        margin: '7.5%',
+        boxShadow: '0 4px 4px 0 black',
+        color: '#EB7125',
+    },
+    ad: {
+        borderRadius: '15px',
+        width: '20.4vw',
+        height: '42.7vh',
+        margin: '7.5%',
+        boxShadow: '0 4px 4px 0 black',
+        color: '#EB7125',
+    },
+    q_a_main: {
+        background: '#EB7125',
+        wdith: '59.7vw',
+        height: '90.2vh',
+        boxShadow: '0 4px 4px 0 black',
+        borderRadius: '20px',
+    },
+    profilecontainer: {
+        flex: "0.6",
+    },
+    profilecontainer2: {
+        background: "#EB7125",
+        borderRadius: '45px',
     }
+
 }
\ No newline at end of file