feat: mypage 모달 생성, 앨범 기능 추가

src/assets/icons/index.ts

@@ -5,11 +5,13 @@ import ABLogoIcon from './ab-logo.svg?react';
 import ABIcon from './ab.svg?react';
 import AlarmIcon from './alarm-default.svg?react';
 import NewAlarmIcon from './alarm-new.svg?react';
+import AlbumIcon from './album.svg?react';
 import AppleIcon from './apple.svg?react';
 import BFillLogoIcon from './b-fill-logo.svg?react';
 import BLogoIcon from './b-logo.svg?react';
 import BStrokeLogoIcon from './b-stroke-logo.svg?react';
 import BigDownChevronIcon from './big-down-chevron.svg?react';
+import CameraIcon from './camera.svg?react';
 import CheckIcon from './check.svg?react';
 import ClockIcon from './clock.svg?react';
 import CloseIcon from './close.svg?react';
@@ -39,6 +41,7 @@ import SelectedTextIcon from './text-icon-selected.svg?react';
 import TextIcon from './text-icon.svg?react';
 import ThumbsIcon from './thumbs.svg?react';
 import TopicCreatBackgrounIcon from './topic-create-background.svg?react';
+import TrashIcon from './trash.svg?react';
 import UpDownChevronIcon from './up-down.svg?react';
 import WriteBoxIcon from './write-box.svg?react';
 
@@ -85,4 +88,7 @@ export {
   ImageIcon,
   SelectedImageIcon,
   DeleteIcon,
+  TrashIcon,
+  AlbumIcon,
+  CameraIcon,
 };

src/components/commons/Modal/Modal.tsx

@@ -48,7 +48,7 @@ const actionModalStyle: Styles = {
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: 'white',
-    borderRadius: '12px',
+    borderRadius: '24px',
     position: 'fixed',
     height: 'fit-content',
     width: 'calc(100% - 12px)',

src/routes/MyPage/MyPage.styles.tsx

@@ -14,6 +14,13 @@ export const Container = styled.div`
   background-color: ${(props) => props.theme.colors.navy};
 `;
 
+export const ProfileImgContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 export const BackButton = styled.button`
   width: 24px;
   height: 24px;
@@ -37,3 +44,23 @@ export const Divider = styled.div`
   height: 1px;
   background-color: rgb(255 255 255 / 10%);
 `;
+
+export const PhotoButton = styled.button`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  height: 35px;
+  padding: 7px 6px 7.5px;
+  background-color: ${(props) => props.theme.colors.navy2};
+  backdrop-filter: blur(10px);
+  border: 3px solid ${(props) => props.theme.colors.navy};
+  border-radius: 50%;
+`;
+
+export const ImageInput = styled.input`
+  display: none;
+`;

src/routes/MyPage/MyPage.tsx

@@ -1,20 +1,63 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Col, Row } from '@components/commons/Flex/Flex';
 import Layout from '@components/commons/Layout/Layout';
+import ActionModalButton from '@components/commons/Modal/ActionModalButton';
+import Modal from '@components/commons/Modal/Modal';
 import ProfileImg from '@components/commons/ProfileImg/ProfileImg';
 import Text from '@components/commons/Text/Text';
+import useModal from '@hooks/useModal/useModal';
 
 import { colors } from '@styles/theme';
 
-import { RightChevronIcon } from '@icons/index';
+import { AlbumIcon, CameraIcon, RightChevronIcon, TrashIcon } from '@icons/index';
 
-import { BackButton, Container, Divider, MyInfoUpdateButton } from './MyPage.styles';
+import {
+  BackButton,
+  Container,
+  Divider,
+  ImageInput,
+  MyInfoUpdateButton,
+  PhotoButton,
+  ProfileImgContainer,
+} from './MyPage.styles';
 
 const MyPage = () => {
   const navigate = useNavigate();
 
+  const profileImageInputRef = useRef<HTMLInputElement>(null);
+
+  const [profileImgUrl, setProfileImgUrl] = useState<string | null>(null);
+
+  const { Modal, toggleModal } = useModal('action');
+
+  const handleSelectFromAlbum = () => {
+    if (profileImageInputRef.current) {
+      profileImageInputRef.current.click();
+    }
+  };
+
+  const handleProfileImgFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const fileObj = event.target.files && event.target.files[0];
+    if (!fileObj) {
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setProfileImgUrl(reader.result as string);
+    };
+    reader.readAsDataURL(fileObj);
+    toggleModal();
+  };
+
+  const handleRemoveCurrentImage = () => {};
+
+  const handleOnClickPhotoButton = () => {
+    toggleModal();
+  };
+
   return (
     <Layout
       hasBottomNavigation={true}
@@ -32,7 +75,12 @@ const MyPage = () => {
       <Container>
         <Col gap={100} alignItems="center">
           <Col gap={30} alignItems="center">
-            <ProfileImg url={null} size={102} rounded={true}></ProfileImg>
+            <ProfileImgContainer>
+              <ProfileImg url={profileImgUrl} size={102} rounded={true}></ProfileImg>
+              <PhotoButton onClick={handleOnClickPhotoButton}>
+                <CameraIcon />
+              </PhotoButton>
+            </ProfileImgContainer>
             <Text size={22} weight={600} color={colors.white}>
               사용자 이름
             </Text>
@@ -64,6 +112,25 @@ const MyPage = () => {
             </Text>
           </Col>
         </Col>
+        <ImageInput
+          id="profileImg"
+          ref={profileImageInputRef}
+          type="file"
+          accept="image/*"
+          onChange={handleProfileImgFileChange}
+        />
+        <Modal>
+          <ActionModalButton
+            handleClick={handleSelectFromAlbum}
+            Icon={() => <AlbumIcon />}
+            label={'앨범에서 가져오기'}
+          />
+          <ActionModalButton
+            handleClick={handleRemoveCurrentImage}
+            Icon={() => <TrashIcon />}
+            label={'현재 사진 삭제하기'}
+          />
+        </Modal>
       </Container>
     </Layout>
   );