feat: 회원가입 페이지 구현

pages/signup.tsx

@@ -0,0 +1,8 @@
+import { Form } from "@/src/components-sign/feature-form/Form";
+import { Header } from "@/src/components-sign/ui-header/Header";
+import { Sns } from "@/src/components-sign/ui-sns/Sns";
+import { SignLayout } from "@/src/page-layout/SignLayout/SignLayout";
+
+export default function SignUpPage() {
+  return <SignLayout header={<Header />} form={<Form />} sns={<Sns />} />;
+}

src/components-common/ui-footer/Footer.tsx

@@ -1,6 +1,12 @@
 import styles from "./Footer.module.scss";
 import classNames from "classnames/bind";
-import { route } from "@/src/components-common/util";
+import {
+  facebook,
+  instagram,
+  route,
+  twitter,
+  youtube,
+} from "@/src/components-common/util";
 import { footerText } from "./constant";
 import React from "react";
 import Image from "next/image";
@@ -23,51 +29,35 @@ export const Footer: React.FC<FooterProps> = () => {
           </a>
         </div>
         <div className={cx("sns")}>
-          <a
-            href="https://www.facebook.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <a href={facebook.url} target="_blank" rel="noopener noreferrer">
             <Image
               fill
-              src="images/facebook.svg"
-              alt="facebook 홈페이지로 연결된 facebook 로고"
+              src={facebook.src}
+              alt={facebook.alt}
               style={{ objectFit: "contain" }}
             />
           </a>
-          <a
-            href="https://twitter.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <a href={twitter.url} target="_blank" rel="noopener noreferrer">
             <Image
               fill
-              src="images/twitter.svg"
-              alt="twitter 홈페이지로 연결된 twitter 로고"
+              src={twitter.src}
+              alt={twitter.alt}
               style={{ objectFit: "contain" }}
             />
           </a>
-          <a
-            href="https://www.youtube.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <a href={youtube.url} target="_blank" rel="noopener noreferrer">
             <Image
               fill
-              src="images/youtube.svg"
-              alt="youtube 홈페이지로 연결된 youtube 로고"
+              src={youtube.src}
+              alt={youtube.alt}
               style={{ objectFit: "contain" }}
             />
           </a>
-          <a
-            href="https://www.instagram.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <a href={instagram.url} target="_blank" rel="noopener noreferrer">
             <Image
               fill
-              src="images/instagram.svg"
-              alt="instagram 홈페이지로 연결된 instagram 로고"
+              src={instagram.src}
+              alt={instagram.alt}
               style={{ objectFit: "contain" }}
             />
           </a>

src/components-common/ui-navigation-bar/NavigationBar.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames/bind";
 import { route } from "@/src/components-common/util";
 import { Cta } from "@/src/components-common/ui-cta";
 import { Profile } from "@/src/components-user/ui-profile";
-import { logoImage, navText } from "./constant";
+import { logoImage, text } from "@/src/components-common/util/constant";
 import Image from "next/image";
 
 const cx = classNames.bind(styles);
@@ -35,7 +35,7 @@ export const NavigationBar: React.FC<NavigationBarProps> = ({
         ) : (
           <a href={route.로그인}>
             <Cta>
-              <span className={cx("signin")}>{navText.login}</span>
+              <span className={cx("signin")}>{text.login}</span>
             </Cta>
           </a>
         )}

src/components-common/util/constant.ts

@@ -5,6 +5,45 @@ export const route = {
   FAQ: "/faq",
 };
 
+export const text = {
+  login: "로그인",
+  signup: "회원가입",
+  addLink: "링크 추가하기",
+};
+
+export const kakao = {
+  url: "https://www.kakaocorp.com/page/",
+  src: "/images/kakao.svg",
+  alt: "카카오 홈페이지로 연결된 카카오 로고",
+};
+export const google = {
+  url: "https://www.google.com/",
+  src: "/images/google.png",
+  alt: "구글 홈페이지로 연결된 구글 로고",
+};
+export const twitter = {
+  url: "https://twitter.com/",
+  src: "/images/twitter.svg",
+  alt: "트위터 홈페이지로 연결된 트위터 로고",
+};
+export const youtube = {
+  url: "'https://www.youtube.com/",
+  src: "/images/youtube.svg",
+  alt: "유투브 홈페이지로 연결된 유투브 로고",
+};
+export const facebook = {
+  url: "https://www.facebook.com/",
+  src: "/images/facebook.svg",
+  alt: "페이스북 홈페이지로 연결된 페이스북 로고",
+};
+export const instagram = {
+  url: "https://www.instagram.com/",
+  src: "/images/instagram.svg",
+  alt: "인스타그램 홈페이지로 연결된 인스타그램 로고",
+};
+
+export const logoImage = "images/linkbrary.svg";
+
 const second = 1000;
 const minute = second * 60;
 const hour = minute * 60;

src/components-common/util/useAsync.ts

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useEffectOnce } from "./useEffectOnce";
 import { Types } from "../../../types/data-access-types";
-import { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 
 export interface asyncFunctionType {
   (): Promise<AxiosResponse<Types>>;

src/components-index/ui-header/Header.tsx

@@ -2,6 +2,7 @@ import styles from "./Header.module.scss";
 import classNames from "classnames/bind";
 import React from "react";
 import { Cta } from "@/src/components-common/ui-cta";
+import { text } from "@/src/components-common/util";
 
 const cx = classNames.bind(styles);
 
@@ -18,7 +19,7 @@ export const Header: React.FC<{}> = () => {
         </div>
         {/* TODO: 일단 Ui 만 구현. 추후 링크 추가하기 기능 추가 */}
         <Cta>
-          <span className={cx("add-link")}>링크 추가하기</span>
+          <span className={cx("add-link")}>{text.addLink}</span>
         </Cta>
         <img
           src={"/images/header.png"}

src/components-shared/ui-link-form/LinkForm.module.scss

@@ -44,8 +44,8 @@
 }
 
 .icon {
-  width: 1.6rem;
   height: 1.6rem;
+  width: 1.6rem;
 
   @include tablet {
     width: 2rem;

src/components-shared/ui-link-form/LinkForm.tsx

@@ -21,7 +21,7 @@ export const LinkForm: React.FC<LinkFormProps> = ({ onSubmit }) => {
         <div className={cx("input-box")}>
           <Image
             className={cx("icon")}
-            src="images/link.svg"
+            src="/images/link.svg"
             alt="링크 아이콘"
           />
           <input

src/components-sign/data-access-sign/useCheckAccount.ts

@@ -0,0 +1,29 @@
+import { axiosInstance } from "@/src/components-common/util";
+
+export const checkAccountAlreadyExist = async (
+  id: string
+): Promise<boolean> => {
+  const address = "check-email";
+  try {
+    const response = await axiosInstance.post(address, { email: id });
+    return response.status === 200;
+  } catch (error) {
+    alert("계정이 이미 존재합니다.");
+    return false;
+  }
+};
+
+export const checkAccountValid = async (
+  id: string,
+  pwd: string
+): Promise<boolean> => {
+  const address = "sign-up";
+  const account = { email: id, password: pwd };
+  try {
+    const response = await axiosInstance.post(address, account);
+    return response.status === 200;
+  } catch (error) {
+    alert("계정 정보가 잘못되었습니다.");
+    return false;
+  }
+};

src/components-sign/feature-form/Form.module.scss

@@ -0,0 +1,13 @@
+@import "@/styles/global.scss";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  row-gap: 2.4rem;
+  width: 100%;
+
+  & > :last-child {
+    margin-top: 0.6rem;
+  }
+}