Skip to content

Commit

Permalink
Merge pull request #425 from nightowlzz/part3-김미소-week13
Browse files Browse the repository at this point in the history
[김미소] Week13
  • Loading branch information
kiJu2 authored May 15, 2024
2 parents 3f43aaa + 1c79c50 commit 5aa655c
Show file tree
Hide file tree
Showing 91 changed files with 3,482 additions and 22 deletions.
8 changes: 8 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"presets": [
"next/babel"
],
"plugins": [
"babel-plugin-styled-components"
]
}
62 changes: 62 additions & 0 deletions components/common/Footer.tsx
Original file line number Diff line number Diff line change
@@ -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;
72 changes: 72 additions & 0 deletions components/common/Header.tsx
Original file line number Diff line number Diff line change
@@ -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;
9 changes: 9 additions & 0 deletions components/common/SocialLinkButton.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
32 changes: 32 additions & 0 deletions components/common/atoms/Button.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
33 changes: 33 additions & 0 deletions components/common/atoms/CheckBox.tsx
Original file line number Diff line number Diff line change
@@ -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;
71 changes: 71 additions & 0 deletions components/common/atoms/Input.tsx
Original file line number Diff line number Diff line change
@@ -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;
20 changes: 20 additions & 0 deletions components/common/atoms/LinkButton.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
49 changes: 49 additions & 0 deletions components/common/atoms/LinkButtonStyle.ts
Original file line number Diff line number Diff line change
@@ -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;
}
`
Loading

0 comments on commit 5aa655c

Please sign in to comment.