✨ Feat: 팀원 초대 페이지 구현 (moyeothon#6)

package.json

@@ -10,6 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@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",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/Router.tsx

@@ -2,13 +2,15 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Login from "./pages/login/Login";
 import Create from "@pages/create/Create";
+import Invite from "@pages/invite/Invite";
 
 const Router: React.FC = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/login" element={<Login />} />
         <Route path="/create" element={<Create />} />
+        <Route path="/invite" element={<Invite />} />
       </Routes>
     </BrowserRouter>
   );

src/components/button/Button.tsx → src/components/common/button/Button.tsx

@@ -30,7 +30,7 @@ const Btn = styled.button`
 interface ButtonProps {
   link: string;
   name: string;
-  type: string;
+  type?: string;
 }
 
 const Button: React.FC<ButtonProps> = ({ link, name, type }) => {

src/components/common/hintText/HintText2.tsx

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+
+const HintTextWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const HintTextHeadline2 = styled.h2`
+  color: #343a40;
+  font-family: "Pretendard";
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 30px;
+  letter-spacing: -0.5px;
+`;
+
+const HintTextP1 = styled.p`
+  width: 300px;
+  color: #868e96;
+  font-family: "Pretendard";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+
+  @media (max-width: 360px) {
+    width: 280px;
+  }
+`;
+
+interface TextProps {
+  headline: string;
+  paragraph: string;
+}
+
+const HintText2: React.FC<TextProps> = ({ headline, paragraph }) => {
+  return (
+    <HintTextWrapper>
+      <HintTextHeadline2>{headline}</HintTextHeadline2>
+      <HintTextP1>{paragraph}</HintTextP1>
+    </HintTextWrapper>
+  );
+};
+
+export default HintText2;

src/components/invite/profile/ActivatedProfile.tsx

@@ -0,0 +1,43 @@
+import * as S from "./style";
+
+interface ProfileProps {
+  name: string;
+  position: string;
+  part: string;
+  imgSrc?: string;
+  url?: string;
+}
+
+const ActivatedProfile: React.FC<ProfileProps> = ({
+  name,
+  position,
+  part,
+  imgSrc,
+  url,
+}) => {
+  const handleClick = () => {
+    if (url) {
+      window.location.href = url;
+    }
+  };
+
+  return (
+    <S.Container
+      onClick={handleClick}
+      style={{ cursor: url ? "pointer" : "default" }}
+    >
+      <div>
+        <S.Img src={imgSrc} alt={`${name}'s profile`} />
+      </div>
+      <S.InformWrap>
+        <S.InformDetailWrap>
+          <S.Name>{name}</S.Name>
+          <S.Position>{position}</S.Position>
+        </S.InformDetailWrap>
+        <S.Part>{part}</S.Part>
+      </S.InformWrap>
+    </S.Container>
+  );
+};
+
+export default ActivatedProfile;

src/components/invite/profile/DeactivatedProfile.tsx

@@ -0,0 +1,16 @@
+import * as S from "./style";
+
+export default function DeactivatedProfile() {
+  const handleClick = () => {
+    window.location.href = "#";
+  };
+
+  return (
+    <S.DeactivatedContainer onClick={handleClick}>
+      <S.Hint>
+        아직 팀원 정보가 입력되지 않았어요! <br /> URL을 공유하여 팀원을
+        초대해주세요.
+      </S.Hint>
+    </S.DeactivatedContainer>
+  );
+}

src/components/invite/profile/style.ts

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 350px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  padding: 14px 10px;
+  gap: 10px;
+  border-radius: 20px;
+  background: #bfd8af;
+
+  @media (max-width: 360px) {
+    width: 280px;
+  }
+`;
+
+export const Img = styled.img`
+  width: 54px;
+  height: 54px;
+  border-radius: 27px;
+`;
+
+export const InformWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+export const InformDetailWrap = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+export const Name = styled.h3`
+  color: #343a40;
+  font-family: Pretendard;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: -0.5px;
+`;
+
+export const Position = styled.p`
+  color: #868e96;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 14px;
+  letter-spacing: -0.5px;
+`;
+
+export const Part = styled.p`
+  color: #495057;
+  font-family: Pretendard;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px;
+  letter-spacing: -0.5px;
+`;
+
+export const DeactivatedContainer = styled.div`
+  width: 350px;
+  height: 80px;
+  border-radius: 20px;
+  border: 2px dashed #dee2e6;
+  background: #fff;
+  padding: 18px;
+
+  @media (max-width: 360px) {
+    width: 280px;
+  }
+`;
+
+export const Hint = styled.p`
+  color: #868e96;
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.5px;
+`;

src/components/invite/urlCopy/UrlCopy.tsx

@@ -0,0 +1,28 @@
+import { faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as S from "./style";
+
+export default function UrlCopy() {
+  const url = "https://www.syncup.com/234asdf94al4";
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      alert("URL이 복사되었습니다.");
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  return (
+    <S.Container>
+      <S.Url>{url}</S.Url>
+      <S.Icon onClick={handleCopy}>
+        <FontAwesomeIcon
+          icon={faCopy}
+          style={{ width: "16px", height: "16px", color: "#868E96" }}
+        />
+      </S.Icon>
+    </S.Container>
+  );
+}