[Merge[ #29 - PR Merge

[Feature]#29 home
9oormthon-univ · Nov 23, 2024 · 5513608 · 5513608
2 parents 01c7be3 + c63e444
commit 5513608
Show file tree

Hide file tree

Showing 13 changed files with 226 additions and 34 deletions.
diff --git a/src/common/asset/font/Pretendard-Medium.woff2 b/src/common/asset/font/Pretendard-Medium.woff2
diff --git a/src/common/asset/image/home/check_icon.svg b/src/common/asset/image/home/check_icon.svg
diff --git a/src/common/asset/image/home/user_default_img.svg b/src/common/asset/image/home/user_default_img.svg
diff --git a/src/common/style/style.d.ts b/src/common/style/style.d.ts
@@ -37,7 +37,7 @@ declare module 'styled-components' {
     gradients: {
       pinktoyellow: string;
       yellowtopink: string;
-    }
+    };
 
     fonts: {
       display_large: SerializedStyles;
@@ -49,7 +49,10 @@ declare module 'styled-components' {
       body_large: SerializedStyles;
       body_medium: SerializedStyles;
       body_small: SerializedStyles;
-      chatting_medium: SerializedStyles;
+      chat_medium: SerializedStyles;
+      label_small: SerializedStyles;
+      title_extrasmall: SerializedStyles;
+      caption: SerializedStyles;
     };
   }
 }
diff --git a/src/common/style/theme.ts b/src/common/style/theme.ts
@@ -34,7 +34,7 @@ const colors = {
 const gradients = {
   pinktoyellow: 'linear-gradient(to right, #FDD5F2, #FBE7CE 70%)',
   yellowtopink: 'linear-gradient(to right, #FBE7CE 50%, #FDD5F2)',
-}
+};
 
 const fonts = {
   display_large: css`
@@ -91,12 +91,30 @@ const fonts = {
     font-weight: 400;
     line-height: 16px;
   `,
-  chatting_medium: css`
+  chat_medium: css`
     font-family: 'Pretendard';
     font-size: 1.4rem;
     font-weight: 500;
     line-height: 16px;
   `,
+  label_small: css`
+    font-family: 'Pretendard';
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 12px;
+  `,
+  title_extrasmall: css`
+    font-family: 'Pretendard';
+    font-size: 1.2rem;
+    font-weight: 700;
+    line-height: 14px;
+  `,
+  caption: css`
+    font-family: 'Pretendard';
+    font-size: 1.1rem;
+    font-weight: 400;
+    line-height: 20px;
+  `,
 };
 
 const theme: DefaultTheme = { colors, gradients, fonts };

diff --git a/src/page/main/chat/chatting/ChattingPage.tsx b/src/page/main/chat/chatting/ChattingPage.tsx
@@ -8,7 +8,6 @@ import Chatting from './component/Chatting';
 import ChattingMessageInput from './component/ChattingMessageInput';
 import CallDescription from '@image/chatting/CallDescription.svg?react';
 import CallButton from '@image/chatting/call-button.svg?react';
-import { getChattingMessage } from '@/shared/api/chatting';
 import { getUserInfo } from '@/shared/api/user';
 
 interface MessageData {
@@ -30,18 +29,17 @@ const ChattingPage = () => {
     try {
       const response = await getUserInfo();
       userId = response.data.id;
-      console.log('userId', response);
-      console.log('제발', userId);
     } catch (error) {
       console.log(error);
     }
   };
 
-  handleUserInfo();
-  const socketRef = useRef<Socket | null>(null);
+  const iRunOnlyOnce = () => {
+    handleUserInfo();
+  };
+  useEffect(iRunOnlyOnce, []);
 
-  // const previousMessages = getChattingMessage({ id: '2' });
-  // console.log(previousMessages);
+  const socketRef = useRef<Socket | null>(null);
 
   // Socket 연결
   useEffect(() => {
@@ -53,14 +51,12 @@ const ChattingPage = () => {
 
     // 메시지 수신 처리
     socket.on('message', (data) => {
-      console.log('daaaa', data);
       const isUserMessage = data.senderId === userId;
-      console.log('asdfadfadfadsfadsf', data.senderId, isUserMessage);
-      console.log(data);
+      const nowTime = new Date();
       const formattedMessage: MessageData = {
         text: data.content,
         sender: isUserMessage ? 'user' : 'other',
-        time: new Date().toLocaleTimeString(),
+        time: formatTime(nowTime),
         date: new Date().toLocaleDateString(),
       };
 
@@ -88,8 +84,6 @@ const ChattingPage = () => {
       date: new Date().toLocaleDateString(),
     };
 
-    // setMessages((prevMessages) => [...prevMessages, newMessage]);
-
     // 서버로 메시지 전송
     socketRef.current?.emit('message', {
       senderId: userId,
@@ -124,6 +118,21 @@ const ChattingPage = () => {
     return () => clearInterval(intervalId);
   }, [mentoringStartTime]);
 
+  function formatTime(date: Date): string {
+    const options: Intl.DateTimeFormatOptions = {
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true, // 12시간 형식 (오전/오후)
+    };
+
+    const timeString = date.toLocaleTimeString('ko-KR', options);
+
+    // '오전 10:00' 형식으로 반환
+    return timeString.replace(/AM|PM/, (match) =>
+      match === 'AM' ? '오전' : '오후'
+    );
+  }
+
   return (
     <St.ChattingPageWrapper>
       <Navigation
@@ -184,6 +193,9 @@ const St = {
     display: flex;
     margin: 122px 20px 0px 20px;
   `,
+  CallButton: styled.button`
+    cursor: pointer;
+  `,
 };
 
 export default ChattingPage;
diff --git a/src/page/main/chat/chatting/component/Chatting.tsx b/src/page/main/chat/chatting/component/Chatting.tsx
@@ -95,7 +95,7 @@ const DateLabel = styled.div`
   border-radius: 12px;
   border: 1px solid ${({ theme }) => theme.colors.gray200};
   padding: 4px 8px;
-  ${({ theme }) => theme.fonts.body_small};
+  ${({ theme }) => theme.fonts.title_extrasmall};
   max-width: fit-content;
 `;
 
@@ -111,7 +111,7 @@ const MessageWrapper = styled.div<{ $isUser: boolean }>`
     $isUser ? theme.colors.orange40 : theme.colors.white};
   color: ${({ theme, $isUser }) =>
     $isUser ? theme.colors.white : theme.colors.gray700};
-  ${({ theme }) => theme.fonts.chatting_medium};
+  ${({ theme }) => theme.fonts.chat_medium};
   padding: 8px 12px;
   max-width: 70%;
   word-break: break-word;
@@ -122,7 +122,7 @@ const MessageWrapper = styled.div<{ $isUser: boolean }>`
 `;
 
 const TimeLabel = styled.div<{ $isUser: boolean }>`
-  ${({ theme }) => theme.fonts.body_small};
+  ${({ theme }) => theme.fonts.label_small};
   color: ${({ theme }) => theme.colors.gray400};
   margin: ${({ $isUser }) => ($isUser ? '0 8px 0 0' : '0 0 0 8px')};
   align-self: flex-end;

diff --git a/src/page/main/chat/chatting/component/MentoringStart.tsx b/src/page/main/chat/chatting/component/MentoringStart.tsx
@@ -23,7 +23,7 @@ const St = {
     border-radius: 16px;
     border: none;
     padding: 18px 16px;
-    margin: 128px 20px 20px 20px;
+    margin: 128px 20px 0px 20px;
     display: flex;
     align-items: center;
     height: 66px;

diff --git a/src/page/main/component/TabBar.tsx b/src/page/main/component/TabBar.tsx
@@ -38,7 +38,7 @@ const Tab = ({
 
 const TabBar = () => {
   const navigate = useNavigate();
-  const [selectedTab, setSelectedTab] = useState(0);
+  const [selectedTab, setSelectedTab] = useState(1);
 
   const tabs = [
     {

diff --git a/src/page/main/home/Home.tsx b/src/page/main/home/Home.tsx
@@ -1,29 +1,90 @@
+import { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
 import Navigation from '@/page/component/navi/Navigation';
-import bannerImg from '@image/home/banner_mentor.png';
+import bannerMentorImg from '@image/home/banner_mentor.png';
+import bannerMenteeImg from '@image/home/banner_mentee.png';
 import mentoringProcessImg from '@image/home/mentoring-explain.png';
+import UserProfile from '@/page/main/home/component/UserProfile';
+import { getMentors } from '@/shared/api/home';
+import { getUserInfo } from '@/shared/api/user';
+
+interface UserList {
+  name: string;
+  keyword: string;
+}
 
 const Home = () => {
+  const [userList, setUserList] = useState<UserList[]>([]);
+  const [isMentor, setIsMentor] = useState<boolean>(true);
+  const [profileText, setProfileText] = useState<string>(
+    '멘토링 신청을 할 수 있는 멘토들이에요'
+  );
+
+  const handleHome = async () => {
+    try {
+      const response = await getMentors();
+      const user = response.data.map((mentor) => ({
+        name: mentor.name,
+        keyword: (mentor.keyword || []).join(', '),
+      }));
+      setUserList(user);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleUserInfo = async () => {
+    try {
+      const response = await getUserInfo();
+      setIsMentor(response.data.role === 'MENTOR');
+      if (isMentor == true) {
+        setProfileText('멘토링 신청을 할 수 있는 멘토들이에요');
+      } else {
+        setProfileText('멘토링은 어떻게 진행되나요?');
+      }
+      console.log(isMentor);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const iRunOnlyOnce = () => {
+    handleHome();
+    handleUserInfo();
+  };
+  useEffect(iRunOnlyOnce, []);
+
   return (
     <>
       <St.HomeWrapper>
         <Navigation showLogo={true} />
         <St.BannerWrapper>
-          <img src={bannerImg} alt='profile' />
+          {isMentor ? (
+            <img src={bannerMentorImg} alt='profile' />
+          ) : (
+            <img src={bannerMenteeImg} alt='profile' />
+          )}
         </St.BannerWrapper>
-        <St.ProfileText>
-          {'멘토링 신청을 할 수 있는 멘토들이에요'}
-        </St.ProfileText>
-        <St.ProfileListWrapper></St.ProfileListWrapper>
+
+        <St.ProfileText>{profileText}</St.ProfileText>
+        <St.ProfileListWrapper>
+          {userList.map((data) => (
+            <UserProfile name={data.name} keyword={data.keyword} />
+          ))}
+        </St.ProfileListWrapper>
         <St.MentoringProcessText>
           {'멘토링은 어떻게 진행되나요?'}
         </St.MentoringProcessText>
         <St.MentoringProcessWrapper>
           <img src={mentoringProcessImg} alt='mentoringProcess' />
         </St.MentoringProcessWrapper>
         <St.MentoringProcessDescription>
-          {'안녕하세요 안녕 안녕...'}
+          {`ㆍ멘토 심사가 승인된 멘토만 멘토링을 진행할 수 있어요.
+ㆍ멘티는 배우고 싶은 소프트 스킬을 가진 멘토에게 멘토링을 요청할 수 있어요.
+ㆍ멘토는 멘티의 프로필을 보고 멘티의 멘토링을 수락하거나 거절할 수 있어요.
+ㆍ멘토링 후 요약본이 도착하는 시간은 멘토링 진행 시간에 따라 달라지며,
+   일반적으로는 약 4시간 정도 걸려요.`}
         </St.MentoringProcessDescription>
       </St.HomeWrapper>
     </>
@@ -40,12 +101,13 @@ const St = {
   `,
 
   BannerWrapper: styled.div`
-    width: 100%;
-    max-width: 393px;
     display: flex;
-    // width: 393px;
+    width: 393px;
     height: 128px;
     margin-top: 108px;
+    img {
+      width: 100%;
+    }
   `,
 
   ProfileText: styled.div`
@@ -57,13 +119,17 @@ const St = {
 
   ProfileListWrapper: styled.div`
     display: flex;
+    margin: 0px 12px;
+    overflow-x: auto; /* 가로 스크롤 활성화 */
+    overflow-y: hidden; /* 세로 스크롤 제거 */
+    white-space: nowrap; /* 줄바꿈 방지 */
   `,
 
   MentoringProcessText: styled.div`
     display: flex;
     ${({ theme }) => theme.fonts.title_medium};
     color: ${({ theme }) => theme.colors.gray700};
-    margin: 32px 20px;
+    margin: 32px 20px 0px 20px;
   `,
 
   MentoringProcessWrapper: styled.div`
@@ -72,13 +138,17 @@ const St = {
     height: 88;
     margin: 16px 20px 0px 20px;
     justify-content: center;
+    img {
+      width: 100%;
+    }
   `,
 
   MentoringProcessDescription: styled.div`
     display: flex;
-    ${({ theme }) => theme.fonts.title_medium};
+    ${({ theme }) => theme.fonts.caption};
     color: ${({ theme }) => theme.colors.gray500};
     margin: 16px 20px;
+    white-space: break-spaces;
   `,
 };