Skip to content

Commit fedfa94

Browse files
nyeonseoknyeonseok
authored
Merge pull request #23 from sw-security-web-app/22-scrum-46-chatMainPage
SCRUM-46 채팅메인 사이드바 컴포넌트화, 라우팅 경로 설정 완료, 전체적인 레이아웃 설정 완료
2 parents 6ab8452 + 9f35ee9 commit fedfa94

File tree

13 files changed

+427
-49
lines changed

13 files changed

+427
-49
lines changed

‎sw-security/app/components/chatBtn.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import chatBtnStyle from "../css/chatBtn.module.css";
2+
3+
type Props = {
4+
onClick: () => void;
5+
};
6+
7+
export default function ChatBtn({ onClick }: Props) {
8+
return (
9+
<button className={chatBtnStyle.btnContainer} onClick={onClick}>
10+
<img src="../../img/chatSubmit.svg" alt="chatSubmit" />
11+
</button>
12+
);
13+
}

‎sw-security/app/css/admin.module.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ table {
136136
border-radius: 1rem;
137137
border-collapse: separate;
138138
border-spacing: 0;
139-
border: 1px solid rgb(183, 189, 199, 0.5);
139+
border: 0.1rem solid rgb(183, 189, 199, 0.5);
140140
overflow: hidden;
141141
margin-top: 2rem;
142142
}
@@ -239,7 +239,7 @@ td {
239239
background-color: transparent;
240240
background-color: #2a2c2f;
241241
color: #ffffff;
242-
border-radius: 6px;
242+
border-radius: 0.33rem;
243243
font-size: 0.85rem;
244244
height: 2.22rem;
245245
width: 2.22rem;
@@ -271,7 +271,7 @@ td {
271271
}
272272
.mainTitle span {
273273
margin-left: 0.6rem;
274-
line-height: 46px;
274+
line-height: 2.6rem;
275275
}
276276
.subTitle {
277277
font-size: 1.2rem;
@@ -287,7 +287,7 @@ td {
287287
.inputDiv {
288288
display: flex;
289289
flex-direction: column;
290-
border-bottom: 2px solid #e5e9f2;
290+
border-bottom: 0.1rem solid #e5e9f2;
291291
height: 85%;
292292
align-items: center;
293293
width: 100%;
@@ -298,10 +298,10 @@ textarea {
298298
width: 100%;
299299
box-sizing: border-box;
300300
height: 65%;
301-
border: 2px solid #ececf2;
301+
border: 0.1rem solid #ececf2;
302302
border-radius: 1rem;
303303
outline: none;
304-
padding: 20px 20px;
304+
padding: 1.1rem 1.1rem;
305305
font-size: 1.1rem;
306306
}
307307
textarea:focus {
@@ -318,7 +318,7 @@ textarea::placeholder {
318318
height: 3rem;
319319
background-color: #ffffff;
320320
border-radius: 0.6rem;
321-
border: 2px solid #ececf2;
321+
border: 0.1rem solid #ececf2;
322322
display: flex;
323323
align-items: center;
324324
justify-content: center;
@@ -337,7 +337,7 @@ textarea::placeholder {
337337
padding: 0;
338338
}
339339
.uploadBtnDiv label img {
340-
margin-right: 10px;
340+
margin-right: 0.6rem;
341341
}
342342
.uploadBtn {
343343
display: flex;

‎sw-security/app/css/chatBtn.module.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.btnContainer {
2+
background-color: #1b1c1e;
3+
width: 3.39rem;
4+
height: 3.39rem;
5+
border-radius: 100%;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
border: none;
10+
position: absolute;
11+
right: 0.4rem;
12+
top: 50%;
13+
transform: translateY(-50%);
14+
cursor: pointer;
15+
}

‎sw-security/app/css/chatMain.module.css

Lines changed: 178 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,66 +4,228 @@
44
/* min-height: 100dvh; */
55
/* overflow: hidden; */
66
/* position: relative; */
7+
overflow: hidden;
8+
position: relative;
79
}
810
.grid {
9-
background-color: red;
10-
height: 100%;
11+
/* background-color: red; */
12+
height: 100vh;
1113
display: grid;
12-
grid-template-columns: 1fr 7fr;
13-
/* overflow: hidden; */
14+
grid-template-columns: 14rem auto;
15+
overflow: hidden;
1416
}
1517
.sideBar {
1618
background-color: #1b1c1e;
1719
display: flex;
1820
flex-direction: column;
19-
padding: 30px 20px;
20-
/* height: 100%; */
21+
padding: 1.7rem 1.1rem;
22+
height: 100vh;
23+
box-sizing: border-box; /* 패딩 포함 높이 보장 */
2124
}
25+
2226
.topItemContainer {
2327
display: flex;
2428
flex-direction: column;
2529
height: 25%;
2630
/* background-color: red; */
2731
justify-content: space-between;
28-
padding-bottom: 30px;
29-
border-bottom: 1px #323232 solid;
32+
padding-bottom: 1.7rem;
33+
border-bottom: 0.1rem #323232 solid;
3034
}
3135
.itemDiv {
3236
display: flex;
3337
flex-direction: row;
3438
align-items: center;
3539
}
3640
.itemText {
37-
font-size: 20px;
41+
font-size: 1.1rem;
3842
color: #ffffff;
3943
font-weight: 600;
40-
margin-left: 10px;
44+
margin-left: 0.6rem;
4145
}
4246
.chatHistoryConatainer {
4347
display: flex;
4448
flex-direction: column;
4549
height: 60%;
4650
/* background-color: blue; */
47-
padding-top: 30px;
48-
border-bottom: 1px #323232 solid;
51+
padding-top: 1.7rem;
52+
border-bottom: 0.1rem #323232 solid;
4953
}
5054
.bottomItemContainer {
5155
height: 15%;
5256
/* background-color: green; */
57+
position: relative;
58+
}
59+
.bottomItemContainer .itemDiv2:first-child {
60+
margin-bottom: 2.8rem;
5361
}
5462
.chatTitle {
5563
color: #b7bdc7;
56-
font-size: 18px;
64+
font-size: 1rem;
5765
font-weight: 500;
58-
margin-bottom: 25px;
66+
margin-bottom: 1.4rem;
5967
}
6068
.itemDiv2 {
6169
display: flex;
6270
flex-direction: row;
6371
align-items: center;
64-
margin-top: 25px;
72+
/* margin-top: 25px; */
73+
position: absolute;
74+
bottom: 0;
75+
}
76+
.itemDiv2 img {
77+
height: 1.3rem;
78+
width: 1.3rem;
6579
}
6680
.itemText2 {
6781
color: #b7bdc7;
68-
font-size: 18px;
82+
font-size: 1rem;
83+
margin-left: 0.6rem;
84+
}
85+
.contentContainer {
86+
/* background-color: red; */
87+
height: 100%;
88+
display: flex;
89+
justify-content: center;
90+
overflow-y: auto;
91+
}
92+
93+
/*ChatMain페이지*/
94+
.mainContainer {
95+
/* background-color: blue; */
96+
height: 100%;
97+
width: 87%;
98+
padding: 4.4rem 0;
99+
box-sizing: border-box;
100+
}
101+
.chatHistoryConatainer {
102+
flex-grow: 1; /* 중간 컨테이너가 남은 공간을 차지하도록 설정 */
103+
overflow-y: auto; /* 내용이 많으면 스크롤 가능하도록 */
104+
}
105+
106+
.topDiv {
107+
display: flex;
108+
flex-direction: row;
109+
justify-content: space-between;
110+
/* background-color: red; */
111+
padding-bottom: 1.2rem;
112+
border-bottom: 0.1rem solid #e3e3e3;
113+
}
114+
.leftDiv {
115+
display: flex;
116+
flex-direction: row;
117+
align-items: center;
118+
}
119+
.historyText {
120+
font-size: 2rem;
121+
font-weight: bold;
122+
color: #1b1c1e;
123+
margin-left: 0.6rem;
124+
}
125+
.newChatDiv {
126+
background-color: #1b1c1e;
127+
height: 2.67rem;
128+
width: 7.8rem;
129+
display: flex;
130+
align-items: center;
131+
justify-content: center;
132+
border-radius: 0.67rem;
133+
transition: all 0.3s ease;
134+
}
135+
.newChatDiv:hover {
136+
background-color: #333436;
137+
}
138+
139+
.newChatDiv:active {
140+
background-color: #2b2c2f;
141+
transform: scale(0.95);
142+
}
143+
144+
.newChatDiv img {
145+
width: 0.9rem;
146+
height: 0.9rem;
147+
}
148+
.newChatText {
149+
color: #ffffff;
150+
font-size: 0.9rem;
151+
margin-left: 0.8rem;
152+
font-weight: 700;
153+
}
154+
155+
/*Chat페이지*/
156+
.aiContainer {
157+
/* background-color: blue; */
158+
height: 100%;
159+
width: 87%;
160+
padding: 4.4rem 0 2.2rem 0;
161+
box-sizing: border-box;
162+
display: flex;
163+
flex-direction: column;
164+
}
165+
.chatContainer {
166+
width: 100%;
167+
flex-grow: 1; /* flex: 1 또는 flex-grow: 1로 남은 공간을 차지하도록 설정 */
168+
overflow-y: auto;
169+
box-sizing: border-box;
170+
}
171+
172+
.messageDiv {
173+
display: flex;
174+
flex-direction: column;
175+
}
176+
.onlyAI {
177+
display: flex;
178+
flex-direction: row;
179+
align-items: center;
180+
}
181+
.message {
182+
/* background-color: green; */
183+
/* width: 150px; */
184+
/* height: 50px; */
185+
max-width: 70%;
186+
border-bottom-right-radius: 1.7rem;
187+
border-bottom-left-radius: 1.7rem;
188+
padding: 0.8rem 1.1rem;
189+
font-size: 1rem;
190+
font-weight: 500;
191+
}
192+
.user {
193+
background-color: #f4ddff;
194+
color: #0d0d0d;
195+
align-self: flex-end;
196+
text-align: right;
197+
border-top-left-radius: 1.7rem;
198+
}
199+
200+
.ai {
201+
background-color: #ececf2;
202+
color: #0d0d0d;
203+
align-self: flex-start;
204+
text-align: left;
205+
border-top-right-radius: 1.7rem;
206+
margin-left: 3.64rem;
207+
margin-top: 0.6rem;
208+
}
209+
.inputContainer {
210+
width: 100%;
211+
height: 3.9rem;
212+
position: relative;
213+
}
214+
.input {
215+
width: 100%;
216+
border-radius: 5.6rem;
217+
height: 100%;
218+
box-sizing: border-box;
219+
padding-left: 1.3rem;
220+
padding-right: 4rem;
221+
background-color: #ffffff;
222+
border: 0.1rem solid #ececf2;
223+
font-size: 1.1rem;
224+
caret-color: #5e6269;
225+
color: #5e6269;
226+
}
227+
.input ::placeholder {
228+
color: #5e6269;
229+
font-weight: 500;
230+
font-size: 1.1rem;
69231
}

‎sw-security/app/css/styles.module.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
html {
22
font-size: 18px;
33
}
4+
a {
5+
text-decoration: none;
6+
}

0 commit comments

Comments
 (0)