Merge pull request #91 from themoment-team/develop

Release v1.4.0
themoment-team · Mar 4, 2024 · 8181b3d · 8181b3d
2 parents aba0335 + 8755344
commit 8181b3d
Show file tree

Hide file tree

Showing 64 changed files with 951 additions and 179 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { GlobalStyle, theme } from '../src/styles';
+import { GlobalStyle } from '../src/styles';
 import type { Preview } from '@storybook/react';
-import { ThemeProvider } from '@emotion/react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import Providers from '../src/app/providers';
 
 const customViewports = {
   width600: {
@@ -52,10 +52,10 @@ const preview: Preview = {
   },
   decorators: [
     (Story) => (
-      <ThemeProvider theme={theme}>
+      <Providers>
         <GlobalStyle />
         <Story />
-      </ThemeProvider>
+      </Providers>
     ),
   ],
 };

diff --git a/src/app/register/mentee/page.tsx b/src/app/register/mentee/page.tsx
@@ -0,0 +1,5 @@
+import { MenteeRegister } from '@/pageContainer';
+
+const Mentee = () => <MenteeRegister />;
+
+export default Mentee;
diff --git a/src/assets/GoBackIcon.tsx b/src/assets/GoBackIcon.tsx
@@ -0,0 +1,30 @@
+const GoBackIcon = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='0.625rem'
+    height='1.0625rem'
+    viewBox='0 0 10 17'
+    fill='none'
+  >
+    <g clipPath='url(#clip0_3083_5664)'>
+      <path
+        d='M9 1.5L1.86009 7.74742C1.40476 8.14584 1.40476 8.85417 1.86009 9.25258L9 15.5'
+        stroke='#8F9094'
+        strokeWidth='2'
+        strokeLinecap='round'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_3083_5664'>
+        <rect
+          width='10'
+          height='16'
+          fill='white'
+          transform='matrix(-1 0 0 1 10 0.5)'
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default GoBackIcon;
diff --git a/src/assets/SendIcon.tsx b/src/assets/SendIcon.tsx
@@ -0,0 +1,17 @@
+const SendIcon = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='2.25rem'
+    height='2.25rem'
+    viewBox='0 0 36 36'
+    fill='none'
+  >
+    <circle cx='18' cy='18' r='15' fill='#94CCFF' />
+    <path
+      d='M24.0021 25.4936C24.7151 25.4926 25.198 24.767 24.9237 24.1089L18.923 9.71418C18.5811 8.89387 17.4189 8.89387 17.077 9.71417L11.0763 24.1089C10.802 24.767 11.2849 25.4926 11.9979 25.4936L15.4533 25.4987C15.9564 25.4994 16.3818 25.1262 16.4465 24.6273L17.5041 16.468C17.5795 15.887 18.4205 15.887 18.4959 16.468L19.5535 24.6273C19.6182 25.1262 20.0436 25.4994 20.5467 25.4987L24.0021 25.4936Z'
+      fill='#148EFF'
+    />
+  </svg>
+);
+
+export default SendIcon;
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -6,6 +6,7 @@ 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 GoBackIcon } from './GoBackIcon';
 export { default as GoogleIcon } from './GoogleIcon';
 export { default as GsmNetworkingIcon } from './GsmNetworkingIcon';
 export { default as ImageRegisterIcon } from './ImageRegisterIcon';
@@ -28,5 +29,6 @@ export { default as RemovePositionIcon } from './RemovePositionIcon';
 export { default as SNSIcon } from './SNSIcon';
 export { default as SearchIcon } from './SearchIcon';
 export { default as SearchNotFoundIcon } from './SearchNotFoundIcon';
+export { default as SendIcon } from './SendIcon';
 export { default as TriangleIcon } from './TriangleIcon';
 export { default as UploadIcon } from './UploadIcon';
diff --git a/src/components/Buttons/ProfileUpdate/index.tsx b/src/components/Buttons/ProfileUpdate/index.tsx
@@ -11,8 +11,7 @@ interface Props {
 const ProfileUpdateButton: React.FC<Props> = ({ onClick }) => (
   <S.Button type='button' onClick={onClick}>
     <PenIcon />
-    이미지 등록
-    {/* 프로필 수정 // 임시로 이미지 등록으로 내용 변경해두겠습니다. */}
+    이미지 수정
   </S.Button>
 );
 

diff --git a/src/components/CareerRegistrationBox/index.tsx b/src/components/CareerRegistrationBox/index.tsx
@@ -22,6 +22,7 @@ import { deepCopy } from '@/utils';
 
 interface Props {
   career: CareerFormType;
+  index: number;
   setCareerArray: React.Dispatch<React.SetStateAction<CareerFormType[]>>;
 }
 
@@ -38,6 +39,7 @@ const CareerRegistrationBox: React.FC<Props> = ({
     isWorking,
   },
   setCareerArray,
+  index,
 }) => {
   const endYearRef = useRef<HTMLSelectElement>(null);
   const endMonthRef = useRef<HTMLSelectElement>(null);
@@ -116,8 +118,6 @@ const CareerRegistrationBox: React.FC<Props> = ({
           newCareer.isWorking.value = isChecked;
 
           if (isChecked) {
-            if (endYearRef.current) endYearRef.current.value = '';
-            if (endMonthRef.current) endMonthRef.current.value = '';
             newCareer.endYear.value = '년';
             newCareer.endYear.errorMessage = null;
             newCareer.endMonth.value = '월';
@@ -136,7 +136,7 @@ const CareerRegistrationBox: React.FC<Props> = ({
       <S.TitleBox>
         <S.Title>재직 회사 정보</S.Title>
         <S.ButtonWrapper>
-          {id !== 0 && (
+          {index !== 0 && (
             <S.IconButton type='button' onClick={handleRemoveClick}>
               <DeleteIcon />
             </S.IconButton>
@@ -163,11 +163,12 @@ const CareerRegistrationBox: React.FC<Props> = ({
           errorMessage={companyUrl.errorMessage}
         />
         <SelectFormItem
+          value={position.value}
           required
           selectTitle='포지션(직책, 직무)'
           options={[...POSITION_ARRAY]}
-          errorMessage={position.errorMessage}
           defaultValue='포지션 선택'
+          errorMessage={position.errorMessage}
           onChange={handlePositionChange}
         />
         <S.EmploymentDurationBox>
@@ -183,31 +184,35 @@ const CareerRegistrationBox: React.FC<Props> = ({
           >
             <S.PeriodSelectWrapper>
               <Select
-                defaultValue={startYear.value}
+                value={startYear.value}
                 options={[...YEAR_ARRAY]}
+                defaultValue='년'
                 onChange={(e) => handlePeriodChange(e, 'startYear')}
                 errorMessage={startYear.errorMessage}
               />
               <Select
-                defaultValue={startMonth.value}
+                value={startMonth.value}
                 options={[...MONTH_ARRAY]}
+                defaultValue='월'
                 onChange={(e) => handlePeriodChange(e, 'startMonth')}
                 errorMessage={startMonth.errorMessage}
               />
               <S.Tilde>~</S.Tilde>
               <Select
                 ref={endYearRef}
-                defaultValue={endYear.value}
+                value={endYear.value}
                 options={[...YEAR_ARRAY]}
                 disabled={isWorking.value}
+                defaultValue='년'
                 onChange={(e) => handlePeriodChange(e, 'endYear')}
                 errorMessage={endYear.errorMessage}
               />
               <Select
                 ref={endMonthRef}
-                defaultValue={endMonth.value}
+                value={endMonth.value}
                 options={[...MONTH_ARRAY]}
                 disabled={isWorking.value}
+                defaultValue='월'
                 onChange={(e) => handlePeriodChange(e, 'endMonth')}
                 errorMessage={endMonth.errorMessage}
               />
@@ -217,6 +222,7 @@ const CareerRegistrationBox: React.FC<Props> = ({
             type='checkbox'
             id={`checkbox-${id}`}
             onChange={handleTenureCheck}
+            checked={isWorking.value}
           />
           <S.TenureCheckLabel htmlFor={`checkbox-${id}`}>
             <S.CheckBox isChecked={isWorking.value}>

diff --git a/src/components/ChattingHeader/index.stories.tsx b/src/components/ChattingHeader/index.stories.tsx
@@ -0,0 +1,21 @@
+import ChattingHeader from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ChattingHeader> = {
+  component: ChattingHeader,
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChattingHeader>;
+
+export const Primary: Story = {
+  args: {
+    name: '방가온',
+    generation: 7,
+  },
+};
diff --git a/src/components/ChattingHeader/index.tsx b/src/components/ChattingHeader/index.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import * as S from './style';
+
+import { GoBackIcon } from '@/assets';
+
+interface Props {
+  name: string;
+  generation: number;
+}
+
+const ChattingHeader: React.FC<Props> = ({ name, generation }) => {
+  const { push } = useRouter();
+
+  // 어디로 이동해야 할지 정해지지 않아 /로 이동하게 해두었습니다!
+  const handleGoBackClick = () => push('/');
+
+  return (
+    <S.Container>
+      <S.IconBox onClick={handleGoBackClick}>
+        <GoBackIcon />
+      </S.IconBox>
+      <S.OpponentInfo>
+        {generation}기 {name}
+      </S.OpponentInfo>
+    </S.Container>
+  );
+};
+
+export default ChattingHeader;
diff --git a/src/components/ChattingHeader/style.ts b/src/components/ChattingHeader/style.ts
@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  position: relative;
+  width: 100%;
+  padding: 1rem 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const IconBox = styled.div`
+  margin: 0.25rem 0.4375rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: absolute;
+  left: 1.69rem;
+`;
+
+export const OpponentInfo = styled.div`
+  ${({ theme }) => theme.typo.subtitle};
+  color: ${({ theme }) => theme.color.grey[500]};
+`;
diff --git a/src/components/ChattingListCard/index.stories.tsx b/src/components/ChattingListCard/index.stories.tsx
@@ -0,0 +1,34 @@
+import type { OpponentInfo } from '@/types/opponentInfo';
+
+import ChattingListCard from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const opponent: OpponentInfo = {
+  id: 1,
+  name: '방가온',
+  generation: 7,
+};
+
+const meta: Meta<typeof ChattingListCard> = {
+  component: ChattingListCard,
+  args: {
+    opponent,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChattingListCard>;
+
+export const Primary: Story = {
+  args: {
+    isNewMessage: false,
+  },
+};
+
+export const isNewMessage: Story = {
+  args: {
+    isNewMessage: true,
+  },
+};
diff --git a/src/components/ChattingListCard/index.tsx b/src/components/ChattingListCard/index.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+
+import * as S from './style';
+
+import { PersonImg4 } from '@/assets';
+import type { OpponentInfo } from '@/types';
+
+interface Props {
+  opponent: OpponentInfo;
+  isNewMessage: boolean;
+}
+
+const ChattingListCard: React.FC<Props> = ({ opponent, isNewMessage }) => (
+  <S.Container>
+    <S.OpponentProfile>
+      <S.ProfileImg>
+        <PersonImg4 />
+      </S.ProfileImg>
+
+      <S.ProfileBox>
+        <S.ProfileInfo>
+          {opponent.generation}기 {opponent.name}
+        </S.ProfileInfo>
+        <S.ChattingTime>1시간 전 채팅</S.ChattingTime>
+      </S.ProfileBox>
+    </S.OpponentProfile>
+    {isNewMessage && <S.BlueCircleIcon />}
+  </S.Container>
+);
+
+export default ChattingListCard;