Skip to content

Commit

Permalink
Merge pull request #53 from sangmaaaaan/style/font-size
Browse files Browse the repository at this point in the history
Style: fix font size and text
  • Loading branch information
swgvenghy authored Oct 2, 2024
2 parents 5d29fe3 + 15a339d commit a2bf531
Show file tree
Hide file tree
Showing 6 changed files with 47 additions and 23 deletions.
3 changes: 2 additions & 1 deletion src/hooks/use-preset-button.hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ const usePresetButton = () => {

const handleReferenceButtonClick = (references: referenceState[]) => {
let content = '답변 출처를 알려드릴게요!\n';
if (references === undefined || references.length === 0) {
// references가 null, undefined, 또는 길이가 0인 경우 체크
if (!references || references.length === 0) {
addMessage({ content: '출처 정보가 없습니다.', role: 'system' });
return;
}
Expand Down
4 changes: 2 additions & 2 deletions src/ui/components/atom/chat-card/chat-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ const ChatCard = ({ content, role }: ChatCardProps) => {
<div
className={cn('flex w-auto rounded-md bg-white px-5 py-3 text-black', {
'justify-end bg-primary-blue text-white': role === 'user',
'justify-start text-left': role !== 'user',
'max-w-full justify-start text-left mobile:max-w-full desktop:max-w-[2/3]': role !== 'user', // 모바일에서는 w-auto,
})}
>
<div className="font-pretendard text-sm font-normal">
<div className="text-md font-pretendard font-normal">
{content === 'loading' ? <Loader /> : <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>}
</div>
</div>
Expand Down
10 changes: 7 additions & 3 deletions src/ui/components/atom/preset/preset-button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,13 @@ interface PresetButtonProps {

const PresetButton = ({ onClick, isSelected, disabled, children }: PresetButtonProps) => {
const buttonClasses = cn(
'cursor-pointer rounded-full border border-gray text-black bg-white px-4 py-2 ',
isSelected ? 'bg-primary-blue text-white border-primary-blue' : 'bg-white text-black',
disabled ? 'bg-border-gray cursor-not-allowed text-border-gray bg-text-white' : '',
'cursor-pointer text-base rounded-full border border-gray text-black bg-white px-4 py-2 transition-colors duration-200',
isSelected
? 'bg-primary-blue text-white border-gray'
: 'bg-white text-black hover:bg-primary-blue hover:text-white',
disabled
? 'bg-border-gray cursor-not-allowed text-border-gray bg-text-white hover:text-border-gray hover:bg-text-white'
: '',
);

return (
Expand Down
43 changes: 31 additions & 12 deletions src/ui/components/molecule/chat-section/chat-section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,19 @@ const ChatSection: React.FC = () => {
const showCategoryStatus = () => {
let contentMessage = '';
if (!activeSusi && !activeJeongsi && !activePyeonip) {
contentMessage = '현재 모든 카테고리 이용이 가능합니다.';
contentMessage = '현재는 모든 카테고리 이용이 가능해요.';
} else if (!activeSusi && activeJeongsi && activePyeonip) {
contentMessage = '현재 수시 카테고리만 이용 가능합니다.';
contentMessage = '현재는 수시 카테고리만 이용 가능해요.';
} else if (activeSusi && !activeJeongsi && activePyeonip) {
contentMessage = '현재 정시 카테고리만 이용 가능합니다.';
contentMessage = '현재는 정시 카테고리만 이용 가능해요.';
} else if (activeSusi && activeJeongsi && !activePyeonip) {
contentMessage = '현재 편입 카테고리만 이용 가능합니다.';
contentMessage = '현재는 편입 카테고리만 이용 가능해요.';
} else if (!activeSusi && !activeJeongsi && activePyeonip) {
contentMessage = '현재 수시, 정시 카테고리만 이용 가능합니다.';
contentMessage = '현재는 수시, 정시 카테고리만 이용 가능해요.';
} else if (!activeSusi && activeJeongsi && !activePyeonip) {
contentMessage = '현재 수시, 편입 카테고리만 이용 가능합니다.';
contentMessage = '현재는 수시, 편입 카테고리만 이용 가능해요';
} else if (activeSusi && !activeJeongsi && !activePyeonip) {
contentMessage = '현재 정시, 편입 카테고리만 이용 가능합니다.';
contentMessage = '현재는 정시, 편입 카테고리만 이용 가능해요.';
}

if (contentMessage) {
Expand Down Expand Up @@ -101,16 +101,24 @@ const ChatSection: React.FC = () => {
<div className="max-h-100vh w-full overflow-y-auto px-4 pb-24 pt-16">
{contextHolder}
<ChatCard
content={`안녕하세요 입학처 챗봇 MARU-EGG입니다!
궁금하신 내용 안내 도와드리겠습니다.
알아보고 싶은 전형을 선택해주세요!`}
content={`안녕하세요.
명지대학교 입학 AI챗봇 마루에그입니다!
문의사항은 아래 전형 중 하나를 선택해주시면
안내 도와드릴게요!`}
role="system"
/>
<TypePresetButtons />
{type && <ChatCard role="user" content={type === 'SUSI' ? '수시' : type === 'JEONGSI' ? '정시' : '편입'} />}
{type && (
<>
<ChatCard content="알고싶은 내용을 선택해주세요" role="system" />
<ChatCard
content={`${
type === 'SUSI' ? '수시' : type === 'JEONGSI' ? '정시' : '편입'
}와 관련하여 궁금하신 점이 있으신가요?
아래에서 관련 버튼을 선택하여
자세한 내용을 확인해주세요!`}
role="system"
/>
<CategoryPresetButtons />
</>
)}
Expand All @@ -127,7 +135,18 @@ const ChatSection: React.FC = () => {
/>
)}
{type && category && (
<ChatCard role="system" content="안녕하세요 입학처 챗봇 MARU-EGG입니다! 궁금하신 내용 안내 도와드리겠습니다." />
<ChatCard
role="system"
content={`${type === 'SUSI' ? '수시' : type === 'JEONGSI' ? '정시' : '편입'}에서 ${
category === 'PASSING_RESULT'
? '전년도 입시결과'
: category === 'ADMISSION_GUIDELINE'
? '모집 관련'
: '기출문제'
}을(를) 선택하셨네요!
아래 버튼을 선택하여 더 자세한 내용을 알아보거나
직접 질문해보세요!`}
/>
)}
{messages.map((msg, index) => (
<ChatCard key={index} content={msg.content} role={msg.role} />
Expand Down
8 changes: 4 additions & 4 deletions src/ui/components/molecule/menu-drawer/menu-drawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const MenuDrawer = ({ open, onClose }: MenuDrawerProps) => {
closable={false}
open={open}
onClose={onClose}
height="260px"
height="300px"
rootClassName="absolute mx-auto my-auto desktop:max-w-[390px] desktop:max-h-[780px] desktop:rounded-t-3xl desktop:rounded-b-3xl mobile:max-w-full mobile:max-h-full mobile:rounded-none mobile:shadow-none"
rootStyle={{ width: '100%', overflow: 'hidden' }}
>
Expand All @@ -81,19 +81,19 @@ const MenuDrawer = ({ open, onClose }: MenuDrawerProps) => {
</div>
<div
onClick={() => window.open(FAQUrl, '_blank', 'noopener, noreferrer')}
className="w-full cursor-pointer p-2 text-start font-pretendard text-sm hover:rounded-lg hover:bg-[#F4F4F4]"
className="w-full cursor-pointer p-2 text-start font-pretendard text-base hover:rounded-lg hover:bg-[#F4F4F4]"
>
{selectedButton === 'PYEONIP' ? '편입' : selectedButton === 'JEONGSI' ? '정시' : '수시'} FAQ 바로가기
</div>
<div
onClick={() => window.open(admissionResultsUrl, '_blank', 'noopener, noreferrer')}
className="w-full cursor-pointer p-2 text-start font-pretendard text-sm hover:rounded-lg hover:bg-[#F4F4F4]"
className="w-full cursor-pointer p-2 text-start font-pretendard text-base hover:rounded-lg hover:bg-[#F4F4F4]"
>
{selectedButton === 'PYEONIP' ? '편입' : selectedButton === 'JEONGSI' ? '정시' : '수시'} 입시결과 바로가기
</div>
<div
onClick={() => window.open(admissionGuideUrl, '_blank', 'noopener, noreferrer')}
className="w-full cursor-pointer p-2 text-start font-pretendard text-sm hover:rounded-lg hover:bg-[#F4F4F4]"
className="w-full cursor-pointer p-2 text-start font-pretendard text-base hover:rounded-lg hover:bg-[#F4F4F4]"
>
{selectedButton === 'PYEONIP' ? '편입' : selectedButton === 'JEONGSI' ? '정시' : '수시'} 모집요강 바로가기
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/user-domain/question-preset-buttons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const QuestionPresetButtons = () => {
const { handleReferenceButtonClick, handleButtonClick } = usePresetButton();

return (
<div>
<div className="grid w-full grid-cols-1 gap-2 mobile:w-2/3 mobile:grid-cols-1 desktop:grid desktop:w-full desktop:grid-cols-2 desktop:gap-2">
{!referenceButtonDisabled && (
<PresetButton onClick={() => handleReferenceButtonClick(lastReference)}>👆 출처를 알고싶어요</PresetButton>
)}
Expand Down

0 comments on commit a2bf531

Please sign in to comment.