[김미소] week14

.babelrc

@@ -3,6 +3,11 @@
     "next/babel"
   ],
   "plugins": [
-    "babel-plugin-styled-components"
+    [
+      "styled-components",
+      {
+        "ssr": true
+      }
+    ]
   ]
 }

components/common/Footer.tsx

@@ -1,58 +1,74 @@
-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[] = [
+import { useEffect, useState } from 'react';
+import { FootInner, FootNav, FootSign, FootSocial, FootWrap } from './footerStyle';
+import LinkButton from './atoms/LinkButton';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+export const snsIconSrc = [
   {
-    id: "Facebook",
-    src: "/assets/icon/icons_face.svg",
-    link: "https://www.facebook.com/?locale=ko_KR",
+    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: '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: '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/",
+    id: 'Instagram',
+    src: '/assets/icon/icons_ins.svg',
+    link: 'https://www.instagram.com/',
   },
 ];
 
+const hidePages = ['/signin', '/signup'];
+
 function Footer() {
+  const { pathname } = useRouter();
+  const [isHideFooter, setIsHideFooter] = useState(true);
+
+  useEffect(() => {
+    setIsHideFooter(hidePages.includes(pathname));
+  }, [pathname]);
+
+  if (isHideFooter) return null;
+
   return (
-    <FootWrap className="foot__main">
-      <FootInner className="foot__inner">
-        <FootSign className="foot__sign">
-          <Link href="https://www.codeit.kr/" target="_blank">
-            ©codeit - 2023
+    <FootWrap className='foot__main'>
+      <FootInner className='foot__inner'>
+        <FootSign className='foot__sign'>
+          <Link
+            href='https://www.codeit.kr/'
+            target='_blank'>
+            ©codeit - 2024
           </Link>
         </FootSign>
 
-        <FootNav className="d__flex foot__nav">
-          <Link href="/privacy">Privacy Policy</Link>
-          <Link href="/faq">FAQ</Link>
+        <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 className='d__flex foot__btn__sns'>
+          {snsIconSrc.map((sns) => (
+            <LinkButton
+              key={sns.id}
+              $link={sns.link}
+              $linkClass={`link--social-emoji`}>
+              <Image
+                src={sns.src}
+                alt={sns.id}
+                width={20}
+                height={20}
+              />
+            </LinkButton>
           ))}
         </FootSocial>
       </FootInner>

components/common/Header.tsx

@@ -1,66 +1,74 @@
-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";
+import { useContext, useEffect, useState } from 'react';
+import { Email, HeaderControl, HeaderInner, HeaderLogo, HeaderWrap } from './headerStyle';
+import { Profile } from '@/styles/commonStyle';
+import { AuthContext } from '@/lib/auto.context';
+import { joinInstance } from '@/lib/axios';
+import LinkButton from './atoms/LinkButton';
+import Button from './atoms/Button';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
 
-const logo = '/assets/logo/logo.svg';
+const LOGO_IMAGE = '/assets/logo/logo.svg';
 
 export interface IHeaderUser {
-  id:number,
-  email:string,
-  name?:string,
-  image_source?:string,
-  created_at?:string,
-  auth_id:string
+  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;
+const hidePages = ['/signin', '/signup'];
+const noHeaderFixed = ['/folder'];
 
-  return {
-    props:{
-      userInfo,
-    }
-  }
-}
+function Header() {
+  const router = useRouter();
+  const { pathname } = router;
+  const { isLoggedIn, handleLogout } = useContext(AuthContext);
+  const [isfixed, setIsFixed] = useState(true);
+  const [isHideHeader, setIsHideHeader] = useState(true);
+  const [userInfo, setUserInfo] = useState<IHeaderUser | null>();
 
-function Header({userInfo}:IHeaderUserLoginInfoApi) {
-  const {pathname} = useRouter();
-  const [fixed, setFixed] = useState(true);
+  const handleUserInfo = async () => {
+    const res = await joinInstance.get(`/sample/user`);
+    setUserInfo(JSON.parse(JSON.stringify(res.data)));
+  };
 
   useEffect(() => {
-    if (pathname === '/folder') {
-      setFixed(false);
-    }
+    handleUserInfo();
+    setIsHideHeader(hidePages.includes(pathname));
+    setIsFixed(noHeaderFixed.includes(pathname));
   }, [pathname]);
 
+  if (isHideHeader) return null;
+
   return (
-    <HeaderWrap className="head__wrap" $position={fixed}>
+    <HeaderWrap
+      className='head__wrap'
+      $position={isfixed}>
       <HeaderInner>
-        <HeaderLogo className="head__logo">
-          <Link href="/">
-            <img src={logo} alt="linkbrary" />
+        <HeaderLogo className='head__logo'>
+          <Link href='/'>
+            <Image
+              src={LOGO_IMAGE}
+              alt='linkbrary'
+              width={133}
+              height={25}
+            />
           </Link>
         </HeaderLogo>
-        <HeaderControl className="head__login__box">
-          {userInfo ? (
-            <HeaderUserInfo>
+        <HeaderControl className='head__login__box'>
+          {isLoggedIn ? (
+            <Button onclick={handleLogout}>
               <Profile></Profile>
-              <Email>{userInfo?.data[0].email}</Email>
-            </HeaderUserInfo>
+              <Email>{userInfo?.email}</Email>
+            </Button>
           ) : (
-            <LinkButton $link={'/signin'} $linkClass={'link--gradient link--login large'}>
+            <LinkButton
+              $link={'/login'}
+              $linkClass={'link--gradient link--login large'}>
               로그인
             </LinkButton>
           )}

components/common/atoms/Button.tsx

@@ -2,30 +2,22 @@ import { ButtonHTMLAttributes } from 'react';
 import { ButtonModule } from './buttonStyle';
 interface IButtonModule {
   children: React.ReactNode;
-  $btnClass: string;
+  $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) {
+export default function Button({ children, $btnClass, $type = 'button', $BeforButtonIcon = '', $afterButtonIcon = '', onclick }: IButtonModule) {
   return (
     <ButtonModule
       className={$btnClass}
       type={$type}
       $BeforButtonIcon={$BeforButtonIcon}
       $afterButtonIcon={$afterButtonIcon}
-      onClick={onclick}
-    >
+      onClick={onclick}>
       {children}
     </ButtonModule>
   );

components/common/atoms/CheckBox.tsx

@@ -1,33 +1,25 @@
-import { IModal } from '../../modal/interface';
+import { IModal } from '@/src/constant/modal';
 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>
-    );
-  }
+function CheckBox({ $data }: IModal<any>['modalData']) {
+  return (
+    <CheckBoxWrap className='chk--list-type1'>
+      {$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>
+  );
 }
 export default CheckBox;