Merge pull request #140 from KUSITMS-29th-TEAM-B/fix/#139

Fix/#139 네브바 사용자 정보 이슈
KUSITMS-29th-TEAM-B · May 22, 2024 · f0b7eed · f0b7eed
2 parents 57ad822 + b41a7cd
commit f0b7eed
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 13 deletions.
diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
@@ -72,6 +72,10 @@ const InputBox = styled.input`
     outline: none;
     border: 2px solid ${(props) => props.theme.colors.main500};
   }
+  &:disabled {
+    border: 1px solid ${(props) => props.theme.colors.neutral400} !important;
+    background: ${(props) => props.theme.colors.neutral100} !important;
+  }
 `;
 
 export default Input;
diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx
@@ -43,12 +43,11 @@ const Navbar = () => {
         </MenuList>
       </ItemContainer>
       <ItemContainer className="profile">
-        {user?.token ? (
+        {userData ? (
           <>
             <img
               src={
                 userData?.profileImgUrl ||
-                user?.profileImgUrl ||
                 `${process.env.PUBLIC_URL}/assets/profile1.png`
               }
               alt="profile"
@@ -60,7 +59,7 @@ const Navbar = () => {
               onError={handleImgError}
             />
             <UserInfo onClick={() => navigate(`/profile`)}>
-              {user?.nickName}님
+              {userData?.nickName}님
             </UserInfo>
           </>
         ) : (

diff --git a/src/pages/ExperienceWritePage.tsx b/src/pages/ExperienceWritePage.tsx
@@ -117,7 +117,12 @@ const ExperienceWritePage = () => {
     lastMyKeywordIndex
   );
 
-  const isSaveButtonDisabled = !expData.title || !primeTagItem.id || !subTagItem.id || !expData.startedAt || !expData.endedAt;
+  const isSaveButtonDisabled =
+    !expData.title ||
+    !primeTagItem.id ||
+    !subTagItem.id ||
+    !expData.startedAt ||
+    !expData.endedAt;
 
   const handleSaveExperience = async () => {
     let experienceData = { ...expData };
@@ -200,20 +205,23 @@ const ExperienceWritePage = () => {
 
   // 상위 태그 라디오 버튼 클릭 함수
   const handlePrimeRadioChange = (item: TagType) => {
+    setPrimeTagItem(item);
     // 기존 상위 태그 선택한 경우
     if (item.id !== item.name) {
-      setPrimeTagItem(item);
       setExpData({ ...expData, parentTagId: item.id });
       getSubTags(item.id, user?.token).then((res) => {
         setSubTagList(res.data.tags);
       });
     }
     // 새로 생성한 상위 태그 선택한 경우
     else {
-      setPrimeTagItem(item);
       setExpData({ ...expData, parentTagId: "" });
       setSubTagList([]);
     }
+    // 이전의 선택한 상위태그 다른 태그 선택한 경우
+    if (primeTagItem.id !== item.id) {
+      setSubTagItem({ id: "", name: "" });
+    }
     setPopperInfo(null);
   };
 
@@ -279,7 +287,8 @@ const ExperienceWritePage = () => {
     type: TabType
   ) => {
     if (e.target) {
-      if (e.target.checked) {
+      // 체크박스 선택
+      if (e.target.checked && checkedKeywords.length < 5) {
         const keywordId = e.target.value;
         const selectedKeyword = (
           type === "basic" ? basicKeywords : myKeywordList
@@ -288,7 +297,9 @@ const ExperienceWritePage = () => {
           ...checkedKeywords,
           { id: keywordId, name: selectedKeyword?.name || "" },
         ]);
-      } else {
+      }
+      // 체크박스 해제
+      else {
         setCheckedKeywords(
           checkedKeywords.filter((item) => item.id !== e.target.value)
         );
@@ -420,12 +431,14 @@ const ExperienceWritePage = () => {
                   style={customInputCss}
                   onClick={handleTagPopper}
                   placeholder="하위 경험 분류"
+                  disabled={primeTagItem.id === ""}
                 />
                 {popperInfo && (
                   <Popper
                     open={open}
                     anchorEl={anchorEl}
                     sx={{ paddingTop: "8px" }}
+                    placement="bottom-end"
                   >
                     <TagPopperBox>
                       <TagSearchBox>
@@ -531,7 +544,7 @@ const ExperienceWritePage = () => {
                       ))}
                     </div>
                   ) : (
-                    "최대 5개까지 추가 가능 (ex) 커뮤니케이션, 협업 등)"
+                    "최대 5개까지 추가 가능 (ex. 커뮤니케이션, 협업 등)"
                   )}
                 </KeywordInput>
               </AccordionSummary>
@@ -620,6 +633,11 @@ const ExperienceWritePage = () => {
                         onDelete={() => handleDeleteTag(item.id)}
                       />
                     ))}
+                    {checkedKeywords.length >= 5 ? (
+                      <div className="warning-text">
+                        최대 5개까지만 키워드를 선택할 수 있어요.
+                      </div>
+                    ) : null}
                   </div>
                 </KeywordSelect>
               </AccordionDetails>
@@ -868,6 +886,13 @@ const KeywordSelect = styled.div`
     display: flex;
     flex-direction: row;
     gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .warning-text {
+    margin-left: 1rem;
+    ${(props) => props.theme.fonts.cap2};
+    color: red;
   }
 `;
 

diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
@@ -5,7 +5,7 @@ import TicketContent from "../assets/images/ticketContent.svg";
 import { GoogleIcon, KakaoIcon } from "../assets";
 import { useNavigate } from "react-router-dom";
 import { getCookie, removeCookie } from "../services/cookie";
-import { getUserInfo } from "../services/user";
+import { getUserInfo, logout } from "../services/user";
 import { UserDataType } from "../types/user";
 import PlaneLoading from "../components/common/Loading";
 import profile1 from "../assets/images/profile1.png";
@@ -42,6 +42,9 @@ const ProfilePage = () => {
   const [isLoading, setIsLoading] = useState(true);
 
   const handlelogout = () => {
+    if (user?.token && user?.refreshToken) {
+      logout(user?.token, user?.refreshToken);
+    }
     removeCookie("user").then(() => nav(`/sign-in`));
   };
 
@@ -98,7 +101,16 @@ const ProfilePage = () => {
             {userDetailList.map(({ question, answer }) => (
               <React.Fragment key={question}>
                 <SubTitle>{question}</SubTitle>
-                <SubContent>{answer}</SubContent>
+                <SubContent>
+                  {answer ? (
+                    answer
+                  ) : (
+                    <p>
+                      아직 작성한 내용이 없어요.
+                      <br /> ‘프로필 수정’ 페이지에서 작성을 완료해주세요!
+                    </p>
+                  )}
+                </SubContent>
               </React.Fragment>
             ))}
           </ContentWrapper>
@@ -152,6 +164,10 @@ const SubContent = styled.div`
   padding: 1rem 0;
   border-top: 1px solid ${(props) => props.theme.colors.main200};
   margin-bottom: 1rem;
+  p {
+    ${(props) => props.theme.fonts.body3};
+    color: ${(props) => props.theme.colors.neutral500};
+  }
 `;
 
 const TicketWrapper = styled.div`

diff --git a/src/services/user.tsx b/src/services/user.tsx
@@ -9,8 +9,14 @@ export const login = async (loginType: string, accessToken: string) => {
 };
 
 // 로그아웃
-export const logout = async (refreshToken: string) => {
-  return await client.delete(`/api/auth/logout`);
+export const logout = async (token: string, refreshToken: string) => {
+  return await client.delete(`/api/auth/logout`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+      RefreshToken: `Bearer ${refreshToken}`,
+      withCredentials: true,
+    },
+  });
 };
 
 // 회원가입