(
+ function InputField(
+ { id, label, type, errorMessage, suffixIcon, ...rest },
+ ref
+ ) {
+ const [inputType, setInputType] = useState(type);
+
+ const onSuffixIconClick = () => {
+ if (inputType === "password") {
+ setInputType("text");
+ return;
+ }
+
+ setInputType("password");
+ };
+
+ return (
+
+ {label && }
+
+ {suffixIcon && type === "password" && (
+
+ )}
+ {errorMessage && {errorMessage}}
+
+ );
+ }
+);
diff --git a/src/components/common/InputField/parts/Input.module.scss b/src/components/common/InputField/parts/Input.module.scss
new file mode 100644
index 000000000..07f472780
--- /dev/null
+++ b/src/components/common/InputField/parts/Input.module.scss
@@ -0,0 +1,23 @@
+.default {
+ padding: 18px 16px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 8px;
+ border: 1px solid var(--Linkbrary-gray20, #ccd5e3);
+ background: var(--Linkbrary-white, #fff);
+
+ color: var(--Linkbrary-gray100, #373740);
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+
+ &:focus {
+ border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
+ }
+}
+
+.red {
+ border: 1px solid var(--Linkbrary-red, #ff5b56);
+}
diff --git a/src/components/common/InputField/parts/Input.tsx b/src/components/common/InputField/parts/Input.tsx
new file mode 100644
index 000000000..685bc5dc2
--- /dev/null
+++ b/src/components/common/InputField/parts/Input.tsx
@@ -0,0 +1,19 @@
+import classNames from "classnames/bind";
+import { InputHTMLAttributes, forwardRef } from "react";
+
+import styles from "./Input.module.scss";
+
+const cn = classNames.bind(styles);
+
+interface InputProps extends InputHTMLAttributes {
+ isError?: boolean;
+}
+
+export default forwardRef(function Input(
+ { isError, ...rest },
+ ref
+) {
+ return (
+
+ );
+});
diff --git a/src/components/common/InputField/parts/Label.module.scss b/src/components/common/InputField/parts/Label.module.scss
new file mode 100644
index 000000000..94003a437
--- /dev/null
+++ b/src/components/common/InputField/parts/Label.module.scss
@@ -0,0 +1,7 @@
+.label {
+ color: var(--black, #000);
+
+ font-size: 14px;
+ font-weight: 400;
+ line-height: normal;
+}
diff --git a/src/components/common/InputField/parts/Label.tsx b/src/components/common/InputField/parts/Label.tsx
new file mode 100644
index 000000000..13976c7ff
--- /dev/null
+++ b/src/components/common/InputField/parts/Label.tsx
@@ -0,0 +1,18 @@
+import classNames from "classnames/bind";
+import { LabelHTMLAttributes, ReactNode } from "react";
+
+import styles from "./Label.module.scss";
+
+const cn = classNames.bind(styles);
+
+interface LabelProps extends LabelHTMLAttributes {
+ children: ReactNode;
+}
+
+export default function Label({ htmlFor, children }: LabelProps) {
+ return (
+
+ );
+}
diff --git a/src/components/common/InputField/parts/SuffixIcon.module.scss b/src/components/common/InputField/parts/SuffixIcon.module.scss
new file mode 100644
index 000000000..50d8e8387
--- /dev/null
+++ b/src/components/common/InputField/parts/SuffixIcon.module.scss
@@ -0,0 +1,6 @@
+.suffixIcon {
+ position: absolute;
+ right: 24px;
+ top: 50%;
+ transform: translate(0%, 25%);
+}
diff --git a/src/components/common/InputField/parts/SuffixIcon.tsx b/src/components/common/InputField/parts/SuffixIcon.tsx
new file mode 100644
index 000000000..903793cc4
--- /dev/null
+++ b/src/components/common/InputField/parts/SuffixIcon.tsx
@@ -0,0 +1,19 @@
+import classNames from "classnames/bind";
+import { Ic_Eye_Off, Ic_Eye_On } from "@/public";
+import { InputHTMLAttributes } from "react";
+
+import styles from "./SuffixIcon.module.scss";
+
+const cn = classNames.bind(styles);
+
+interface SuffixIconProps extends InputHTMLAttributes {
+ onClick: () => void;
+}
+
+export default function SuffixIcon({ type, onClick }: SuffixIconProps) {
+ return (
+
+ {type === "password" ? : }
+
+ );
+}
diff --git a/src/components/common/InputField/parts/index.ts b/src/components/common/InputField/parts/index.ts
new file mode 100644
index 000000000..a98dab38f
--- /dev/null
+++ b/src/components/common/InputField/parts/index.ts
@@ -0,0 +1,3 @@
+export { default as SuffixIcon } from "./SuffixIcon";
+export { default as Label } from "./Label";
+export { default as Input } from "./Input";
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
new file mode 100644
index 000000000..744cbefce
--- /dev/null
+++ b/src/components/common/index.ts
@@ -0,0 +1,3 @@
+export { default as GNB } from "./GNB/GNB";
+export { default as Footer } from "./Footer/Footer";
+export { default as InputField } from "./InputField/InputField";
diff --git a/src/components/folder/FavoriteButtonList/FavoriteButton/FavoriteButton.module.scss b/src/components/folder/FavoriteButtonList/FavoriteButton/FavoriteButton.module.scss
new file mode 100644
index 000000000..26b84c8c2
--- /dev/null
+++ b/src/components/folder/FavoriteButtonList/FavoriteButton/FavoriteButton.module.scss
@@ -0,0 +1,22 @@
+.FavoriteButton {
+ display: inline-flex;
+ padding: 8px 12px;
+ align-items: center;
+ height: 36px;
+ border-radius: 5px;
+ border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
+ background: #fff;
+ color: #000;
+ font-size: 16px;
+ font-weight: 400;
+ flex-shrink: 0;
+
+ &:hover {
+ background: var(--Linkbrary-gray10, #e7effb);
+ }
+
+ &:focus {
+ color: #fff;
+ background: var(--Linkbrary-primary-color, #6d6afe);
+ }
+}
diff --git a/src/components/folder/FavoriteButtonList/FavoriteButton/FavoriteButton.tsx b/src/components/folder/FavoriteButtonList/FavoriteButton/FavoriteButton.tsx
new file mode 100644
index 000000000..5314bf0aa
--- /dev/null
+++ b/src/components/folder/FavoriteButtonList/FavoriteButton/FavoriteButton.tsx
@@ -0,0 +1,27 @@
+import classNames from "classnames/bind";
+import type { Favorite } from "@/src/types/type";
+
+import styles from "./FavoriteButton.module.scss";
+
+const cn = classNames.bind(styles);
+
+interface FavoriteButtonProps {
+ favorite?: Favorite;
+ onFavoriteClick: (favorite?: Favorite | null) => void;
+}
+
+export default function FavoriteButton({
+ favorite,
+ onFavoriteClick,
+}: FavoriteButtonProps) {
+ const { name } = favorite || { name: "전체" };
+
+ return (
+
+ );
+}
diff --git a/src/components/folder/FavoriteButtonList/FavoriteButton/index.ts b/src/components/folder/FavoriteButtonList/FavoriteButton/index.ts
new file mode 100644
index 000000000..27c9217f8
--- /dev/null
+++ b/src/components/folder/FavoriteButtonList/FavoriteButton/index.ts
@@ -0,0 +1 @@
+export { default as FavoriteButton } from "./FavoriteButton";
diff --git a/src/components/folder/FavoriteButtonList/FavoriteButtonList.module.scss b/src/components/folder/FavoriteButtonList/FavoriteButtonList.module.scss
new file mode 100644
index 000000000..ef3870411
--- /dev/null
+++ b/src/components/folder/FavoriteButtonList/FavoriteButtonList.module.scss
@@ -0,0 +1,28 @@
+.FavoriteButtonList {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ .totalBtn {
+ display: inline-flex;
+ padding: 8px 12px;
+ align-items: center;
+ height: 36px;
+ border-radius: 5px;
+ border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
+ background: #fff;
+ color: #000;
+ font-size: 16px;
+ font-weight: 400;
+ flex-shrink: 0;
+
+ &:hover {
+ background: var(--Linkbrary-gray10, #e7effb);
+ }
+
+ &:focus {
+ color: #fff;
+ background: var(--Linkbrary-primary-color, #6d6afe);
+ }
+ }
+}
diff --git a/src/components/folder/FavoriteButtonList/FavoriteButtonList.tsx b/src/components/folder/FavoriteButtonList/FavoriteButtonList.tsx
new file mode 100644
index 000000000..83dd40c83
--- /dev/null
+++ b/src/components/folder/FavoriteButtonList/FavoriteButtonList.tsx
@@ -0,0 +1,33 @@
+import classNames from "classnames/bind";
+import { useQuery } from "@tanstack/react-query";
+
+import { FavoriteButton } from "./FavoriteButton";
+import type { Favorite } from "@/src/types/type";
+
+import styles from "./FavoriteButtonList.module.scss";
+
+const cn = classNames.bind(styles);
+
+interface FavoriteButtonListProps {
+ handleFavoriteClick: (favorite?: Favorite | null) => void;
+}
+
+export default function FavoriteButtonList({
+ handleFavoriteClick,
+}: FavoriteButtonListProps) {
+ const { data: favorites } = useQuery({ queryKey: ["favorites"] });
+
+ return (
+
+
+ {favorites &&
+ favorites.map((favorite) => (
+
+ ))}
+
+ );
+}
diff --git a/src/components/folder/Folder.module.scss b/src/components/folder/Folder.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/folder/Folder.tsx b/src/components/folder/Folder.tsx
new file mode 100644
index 000000000..5398f0565
--- /dev/null
+++ b/src/components/folder/Folder.tsx
@@ -0,0 +1,25 @@
+import { useState } from "react";
+
+import { FavoriteButtonList, LinksList } from ".";
+import type { Favorite } from "@/src/types/type";
+
+export default function Folder() {
+ const [folderId, setFolderId] = useState(null);
+
+ const handleFavoriteClick = (favorite?: Favorite | null) => {
+ if (favorite) {
+ setFolderId(favorite.id);
+ return;
+ }
+
+ setFolderId(null);
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+}
diff --git a/src/components/folder/LinksList/LinkOverview/LinkOverview.module.scss b/src/components/folder/LinksList/LinkOverview/LinkOverview.module.scss
new file mode 100644
index 000000000..f7020c49b
--- /dev/null
+++ b/src/components/folder/LinksList/LinkOverview/LinkOverview.module.scss
@@ -0,0 +1,68 @@
+.LinkOverview {
+ max-width: 340px;
+ width: 100%;
+ height: 334px;
+ box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.08);
+ border-radius: 15px;
+ overflow: hidden;
+ text-decoration: none;
+ flex-shrink: 0;
+
+ .imgBox {
+ height: 200px;
+
+ .img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .caption {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 16px 20px;
+ align-items: flex-start;
+ height: 134px;
+
+ .updatedAt {
+ color: #666;
+ font-size: 13px;
+ font-weight: 400;
+ flex-grow: 1;
+ }
+
+ .description {
+ color: #000;
+ overflow: hidden;
+ white-space: normal;
+ text-overflow: ellipsis;
+ font-size: 16px;
+ line-height: 24px;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ flex-grow: 1;
+ }
+
+ .createAt {
+ color: #333;
+ font-size: 14px;
+ font-weight: 400;
+ flex-grow: 1;
+ }
+ }
+
+ .emptyCaseBox {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #dddfff;
+ }
+
+ &:hover {
+ transform: scale(1.06);
+ transition: transform 0.3s ease;
+ }
+}
diff --git a/src/components/folder/LinksList/LinkOverview/LinkOverview.tsx b/src/components/folder/LinksList/LinkOverview/LinkOverview.tsx
new file mode 100644
index 000000000..04fe995e6
--- /dev/null
+++ b/src/components/folder/LinksList/LinkOverview/LinkOverview.tsx
@@ -0,0 +1,48 @@
+import classNames from "classnames/bind";
+import Link from "next/link";
+import Image from "next/image";
+import { Skeleton } from "@nextui-org/skeleton";
+
+import { Ic_Logo } from "@/public";
+import { getElapsedTime, getFormattedDate, getValidUrl } from "@/src/utils";
+import type { TLink } from "@/src/types/type";
+
+import styles from "./LinkOverview.module.scss";
+
+const cn = classNames.bind(styles);
+
+interface LinkOverviewProps {
+ link: TLink;
+}
+
+export default function LinkOverview({ link }: LinkOverviewProps) {
+ const { image_source: imageUrl, created_at, description, title, url } = link;
+ const createDate = getElapsedTime(created_at);
+ const formatDate = getFormattedDate(created_at);
+
+ // 서버 Image-url이 문제가 있어서 그냥 null처리 했읍니다
+ const imageSource = getValidUrl(imageUrl);
+
+ return (
+
+ {imageSource ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
{description}
+
+
+ {content.title[0]}
+
+ {content.title[1]}
+ {content.title[2]}
+
+ {content.description}
+
+
+
+ );
+}
diff --git a/src/components/landing/Container/Content/index.ts b/src/components/landing/Container/Content/index.ts
new file mode 100644
index 000000000..c40cab978
--- /dev/null
+++ b/src/components/landing/Container/Content/index.ts
@@ -0,0 +1 @@
+export { default as Content } from "./Content";
diff --git a/src/components/landing/Header/Header.module.scss b/src/components/landing/Header/Header.module.scss
new file mode 100644
index 000000000..1f20e5131
--- /dev/null
+++ b/src/components/landing/Header/Header.module.scss
@@ -0,0 +1,46 @@
+.header {
+ width: 100vw;
+ background: #f0f6ff;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 40px;
+ padding: 70px 32px 0;
+
+ .text {
+ text-align: center;
+ font-size: 64px;
+ font-weight: 700;
+ line-height: 80px;
+ color: #000;
+
+ .textGradient {
+ background: linear-gradient(91deg, #6d6afe 17.28%, #ff9f9f 74.98%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+ }
+
+ .button {
+ display: flex;
+ width: 350px;
+ padding: 16px 20px;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+
+ color: var(--Grey-Light, #f5f5f5);
+ font-size: 18px;
+ font-weight: 600;
+ line-height: normal;
+
+ border: none;
+ border-radius: 8px;
+ background: var(
+ --gra-purpleblue-to-skyblue,
+ linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%)
+ );
+ }
+}
diff --git a/src/components/landing/Header/Header.tsx b/src/components/landing/Header/Header.tsx
new file mode 100644
index 000000000..d4efe33ec
--- /dev/null
+++ b/src/components/landing/Header/Header.tsx
@@ -0,0 +1,32 @@
+import classNames from "classnames/bind";
+import Image from "next/image";
+import { Img_Example } from "@/public";
+
+import styles from "./Header.module.scss";
+import Link from "next/link";
+import { ROUTER } from "@/src/constants";
+
+const cn = classNames.bind(styles);
+
+export default function Header() {
+ return (
+
+
+ 세상의 모든 정보를
+ 쉽게 저장하고 관리해 보세요
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/share/UserProfile/UserProfile.module.scss b/src/components/share/UserProfile/UserProfile.module.scss
new file mode 100644
index 000000000..8076f196f
--- /dev/null
+++ b/src/components/share/UserProfile/UserProfile.module.scss
@@ -0,0 +1,34 @@
+.UserProfile {
+ padding-top: 113px;
+ padding-left: 32px;
+ padding-right: 32px;
+ padding-bottom: 60px;
+ background: var(--Linkbrary-bg, #f0f6ff);
+
+ .profileInfos {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: #000;
+ gap: 12px;
+
+ .profileImg {
+ width: 60px;
+ padding: 4px;
+ border-radius: 47px;
+ }
+
+ .profileName {
+ font-size: 16px;
+ font-weight: 400;
+ }
+
+ .folderName {
+ font-feature-settings: "clig" off, "liga" off;
+ font-size: 40px;
+ font-weight: 600;
+ padding-top: 6px;
+ }
+ }
+}
diff --git a/src/components/share/UserProfile/UserProfile.tsx b/src/components/share/UserProfile/UserProfile.tsx
new file mode 100644
index 000000000..167b81940
--- /dev/null
+++ b/src/components/share/UserProfile/UserProfile.tsx
@@ -0,0 +1,31 @@
+import classNames from "classnames/bind";
+import Image from "next/image";
+import type { User } from "@/src/types/type";
+
+import styles from "./UserProfile.module.scss";
+
+const cn = classNames.bind(styles);
+
+interface UserProfileProps {
+ userData: User[];
+}
+
+export default function UserProfile({ userData }: UserProfileProps) {
+ const { id, image_source, email, name } = userData[0];
+
+ return (
+
+
+
+ {email}
+ {name}
+
+
+ );
+}
diff --git a/src/constants/index.ts b/src/constants/index.ts
index a6b20dc40..0ec74b21f 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,14 +1,47 @@
-const API_BASE_URL = "https://bootcamp-api.codeit.kr/api/";
-const TEAM_ID = 11;
+import { Img_Link, Img_Manage, Img_Serch, Img_Share } from "@/public";
+import { Content } from "../types/type";
-const SHARED_LINKS = `${API_BASE_URL}sample/folder`;
-const FOLDERS = `${API_BASE_URL}users/${TEAM_ID}/folders`;
-const LINKS = `${API_BASE_URL}users/${TEAM_ID}/links`;
-const USER = `${API_BASE_URL}users/1`;
+export const ROUTER = {
+ HOME: "/",
+ SIGN_IN: "sign-in",
+ SIGN_UP: "sign-up",
+ FOLDER: "/folder",
+} as const;
-export const END_POINT = {
- FOLDERS,
- LINKS,
- USER,
- SHARED_LINKS,
-};
+export const SNS_LINK = {
+ FACEBOOK: "https://www.facebook.com",
+ TWITTER: "https://twitter.com",
+ YOUTUBE: "https://www.youtube.com",
+ INSTAGRAM: "https://www.instagram.com",
+ GOOGLE: "https://www.google.com",
+ KAKAO: "https://www.kakaocorp.com/page",
+} as const;
+
+export const LANDING_CONTENTS = [
+ {
+ title: ["원하는 링크를", "저장", "하세요"],
+ description:
+ "나중에 읽고 싶은 글, 다시 보고 싶은 영상, 사고 싶은 옷, 기억하고 싶은 모든 것을 한 공간에 저장하세요.",
+ img: Img_Link,
+ alt: "example",
+ },
+ {
+ title: ["링크를 폴더로", "관리", "하세요"],
+ description: "나만의 폴더를 무제한으로 만들고 다양하게 활용할 수 있습니다.",
+ img: Img_Manage,
+ alt: "example",
+ },
+ {
+ title: ["저장한 링크를", "공유", "해 보세요"],
+ description:
+ "여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게 쉽고 빠르게 링크를 공유해 보세요.",
+ img: Img_Share,
+ alt: "example",
+ },
+ {
+ title: ["저장한 링크를", "검색", "해 보세요"],
+ description: "중요한 정보들을 검색으로 쉽게 찾아보세요.",
+ img: Img_Serch,
+ alt: "example",
+ },
+] as Content[];
diff --git a/src/types/type.ts b/src/types/type.ts
new file mode 100644
index 000000000..731c52075
--- /dev/null
+++ b/src/types/type.ts
@@ -0,0 +1,33 @@
+import { StaticImageData } from "next/image";
+
+export interface Content {
+ title: string[];
+ description: string;
+ img: StaticImageData;
+ alt: string;
+}
+
+export interface User {
+ id: number;
+ name: string;
+ image_source: string;
+ email: string;
+}
+
+export interface Favorite {
+ created_at: string;
+ favorite: boolean;
+ id: number;
+ link_count: number;
+ name: string;
+}
+
+export interface TLink {
+ id: number;
+ created_at: string;
+ description: string;
+ favorite: boolean;
+ image_source: string;
+ title: string;
+ url: string;
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 000000000..48a3c4969
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,3 @@
+export { default as getElapsedTime } from "./getElapsedTime";
+export { default as getFormattedDate } from "./getFormattedDate";
+export { default as getValidUrl } from "./getValidUrl";
diff --git a/styles/reset.css b/styles/reset.css
new file mode 100644
index 000000000..24c834896
--- /dev/null
+++ b/styles/reset.css
@@ -0,0 +1,134 @@
+/* /styles/reset.css */
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol,
+ul {
+ list-style: none;
+}
+blockquote,
+q {
+ quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: "";
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+a {
+ text-decoration: none;
+}