[ADD] 질문상세디자인추가

src/Qdetail.jsx

@@ -2,18 +2,29 @@
 import React from "react";
 import { useState } from "react";
 import { styles } from "src/components/qdetail/style";
+//import { Link } from "react-router-dom";
 
 function Qdetail() {
-    const [login, setLogin] = useState(false);
-
+    const [isLogined, setIsLogined] = useState(false);
+    const [btnClicked, setBtnClicked] = useState(false);
+    const [view, setView] = useState(false);
+    const [alarm, setAlarm] = useState(false);
+    const [isAnswer, setIsAnswer] = useState(false);
+    const ddClick = () => {
+        setView(!view)
+    };
+    const answerClick = () => {
+        console.log("clicked")
+        setBtnClicked(true)
+    };
     return (
         <div style={styles.container}>
             <div style={styles.q_a_sub}>
-                <div style={styles.q_container}>
+                <button style={styles.q_container}>
                     <div>돋보기 사진이 들어갈 자리</div>
                     <div>궁금한 것을 질문해보세요</div>
-                </div>
-                <h2 style={styles.ad}>광고/배너</h2>
+                </button>
+                <button style={styles.ad}>광고/배너</button>
             </div>
             <div style={styles.ad_q}>
                 <div style={styles.a_b_q_container}>
@@ -26,10 +37,14 @@ function Qdetail() {
                     <div style={{ display: 'flex', flex: '1' }}>
                         <div style={styles.q_content}>질문</div>
                     </div>
-                    <hr style={{ width: '90%' }} />
-                    <button>
-                        답변하기
-                    </button>
+                    <hr style={{ width: '90%', height: '2px', background: 'white' }} />
+                    <div style={{ display: 'flex', justifyContent: 'center' }}>
+                        {btnClicked ? null/*답변 입력할 수 있는 컴포넌트*/ : <button onClick={answerClick} style={styles.a_button}>
+                            답변하기
+                        </button>}
+                    </div>
+                    {/* map함수로 답변 컴포넌트 호출 */}
+
                     <div style={styles.answer}>답변1</div>
                     <div style={styles.answer}>답변2</div>
                     <div style={styles.answer}>답변3</div>

src/components/qdetail/style.js

@@ -30,25 +30,30 @@ export const styles = {
         width: '20.4vw',
         height: '42.7vh',
         margin: '7.5%',
-        boxShadow: '0 4px 4px 0 black',
+        boxShadow: 'inset 0 4px 4px 0 #00000040, 0 4px 4px 0 black',
         color: '#EB7125',
+        border: 'none'
     },
     ad: {
         borderRadius: '15px',
         width: '20.4vw',
         height: '42.7vh',
         margin: '7.5%',
-        boxShadow: '0 4px 4px 0 black',
+        boxShadow: 'inset 0 4px 4px 0 #00000040, 0 4px 4px 0 black',
         color: '#EB7125',
+        border: 'none',
+        fontWeight: 'bold'
     },
     q_a_main: {
         background: '#EB7125',
         width: '59.7vw',
         height: '90.2vh',
-        boxShadow: '0 4px 4px 0 black',
+        boxShadow: 'inset 0 4px 4px 0 #00000040, 0 4px 4px 0 black',
         borderRadius: '20px',
         display: 'flex',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        justifyContent: "center"
+
     },
     profilecontainer: {
         flex: "0.6",
@@ -59,11 +64,29 @@ export const styles = {
     },
     answer: {
         flex: "1",
+        background: '#FFFFFF',
+        margin: '25px',
+        borderRadius: "15px",
+        boxShadow: 'inset 0 4px 4px 0 #00000040, 0 4px 4px 0 black',
+        color: '#EB7125',
     },
     q_content: {
         background: "#FFFFFF",
-        margin: '10px',
+        margin: '25px',
         borderRadius: "15px",
+        boxShadow: 'inset 0 4px 4px 0 #00000040, 0 4px 4px 0 black',
         flex: "1",
+        color: '#EB7125',
+    },
+    a_button: {
+        width: "15.8%",
+        height: "150%",
+        alignItems: 'center',
+        borderRadius: "15px",
+        border: 'none',
+        color: '#EB7125',
+        fontWeight: 'bold',
+        boxShadow: 'inset 0 2px 6px 0 #00000040, 0 2px 6px 0 black',
+
     }
 }