Merge branch 'develop' into feat/#101

KUSITMS-29th-TEAM-B · May 23, 2024 · 951a2ee · 951a2ee
2 parents 47856b3 + d6d07cf
commit 951a2ee
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 53 deletions.
diff --git a/src/assets/icons/icon_arrow_right_more.svg b/src/assets/icons/icon_arrow_right_more.svg
diff --git a/src/assets/icons/icon_reload.svg b/src/assets/icons/icon_reload.svg
diff --git 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
@@ -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
@@ -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
@@ -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>

diff --git 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
@@ -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}
   }
 `;

diff --git 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
@@ -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
@@ -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" ? (
@@ -697,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}`
                 }
@@ -885,6 +895,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 +913,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
@@ -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;