diff --git a/frontend/src/pages/qna/QnAListPage.module.css b/frontend/src/pages/qna/QnAListPage.module.css
index 95a2d54..01ff966 100644
--- a/frontend/src/pages/qna/QnAListPage.module.css
+++ b/frontend/src/pages/qna/QnAListPage.module.css
@@ -4,7 +4,10 @@
min-height: 100vh;
max-width: 780px;
margin: 0 auto;
- padding-bottom: 80px;
+ padding-bottom: 140px;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ box-sizing: border-box;
}
/* 상단 */
@@ -86,6 +89,15 @@
white-space: nowrap;
}
+.sortOption:hover {
+ background: var(--gray50);
+ border-radius: 6px;
+}
+
+.sortOption:active {
+ background: var(--gray200);
+}
+
.divider {
background: var(--gray200);
width: 100%;
@@ -104,8 +116,9 @@
border: 1px solid var(--dark);
background: var(--white);
box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.25);
- width: 768px;
+ width: 100%;
height: 56px;
+ box-sizing: border-box;
}
.arrowBtn {
@@ -174,6 +187,7 @@
display: flex;
flex-direction: column;
gap: 20px;
+ align-items: center;
}
@@ -184,7 +198,8 @@
border-radius: 30px;
background: var(--white);
box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.25);
- width: 720px;
+ width: 95%;
+ box-sizing: border-box;
min-height: 40px;
}
@@ -274,7 +289,7 @@
.questionImage {
width: 100%;
border-radius: 8px;
- margin-top: 0.65rem;
+ margin-top: 19px;
object-fit: cover;
display: block;
}
@@ -285,7 +300,7 @@
margin-top: 26px;
display: flex;
flex-direction: column;
- gap: 0.4rem;
+ gap: 17px;
padding-left: 20px;
border-top: 1px solid var(--gray200);
padding-top: 17px;
@@ -305,10 +320,10 @@
display: flex;
flex-direction: column;
gap: 0.15rem;
- max-width: 646px;
border-radius: 5px 20px 20px 20px;
background: var(--gray50);
padding: 0.5rem 0.8rem;
+ max-width: 93%;
}
@@ -353,68 +368,87 @@
color: var(--black);
}
-/* 여기부터 시작 */
+
/* ── 댓글 입력 행 ── */
.commentInputRow {
display: flex;
align-items: center;
- gap: 0.4rem;
- margin-top: 0.65rem;
+ margin-top: 19px;
+ position: relative;
}
.commentInput {
flex: 1;
- border: 1px solid var(--gray200);
- border-radius: 20px;
- padding: 0.4rem 0.8rem;
+ width: 100%;
+ height: 44px;
+ border-radius: 44px;
+ border: 1.5px solid var(--dark);
+ background: var(--white);
+ padding: 0 50px 0 15px;
+ box-sizing: border-box;
font-family: var(--font-main);
- font-size: 0.82rem;
+ font-size: 16px;
color: var(--black);
- background: #f5f5f5;
outline: none;
transition: border-color 0.15s;
}
-.commentInput:focus {
- border-color: #09C410;
- background: var(--white);
+.commentInput::placeholder {
+ color: var(--gray200);
}
.submitBtn {
- width: 30px;
- height: 30px;
+ position: absolute;
+ right: 5px;
+ width: 32px;
+ height: 32px;
border-radius: 50%;
background: #09C410;
border: none;
- color: var(--white);
- font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
- transition: background 0.15s;
+ padding: 0;
}
-.submitBtn:hover {
- background: #07a50e;
+.submitBtn svg {
+ display: block;
}
/* ── 하단 새 질문 입력바 ── */
+
.newQuestionBar {
position: fixed;
- bottom: 0;
+ bottom: 20px;
left: 50%;
transform: translateX(-50%);
- width: 100%;
- max-width: 480px;
+ width: min(768px, 100vw - 32px);
+ height: 56px;
+ border-radius: 30px;
background: var(--white);
- border-top: 1px solid var(--gray200);
- padding: 0.6rem 1rem;
+ box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.25);
+ display: flex;
+ align-items: center;
+ padding: 0 12px;
+ box-sizing: border-box;
z-index: 100;
}
+.bottomCover {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 80px;
+ background: linear-gradient(to bottom,
+ transparent,
+ var(--white) 60%);
+ z-index: 99;
+}
+
.errorMsg {
font-family: var(--font-main);
font-size: 0.78rem;
@@ -426,13 +460,26 @@
display: flex;
align-items: center;
gap: 0.5rem;
+ flex: 1;
+ height: 100%;
}
.newQuestionPlus {
- font-size: 1.2rem;
+ width: 23px;
+ height: 23px;
+ font-size: 23px;
color: var(--gray600);
flex-shrink: 0;
line-height: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ border: none;
+ padding: 0;
+ border-radius: 50%;
+ background: var(--white);
+ box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}
.newQuestionInput {
@@ -440,34 +487,29 @@
border: none;
background: none;
font-family: var(--font-main);
- font-size: 0.88rem;
+ font-size: 20px;
color: var(--black);
outline: none;
+ height: 100%;
}
.newQuestionInput::placeholder {
- color: var(--gray600);
+ color: var(--gray200);
}
.newQuestionSubmit {
- width: 32px;
- height: 32px;
+ margin-left: auto;
border-radius: 50%;
- background: #09C410;
border: none;
- color: var(--white);
- font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
+ padding: 0;
transition: background 0.15s;
}
-.newQuestionSubmit:hover {
- background: #07a50e;
-}
.newQuestionSubmit:disabled {
background: var(--gray200);