Skip to content

Commit 6237419

Browse files
author
yeonuk-lim
committed
CloudScape UI 개선 작업
1 parent 7ff9850 commit 6237419

File tree

6 files changed

+99
-116
lines changed

6 files changed

+99
-116
lines changed

‎src/components/Bot.tsx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from 'react';
22
import {
33
Box,
44
Button,
5+
Container,
56
Header,
67
SpaceBetween,
78
Textarea,
@@ -36,35 +37,35 @@ export function Bot({ transcript }: BotProps) {
3637
};
3738

3839
return (
39-
<Box>
40-
<SpaceBetween size="m">
40+
<Container
41+
header={
4142
<Header
4243
variant="h3"
4344
description="Ask questions about this video content"
4445
>
4546
Ask AI Assistant
4647
</Header>
48+
}
49+
>
50+
<SpaceBetween size="s">
51+
<Textarea
52+
placeholder="Ask a question about this video content..."
53+
value={query}
54+
onChange={({ detail }) => setQuery(detail.value)}
55+
rows={3}
56+
/>
4757

48-
<SpaceBetween size="s">
49-
<Textarea
50-
placeholder="Ask a question about this video content..."
51-
value={query}
52-
onChange={({ detail }) => setQuery(detail.value)}
53-
rows={3}
54-
/>
55-
56-
<Box>
57-
<Button
58-
variant="primary"
59-
onClick={handleAskAI}
60-
disabled={!query.trim() || isLoading}
61-
loading={isLoading}
62-
iconName="gen-ai"
63-
>
64-
Ask AI
65-
</Button>
66-
</Box>
67-
</SpaceBetween>
58+
<Box>
59+
<Button
60+
variant="primary"
61+
onClick={handleAskAI}
62+
disabled={!query.trim() || isLoading}
63+
loading={isLoading}
64+
iconName="gen-ai"
65+
>
66+
Ask AI
67+
</Button>
68+
</Box>
6869

6970
{response && (
7071
<Box
@@ -85,6 +86,6 @@ export function Bot({ transcript }: BotProps) {
8586
</Box>
8687
)}
8788
</SpaceBetween>
88-
</Box>
89+
</Container>
8990
);
9091
}

‎src/components/CommentForm.tsx‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export const CommentForm = ({
112112
return (
113113
<form onSubmit={submitHandler}>
114114
<Form>
115-
<SpaceBetween size="m">
115+
<SpaceBetween size="l">
116116
<SpaceBetween size="s">
117117
<Box>
118118
<Button
@@ -163,33 +163,22 @@ export const CommentForm = ({
163163

164164
<SpaceBetween size="s">
165165
<Header variant="h4">Add Comment</Header>
166+
<Textarea
167+
placeholder="Share your thoughts about this class..."
168+
onChange={({ detail }) => setPost(detail.value)}
169+
value={post}
170+
rows={Math.max(3, post.split(/\r\n|\r|\n/).length)}
171+
/>
166172

167-
<SpaceBetween size="s">
168-
<Textarea
169-
placeholder="Share your thoughts about this class..."
170-
onChange={({ detail }) => setPost(detail.value)}
171-
value={post}
172-
rows={Math.max(3, post.split(/\r\n|\r|\n/).length)}
173-
/>
174-
175-
<SpaceBetween direction="horizontal" size="s">
176-
<Button
177-
formAction="none"
178-
variant="link"
179-
onClick={cancelHandler}
180-
disabled={isGenerating}
181-
>
182-
Clear
183-
</Button>
184-
<Button
185-
formAction="submit"
186-
variant="primary"
187-
disabled={isGenerating || !post.trim()}
188-
>
189-
Post Comment
190-
</Button>
191-
</SpaceBetween>
192-
</SpaceBetween>
173+
<Box float="right">
174+
<Button
175+
formAction="submit"
176+
variant="primary"
177+
disabled={isGenerating || !post.trim()}
178+
>
179+
Post Comment
180+
</Button>
181+
</Box>
193182
</SpaceBetween>
194183
</SpaceBetween>
195184

‎src/components/CommentItem.tsx‎

Lines changed: 28 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -55,40 +55,33 @@ export const Comment = ({
5555
};
5656

5757
return (
58-
<Box
59-
padding="s"
60-
style={{
61-
border: '1px solid #e9ebed',
62-
borderRadius: '8px',
63-
backgroundColor: '#fafbfc'
64-
}}
65-
>
66-
<SpaceBetween direction="vertical" size="s">
67-
<Box>
68-
<SpaceBetween direction="horizontal" size="s" alignItems="center">
69-
<Box variant="small" color="text-body-secondary">
70-
{moment(comment.updatedAt).fromNow()}
71-
</Box>
72-
<Button
73-
iconName="remove"
74-
variant="icon"
75-
onClick={() => setConfirmVisible(true)}
76-
ariaLabel="Delete comment"
77-
/>
78-
</SpaceBetween>
79-
</Box>
80-
81-
<Box>
82-
<TextContent>
83-
<div style={{
84-
wordBreak: 'break-word',
85-
lineHeight: '1.5'
86-
}}>
87-
<NewLineToBr>{comment.content || ''}</NewLineToBr>
88-
</div>
89-
</TextContent>
90-
</Box>
91-
</SpaceBetween>
58+
<div style={{
59+
padding: '12px 0',
60+
borderBottom: '1px solid #eee'
61+
}}>
62+
<div style={{
63+
fontSize: '13px',
64+
color: '#666',
65+
marginBottom: '4px',
66+
display: 'flex',
67+
justifyContent: 'space-between',
68+
alignItems: 'center'
69+
}}>
70+
<span>{moment(comment.updatedAt).fromNow()}</span>
71+
<Button
72+
iconName="remove"
73+
variant="icon"
74+
onClick={() => setConfirmVisible(true)}
75+
ariaLabel="Delete"
76+
/>
77+
</div>
78+
<div style={{
79+
fontSize: '14px',
80+
lineHeight: '1.4',
81+
wordBreak: 'break-word'
82+
}}>
83+
<NewLineToBr>{comment.content || ''}</NewLineToBr>
84+
</div>
9285

9386
<Modal
9487
onDismiss={() => setConfirmVisible(false)}
@@ -120,6 +113,6 @@ export const Comment = ({
120113
<p>Are you sure you want to delete this comment? This action cannot be undone.</p>
121114
</TextContent>
122115
</Modal>
123-
</Box>
116+
</div>
124117
);
125118
};

‎src/components/Comments.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -93,34 +93,36 @@ export function Comments({ classId }: CommentsProps) {
9393
}, []);
9494

9595
return (
96-
<Container header={<Header variant='h3'>Comments & AI Summary</Header>}>
97-
<SpaceBetween size="l">
96+
<Container
97+
header={
98+
<Header
99+
variant="h3"
100+
counter={comments.length > 0 ? `(${comments.length})` : undefined}
101+
description="Share your thoughts and engage with other learners"
102+
>
103+
Comments
104+
</Header>
105+
}
106+
>
107+
<SpaceBetween size="m">
98108
<CommentForm
99109
classId={classId}
100110
createCommentApi={createCommentApi}
101111
/>
102112

103-
<SpaceBetween size="s">
104-
<Header variant="h4" description={`${comments.length} comments`}>
105-
Discussion
106-
</Header>
107-
108-
<SpaceBetween size="s">
109-
{comments.length > 0 ? (
110-
comments
111-
.filter(comment => comment.classId === classId)
112-
.map(comment => (
113-
<Comment
114-
key={comment.id}
115-
comment={comment}
116-
deleteCommentApi={deleteCommentApi}
117-
/>
118-
))
119-
) : (
120-
<NoComment />
121-
)}
122-
</SpaceBetween>
123-
</SpaceBetween>
113+
{comments.length > 0 ? (
114+
comments
115+
.filter(comment => comment.classId === classId)
116+
.map(comment => (
117+
<Comment
118+
key={comment.id}
119+
comment={comment}
120+
deleteCommentApi={deleteCommentApi}
121+
/>
122+
))
123+
) : (
124+
<NoComment />
125+
)}
124126
</SpaceBetween>
125127
</Container>
126128
);

‎src/pages/catalog.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,11 @@ export default function Catalog(props: any) {
6464
id: course.id,
6565
label: course.name || "Unknown Course",
6666
content: (
67-
<Container>
68-
{(activeClass && activeClass != null && activeClass.class_flag != null && activeClass.class_flag <= 0) ? (
69-
<Class activeClass={activeClass} userName={props.user} userId={props.uid} />
70-
) : (
71-
<ClassCatalog activeCourse={course} setActiveClass={setActiveClass} />
72-
)}
73-
</Container>
67+
(activeClass && activeClass != null && activeClass.class_flag != null && activeClass.class_flag <= 0) ? (
68+
<Class activeClass={activeClass} userName={props.user} userId={props.uid} />
69+
) : (
70+
<ClassCatalog activeCourse={course} setActiveClass={setActiveClass} />
71+
)
7472
)
7573
}))}
7674
/>

‎src/pages/profile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default function ProfilePage({ user, email, attributes }: ProfilePageProp
8989
width: "120px",
9090
height: "120px",
9191
borderRadius: "8px",
92-
objectFit: "cover",
92+
objectFit: "contain",
9393
border: "2px solid #e9ebed"
9494
}}
9595
/>

0 commit comments

Comments
 (0)