Merge pull request #55 from themoment-team/develop

Release �v1.2.0

.storybook/main.ts

@@ -24,5 +24,19 @@ const config: StorybookConfig = {
       config.resolve.alias['@'] = path?.resolve(__dirname, '../src/');
     return config;
   },
+  babel: async (config) => ({
+    ...config,
+    presets: [
+      [
+        'next/babel',
+        {
+          'preset-react': {
+            runtime: 'automatic',
+            importSource: '@emotion/react',
+          },
+        },
+      ],
+    ],
+  }),
 };
 export default config;

next.config.js

@@ -1,5 +1,21 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'gsm-networking-bucket.s3.ap-northeast-2.amazonaws.com',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'bucket.gsm-networking.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
   rewrites: async () => [
     {
       source: '/api/v1/:path*',

src/assets/ImageRegisterIcon.tsx

@@ -0,0 +1,18 @@
+const ImageRegisterIcon = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='3rem'
+    height='3rem'
+    viewBox='0 0 48 48'
+    fill='none'
+  >
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M37 8H11C9.34315 8 8 9.34315 8 11V37C8 38.6569 9.34315 40 11 40H37C38.6569 40 40 38.6569 40 37V11C40 9.34315 38.6569 8 37 8ZM11 6C8.23858 6 6 8.23858 6 11V37C6 39.7614 8.23858 42 11 42H37C39.7614 42 42 39.7614 42 37V11C42 8.23858 39.7614 6 37 6H11ZM13.2 33.4C12.7056 34.0592 13.176 35 14 35H21.9638H22H34.0362C34.8535 35 35.3257 34.0728 34.845 33.4118L28.8087 25.112C28.4094 24.5629 27.5906 24.5629 27.1913 25.112L21.9692 32.2923L18.8 28.0667C18.4 27.5333 17.6 27.5333 17.2 28.0667L13.2 33.4Z'
+      fill='#CBCCCE'
+    />
+  </svg>
+);
+
+export default ImageRegisterIcon;

src/assets/index.ts

@@ -8,6 +8,7 @@ export { default as FilterIcon } from './FilterIcon';
 export { default as FoldIcon } from './FoldIcon';
 export { default as GoogleIcon } from './GoogleIcon';
 export { default as GsmNetworkingIcon } from './GsmNetworkingIcon';
+export { default as ImageRegisterIcon } from './ImageRegisterIcon';
 export { default as LogoIcon } from './LogoIcon';
 export { default as MenteeSelectIcon } from './MenteeSelectIcon';
 export { default as MentorSelectIcon } from './MentorSelectIcon';

src/components/Buttons/ProfileUpdate/index.tsx

@@ -5,13 +5,14 @@ import * as S from './style';
 import { PenIcon } from '@/assets';
 
 interface Props {
-  onClick: () => void;
+  onClick?: () => void;
 }
 
 const ProfileUpdateButton: React.FC<Props> = ({ onClick }) => (
   <S.Button type='button' onClick={onClick}>
     <PenIcon />
-    프로필 수정
+    이미지 등록
+    {/* 프로필 수정 // 임시로 이미지 등록으로 내용 변경해두겠습니다. */}
   </S.Button>
 );
 

src/components/Header/index.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 
+import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 import { toast } from 'react-toastify';
@@ -44,7 +45,11 @@ const Header: React.FC<Props> = ({ clearList }) => {
             )}
           </S.RedirectBox>
           <S.ProfileBox type='button' onClick={handleProfileClick}>
-            <I.PersonImg4 />
+            {data?.profileUrl ? (
+              <Image src={data.profileUrl} alt='profile img' fill />
+            ) : (
+              <I.PersonImg4 />
+            )}
           </S.ProfileBox>
         </S.RightBox>
       </S.Inner>

src/components/Header/style.ts

@@ -70,6 +70,11 @@ export const ProfileBox = styled.button`
   overflow: hidden;
   width: 2.25rem;
   height: 2.25rem;
+  position: relative;
+
+  & > img {
+    object-fit: cover;
+  }
 
   & > svg {
     width: 2.1875rem;

src/components/MentorCard/index.stories.tsx

@@ -28,6 +28,8 @@ export const Primary: Story = {
         URL: 'https://official.hellogsm.kr/',
       },
       temporaryImgNumber: 0,
+      profileUrl:
+        'https://gsm-networking-bucket.s3.ap-northeast-2.amazonaws.com/a6c46a31-485e-4cc4-b9ad-e572eee14f622023-11-21T09%3A16%3A21.446456989.jpeg',
     },
   },
 };

src/components/MentorCard/index.tsx

@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import Image from 'next/image';
+
 import { toast } from 'react-toastify';
 
 import RandomWorkerImg from './RandomMentorImg';
@@ -34,7 +36,11 @@ const MentorCard: React.FC<Props> = ({ worker }) => {
   return (
     <S.WorkerCardContainer>
       <S.WorkerImgBox>
-        <RandomWorkerImg temporaryImgNumber={worker.temporaryImgNumber} />
+        {worker.profileUrl ? (
+          <Image src={worker.profileUrl} alt={worker.name} fill />
+        ) : (
+          <RandomWorkerImg temporaryImgNumber={worker.temporaryImgNumber} />
+        )}
       </S.WorkerImgBox>
       <S.WorkerInfoHead>
         <S.WorkerNameBox>

src/components/MentorCard/style.ts

@@ -94,6 +94,13 @@ export const WorkerImgBox = styled.div`
   align-items: end;
   width: 100%;
   height: 6.8125rem;
+  position: relative;
+  overflow: hidden;
+  border: 0.0625rem solid ${({ theme }) => theme.color.grey[50]};
+
+  & > img {
+    object-fit: contain;
+  }
 `;
 
 export const BlueCheckIconWrapper = styled.div`

src/components/Modal/MyPage/ModalWrapper/index.stories.tsx

@@ -0,0 +1,13 @@
+import ModalWrapper from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ModalWrapper> = {
+  component: ModalWrapper,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ModalWrapper>;
+
+export const Primary: Story = {};

src/components/Modal/MyPage/ModalWrapper/index.tsx

@@ -0,0 +1,29 @@
+/**@jsxImportSource @emotion/react */
+
+'use client';
+
+import React from 'react';
+
+import type { Interpolation, Theme } from '@emotion/react';
+
+import * as S from './style';
+
+interface Props {
+  children: React.ReactNode;
+  closeModal: () => void;
+  innerCss?: Interpolation<Theme>;
+}
+
+const MyPageModalWrapper: React.FC<Props> = ({
+  children,
+  closeModal,
+  innerCss,
+}) => (
+  <S.ModalWrapper onClick={closeModal}>
+    <S.ModalInner onClick={(e) => e.stopPropagation()} css={innerCss}>
+      {children}
+    </S.ModalInner>
+  </S.ModalWrapper>
+);
+
+export default MyPageModalWrapper;

src/components/Modal/MyPage/ModalWrapper/style.ts

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+export const ModalWrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  height: 100dvh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.15);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+`;
+
+export const ModalInner = styled.div`
+  padding: 1rem 1.75rem;
+  border-radius: 0.625rem;
+  background: ${({ theme }) => theme.color.white};
+`;

src/components/Modal/MyPage/ProfileImgRegister/index.stories.tsx

@@ -0,0 +1,13 @@
+import ProfileImgRegister from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ProfileImgRegister> = {
+  component: ProfileImgRegister,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProfileImgRegister>;
+
+export const Primary: Story = {};

src/components/Modal/MyPage/ProfileImgRegister/index.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { css } from '@emotion/react';
+
+import { toast } from 'react-toastify';
+
+import * as S from './style';
+
+import { ImageRegisterIcon } from '@/assets';
+import { MyPageModalWrapper } from '@/components';
+import { useGetMyInfo, usePostProfileImgUrl } from '@/hooks';
+import { usePostUploadFile } from '@/hooks';
+import type { PostProfileImgType } from '@/types';
+
+interface Props {
+  closeModal: () => void;
+}
+
+const ProfileImgRegisterModal: React.FC<Props> = ({ closeModal }) => {
+  const { mutate: mutateUploadFile } = usePostUploadFile();
+  const { mutate: mutateProfileImgUrl } = usePostProfileImgUrl();
+  const { refetch: refetchGetMyInfo } = useGetMyInfo();
+
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) return;
+
+    const profileImg = e.target.files[0];
+
+    if (profileImg.size > 1024 * 1024 * 20) {
+      return toast.error('프로필 이미지는 20MB 이하만 업로드 가능합니다.');
+    }
+
+    const formData = new FormData();
+
+    formData.append('file', profileImg);
+
+    mutateUploadFile(formData, {
+      onSuccess: ({ fileUrl }) => {
+        const data: PostProfileImgType = {
+          profileUrl: fileUrl,
+        };
+
+        mutateProfileImgUrl(data, {
+          onSuccess: () => {
+            toast.success('프로필 이미지 업로드에 성공했습니다.');
+            refetchGetMyInfo();
+            closeModal();
+          },
+          onError: () => {
+            toast.error('프로필 이미지 업로드에 실패했습니다.');
+          },
+        });
+      },
+      onError: () => {
+        toast.error('프로필 이미지 업로드에 실패했습니다.');
+      },
+    });
+  };
+
+  return (
+    <MyPageModalWrapper
+      closeModal={closeModal}
+      innerCss={css`
+        border-radius: 1.25rem;
+        padding: 1.5rem;
+      `}
+    >
+      <S.Title>프로필 이미지 변경</S.Title>
+      <S.ImgInput
+        type='file'
+        id='img-input'
+        accept='image/*'
+        onChange={handleFileInputChange}
+      />
+      <S.ImgInputLabel htmlFor='img-input'>
+        <ImageRegisterIcon />
+      </S.ImgInputLabel>
+    </MyPageModalWrapper>
+  );
+};
+
+export default ProfileImgRegisterModal;

src/components/Modal/MyPage/ProfileImgRegister/style.ts

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+
+export const Title = styled.p`
+  ${({ theme }) => theme.typo.body1};
+  color: ${({ theme }) => theme.color.grey[800]};
+  margin-bottom: 1.5rem;
+`;
+
+export const ImgInput = styled.input`
+  display: none;
+`;
+
+export const ImgInputLabel = styled.label`
+  width: 14.5rem;
+  height: 14rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${({ theme }) => theme.color.grey[50]};
+  border: 1px dashed ${({ theme }) => theme.color.grey[200]};
+  border-radius: 0.625rem;
+  cursor: pointer;
+`;

src/components/Modal/MyPage/index.ts

@@ -0,0 +1,2 @@
+export { default as MyPageModalWrapper } from './ModalWrapper';
+export { default as ProfileImgRegisterModal } from './ProfileImgRegister';

src/components/Modal/index.ts

@@ -1 +1,2 @@
+export * from './MyPage';
 export { default as FilterModal } from './Filter';