From fbf6acc8da5d812edcd1e7cd3acd73dd6579321c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Thu, 23 May 2024 16:17:30 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EC=97=AD=EB=9F=89=20=EC=B4=88?=
 =?UTF-8?q?=EA=B8=B0=ED=99=94=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/icon_reload.svg  | 10 ++++
 src/assets/index.tsx              |  1 +
 src/pages/ExperienceEditPage.tsx  | 69 ++++++++++++++++++++--------
 src/pages/ExperienceWritePage.tsx | 76 +++++++++++++++++++++++--------
 4 files changed, 116 insertions(+), 40 deletions(-)
 create mode 100644 src/assets/icons/icon_reload.svg

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 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2999_20499)">
+<path d="M10.875 6C10.875 8.25 9 10.875 6 10.875C3 10.875 1.125 8.25 1.125 6C1.125 3.75 3 1.125 6 1.125C7.875 1.125 9.375 2.25 10.125 3.375M10.125 3.375L7.5 3.75M10.125 3.375L10.5 0.75" stroke="#A6AAC0" stroke-width="0.625" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2999_20499">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/index.tsx b/src/assets/index.tsx
index c9b3be7..25ad539 100644
--- a/src/assets/index.tsx
+++ b/src/assets/index.tsx
@@ -17,3 +17,4 @@ 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";
diff --git a/src/pages/ExperienceEditPage.tsx b/src/pages/ExperienceEditPage.tsx
index 4045795..732ad0e 100644
--- a/src/pages/ExperienceEditPage.tsx
+++ b/src/pages/ExperienceEditPage.tsx
@@ -7,7 +7,7 @@ import {
   AccordionSummary,
   Popper,
 } from "@mui/material";
-import { ArrowDown, ArrowLeft, Plus2, Search } from "../assets";
+import { ArrowDown, ArrowLeft, Plus2, ReloadIcon, Search } from "../assets";
 import Textarea from "../components/common/Textarea";
 import { questions } from "../assets/data/questions";
 import { useNavigate, useParams } from "react-router-dom";
@@ -350,6 +350,11 @@ const ExperienceEditPage = () => {
     setCheckedKeywords(checkedKeywords.filter((choice) => choice.id !== item));
   };
 
+  // 키워드 초기화
+  const handleRefresh = () => {
+    setCheckedKeywords([]);
+  };
+
   // 모달 관리
   const openModal = () => {
     setIsModalOpen(true);
@@ -583,26 +588,32 @@ const ExperienceEditPage = () => {
               <AccordionDetails sx={{ padding: "0px" }}>
                 <KeywordSelect>
                   <div className="top-container">
-                    <div className="tab-list">
-                      <div
-                        className={
-                          keywordTabOption === "basic"
-                            ? "tab-item active"
-                            : "tab-item"
-                        }
-                        onClick={() => setKeywordTabOption("basic")}
-                      >
-                        기본
+                    <div className="right-container">
+                      <div className="tab-list">
+                        <div
+                          className={
+                            keywordTabOption === "basic"
+                              ? "tab-item active"
+                              : "tab-item"
+                          }
+                          onClick={() => setKeywordTabOption("basic")}
+                        >
+                          기본
+                        </div>
+                        <div
+                          className={
+                            keywordTabOption === "my"
+                              ? "tab-item active"
+                              : "tab-item"
+                          }
+                          onClick={() => setKeywordTabOption("my")}
+                        >
+                          MY
+                        </div>
                       </div>
-                      <div
-                        className={
-                          keywordTabOption === "my"
-                            ? "tab-item active"
-                            : "tab-item"
-                        }
-                        onClick={() => setKeywordTabOption("my")}
-                      >
-                        MY
+                      <div className="refresh" onClick={handleRefresh}>
+                        <ReloadIcon />
+                        <div className="refresh-text">초기화</div>
                       </div>
                     </div>
                     {keywordTabOption === "basic" ? (
@@ -885,6 +896,13 @@ const KeywordSelect = styled.div`
     justify-content: space-between;
     align-items: center;
   }
+  .right-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 11px;
+  }
   .tab-list {
     display: flex;
     flex-direction: row;
@@ -896,6 +914,17 @@ const KeywordSelect = styled.div`
     border-radius: 4px;
     background: var(--neutral-50, #f7f7fb);
   }
+  .refresh {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+  .refresh-text {
+    ${(props) => props.theme.fonts.cap1};
+    color: ${(props) => props.theme.colors.neutral500};
+  }
   .tab-item {
     display: flex;
     justify-content: center;
diff --git a/src/pages/ExperienceWritePage.tsx b/src/pages/ExperienceWritePage.tsx
index 529e878..82ca1ae 100644
--- a/src/pages/ExperienceWritePage.tsx
+++ b/src/pages/ExperienceWritePage.tsx
@@ -7,7 +7,14 @@ import {
   AccordionSummary,
   Popper,
 } from "@mui/material";
-import { ArrowDown, ArrowLeft, Plus, Plus2, Search } from "../assets";
+import {
+  ArrowDown,
+  ArrowLeft,
+  Plus,
+  Plus2,
+  ReloadIcon,
+  Search,
+} from "../assets";
 import Textarea from "../components/common/Textarea";
 import { questions } from "../assets/data/questions";
 import { useNavigate } from "react-router-dom";
@@ -344,6 +351,11 @@ const ExperienceWritePage = () => {
     setCheckedKeywords(checkedKeywords.filter((choice) => choice.id !== item));
   };
 
+  // 키워드 초기화
+  const handleRefresh = () => {
+    setCheckedKeywords([]);
+  };
+
   // 모달 관리
   const openModal = () => {
     setIsModalOpen(true);
@@ -563,26 +575,32 @@ const ExperienceWritePage = () => {
               <AccordionDetails sx={{ padding: "0px" }}>
                 <KeywordSelect>
                   <div className="top-container">
-                    <div className="tab-list">
-                      <div
-                        className={
-                          keywordTabOption === "basic"
-                            ? "tab-item active"
-                            : "tab-item"
-                        }
-                        onClick={() => setKeywordTabOption("basic")}
-                      >
-                        기본
+                    <div className="right-container">
+                      <div className="tab-list">
+                        <div
+                          className={
+                            keywordTabOption === "basic"
+                              ? "tab-item active"
+                              : "tab-item"
+                          }
+                          onClick={() => setKeywordTabOption("basic")}
+                        >
+                          기본
+                        </div>
+                        <div
+                          className={
+                            keywordTabOption === "my"
+                              ? "tab-item active"
+                              : "tab-item"
+                          }
+                          onClick={() => setKeywordTabOption("my")}
+                        >
+                          MY
+                        </div>
                       </div>
-                      <div
-                        className={
-                          keywordTabOption === "my"
-                            ? "tab-item active"
-                            : "tab-item"
-                        }
-                        onClick={() => setKeywordTabOption("my")}
-                      >
-                        MY
+                      <div className="refresh" onClick={handleRefresh}>
+                        <ReloadIcon />
+                        <div className="refresh-text">초기화</div>
                       </div>
                     </div>
                     {keywordTabOption === "basic" ? (
@@ -869,6 +887,13 @@ const KeywordSelect = styled.div`
     justify-content: space-between;
     align-items: center;
   }
+  .right-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 11px;
+  }
   .tab-list {
     display: flex;
     flex-direction: row;
@@ -880,6 +905,17 @@ const KeywordSelect = styled.div`
     border-radius: 4px;
     background: var(--neutral-50, #f7f7fb);
   }
+  .refresh {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+  .refresh-text {
+    ${(props) => props.theme.fonts.cap1};
+    color: ${(props) => props.theme.colors.neutral500};
+  }
   .tab-item {
     display: flex;
     justify-content: center;

From 7b7a0b9b1b36cc28fcf8cc32a1116bb0b594d4ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Thu, 23 May 2024 16:26:21 +0900
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EC=83=81=EC=9C=84=ED=83=9C=EA=B7=B8?=
 =?UTF-8?q?=20=EC=97=B0=EB=8F=84=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Experience/KeywordTab.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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())
       }
       );
     }

From bcdd96e6fe2ec26f8a64623660d50a566b4605f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Thu, 23 May 2024 16:33:10 +0900
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=EB=8D=94=EB=B3=B4=EA=B8=B0=ED=83=AD?=
 =?UTF-8?q?=20=EC=B9=B4=EB=93=9C=20=EC=9D=B4=EB=8F=99=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/icon_arrow_right_more.svg |  6 ++++++
 src/assets/index.tsx                       |  1 +
 src/components/Experience/MoreTab.tsx      |  1 -
 src/components/Experience/PrimeTagCard.tsx | 12 +++++++++---
 4 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/icons/icon_arrow_right_more.svg

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 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon Frame">
+<path id="Vector" d="M10 7L15 12" stroke="#A6AAC0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M15 12L10 17" stroke="#A6AAC0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/assets/index.tsx b/src/assets/index.tsx
index 25ad539..8caa846 100644
--- a/src/assets/index.tsx
+++ b/src/assets/index.tsx
@@ -18,3 +18,4 @@ 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/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<PrimeTagData[]>([]);
 
-
   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 (
     <CardContainer key={key} onClick={onClick}>
       <CardTitle>
         <div className="title">{title}</div>
-        <ArrowRight />
+        <ArrowRightIcon />
       </CardTitle>
       <CardContent>
         <ContentItem>

From e63dae47192177dd7cc649f98f78db0d982e0293 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Thu, 23 May 2024 17:18:59 +0900
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85?=
 =?UTF-8?q?=EC=8B=9C=20=EC=83=81=EB=8B=A8=20=EB=84=A4=EB=B8=8C=EB=B0=94=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 = () => {
               <span className="username">{userData?.nickName + " "}</span>님
             </UserInfo>
           </>
-        ) : (
+        ) : user?.token ? null : (
           <LoginButton onClick={() => navigate(`/sign-in`)}>로그인</LoginButton>
         )}
       </ItemContainer>
@@ -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}
   }
 `;

From d6d07cfd51cb88cf8f383fa0d4b5cfd4c0f68ea1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Thu, 23 May 2024 18:10:55 +0900
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20textarea=20auto=20layout=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Experience/YearList.tsx |  2 +-
 src/components/common/Textarea.tsx     | 26 ++++++++++++++++++++++++--
 src/pages/ExperienceDetailPage.tsx     |  1 -
 src/pages/ExperienceEditPage.tsx       |  1 -
 4 files changed, 25 insertions(+), 5 deletions(-)

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/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<HTMLTextAreaElement> {
@@ -16,6 +16,24 @@ const Textarea = ({
   helperTextStyle,
   ...props
 }: TextareaProps) => {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const adjustTextareaHeight = (textarea: HTMLTextAreaElement) => {
+    textarea.style.height = "auto";
+    textarea.style.height = textarea.scrollHeight + "px";
+  };
+
+  const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    adjustTextareaHeight(event.target);
+  };
+
+  React.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      adjustTextareaHeight(textarea);
+    }
+  }, []);
+
   return (
     <InputContainer labelStyle={labelStyle} helperTextStyle={helperTextStyle}>
       {label && (
@@ -27,7 +45,7 @@ const Textarea = ({
         </div>
       )}
       {helperText && <div className="helperText">{helperText}</div>}
-      <InputBox {...props} />
+      <InputBox {...props} ref={textareaRef} onInput={handleInput} />
     </InputContainer>
   );
 };
@@ -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 = () => {
                 <Textarea
                   value={item.answer}
                   label={`${index + 1}. ${item.question}`}
-                  rows={8}
                   labelStyle={
                     theme.fonts.title4 + `color: ${theme.colors.neutral700}`
                   }
diff --git a/src/pages/ExperienceEditPage.tsx b/src/pages/ExperienceEditPage.tsx
index 732ad0e..26b76cd 100644
--- a/src/pages/ExperienceEditPage.tsx
+++ b/src/pages/ExperienceEditPage.tsx
@@ -708,7 +708,6 @@ const ExperienceEditPage = () => {
                 required={index === 0 || index === 1}
                 value={expData.contents[index].answer}
                 label={`${index + 1}. ${item.question}`}
-                rows={8}
                 labelStyle={
                   theme.fonts.title4 + `color: ${theme.colors.neutral700}`
                 }