diff --git a/src/Qdetail.jsx b/src/Qdetail.jsx index 70c05ae..b16e4a2 100644 --- a/src/Qdetail.jsx +++ b/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 (
-
+
-

광고/배너

+ +
@@ -26,10 +37,14 @@ function Qdetail() {
질문
-
- +
+
+ {btnClicked ? null/*답변 입력할 수 있는 컴포넌트*/ : } +
+ {/* map함수로 답변 컴포넌트 호출 */} +
답변1
답변2
답변3
diff --git a/src/components/qdetail/style.js b/src/components/qdetail/style.js index 792bba7..4d45f7a 100644 --- a/src/components/qdetail/style.js +++ b/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', + } }