[Merge] #18 - 공유하기 페이지 구현

package.json

@@ -10,12 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.7.7",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "axios": "^1.7.7",
+    "html2canvas": "^1.4.1",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/Router.tsx

@@ -7,6 +7,7 @@ import Invite from "@pages/invite/Invite";
 import Personal from "@pages/personal/Personal";
 import Result from "@pages/result/Result";
 import Confirm from "@pages/confirm/Confirm";
+import Share from "@pages/share/Share";
 
 const Router: React.FC = () => {
   return (
@@ -19,6 +20,7 @@ const Router: React.FC = () => {
         <Route path="/personal" element={<Personal />} />
         <Route path="/result" element={<Result />} />
         <Route path="/confirm" element={<Confirm />} />
+        <Route path="/share" element={<Share />} />
       </Routes>
     </BrowserRouter>
   );

src/components/common/hintText/HintText2.tsx

@@ -32,7 +32,7 @@ const HintTextP1 = styled.p`
 
 interface TextProps {
   headline: string;
-  paragraph: string;
+  paragraph?: string;
 }
 
 const HintText2: React.FC<TextProps> = ({ headline, paragraph }) => {

src/components/common/inputContainer/InputContainer.tsx

@@ -0,0 +1,40 @@
+import * as S from "./style";
+
+interface InputContainerProps {
+  label: string;
+  defaultText: string;
+  isTextArea?: boolean;
+  isDisabled?: boolean;
+  $background?: string;
+}
+
+export const InputContainer = ({
+  label,
+  defaultText,
+  isTextArea,
+  isDisabled = false,
+  $background = "transparent",
+}: InputContainerProps) => {
+  return (
+    <S.InputWrapper>
+      <S.Label>{label}</S.Label>
+      {isTextArea ? (
+        <S.TextArea
+          placeholder={defaultText}
+          disabled={isDisabled}
+          style={{
+            background: $background,
+          }}
+        />
+      ) : (
+        <S.Input
+          placeholder={defaultText}
+          disabled={isDisabled}
+          style={{
+            background: $background,
+          }}
+        />
+      )}
+    </S.InputWrapper>
+  );
+};

src/pages/confirm/_components/inputContainer/style.ts → src/components/common/inputContainer/style.ts

@@ -22,6 +22,8 @@ export const Input = styled.input`
   border-radius: 8px;
   border: 1px solid #ced4da;
   padding: 0 0.5rem;
+  display: flex;
+  align-items: center;
 `;
 
 export const TextArea = styled.textarea`

src/components/invite/profile/ActivatedProfile.tsx

@@ -6,6 +6,8 @@ interface ProfileProps {
   part: string;
   imgSrc?: string;
   url?: string;
+  $background?: string;
+  $borderColor?: string;
 }
 
 const ActivatedProfile: React.FC<ProfileProps> = ({
@@ -14,6 +16,8 @@ const ActivatedProfile: React.FC<ProfileProps> = ({
   part,
   imgSrc,
   url,
+  $background,
+  $borderColor,
 }) => {
   const handleClick = () => {
     if (url) {
@@ -24,10 +28,18 @@ const ActivatedProfile: React.FC<ProfileProps> = ({
   return (
     <S.Container
       onClick={handleClick}
-      style={{ cursor: url ? "pointer" : "default" }}
+      style={{
+        cursor: url ? "pointer" : "default",
+        border: `1px solid ${$borderColor}`,
+      }}
+      $background={$background || "#bfd8af"}
     >
       <div>
-        <S.Img src={imgSrc} alt={`${name}'s profile`} />
+        {imgSrc ? (
+          <S.Img src={imgSrc} alt={`${name}'s profile`} />
+        ) : (
+          <S.DefaultImg></S.DefaultImg>
+        )}
       </div>
       <S.InformWrap>
         <S.InformDetailWrap>

src/components/invite/profile/style.ts

@@ -1,24 +1,36 @@
 import styled from "styled-components";
 
-export const Container = styled.div`
-  width: 350px;
+interface ContainerProps {
+  $background: string;
+}
+
+export const Container = styled.div<ContainerProps>`
+  width: 100%;
   height: 80px;
   display: flex;
   align-items: center;
   padding: 14px 10px;
   gap: 10px;
   border-radius: 20px;
-  background: #bfd8af;
+  background: ${({ $background }) => ($background ? $background : "#bfd8af")};
 
-  @media (max-width: 360px) {
+  /* @media (max-width: 360px) {
     width: 280px;
-  }
+  } */
 `;
 
 export const Img = styled.img`
   width: 54px;
   height: 54px;
   border-radius: 27px;
+  z-index: 999;
+`;
+
+export const DefaultImg = styled.div`
+  width: 54px;
+  height: 54px;
+  border-radius: 27px;
+  background-color: #adb5bd;
 `;
 
 export const InformWrap = styled.div`

src/hooks/useDownloadScreenShot.ts

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import html2canvas from "html2canvas";
+
+const useDownloadScreenshot = (elementId: string, redirectUrl: string) => {
+  useEffect(() => {
+    const handleDownload = async () => {
+      const element = document.getElementById(elementId);
+      if (element) {
+        try {
+          const canvas = await html2canvas(element, { useCORS: true });
+          canvas.toBlob((blob) => {
+            if (blob) {
+              const url = URL.createObjectURL(blob);
+              const link = document.createElement("a");
+              link.href = url;
+              link.download = "syncUp.png"; // 다운로드할 이미지 파일 이름
+              link.click(); // 다운로드 실행
+              URL.revokeObjectURL(url); // 메모리 해제
+            } else {
+              console.error("Failed to create blob from canvas.");
+            }
+          });
+        } catch (error) {
+          console.error("Error generating canvas:", error);
+        }
+      } else {
+        console.error("Element not found");
+      }
+    };
+
+    handleDownload(); // 페이지 로드 시 다운로드 실행
+
+    // 3초 후 리디렉션
+    const timer = setTimeout(() => {
+      window.location.href = redirectUrl;
+    }, 3000);
+
+    return () => clearTimeout(timer); // 클린업
+  }, [elementId, redirectUrl]); // 의존성 배열
+};
+
+export default useDownloadScreenshot;

src/pages/confirm/Confirm.tsx

@@ -1,7 +1,7 @@
 import { Container } from "@components/common/container/style";
 import { Wrapper } from "@components/common/wrapper/style";
 import HintText2 from "@components/common/hintText/HintText2";
-import { InputContainer } from "./_components/inputContainer/InputContainer";
+import { InputContainer } from "@components/common/inputContainer/InputContainer";
 import Button from "@components/common/button/Button";
 
 const Confirm: React.FC = () => {