Skip to content
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

[졸업학점계산기] 엑셀 업로더 툴팁 구현 #635

Merged
merged 3 commits into from
Jan 19, 2025
Merged

[졸업학점계산기] 엑셀 업로더 툴팁 구현 #635

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4e4ca1d
feat: 졸업학점 계산기 공지 추가
Jan 15, 2025
bf2f344
feat: 엑셀 업로더 UI 구현
Jan 17, 2025
b54cfc2
refactor: BEM 수정
Jan 19, 2025
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
3 changes: 3 additions & 0 deletions src/assets/svg/upload-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 14 additions & 3 deletions src/pages/GraduationCalculatorPage/GraduationCalculatorPage.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,24 @@

&__description {
display: flex;
width: 900px;
flex-direction: column;
height: 68px;
border: none;
border-radius: 16px;
background-color: #fff;
font-family: Pretendard, sans-serif;
font-size: 20px;
font-weight: 500;
box-sizing: border-box;
padding: 10px 0 10px 24px;

&--title {
font-size: 20px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

title이 BEM 컨벤션에서의 modifier의 역할을 하는 건가요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오..! 생각해보니 -title 이 더 맞는것 같아요! 수정했습니다!

font-style: normal;
font-weight: 500;
line-height: normal;

& > strong {
color: #3b82f6;
}
}
}
}
Copy link
Contributor

@Yejin0070 Yejin0070 Jan 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

구웃...ㅎㅎ ☺️

83 changes: 82 additions & 1 deletion src/pages/GraduationCalculatorPage/components/ExcelUploader/ExcelUploader.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,91 @@
@use "utils/scss/media.scss" as media;

.excel-uploader {
position: relative;
display: flex;
width: 403px;
flex-direction: column;
align-items: center;
height: 192px;
border: none;
border-radius: 16px;
background-color: #eee;
padding: 0 12px;

&__description {
display: flex;
margin-top: 12px;
width: 100%;
justify-content: right;

& > svg {
width: 30px;
}
}

&__button {
display: flex;
flex-direction: column;
width: 180px;
justify-content: center;
align-items: center;
padding: 9px 0;
gap: 5px;

& > svg {
width: 40px;
}

& > span {
color: #727272;
font-family: Pretendard, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 500;
}
}

&__tooltip {
z-index: 10;
position: absolute;
top: -85.5px;
right: -101px;
display: flex;
width: fit-content;
gap: 8px;
border-radius: 8px;
background: #fafafa;
padding: 16px;
box-shadow: 0 1px 4px 0 rgba(0 0 0 / 4%), 0 4px 10px 0 rgba(0 0 0 / 8%);

&-content {
text-align: left;
color: #1F1F1F;
font-family: Pretendard, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 160%;

& > strong {
font-weight: 600;
}
}

&-close {
width: 24px;
height: 24px;
cursor: pointer;

& > svg > path {
fill: #cacaca;
}
}

&-asset {
position: absolute;
width: 100%;
margin: 0 auto;
bottom: -13px;
right: -125px;
}
}
}
49 changes: 48 additions & 1 deletion src/pages/GraduationCalculatorPage/components/ExcelUploader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,55 @@
/* eslint-disable jsx-a11y/control-has-associated-label */
import QuestionMarkIcon from 'assets/svg/question-mark-icon.svg';
import UploadIcon from 'assets/svg/upload-icon.svg';
import useBooleanState from 'utils/hooks/state/useBooleanState';
import CloseIcon from 'assets/svg/common/close/close-icon-grey.svg';
import BubbleTailBottom from 'assets/svg/bubble-tail-bottom.svg';
import styles from './ExcelUploader.module.scss';

function ExcelUploader() {
const [isTooltipOpen, openTooltip, closeTooltip] = useBooleanState(false);
const handleTooltipContent = () => {
openTooltip();
};

const handleTooltipCloseButtonClick = () => {
closeTooltip();
};
return (
<div className={styles['excel-uploader']}> </div>
<div className={styles['excel-uploader']}>
<button
type="button"
onClick={handleTooltipContent}
className={styles['excel-uploader__description']}
>
<QuestionMarkIcon />
</button>
<button type="submit" className={styles['excel-uploader__button']}>
<UploadIcon />
<span>엑셀파일 추가하기</span>
</button>

{isTooltipOpen && (
<div className={styles['excel-uploader__tooltip']}>
<div className={styles['excel-uploader__tooltip-content']}>
아우누리에서 받은 엑셀 파일을
<br />
<strong>드래그&드랍</strong>
하거나 이곳을
<strong> 클릭해서</strong>
<br />
경로를 지정해 주세요.
</div>
<button type="button" aria-label="close" className={styles['excel-uploader__tooltip-close']} onClick={handleTooltipCloseButtonClick}>
<CloseIcon />
</button>
<div className={styles['excel-uploader__tooltip-asset']}>
<BubbleTailBottom />
</div>
</div>
Comment on lines +42 to +49
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

지금 방법도 좋은데 혹시 이런 방식은 어떤 것 같나요?
툴팁 요소가 어차피 absolute 하니까, tooltip-asset 요소의 자식으로 둔 다음, tooltip-asset에 relative를 주면, top 위치 잡기 편할 것 같아요!
만약 이렇게 한다면 tooltip-asset를 감싸는 새로운 부모 요소에 다시 absolute를 줄 것 같아요.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

만약 이렇게 한다면 tooltip-asset를 감싸는 새로운 부모 요소에 다시 absolute를 줄 것 같아요.

혹시 해당 부분을 다시 설명해주실 수 있으신가요..?
tooltip-asset 부모요소에 absolute 을 주고 tooltip-asset 에 relative, 툴팁에 absolute 을 할당하는 방식을 말하시는 걸까요..?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네네 그게 제 의도가 맞습니다!

)}

</div>
);
}

Expand Down
10 changes: 9 additions & 1 deletion src/pages/GraduationCalculatorPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,15 @@ function GraduationCalculatorPage() {
<ExcelUploader />
</div>
<div className={styles.content__results}>
<div className={styles.content__description}> </div>
<div className={styles.content__description}>
<p className={styles['content__description--title']}>
<strong>아우누리</strong>
에서 받은 엑셀을 넣을 수 있어요.
</p>
<p className={styles['content__description--title']}>
이수구분 등 잘못된 정보를 정정하면 아래의 그래프에 바로 적용돼요.
</p>
</div>
<GeneralCourse />
<CreditChart />
</div>
Expand Down
Loading