Skip to content

Commit

Permalink
Feat: react 파일 next.js로 이동 및 설절
Browse files Browse the repository at this point in the history
  • Loading branch information
nightowlzz committed May 13, 2024
1 parent a923ad1 commit 82aaa22
Show file tree
Hide file tree
Showing 91 changed files with 3,335 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;
46 changes: 46 additions & 0 deletions components/common/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { useState } from "react";
import useFetch from "@/src/hook/useFetch";
import { IHeaderUserLoginInfoApi } from "./interface";
import { BASE_URL } from "@/src/constant/api";
import { Email, HeaderControl, HeaderInner, HeaderLogo, HeaderUserInfo, HeaderWrap } from "./headerStyle";
import Link from "next/link";
import { Profile } from "@/styles/commonStyle";
import LinkButton from "./atoms/LinkButton";

const logo = '/assets/logo/logo.svg';

function Header() {
// const { pathname } = useLocation();
const { value } = useFetch<IHeaderUserLoginInfoApi>(BASE_URL);
const [fixed, setFixed] = useState(true);
// useEffect(() => {
// if (pathname === '/folder') {
// setFixed(false);
// }
// }, [pathname]);
const userInfo = value?.data[0] ?? undefined;
return (
<HeaderWrap className="head__wrap" $position={fixed}>
<HeaderInner>
<HeaderLogo>
<Link href="/">
<img src={logo} alt="linkbrary" />
</Link>
</HeaderLogo>
<HeaderControl className="head__login__box">
{userInfo ? (
<HeaderUserInfo>
<Profile></Profile>
<Email>{userInfo?.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>
);
}
31 changes: 31 additions & 0 deletions components/common/atoms/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { ButtonModule } from './buttonStyle';
interface IButtonModule {
children: React.ReactNode;
$btnClass: string;
$BeforButtonIcon?: string;
$id?: string | number;
$afterButtonIcon?: string;
$type?: 'button' | 'reset' | 'submit' | undefined;
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 (typeof $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;
70 changes: 70 additions & 0 deletions components/common/atoms/Input.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react';
import { InputModule } from './inputStyle';
import Button from './Button';
import { SearchResults } from '@/pages/folder/folderStyle';

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 (
<>
<div style={{position:'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>
)}
</div>
{value && <SearchResults><span>{value}</span>으로 검색한 결과입니다.</SearchResults>}
</>
);
}
export default Input;
18 changes: 18 additions & 0 deletions components/common/atoms/LinkButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { LinkModule } from "./LinkButtonStyle";
interface IButtonModule {
children: React.ReactNode;
$link: string;
$linkClass: string;
}

export default function LinkButton({
children,
$link,
$linkClass,
}: IButtonModule) {
return (
<LinkModule href={$link} className={$linkClass}>
{children}
</LinkModule>
);
}
43 changes: 43 additions & 0 deletions components/common/atoms/LinkButtonStyle.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import styled from "styled-components";
import { theme } from "@/styles/theme";
import Link from "next/link";


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;
}
}
}
&.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 82aaa22

Please sign in to comment.