[김미소] Week13

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    "babel-plugin-styled-components"
+  ]
+}

components/common/Footer.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link";
+import SocialLinkButton from "./SocialLinkButton";
+import {
+  FootInner,
+  FootNav,
+  FootSign,
+  FootSocial,
+  FootWrap,
+} from "./footerStyle";
+export interface IImageSnsArr {
+  id: string;
+  src: string;
+  link: string;
+}
+const imageSnsArr: IImageSnsArr[] = [
+  {
+    id: "Facebook",
+    src: "/assets/icon/icons_face.svg",
+    link: "https://www.facebook.com/?locale=ko_KR",
+  },
+  {
+    id: "Twitter",
+    src: "/assets/icon/icons_twt.svg",
+    link: "https://twitter.com/?lang=ko",
+  },
+  {
+    id: "YouTube",
+    src: "/assets/icon/icons_you.svg",
+    link: "https://www.youtube.com/",
+  },
+  {
+    id: "Instagram",
+    src: "/assets/icon/icons_ins.svg",
+    link: "https://www.instagram.com/",
+  },
+];
+
+function Footer() {
+  return (
+    <FootWrap className="foot__main">
+      <FootInner className="foot__inner">
+        <FootSign className="foot__sign">
+          <Link href="https://www.codeit.kr/" target="_blank">
+            ©codeit - 2023
+          </Link>
+        </FootSign>
+
+        <FootNav className="d__flex foot__nav">
+          <Link href="/privacy">Privacy Policy</Link>
+          <Link href="/faq">FAQ</Link>
+        </FootNav>
+
+        <FootSocial className="d__flex foot__btn__sns">
+          {imageSnsArr.map((sns) => (
+            <SocialLinkButton key={sns.id} {...sns} />
+          ))}
+        </FootSocial>
+      </FootInner>
+    </FootWrap>
+  );
+}
+export default Footer;

components/common/Header.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useState } from "react";
+import axios from "@/lib/axios";
+import { Email, HeaderControl, HeaderInner, HeaderLogo, HeaderUserInfo, HeaderWrap } from "./headerStyle";
+import { useRouter } from "next/router";
+import { Profile } from "@/styles/commonStyle";
+import LinkButton from "./atoms/LinkButton";
+import Link from "next/link";
+import Image from "next/image";
+
+const logo = '/assets/logo/logo.svg';
+
+export interface IHeaderUser {
+  id:number,
+  email:string,
+  name?:string,
+  image_source?:string,
+  created_at?:string,
+  auth_id:string
+}
+
+export interface IHeaderUserLoginInfoApi {
+  userInfo?: {
+    data: IHeaderUser[];
+  };
+}
+
+export async function getStaticProps() {
+  const res = await axios.get(``);
+  const userInfo = res.data;
+
+  return {
+    props:{
+      userInfo,
+    }
+  }
+}
+
+function Header({userInfo}:IHeaderUserLoginInfoApi) {
+  const {pathname} = useRouter();
+  const [fixed, setFixed] = useState(true);
+
+  useEffect(() => {
+    if (pathname === '/folder') {
+      setFixed(false);
+    }
+  }, [pathname]);
+
+  return (
+    <HeaderWrap className="head__wrap" $position={fixed}>
+      <HeaderInner>
+        <HeaderLogo className="head__logo">
+          <Link href="/">
+            <img src={logo} alt="linkbrary" />
+          </Link>
+        </HeaderLogo>
+        <HeaderControl className="head__login__box">
+          {userInfo ? (
+            <HeaderUserInfo>
+              <Profile></Profile>
+              <Email>{userInfo?.data[0].email}</Email>
+            </HeaderUserInfo>
+          ) : (
+            <LinkButton $link={'/signin'} $linkClass={'link--gradient link--login large'}>
+              로그인
+            </LinkButton>
+          )}
+        </HeaderControl>
+      </HeaderInner>
+    </HeaderWrap>
+  );
+}
+export default Header;

components/common/SocialLinkButton.tsx

@@ -0,0 +1,9 @@
+import { IImageSnsArr } from "./Footer";
+
+export default function SocialLinkButton({ id, src, link }: IImageSnsArr) {
+  return (
+    <a href={link} target="_blank">
+      <img src={src} alt={id + "이동 버튼"} />
+    </a>
+  );
+}

components/common/atoms/Button.tsx

@@ -0,0 +1,32 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ButtonModule } from './buttonStyle';
+interface IButtonModule {
+  children: React.ReactNode;
+  $btnClass: string;
+  $BeforButtonIcon?: string;
+  $id?: string;
+  $afterButtonIcon?: string;
+  $type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  onclick?: () => void;
+}
+
+export default function Button({
+  children,
+  $btnClass,
+  $type = 'button',
+  $BeforButtonIcon = '',
+  $afterButtonIcon = '',
+  onclick,
+}: IButtonModule) {
+  return (
+    <ButtonModule
+      className={$btnClass}
+      type={$type}
+      $BeforButtonIcon={$BeforButtonIcon}
+      $afterButtonIcon={$afterButtonIcon}
+      onClick={onclick}
+    >
+      {children}
+    </ButtonModule>
+  );
+}

components/common/atoms/CheckBox.tsx

@@ -0,0 +1,33 @@
+import { IModal } from '../../modal/interface';
+import { CheckBoxWrap } from './checkBoxStyle';
+
+interface ICheckBoxData {
+  $data: IModal['$modalData'];
+}
+
+function CheckBox({ $data }: ICheckBoxData) {
+  if ($data?.data) {
+    return (
+      <CheckBoxWrap className="chk--list-type1">
+        {$data &&
+          $data.data.map((list: any) => (
+            <div className="inner" key={list.id}>
+              <input type="checkbox" id={list.id} />
+              <label htmlFor={list.id}>
+                <strong>{list.name}</strong>
+                <span>{list.link.count}개 링크</span>
+              </label>
+            </div>
+          ))}
+      </CheckBoxWrap>
+    );
+  } else {
+    return (
+      <div>
+        <input type="text" />
+        <label htmlFor=""></label>
+      </div>
+    );
+  }
+}
+export default CheckBox;

components/common/atoms/Input.tsx

@@ -0,0 +1,71 @@
+import { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react';
+import { InputModule } from './inputStyle';
+import Button from './Button';
+import { SearchResults } from '@/pages/folder/folderStyle';
+import { Relative } from '@/styles/commonStyle';
+
+interface IButtonModule {
+  $type?: string;
+  $inputClass?: string;
+  $btnShow?: boolean;
+  $placeholder?: string;
+  $beforeBgIcon?: string;
+  $btnClass?: string;
+  children?: ReactNode;
+  $clickEvent?: string;
+  onchange?: (value: string) => void;
+}
+
+function Input({
+  $btnShow = false,
+  $type = 'text',
+  $inputClass,
+  $placeholder,
+  $beforeBgIcon = '',
+  $btnClass = '',
+  children,
+  $clickEvent,
+  onchange,
+}: IButtonModule) {
+  const [value, setValue] = useState('');
+  const refInput = useRef(null);
+  const handleChangInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    setValue(value);
+
+    if (onchange) {
+      // value값 전달
+      onchange(value);
+    }
+  };
+
+  const handleButtonEvent = (text: string) => {
+    if (!$clickEvent) return;
+    if ($clickEvent === 'reset') {
+      setValue('');
+    }
+  };
+
+  return (
+   <>
+     <Relative>
+        <InputModule
+          type={$type}
+          className={$inputClass}
+          placeholder={$placeholder}
+          value={value}
+          onChange={handleChangInput}
+          $beforeBgIcon={$beforeBgIcon}
+          ref={refInput}
+        />
+        {$btnShow && (
+          <Button $btnClass={$btnClass} onclick={() => handleButtonEvent(value)}>
+            {children}
+          </Button>
+        )}
+      </Relative>
+    {value && <SearchResults><span>{value} </span>으로 검색한 결과입니다.</SearchResults>}
+   </>
+  );
+}
+export default Input;

components/common/atoms/LinkButton.tsx

@@ -0,0 +1,20 @@
+import { LinkModule } from "./LinkButtonStyle";
+interface IButtonModule {
+  children: React.ReactNode;
+  $link: string;
+  $linkClass: string;
+  $target?: string;
+}
+
+export default function LinkButton({
+  children,
+  $link,
+  $linkClass,
+  $target="_self"
+}: IButtonModule) {
+  return (
+    <LinkModule href={$link} className={$linkClass} target="$target">
+      {children}
+    </LinkModule>
+  );
+}

components/common/atoms/LinkButtonStyle.ts

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+import { theme } from "@/styles/theme";
+import Link from "next/link";
+import { font24 } from "@/styles/commonStyle";
+
+
+export const LinkModule = styled(Link)`
+  display: block;
+  text-align: center;
+  &.link {
+    &--gradient {
+      color: #fff;
+      font-weight: 600;
+      text-align:center;
+      background:${theme.bgColor.gradient};
+      border-radius: 8px;
+    }
+    &--login {
+      width: 128px;
+      font-size: 18px;
+      @media screen and (max-width: ${theme.screenSize.moLarge}) {
+        width: 80px;
+      }
+    }
+    &--title {
+      &-text {
+        ${font24}
+      }
+    }
+  }
+  &.full {
+    width: 100% !important; 
+  }
+  &.large {
+    font-size: 18px;
+    line-height: 53px;
+    font-weight: 600;
+    @media screen and (max-width: ${theme.screenSize.moLarge}) {
+      font-size: 14px;
+      line-height: 37px;
+    }
+  }
+  &.mideum {
+    width: 80px;
+    font-size: 14px;
+    line-height: 37px;
+    font-weight: 600;
+  }
+`