Skip to content

[Feat] 질문 리스트 (부원) #32 #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kdhye1119 merged 1 commit into from
May 22, 2026
Merged

[Feat] 질문 리스트 (부원) #32 #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions frontend/src/pages/qna/QnAListPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,11 @@ const CommentCommentArraw = () => (<svg xmlns="http://www.w3.org/2000/svg" width
<path d="M0.98226 0.021232C1.18517 0.114543 1.3289 0.247655 1.41782 0.452652C1.44292 0.614873 1.44058 0.775259 1.43877 0.9391C1.43892 0.988297 1.43907 1.03749 1.43922 1.08818C1.43951 1.25313 1.43855 1.41805 1.4376 1.583C1.43745 1.7012 1.43757 1.8194 1.43768 1.9376C1.43777 2.19213 1.43722 2.44664 1.43624 2.70117C1.43483 3.06916 1.43437 3.43715 1.43415 3.80515C1.43377 4.40222 1.43261 4.99928 1.43097 5.59635C1.42937 6.17629 1.44605 1.77316 1.44531 2.35311C1.44526 2.38923 1.44522 2.42535 1.44517 2.46257C1.44481 2.74506 1.44447 3.02756 1.44413 3.31006C1.44249 4.6944 1.43898 6.07872 1.43574 7.46306C6.41617 7.4417 6.41617 7.4417 11.4972 7.41991C10.5054 6.43757 9.51367 5.45523 8.49184 4.44312C8.37409 4.20985 8.37691 4.00978 8.40473 3.75285C8.50351 3.54211 8.62754 3.41927 8.84029 3.32143C9.10543 3.28607 9.31932 3.27634 9.54491 3.43156C9.72458 3.57285 9.8828 3.73814 10.0444 3.89896C10.0864 3.94037 10.1283 3.98177 10.1703 4.02315C10.2837 4.13508 10.3968 4.24728 10.5099 4.35955C10.6284 4.47717 10.7471 4.59458 10.8659 4.71203C11.065 4.90916 11.264 5.10648 11.4629 5.3039C11.6928 5.53207 11.923 5.75992 12.1534 5.98762C12.3514 6.18334 12.5492 6.37922 12.7469 6.57524C12.8649 6.69224 12.9829 6.80917 13.1011 6.92595C13.2121 7.03567 13.3229 7.1456 13.4336 7.25569C13.4936 7.31529 13.5538 7.37467 13.614 7.43405C13.6496 7.46961 13.6853 7.50517 13.722 7.54181C13.7686 7.588 13.7686 7.588 13.8162 7.63513C13.9623 7.80061 13.9935 7.9297 13.9963 8.14793C13.9975 8.19142 13.9987 8.23491 14 8.27972C13.9486 8.61861 13.6301 8.85714 13.3968 9.08715C13.355 9.12869 13.3132 9.17024 13.2715 9.21181C13.1585 9.32413 13.0452 9.43618 12.9318 9.54817C12.8131 9.66557 12.6945 9.78319 12.576 9.90077C12.3769 10.0981 12.1777 10.2952 11.9784 10.4922C11.7481 10.7199 11.518 10.9479 11.2881 11.176C11.0905 11.3722 10.8928 11.5681 10.6949 11.7639C10.5768 11.8807 10.4587 11.9977 10.3408 12.1147C10.23 12.2247 10.119 12.3345 10.0079 12.444C9.94772 12.5035 9.88777 12.5631 9.82782 12.6228C9.79192 12.6581 9.75601 12.6934 9.71902 12.7298C9.68793 12.7605 9.65684 12.7913 9.62481 12.823C9.41785 13.0023 9.23464 13.0039 8.96722 12.9987C8.73631 12.9742 8.62949 12.8653 8.47551 12.7048C8.37323 12.4866 8.36244 12.2726 8.40473 12.0361C8.53157 11.8221 8.68909 11.6563 8.86662 11.4825C8.89511 11.4543 8.9236 11.426 8.95295 11.397C9.04654 11.3043 9.14044 11.212 9.23434 11.1197C9.29954 11.0552 9.36472 10.9908 9.42988 10.9263C9.60097 10.7572 9.77231 10.5883 9.94372 10.4195C10.1188 10.247 10.2936 10.0743 10.4684 9.90158C10.8111 9.56306 11.1541 9.22482 11.4972 8.88674C11.4407 8.88668 11.3841 8.88661 11.3259 8.88655C9.98357 8.88501 8.6413 8.88258 7.29903 8.87906C7.13383 8.87863 6.96864 8.87821 6.80345 8.87779C6.77056 8.8777 6.73767 8.87762 6.70379 8.87753C6.17121 8.87619 5.63863 8.87546 5.10605 8.87495C4.55962 8.87442 4.01319 8.87323 3.46676 8.87144C3.12956 8.87036 2.79235 8.86978 2.45514 8.86985C2.19662 8.86985 1.9381 8.86895 1.67958 8.86771C1.57349 8.86734 1.4674 8.86726 1.36131 8.86751C1.21662 8.86779 1.07197 8.86702 0.927282 8.86599C0.864108 8.86649 0.864108 8.86649 0.799658 8.867C0.555039 8.8639 0.405418 8.83962 0.216166 8.67103C-0.00544828 8.43725 0.0174342 8.19461 0.019818 7.89144C0.0195462 7.83855 0.0192744 7.78566 0.0189943 7.73117C0.0184201 7.58467 0.0186262 7.43822 0.0191662 7.29173C0.0195606 7.13362 0.0189519 6.97553 0.0184728 6.81742C0.0176981 6.50783 0.0178654 6.19825 0.0183704 5.88865C0.0187639 5.63704 0.0188173 5.38543 0.0186276 5.13381C0.0186009 5.098 0.0185742 5.06219 0.0185467 5.0253C0.018491 4.95255 0.0184346 4.8798 0.0183773 4.80705C0.0178805 4.12488 0.0184517 3.44272 0.0193879 2.76056C0.0201663 2.17522 0.0021129 6.57297 0.00130964 5.98764C0.00037728 5.30791 1.01653e-05 4.62819 0.000545169 3.94847C0.000600668 3.87599 0.00065546 3.80351 0.000709495 3.73103C0.000736373 3.69536 0.000763217 3.6597 0.00079091 3.62296C0.000941341 3.37165 0.000687459 3.12034 0.000277495 2.86903C-0.000211133 2.56276 -7.89659e-05 2.25651 0.000849064 1.95024C0.00130696 1.79398 0.00148625 1.63773 0.000910208 1.48146C0.000295307 1.3121 0.0010295 1.14275 0.00189982 0.97339C0.00151117 0.923962 0.00112255 0.874533 0.000722122 0.823607C0.00339206 0.556575 0.0167576 0.396372 0.198248 0.1938C0.427847 -0.0222449 0.682075 -0.0187933 0.98226 0.021232Z" fill="#555555" />
</svg>);

const SumitBtn = () => (<svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 39 39" fill="none">
<circle cx="19.5" cy="19.5" r="19.5" fill="#0BEC12" />
<path d="M19.4952 7.24787C19.5489 7.24616 19.6026 7.24444 19.658 7.24268C20.0765 7.32022 20.3861 7.63405 20.6763 7.92651C20.7135 7.96339 20.7508 8.00027 20.7891 8.03827C20.9129 8.16104 21.0361 8.2844 21.1593 8.40777C21.2483 8.49627 21.3373 8.58475 21.4264 8.67319C21.6675 8.91284 21.9081 9.15302 22.1486 9.39332C22.4005 9.64489 22.6528 9.89606 22.905 10.1473C23.3554 10.5961 23.8055 11.0453 24.2553 11.4947C24.663 11.9019 25.0711 12.3087 25.4795 12.7152C25.9543 13.1877 26.4289 13.6606 26.903 14.1338C27.1538 14.3841 27.4047 14.6343 27.6559 14.8843C27.892 15.1191 28.1276 15.3544 28.3629 15.59C28.4493 15.6764 28.5359 15.7627 28.6226 15.8488C28.741 15.9663 28.8587 16.0843 28.9764 16.2025C29.0109 16.2364 29.0453 16.2704 29.0808 16.3054C29.3578 16.5854 29.5278 16.8388 29.5283 17.2448C29.5179 17.6259 29.4268 17.8277 29.1498 18.0966C28.8558 18.2851 28.6083 18.3295 28.2652 18.2817C27.8127 18.1728 27.4625 17.785 27.1459 17.4654C27.102 17.4217 27.0581 17.3781 27.0129 17.3331C26.8692 17.1899 26.726 17.0462 26.5829 16.9024C26.4824 16.8021 26.3819 16.7017 26.2814 16.6015C26.0712 16.3917 25.8614 16.1816 25.6517 15.9714C25.3838 15.7026 25.1153 15.4343 24.8467 15.1662C24.5894 14.9095 24.3325 14.6524 24.0755 14.3954C24.0268 14.3468 23.9782 14.2982 23.928 14.2481C23.7895 14.1095 23.6512 13.9708 23.5129 13.8321C23.4724 13.7917 23.432 13.7514 23.3904 13.7098C23.3522 13.6714 23.3141 13.6331 23.2748 13.5935C23.2422 13.5609 23.2096 13.5282 23.176 13.4946C23.0744 13.3869 22.9776 13.2771 22.8808 13.1651C22.6586 12.9107 22.4217 12.6728 22.1817 12.4351C22.1366 12.3902 22.0915 12.3453 22.0451 12.2991C21.9026 12.1573 21.7598 12.0157 21.6171 11.8741C21.5198 11.7774 21.4226 11.6806 21.3253 11.5839C21.0882 11.348 20.8509 11.1124 20.6135 10.8768C20.6134 10.9523 20.6134 10.9523 20.6133 11.0294C20.6101 14.0121 20.606 16.9948 20.6007 19.9775C20.6001 20.3356 20.5995 20.6936 20.5989 21.0517C20.5988 21.1229 20.5986 21.1942 20.5985 21.2677C20.5965 22.4222 20.5952 23.5768 20.594 24.7313C20.5928 25.9158 20.5847 23.5316 20.5823 24.7161C20.5808 25.4471 20.5798 26.1781 20.5794 26.9091C20.5791 27.4103 20.5782 27.9114 20.5769 28.4125C20.5761 28.7017 20.5756 28.9909 20.5758 29.2802C20.576 29.545 20.5754 29.8098 20.5742 30.0747C20.5739 30.1704 20.5739 30.2662 20.5742 30.3619C20.5773 31.4686 20.5773 31.4686 20.3082 31.7726C19.9889 32.0534 19.739 32.0959 19.3242 32.0874C19.0278 32.0624 18.8829 31.9612 18.6763 31.7551C18.4592 31.4426 18.4262 31.1405 18.4256 30.7666C18.4253 30.7258 18.4251 30.6851 18.4249 30.6431C18.4243 30.5067 18.4245 30.3704 18.4246 30.2341C18.4244 30.1353 18.424 30.0364 18.4237 29.9376C18.4228 29.6662 18.4226 29.3948 18.4225 29.1234C18.4223 28.8307 18.4215 28.538 18.4207 28.2453C18.4195 27.7382 18.4186 27.2311 18.4181 26.724C18.4173 25.9908 18.4158 25.2576 18.4143 24.5244C18.4117 23.3349 18.416 25.7139 18.4143 24.5244C18.4126 23.3688 18.4107 22.2133 18.4085 21.0578C18.4083 20.9509 18.4083 20.9509 18.4081 20.8419C18.4074 20.4846 18.4067 20.1273 18.406 19.77C18.4002 16.8056 18.3953 13.8412 18.3908 10.8768C18.3537 10.9141 18.3166 10.9513 18.2784 10.9897C17.3753 11.8963 16.4714 12.8022 15.5666 13.7071C15.1291 14.1448 14.6918 14.5827 14.2552 15.0213C13.8746 15.4035 13.4935 15.7853 13.1118 16.1665C12.9098 16.3683 12.708 16.5704 12.5068 16.773C12.3173 16.9638 12.1271 17.154 11.9365 17.3437C11.8667 17.4133 11.7972 17.4832 11.7279 17.5533C11.6331 17.6493 11.5374 17.7443 11.4415 17.8392C11.4145 17.867 11.3874 17.8947 11.3596 17.9233C11.1193 18.1578 10.8518 18.2866 10.5139 18.3128C10.1366 18.2688 9.90996 18.1696 9.64961 17.8819C9.50763 17.6775 9.48758 17.5092 9.47944 17.2656C9.47672 17.2105 9.474 17.1555 9.47119 17.0987C9.53817 16.6776 9.85923 16.3674 10.1531 16.0776C10.1901 16.0404 10.2271 16.0033 10.2652 15.965C10.3883 15.8416 10.5121 15.7188 10.6358 15.5959C10.7246 15.5072 10.8133 15.4184 10.902 15.3296C11.1423 15.0892 11.3832 14.8493 11.6242 14.6096C11.8765 14.3584 12.1284 14.1068 12.3804 13.8554C12.8305 13.4062 13.2811 12.9575 13.7318 12.509C14.1402 12.1025 14.5481 11.6956 14.9558 11.2884C15.4297 10.8149 15.904 10.3417 16.3786 9.86899C16.6296 9.61892 16.8806 9.36875 17.1312 9.11828C17.3668 8.88293 17.6027 8.648 17.839 8.41337C17.9257 8.32719 18.0122 8.24087 18.0985 8.1544C18.2164 8.03642 18.3348 7.91897 18.4533 7.80163C18.4874 7.76728 18.5214 7.73293 18.5566 7.69754C18.8354 7.42327 19.091 7.25215 19.4952 7.24787Z" fill="white" />
</svg>);

const UNDERSTAND = ['이해했다', '성공했다'];

// 댓글 최대 표시 개수 (카드에서 항상 노출)
Expand Down Expand Up @@ -418,7 +423,7 @@ function QnAListPage({
className={styles.submitBtn}
onClick={e => handleCommentSubmit(e, question.id)}
>
↑
<SumitBtn />
</button>
</div>
)}
Expand All @@ -427,15 +432,15 @@ function QnAListPage({
</div>



<div className={styles.bottomCover} />
<div className={styles.newQuestionBar}>

{submitError && (
<p className={styles.errorMsg}>{submitError}</p>
)}

<div className={styles.newQuestionInputRow}>
<span className={styles.newQuestionPlus}>+</span>
<button className={styles.newQuestionPlus}>+</button>
<input
className={styles.newQuestionInput}
placeholder="질문을 남겨주세요..."
Expand All @@ -451,7 +456,7 @@ function QnAListPage({
onClick={handleNewQuestion}
disabled={isSubmitting}
>
{isSubmitting ? '⏳' : '↑'}
{isSubmitting ? '⏳' : <SumitBtn />}
</button>
</div>
</div>
Expand Down
122 changes: 82 additions & 40 deletions frontend/src/pages/qna/QnAListPage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

/* 상단 */
Expand Down Expand Up @@ -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%;
Expand All @@ -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 {
Expand Down Expand Up @@ -174,6 +187,7 @@
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;

}

Expand All @@ -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;
}

Expand Down Expand Up @@ -274,7 +289,7 @@
.questionImage {
width: 100%;
border-radius: 8px;
margin-top: 0.65rem;
margin-top: 19px;
object-fit: cover;
display: block;
}
Expand All @@ -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;
Expand All @@ -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%;


}
Expand Down Expand Up @@ -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;
Expand All @@ -426,48 +460,56 @@
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 {
flex: 1;
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);
Expand Down
Loading