version 1.0.4

- 유저 UI/UX 관련 변경 #256 #257 #258 #259 #260
manito42 · Oct 16, 2023 · 224ac65 · 224ac65
2 parents 3483a8d + e102fab
commit 224ac65
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 46 deletions.
diff --git a/42manito/src/components/Connect/ConnectModal.tsx b/42manito/src/components/Connect/ConnectModal.tsx
@@ -49,7 +49,7 @@ const ConnectModal = ({ handleYes, children }: Props) => {
             <ConnectCategorySelect
               categories={currentMentorState.currMentor.categories}
             />
-            <div className="connect-header"> 관심 분야 </div>
+            <div className="connect-header"> 세부 분야 </div>
             <ConnectHashtagSelect
               hashtag={currentMentorState.currMentor.hashtags}
             />
@@ -76,7 +76,6 @@ const ConnectModal = ({ handleYes, children }: Props) => {
             >
               요청하기
             </Button>
-
           </div>
         </div>
       </section>

diff --git a/42manito/src/components/Mentor/Modal.tsx b/42manito/src/components/Mentor/Modal.tsx
@@ -59,7 +59,7 @@ const MentorModal = () => {
     if (connectState.categoryId === 0) {
       alert("멘토링 분야를 선택해주세요.");
     } else if (connectState.hashtags.length <= 0) {
-      alert("관심 분야를 선택해주세요.");
+      alert("세부 분야를 선택해주세요.");
     } else if (connectState.message.length === 0) {
       alert("요청 메세지를 입력해주세요.");
     } else {
@@ -99,16 +99,16 @@ const MentorModal = () => {
         >
           {
             <UserProfile UserId={mentorId}>
-            {userId !== mentorId &&
-              <div className="connect-btn-container">
-                <Button
-                  buttonType={ButtonType.ACCEPT}
-                  onClick={() => handleConnectOpen()}
-                >
-                  멘토링 요청
-                </Button>
-              </div>
-            }
+              {userId !== mentorId && (
+                <div className="connect-btn-container">
+                  <Button
+                    buttonType={ButtonType.ACCEPT}
+                    onClick={() => handleConnectOpen()}
+                  >
+                    멘토링 요청
+                  </Button>
+                </div>
+              )}
               <button className="close-btn" onClick={handleZoomOut}>
                 닫기
               </button>

diff --git a/42manito/src/components/Profile/Description.tsx b/42manito/src/components/Profile/Description.tsx
@@ -20,7 +20,7 @@ function linkifyReact(inputText: string) {
 }
 
 interface props {
-  description: string;
+  description: string | undefined;
 }
 
 function DescriptionComponent({ description }: props) {

diff --git a/42manito/src/components/Profile/Toggle.tsx b/42manito/src/components/Profile/Toggle.tsx
@@ -23,8 +23,7 @@ export default function ManitoToggle() {
         if (categories.length == 0)
           alert("멘토링 분야를 최소한 하나 이상 설정해야 합니다.");
         else if (hashtags.length == 0)
-          alert("관심 분야를 최소한 하나 이상 설정해야 합니다.");
-        else if (socialLink == "") alert("슬랙 프로필 링크를 추가해야 합니다.");
+          alert("세부 분야를 최소한 하나 이상 설정해야 합니다.");
         else
           setIsHideMutation({
             id: userId as number,

diff --git a/42manito/src/components/Profile/Update/HashtagUpdateInput.tsx b/42manito/src/components/Profile/Update/HashtagUpdateInput.tsx
@@ -31,10 +31,10 @@ export default function HashtagUpdateInput({ hashtags }: props) {
       return;
     }
     const doesHashtagExist = hashtags.some(
-      (hashtag) => hashtag.name === inputValue,
+      (hashtag) => hashtag.name === inputValue
     );
     if (hashtags.length >= 5) {
-      alert("관심 분야는 5개까지만 추가 가능합니다.");
+      alert("세부 분야는 5개까지만 추가 가능합니다.");
       setInputValue("");
       return;
     }
@@ -60,7 +60,7 @@ export default function HashtagUpdateInput({ hashtags }: props) {
   return (
     <div className="profile-update-hashtag-input-wrapper">
       <Input
-        placeholder={"관심분야를 입력해주세요."}
+        placeholder={"세부 분야를 입력해주세요."}
         onChange={(e) => setInputValue(e.currentTarget.value)}
         onKeyPress={(e) => {
           if (e.key === "Enter") {

diff --git a/42manito/src/components/Profile/UserProfile.tsx b/42manito/src/components/Profile/UserProfile.tsx
@@ -63,7 +63,7 @@ export default function UserProfile({ UserId, children }: props) {
             </div>
           </div>
           <div className="profile-tag-wrapper">
-            <span className="profile-title mb-2">관심분야</span>
+            <span className="profile-title mb-2">세부 분야</span>
             <div className="profile-tag-list">
               {UserData &&
                 UserData.hashtags.length > 0 &&

diff --git a/42manito/src/components/Reservation/Reservation.tsx b/42manito/src/components/Reservation/Reservation.tsx
@@ -22,10 +22,10 @@ interface props {
 }
 export default function Reservation({ children }: props) {
   const userId = useSelector(
-    (state: RootState) => state.rootReducers.global.uId,
+    (state: RootState) => state.rootReducers.global.uId
   );
   const reservation = useSelector(
-    (state: RootState) => state.rootReducers.reservation.selectedReservation,
+    (state: RootState) => state.rootReducers.reservation.selectedReservation
   );
   const targetUserId =
     userId === reservation.mentorId
@@ -35,7 +35,7 @@ export default function Reservation({ children }: props) {
     {
       id: targetUserId,
     },
-    { skip: targetUserId === 0 },
+    { skip: targetUserId === 0 }
   );
   const status = reservation.status;
   const targetUserRole =
@@ -81,7 +81,7 @@ export default function Reservation({ children }: props) {
               className={"text-sm bg-bg_color-50"}
               onClick={handleClick}
             />
-            <div className="reservation-title">관심 분야</div>
+            <div className="reservation-title">세부 분야</div>
             <div className="reservation-hashtags">
               {reservation.hashtags.map((hashtag, idx) => (
                 <CardHashtag

diff --git a/42manito/src/components/Reservation/modal/SocialLinkModal.tsx b/42manito/src/components/Reservation/modal/SocialLinkModal.tsx
@@ -20,7 +20,11 @@ export default function SocialLinkModal() {
   };
 
   const handleOnAccept = () => {
-    window.open(getMentor.data?.socialLink);
+    getMentor.data?.socialLink !== ""
+      ? window.open(getMentor.data?.socialLink)
+      : window.open(
+          `https://profile.intra.42.fr/users/${getMentor.data?.user.nickname}`
+        );
     dispatch(closeSocialLinkModal());
   };
 
@@ -36,8 +40,12 @@ export default function SocialLinkModal() {
       >
         <div className="connect-container">
           <div className="connect-content-wrapper mt-5 self-center flex">
-            <span className="break-keep text-center">
-              멘토의 슬랙프로필 페이지로 이동하시겠습니까?
+            <span className="break-keep text-center mx-auto">
+              멘토의
+              {getMentor.data?.socialLink !== ""
+                ? " 슬랙 프로필 "
+                : " 인트라 프로필 "}
+              페이지로 이동하시겠습니까?
             </span>
           </div>
           <div className="connect-btn-wrapper">

diff --git a/42manito/src/pages/ProfileUpdate/[userId].tsx b/42manito/src/pages/ProfileUpdate/[userId].tsx
@@ -154,25 +154,31 @@ export default function ProfileUpdate() {
               <ProfileImage src={UserData.profileImage} />
               <ProfileInfo nickname={UserData.nickname} />
             </div>
-            <div className="short-description-container">
-              <TextArea
-                showCount
-                maxLength={50}
-                value={shortDescription}
-                style={{
-                  marginBottom: 15,
-                }}
-                onChange={(e) =>
-                  setShortDescription(e.target.value.slice(0, 50))
-                }
-                placeholder="최대 50글자"
-                className="whitespace-pre-wrap"
-              />
+            <div className="short-description-wrapper">
+              <span className="profile-title">짧은 소개글</span>
+              <span className="profile-small-message">
+                카드에서 표현되는 짧은 소개글입니다.
+              </span>
+              <div className="short-description-container">
+                <TextArea
+                  showCount
+                  maxLength={50}
+                  value={shortDescription}
+                  style={{
+                    marginBottom: 15,
+                  }}
+                  onChange={(e) =>
+                    setShortDescription(e.target.value.slice(0, 50))
+                  }
+                  placeholder="최대 50글자"
+                  className="whitespace-pre-wrap"
+                />
+              </div>
             </div>
             <div className="w-[100%] profile-tag-wrapper">
               <span className="profile-title">멘토링 분야</span>
               <span className="profile-small-message">
-                멘토가 될 분야를 선택해주세요
+                멘토가 될 분야를 선택해주세요.
               </span>
               <div className="profile-tag-list my-2">
                 {formData.categories.length > 0 &&
@@ -193,9 +199,12 @@ export default function ProfileUpdate() {
               )}
             </div>
             <div className="w-[100%] profile-tag-wrapper">
-              <span className="profile-title">관심분야</span>
+              <span className="profile-title">세부 분야</span>
+              <span className="profile-small-message pb-1">
+                멘토링 세부 분야를 추가해주세요.
+              </span>
               <span className="profile-small-message">
-                태그를 클릭하면 사라집니다
+                태그를 클릭하면 사라집니다.
               </span>
               <div className="profile-tag-list my-2">
                 {formData.hashtags.length > 0 &&
@@ -223,7 +232,7 @@ export default function ProfileUpdate() {
                 </a>
               </span>
               <span className="profile-small-message">
-                슬랙 프로필 링크를 입력해주세요
+                슬랙 프로필 링크를 입력해주세요.
               </span>
               <TextArea
                 className="profile-social-link-input-wrapper"

diff --git a/42manito/src/styles/profile.css b/42manito/src/styles/profile.css
@@ -22,13 +22,19 @@
   @apply flex flex-col justify-center mt-5;
 }
 
+.short-description-wrapper {
+  @apply flex flex-col
+                items-center justify-center
+                w-[80%] mt-10;
+}
+
 .short-description-container {
   @apply flex
                 justify-center
                 w-[80%]
                 break-all
                 px-3 py-4
-                mt-10 mb-10
+                mt-5 mb-10
                 rounded-2xl bg-bg_color-50 dark:bg-bg_color-800
                 shadow-sm;
 }