#39 feat: 사진 업로드 기능 추가

Team-Tiki · Jul 9, 2024 · 206e604 · 206e604
1 parent 0b3f9a7
commit 206e604
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/shared/component/createWorkSpace/image/WorkSpaceImage.style.ts b/src/shared/component/createWorkSpace/image/WorkSpaceImage.style.ts
@@ -12,7 +12,11 @@ export const imageAddStyle = css({
   width: '20rem',
   height: '20rem',
 
+  borderRadius: '57.14px',
+  objectFit: 'cover',
+
   cursor: 'pointer',
+  boxSizing: 'border-box',
 });
 
 export const imageDeleteStyle = css({

diff --git a/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx b/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx
@@ -1,3 +1,5 @@
+import { useRef, useState } from 'react';
+
 import TeamProfileAdd from '@/common/asset/svg/team-profile-add.svg?react';
 import TeamProfileDelete from '@/common/asset/svg/team-profile-delete.svg?react';
 import Button from '@/common/component/Button/Button';
@@ -16,6 +18,21 @@ interface WorkSpaceImageProps {
 }
 
 const WorkSpaceImage = ({ onNext }: WorkSpaceImageProps) => {
+  const [fileURL, setFileURL] = useState<string>('');
+  const imgUploadInput = useRef<HTMLInputElement | null>(null);
+
+  const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const newFileURL = URL.createObjectURL(event.target.files[0]);
+      setFileURL(newFileURL);
+    }
+  };
+
+  const onImageRemove = (): void => {
+    URL.revokeObjectURL(fileURL);
+    setFileURL('');
+  };
+
   return (
     <section css={sectionStyle}>
       <WorkSapceInfo
@@ -24,9 +41,14 @@ const WorkSpaceImage = ({ onNext }: WorkSpaceImageProps) => {
         info="우리 동아리의 프로필에 표시할 이미지를 등록해주세요"
       />
       <div css={imageBoxStyle}>
-        <TeamProfileAdd css={imageAddStyle} />
-        <TeamProfileDelete css={imageDeleteStyle} />
+        {fileURL ? (
+          <img src={fileURL} alt="프로필 이미지" css={imageAddStyle} />
+        ) : (
+          <TeamProfileAdd css={imageAddStyle} onClick={() => imgUploadInput.current?.click()} />
+        )}
+        {fileURL && <TeamProfileDelete css={imageDeleteStyle} onClick={onImageRemove} />}
       </div>
+      <input css={{ display: 'none' }} type="file" accept="image/*" ref={imgUploadInput} onChange={onImageChange} />
       <Button css={buttonCompleteStyle} variant="primary" size="medium" onClick={onNext}>
         완료
       </Button>