diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx index 40e1d14..245f81d 100644 --- 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 index 7fd81a7..cc2cd06 100644 --- a/src/components/common/Navbar.tsx +++ b/src/components/common/Navbar.tsx @@ -43,12 +43,11 @@ const Navbar = () => { - {user?.token ? ( + {userData ? ( <> profile { onError={handleImgError} /> navigate(`/profile`)}> - {user?.nickName}님 + {userData?.nickName}님 ) : ( diff --git a/src/pages/ExperienceWritePage.tsx b/src/pages/ExperienceWritePage.tsx index 457ec18..5ad5886 100644 --- 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,9 +205,9 @@ 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); @@ -210,10 +215,13 @@ const ExperienceWritePage = () => { } // 새로 생성한 상위 태그 선택한 경우 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 && ( @@ -531,7 +544,7 @@ const ExperienceWritePage = () => { ))} ) : ( - "최대 5개까지 추가 가능 (ex) 커뮤니케이션, 협업 등)" + "최대 5개까지 추가 가능 (ex. 커뮤니케이션, 협업 등)" )} @@ -620,6 +633,11 @@ const ExperienceWritePage = () => { onDelete={() => handleDeleteTag(item.id)} /> ))} + {checkedKeywords.length >= 5 ? ( +
+ 최대 5개까지만 키워드를 선택할 수 있어요. +
+ ) : null} @@ -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 index de42cad..90a394c 100644 --- 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 }) => ( {question} - {answer} + + {answer ? ( + answer + ) : ( +

+ 아직 작성한 내용이 없어요. +
‘프로필 수정’ 페이지에서 작성을 완료해주세요! +

+ )} +
))} @@ -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 index 4c4423a..84c01d4 100644 --- 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, + }, + }); }; // 회원가입