diff --git a/src/assets/icons/icon_arrow_right_more.svg b/src/assets/icons/icon_arrow_right_more.svg new file mode 100644 index 0000000..f9cd5b5 --- /dev/null +++ b/src/assets/icons/icon_arrow_right_more.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/icon_reload.svg b/src/assets/icons/icon_reload.svg new file mode 100644 index 0000000..9fc1b5a --- /dev/null +++ b/src/assets/icons/icon_reload.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/index.tsx b/src/assets/index.tsx index c9b3be7..8caa846 100644 --- a/src/assets/index.tsx +++ b/src/assets/index.tsx @@ -17,3 +17,5 @@ export { ReactComponent as KakaoIcon } from "./icons/Kakao.svg"; export { ReactComponent as AirplaneWindow } from "./images/window.svg"; export { ReactComponent as Bubble } from "./images/bubble.svg"; export { ReactComponent as DeleteIcon } from "./icons/icon-delete.svg"; +export { ReactComponent as ReloadIcon } from "./icons/icon_reload.svg"; +export { ReactComponent as ArrowRightIcon } from "./icons/icon_arrow_right_more.svg"; diff --git a/src/components/Experience/KeywordTab.tsx b/src/components/Experience/KeywordTab.tsx index df9625f..4064f89 100644 --- a/src/components/Experience/KeywordTab.tsx +++ b/src/components/Experience/KeywordTab.tsx @@ -209,8 +209,7 @@ const KeywordTab = ({ openDeleteModal }: KeywordTabProp) => { if (selectedPrimeTag && selectedPrimeTag.id !== "더보기" && user?.token) { getPrimeTagYears(selectedPrimeTag.id, user?.token).then((res) => { - console.log('dddd', res); - setPrimeTagYears(res.data.years) + setPrimeTagYears(res.data.years.sort()) } ); } diff --git a/src/components/Experience/MoreTab.tsx b/src/components/Experience/MoreTab.tsx index f462088..a1ca5a2 100644 --- a/src/components/Experience/MoreTab.tsx +++ b/src/components/Experience/MoreTab.tsx @@ -14,7 +14,6 @@ const MoreTab = () => { const setSelectedPrimeTag = useSetRecoilState(primeTagState); const [primeTagList, setPrimeTagList] = React.useState([]); - const handlePrimeTagClick = (item: PrimeTagData) => { const selectedPrimeTag = { id: item.id, name: item.name }; setSelectedPrimeTag(selectedPrimeTag); diff --git a/src/components/Experience/PrimeTagCard.tsx b/src/components/Experience/PrimeTagCard.tsx index b85f929..ecf8ffa 100644 --- a/src/components/Experience/PrimeTagCard.tsx +++ b/src/components/Experience/PrimeTagCard.tsx @@ -1,6 +1,6 @@ import React from "react"; import styled from "styled-components"; -import { ArrowRight } from "../../assets"; +import { ArrowRightIcon } from "../../assets"; interface PrimeTagCardProp { key: string; @@ -10,12 +10,18 @@ interface PrimeTagCardProp { onClick: () => void; } -const PrimeTagCard = ({ key, title, tagNum, expNum, onClick}: PrimeTagCardProp) => { +const PrimeTagCard = ({ + key, + title, + tagNum, + expNum, + onClick, +}: PrimeTagCardProp) => { return (
{title}
- +
diff --git a/src/components/Experience/YearList.tsx b/src/components/Experience/YearList.tsx index edbe90f..a58cfcc 100644 --- a/src/components/Experience/YearList.tsx +++ b/src/components/Experience/YearList.tsx @@ -82,7 +82,7 @@ const YearList = ({ width, openDeleteModal }: YearListProps) => { return index * 250 + 250; } if (index > hoveredIndex) { - return index * 250 + distance + 100; + return index * 250 + distance; } } if (hoveredYear) { diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx index cdd5b0b..d5cbe46 100644 --- a/src/components/common/Navbar.tsx +++ b/src/components/common/Navbar.tsx @@ -62,7 +62,7 @@ const Navbar = () => { {userData?.nickName + " "}님 - ) : ( + ) : user?.token ? null : ( navigate(`/sign-in`)}>로그인 )} @@ -121,7 +121,7 @@ const UserInfo = styled.div` ${(props) => props.theme.fonts.cap4} color: ${(props) => props.theme.colors.neutral800}; flex-shrink: 0; - .username{ + .username { ${(props) => props.theme.fonts.subtitle5} } `; diff --git a/src/components/common/Textarea.tsx b/src/components/common/Textarea.tsx index 4dd97bc..218b5fb 100644 --- a/src/components/common/Textarea.tsx +++ b/src/components/common/Textarea.tsx @@ -1,4 +1,4 @@ -import { TextareaHTMLAttributes } from "react"; +import React, { TextareaHTMLAttributes, useRef } from "react"; import styled from "styled-components"; interface TextareaProps extends TextareaHTMLAttributes { @@ -16,6 +16,24 @@ const Textarea = ({ helperTextStyle, ...props }: TextareaProps) => { + const textareaRef = React.useRef(null); + + const adjustTextareaHeight = (textarea: HTMLTextAreaElement) => { + textarea.style.height = "auto"; + textarea.style.height = textarea.scrollHeight + "px"; + }; + + const handleInput = (event: React.ChangeEvent) => { + adjustTextareaHeight(event.target); + }; + + React.useEffect(() => { + const textarea = textareaRef.current; + if (textarea) { + adjustTextareaHeight(textarea); + } + }, []); + return ( {label && ( @@ -27,7 +45,7 @@ const Textarea = ({ )} {helperText &&
{helperText}
} - +
); }; @@ -73,6 +91,10 @@ const InputBox = styled.textarea` border: 2px solid ${(props) => props.theme.colors.main500}; padding: 15px; } + &.scroll::-webkit-scrollbar { + display: none; + } + overflow-y: hidden; `; export default Textarea; diff --git a/src/pages/ExperienceDetailPage.tsx b/src/pages/ExperienceDetailPage.tsx index a3ad11a..1b3213b 100644 --- a/src/pages/ExperienceDetailPage.tsx +++ b/src/pages/ExperienceDetailPage.tsx @@ -99,7 +99,6 @@ const ExperienceDetailPage = () => {