Merge pull request #50 from themoment-team/develop

Release v1.1.0

src/apis/index.ts

@@ -1,2 +1 @@
-export { default as addWorker } from './addWorker';
-export { default as getWorkerList } from './getWorkerList';
+export * from './mentor';

src/apis/mentor/getMyInfo.ts

@@ -0,0 +1,44 @@
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+import { mentorUrl } from '@/libs';
+import type { MentorInfoType } from '@/types';
+
+/**
+ * 자신의 멘토 정보를 반환합니다.
+ *
+ * @returns 멘토 정보 반환 시 멘토, null 반환 시 멘티입니다.
+ */
+export const getMyInfo = async (
+  redirectUrl: string
+): Promise<MentorInfoType | null> => {
+  const accessToken = cookies().get('accessToken')?.value;
+
+  if (!accessToken) return redirect(`/auth/refresh?redirect=${redirectUrl}`);
+
+  const response = await fetch(
+    new URL(`/api/v1${mentorUrl.getMyInfo()}`, process.env.BASE_URL),
+    {
+      method: 'GET',
+      headers: {
+        Cookie: `accessToken=${accessToken}`,
+      },
+    }
+  );
+
+  if (response.status === 403) {
+    return null;
+  }
+
+  if (response.status === 401) {
+    return redirect(`/auth/refresh?redirect=${redirectUrl}`);
+  }
+
+  if (!response.ok) {
+    return redirect('/auth/signin');
+  }
+
+  const mentorInfo = await response.json();
+
+  return mentorInfo;
+};

src/apis/mentor/index.ts

@@ -0,0 +1 @@
+export * from './getMyInfo';

src/app/mypage/page.tsx

@@ -0,0 +1,11 @@
+import { MyInfoPage } from '@/pageContainer';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '마이페이지',
+};
+
+const MyPage = () => <MyInfoPage />;
+
+export default MyPage;

src/app/page.tsx

@@ -1,16 +1,19 @@
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 
+import { getMyInfo } from '@/apis';
 import { MainPage } from '@/components';
 import { mentorUrl } from '@/libs';
 import type { WorkerType } from '@/types';
 
 import type { Metadata } from 'next';
 
 export default async function Home() {
-  const workerList = await getMentorList();
+  // TODO: resolve request waterfalls (e.g. Promise.allSettled)
+  const mentorList = await getMentorList();
+  const myInfo = await getMyInfo('/');
 
-  return <MainPage initWorkerList={[...workerList]} />;
+  return <MainPage initMentorList={[...mentorList]} defaultMyInfo={myInfo} />;
 }
 
 export const metadata: Metadata = {

src/assets/ExitIcon.tsx

@@ -0,0 +1,18 @@
+const ExitIcon = () => (
+  <svg
+    width='1.5rem'
+    height='1.5rem'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M6.5 4.5H13.5C14.0523 4.5 14.5 4.94772 14.5 5.5V9.5H15.5V5.5C15.5 4.39543 14.6046 3.5 13.5 3.5H6.5C5.39543 3.5 4.5 4.39543 4.5 5.5V18.5C4.5 19.6046 5.39543 20.5 6.5 20.5H13.5C14.6046 20.5 15.5 19.6046 15.5 18.5V14.5H14.5V18.5C14.5 19.0523 14.0523 19.5 13.5 19.5H6.5C5.94772 19.5 5.5 19.0523 5.5 18.5V5.5C5.5 4.94772 5.94772 4.5 6.5 4.5ZM9.5 12C9.5 11.7239 9.72386 11.5 10 11.5H18.075C18.0327 11.4643 17.9887 11.4287 17.9433 11.3935C17.773 11.2612 17.6002 11.1462 17.4686 11.0636C17.4033 11.0226 17.3492 10.9903 17.312 10.9685C17.2934 10.9577 17.2792 10.9495 17.2699 10.9443L17.2599 10.9386L17.258 10.9375L17.2579 10.9375L17.2579 10.9375C17.0163 10.8038 16.9288 10.4996 17.0625 10.258C17.1961 10.0164 17.5003 9.92881 17.742 10.0625L17.5 10.5C17.742 10.0625 17.7421 10.0625 17.7421 10.0625L17.7423 10.0627L17.7428 10.0629L17.7443 10.0637L17.7487 10.0662L17.7638 10.0747C17.7765 10.0819 17.7945 10.0922 17.8169 10.1054C17.8618 10.1316 17.9249 10.1693 18.0001 10.2166C18.1498 10.3105 18.352 10.4447 18.5567 10.6037C18.7584 10.7603 18.9785 10.9532 19.1528 11.1664C19.3162 11.3663 19.5 11.657 19.5 12C19.5 12.343 19.3162 12.6337 19.1528 12.8336C18.9785 13.0468 18.7584 13.2397 18.5567 13.3963C18.352 13.5553 18.1498 13.6895 18.0001 13.7834C17.9249 13.8307 17.8618 13.8684 17.8169 13.8946C17.7945 13.9078 17.7765 13.9181 17.7638 13.9253L17.7487 13.9338L17.7443 13.9363L17.7428 13.9371L17.7423 13.9373L17.7421 13.9375C17.7421 13.9375 17.742 13.9375 17.5 13.5L17.742 13.9375C17.5003 14.0712 17.1961 13.9836 17.0625 13.742C16.9289 13.5004 17.0163 13.1963 17.2577 13.0626L17.2578 13.0626L17.2578 13.0626L17.2579 13.0625L17.2579 13.0625L17.258 13.0625L17.2599 13.0614L17.2699 13.0557C17.2792 13.0505 17.2934 13.0423 17.312 13.0315C17.3492 13.0097 17.4033 12.9774 17.4686 12.9364C17.6002 12.8538 17.773 12.7388 17.9433 12.6065C17.9887 12.5713 18.0327 12.5357 18.075 12.5H10C9.72386 12.5 9.5 12.2761 9.5 12Z'
+      fill='#8F9094'
+    />
+  </svg>
+);
+
+export default ExitIcon;

src/assets/PersonIcon.tsx

@@ -0,0 +1,18 @@
+const PersonIcon = () => (
+  <svg
+    width='1.5rem'
+    height='1.5rem'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M15 8C15 9.65685 13.6569 11 12 11C10.3431 11 9 9.65685 9 8C9 6.34315 10.3431 5 12 5C13.6569 5 15 6.34315 15 8ZM16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4C14.2091 4 16 5.79086 16 8ZM18.9133 16.7216C18.9487 16.7545 18.9773 16.7834 19 16.8077V16.808V16.8135V16.8191V16.8247V16.8303V16.8361V16.8418V16.8476V16.8534V16.8593V16.8652V16.8712V16.8772V16.8832V16.8893V16.8954V16.9016V16.9078V16.914V16.9203V16.9266V16.933V16.9394V16.9458V16.9523V16.9588V16.9654V16.972V16.9786V16.9853V16.992V16.9988V17.0055V17.0124V17.0192V17.0261V17.033V17.04V17.047V17.054V17.0611V17.0682V17.0753V17.0825V17.0897V17.0969V17.1042V17.1115V17.1188V17.1262V17.1336V17.141V17.1485V17.156V17.1635V17.1711V17.1786V17.1863V17.1939V17.2016V17.2093V17.217V17.2248V17.2326V17.2404V17.2483V17.2561V17.2641V17.272V17.28V17.2879V17.296V17.304V17.3121V17.3202V17.3283V17.3364V17.3446V17.3528V17.361V17.3693V17.3776V17.3859V17.3942V17.4025V17.4109V17.4193V17.4277V17.4362V17.4446V17.4531V17.4616V17.4701V17.4787V17.4872V17.4958V17.5044V17.5131V17.5217V17.5304V17.5391V17.5478V17.5565V17.5653V17.5741V17.5828V17.5916V17.6005V17.6093V17.6182V17.627V17.6359V17.6448V17.6538V17.6627V17.6717V17.6806V17.6896V17.6986V17.7077V17.7167V17.7257V17.7348V17.7439V17.753V17.7621V17.7712V17.7803V17.7895V17.7986V17.8078V17.817V17.8262V17.8354V17.8446V17.8538V17.8631V17.8723V17.8816V17.8908V17.9001V17.9094V17.9187V17.928V17.9373V17.9466V17.956V17.9653V17.9746V17.984V17.9934V18.0027V18.0121V18.0215V18.0309V18.0403V18.0497V18.0591V18.0685V18.0779V18.0873V18.0968V18.1062V18.1156V18.1251V18.1345V18.1439V18.1534V18.1628V18.1723V18.1817V18.1912V18.2007V18.2101V18.2196V18.229V18.2385V18.248V18.2574V18.2669V18.2764V18.2858V18.2953V18.3048V18.3142V18.3237V18.3331V18.3426V18.3521V18.3615V18.371V18.3804V18.3898V18.3993V18.4087V18.4182V18.4276V18.437V18.4464V18.4558V18.4653V18.4747V18.4841V18.4934V18.5028V18.5122V18.5216V18.531V18.5403V18.5497V18.559V18.5683V18.5777V18.587V18.5963V18.6056V18.6149V18.6242V18.6335V18.6427V18.652V18.6612V18.6704V18.6797V18.6889V18.6981V18.7073V18.7164V18.7256V18.7348V18.7439V18.753V18.7621V18.7712V18.7803V18.7894V18.7985V18.8075V18.8165V18.8255V18.8345V18.8435V18.8525V18.8614V18.8704V18.8793V18.8882V18.8971V18.906V18.9148V18.9236V18.9325V18.9413V18.95V18.9588V18.9675V18.9763V18.985V18.9936V19H5V18.9936V18.985V18.9763V18.9675V18.9588V18.95V18.9413V18.9325V18.9236V18.9148V18.906V18.8971V18.8882V18.8793V18.8704V18.8614V18.8525V18.8435V18.8345V18.8255V18.8165V18.8075V18.7985V18.7894V18.7803V18.7712V18.7621V18.753V18.7439V18.7348V18.7256V18.7164V18.7073V18.6981V18.6889V18.6797V18.6704V18.6612V18.652V18.6427V18.6335V18.6242V18.6149V18.6056V18.5963V18.587V18.5777V18.5683V18.559V18.5497V18.5403V18.531V18.5216V18.5122V18.5028V18.4934V18.4841V18.4747V18.4653V18.4558V18.4464V18.437V18.4276V18.4182V18.4087V18.3993V18.3898V18.3804V18.371V18.3615V18.3521V18.3426V18.3331V18.3237V18.3142V18.3048V18.2953V18.2858V18.2764V18.2669V18.2574V18.248V18.2385V18.229V18.2196V18.2101V18.2007V18.1912V18.1817V18.1723V18.1628V18.1534V18.1439V18.1345V18.1251V18.1156V18.1062V18.0968V18.0873V18.0779V18.0685V18.0591V18.0497V18.0403V18.0309V18.0215V18.0121V18.0027V17.9934V17.984V17.9746V17.9653V17.956V17.9466V17.9373V17.928V17.9187V17.9094V17.9001V17.8908V17.8816V17.8723V17.8631V17.8538V17.8446V17.8354V17.8262V17.817V17.8078V17.7986V17.7895V17.7803V17.7712V17.7621V17.753V17.7439V17.7348V17.7257V17.7167V17.7077V17.6986V17.6896V17.6806V17.6717V17.6627V17.6538V17.6448V17.6359V17.627V17.6182V17.6093V17.6005V17.5916V17.5828V17.5741V17.5653V17.5565V17.5478V17.5391V17.5304V17.5217V17.5131V17.5044V17.4958V17.4872V17.4787V17.4701V17.4616V17.4531V17.4446V17.4362V17.4277V17.4193V17.4109V17.4025V17.3942V17.3859V17.3776V17.3693V17.361V17.3528V17.3446V17.3364V17.3283V17.3202V17.3121V17.304V17.296V17.2879V17.28V17.272V17.2641V17.2561V17.2483V17.2404V17.2326V17.2248V17.217V17.2093V17.2016V17.1939V17.1863V17.1786V17.1711V17.1635V17.156V17.1485V17.141V17.1336V17.1262V17.1188V17.1115V17.1042V17.0969V17.0897V17.0825V17.0753V17.0682V17.0611V17.054V17.047V17.04V17.033V17.0261V17.0192V17.0124V17.0055V16.9988V16.992V16.9853V16.9786V16.972V16.9654V16.9588V16.9523V16.9458V16.9394V16.933V16.9266V16.9203V16.914V16.9078V16.9016V16.8954V16.8893V16.8832V16.8772V16.8712V16.8652V16.8593V16.8534V16.8476V16.8418V16.8361V16.8303V16.8247V16.8191V16.8135V16.808V16.8077C5.02269 16.7834 5.05128 16.7545 5.0867 16.7216C5.2807 16.5415 5.62849 16.2878 6.17642 16.0295C7.26763 15.5151 9.11647 15 12 15C14.8835 15 16.7324 15.5151 17.8236 16.0295C18.3715 16.2878 18.7193 16.5415 18.9133 16.7216ZM4 19V20H20V19V16.5714C20 16.1429 18 14 12 14C6 14 4 16.1429 4 16.5714V19ZM4.92971 16.8926L4.93146 16.89C4.91922 16.9135 4.91456 16.9153 4.92971 16.8926ZM19.0685 16.89L19.0703 16.8926C19.0854 16.9153 19.0808 16.9135 19.0685 16.89Z'
+      fill='#8F9094'
+    />
+  </svg>
+);
+
+export default PersonIcon;

src/assets/index.ts

@@ -3,6 +3,7 @@ export { default as CheckBoxIcon } from './CheckBoxIcon';
 export { default as CloseIcon } from './CloseIcon';
 export { default as DeleteIcon } from './DeleteIcon';
 export { default as EmailIcon } from './EmailIcon';
+export { default as ExitIcon } from './ExitIcon';
 export { default as FilterIcon } from './FilterIcon';
 export { default as FoldIcon } from './FoldIcon';
 export { default as GoogleIcon } from './GoogleIcon';
@@ -14,6 +15,7 @@ export { default as MoreIcon } from './MoreIcon';
 export { default as NotExistEmailIcon } from './NotExistEmailIcon';
 export { default as NotExistSNSIcon } from './NotExistSNSIcon';
 export { default as PenIcon } from './PenIcon';
+export { default as PersonIcon } from './PersonIcon';
 export { default as PersonImg0 } from './PersonImg0';
 export { default as PersonImg1 } from './PersonImg1';
 export { default as PersonImg2 } from './PersonImg2';

src/components/CareerCard/index.stories.tsx

@@ -0,0 +1,40 @@
+import type { CareerType } from '@/types';
+
+import CareerCard from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const career: CareerType = {
+  id: 1,
+  companyName: '더모먼트',
+  companyUrl: '',
+  position: '프론트엔드',
+  startDate: '2022-02-02',
+  endDate: '2022-02-02',
+  isWorking: false,
+};
+
+const meta: Meta<typeof CareerCard> = {
+  component: CareerCard,
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    career,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CareerCard>;
+
+export const Primary: Story = {};
+
+export const isWorking: Story = {
+  args: {
+    career: {
+      ...career,
+      isWorking: true,
+    },
+  },
+};

src/components/CareerCard/index.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import React from 'react';
+
+import * as S from './style';
+
+import type { CareerType } from '@/types';
+
+interface Props {
+  career: CareerType;
+}
+
+const convertDate = (date: string | null) => {
+  const newDate = new Date(String(date).split('-').join('/'));
+
+  const year = newDate.getFullYear();
+  const month = String(newDate.getMonth() + 1).padStart(2, '0');
+
+  return `${year}.${month}`;
+};
+
+const CareerCard: React.FC<Props> = ({ career }) => {
+  const startDate = convertDate(career.startDate);
+  const endDate = convertDate(career.endDate);
+
+  const careerPeriod = `${startDate} ~ ${endDate}`;
+
+  return (
+    <S.CareerCardContainer>
+      <S.CareerInfoBox>
+        <S.CompanyName>{career.companyName}</S.CompanyName>
+        <S.position>{career.position} 🖥️</S.position>
+        <S.CareerPeriod isWorking={career.isWorking}>
+          {career.isWorking ? '재직중' : careerPeriod}
+        </S.CareerPeriod>
+      </S.CareerInfoBox>
+    </S.CareerCardContainer>
+  );
+};
+
+export default CareerCard;

src/components/CareerCard/style.ts

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+
+export const CareerCardContainer = styled.div`
+  max-width: 18.25rem;
+  padding: 1rem;
+  border: 0.0625rem solid ${({ theme }) => theme.color.grey[100]};
+  border-radius: 0.625rem;
+`;
+
+export const CareerInfoBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+`;
+
+export const CompanyName = styled.p`
+  ${({ theme }) => theme.typo.caption};
+  color: ${({ theme }) => theme.color.grey[900]};
+`;
+
+export const position = styled.p`
+  ${({ theme }) => theme.typo.body1};
+  color: ${({ theme }) => theme.color.black};
+`;
+
+export const CareerPeriod = styled.p<{ isWorking: boolean }>`
+  ${({ theme }) => theme.typo.body2};
+  color: ${({ theme, isWorking }) =>
+    isWorking ? theme.color.skyBlue[400] : theme.color.grey[500]};
+`;

src/components/Header/index.tsx

@@ -2,19 +2,31 @@
 
 import React from 'react';
 
+import { useRouter } from 'next/navigation';
+
 import { toast } from 'react-toastify';
 
 import * as S from './style';
 
 import * as I from '@/assets';
+import { useGetMyInfo } from '@/hooks';
 
 interface Props {
   clearList?: () => void;
 }
 
 const Header: React.FC<Props> = ({ clearList }) => {
+  const { data } = useGetMyInfo();
+
+  const { push } = useRouter();
+
   const comingSoonToast = () => toast.info('곧 출시 예정입니다. 감사합니다.');
 
+  const handleProfileClick = () => {
+    if (data) push('/mypage');
+    else toast.info('멘티인 사용자에게는 지원되지 않는 기능입니다.');
+  };
+
   return (
     <S.Header>
       <S.Inner>
@@ -27,9 +39,11 @@ const Header: React.FC<Props> = ({ clearList }) => {
             <S.MentorContact type='button' onClick={comingSoonToast}>
               멘토 컨택
             </S.MentorContact>
-            <S.RedirectLink href='/register/search'>멘토 등록</S.RedirectLink>
+            {!data && (
+              <S.RedirectLink href='/register/search'>멘토 등록</S.RedirectLink>
+            )}
           </S.RedirectBox>
-          <S.ProfileBox type='button' onClick={comingSoonToast}>
+          <S.ProfileBox type='button' onClick={handleProfileClick}>
             <I.PersonImg4 />
           </S.ProfileBox>
         </S.RightBox>