;
};
-export const SearchBar = ({
- value,
- onChange,
- onCloseClick,
-}: SearchBarProps) => {
+export const SearchBar = ({ value, onChange, onCloseClick }: SearchBarProps) => {
return (
({
+ id,
+ createdAt: created_at,
+ updatedAt: updated_at,
+ imageSource: image_source,
+ url,
+ title,
+ description,
+});
diff --git a/src/link/util-map/index.js b/src/link/util-map/index.js
index f057e469df..254f709b23 100644
--- a/src/link/util-map/index.js
+++ b/src/link/util-map/index.js
@@ -1 +1,2 @@
export * from "./mapLinksData";
+export * from "./formatLinkRawData";
diff --git a/src/link/util-search-link/useSearchLink.ts b/src/link/util-search-link/useSearchLink.ts
index 028fb9102a..b6cbc2f087 100644
--- a/src/link/util-search-link/useSearchLink.ts
+++ b/src/link/util-search-link/useSearchLink.ts
@@ -1,4 +1,3 @@
-"use client";
import { Link } from "@/src/link/type";
import { ChangeEventHandler, MouseEventHandler, useState } from "react";
diff --git a/src/page-layout/SignInLayout/SignInLayout.jsx b/src/page-layout/SignInLayout/SignInLayout.jsx
deleted file mode 100644
index afea63fb8b..0000000000
--- a/src/page-layout/SignInLayout/SignInLayout.jsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client";
-import classNames from "classnames/bind";
-import styles from "./SigninLayout.module.css";
-import Link from "next/link";
-import { useForm } from "react-hook-form";
-
-const LOGO_IMAGE = "images/linkbrary.svg";
-export function SignInLayout() {
- const {
- register,
- handleSubmit,
- formState: { isSubmitting, isSubmitted, errors },
- } = useForm();
- const cx = classNames.bind(styles);
- return (
-
-
-
-
-
-
소셜 로그인
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/page-layout/SignInLayout/SigninLayout.module.css b/src/page-layout/SignInLayout/SigninLayout.module.css
deleted file mode 100644
index e0c73f08fa..0000000000
--- a/src/page-layout/SignInLayout/SigninLayout.module.css
+++ /dev/null
@@ -1,188 +0,0 @@
-.body {
- height: 98.2rem;
- background: #f0f6ff;
- display: flex;
- flex-direction: column;
- align-items: center;
- row-gap: 3rem;
- padding: 12rem 3.2rem 0;
-
- @media (min-width: 768px) {
- padding: 20rem 0 0;
- }
-
- @media (min-width: 1200px) {
- padding: 23.8rem 0 0;
- }
-}
-
-.header {
- display: flex;
- flex-direction: column;
- row-gap: 1.6rem;
-}
-
-.logo-link {
- display: flex;
- justify-content: center;
-}
-
-.header-logo {
- height: 3.8rem;
-}
-
-.header-message {
- display: flex;
- column-gap: 0.8rem;
- font-size: 1.6rem;
- font-weight: 400;
- line-height: 150%;
-}
-
-.header-link {
- height: fit-content;
- font-size: 1.6rem;
- font-weight: 600;
- line-height: normal;
- color: #6d6afe;
- border-bottom: 0.1rem solid #6d6afe;
-}
-
-.sign-box {
- display: flex;
- flex-direction: column;
- align-items: center;
- row-gap: 3.2rem;
- width: 100%;
- max-width: 40rem;
-
- @media (min-width: 768px) {
- width: 40rem;
- }
-}
-
-.sign-form {
- display: flex;
- flex-direction: column;
- row-gap: 3rem;
- width: 100%;
-}
-
-.sign-inputs {
- display: flex;
- flex-direction: column;
- row-gap: 2.4rem;
-}
-
-.sign-input-box {
- display: flex;
- flex-direction: column;
- row-gap: 1.2rem;
-}
-
-.sign-password {
- position: relative;
-}
-
-.sign-input-label {
- font-size: 1.4rem;
- font-weight: 400;
-}
-
-.sign-input {
- padding: 1.8rem 1.5rem;
- border-radius: 0.8rem;
- border: 0.1rem solid #ccd5e3;
- font-size: 1.6rem;
- line-height: 150%;
-}
-
-.sign-input:focus {
- border-color: #6d6afe;
-}
-
-.sign-input.sign-input-error {
- border-color: #ff5b56;
-}
-
-.sign-input.sign-input-error:focus {
- border-color: #ff5b56;
-}
-
-.error-message {
- /* display: none; */
- margin-top: -0.4rem;
- font-size: 1.4rem;
- font-weight: 400;
- color: #ff5b56;
-}
-
-/* .error-message.error-message-on {
- display: inline-block;
-} */
-
-.eye-button {
- position: absolute;
- top: 5.1rem;
- right: 1.5rem;
- width: 1.6rem;
- height: 1.6rem;
-}
-
-.cta {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 5.4rem;
- background-image: linear-gradient(135deg, #6d6afe 0%, #6ae3fe 100%);
- border-radius: 0.8rem;
- color: #f5f5f5;
- font-size: 1.8rem;
- font-weight: 600;
-}
-
-.sns-box {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
- padding: 1.2rem 2.4rem;
- border-radius: 0.8rem;
- border: 0.1rem solid #ccd5e3;
- background-color: #e7effb;
-}
-
-.sns-links {
- display: flex;
- column-gap: 1.6rem;
-}
-
-.sns-link {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 4.2rem;
- height: 4.2rem;
- border-radius: 50%;
-}
-
-.sns-text {
- font-size: 1.4rem;
- font-weight: 400;
- color: var(--gray100);
-}
-
-.google-link {
- background-color: #ffffff;
- border: 0.1rem solid #d3d4dd;
-}
-
-.kakao-link {
- padding-top: 0.2rem;
- background-color: #f5e14b;
-}
-.cta:disabled {
- background-image: linear-gradient(135deg, #807eee 0%, #408999 100%);
- cursor: not-allowed;
-}
diff --git a/src/page-layout/SignInLayout/index.js b/src/page-layout/SignInLayout/index.js
deleted file mode 100644
index 848b2d4bdb..0000000000
--- a/src/page-layout/SignInLayout/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./SignInLayout";
diff --git a/src/page-layout/SignLayout/SignLayout.module.scss b/src/page-layout/SignLayout/SignLayout.module.scss
new file mode 100644
index 0000000000..babd61725a
--- /dev/null
+++ b/src/page-layout/SignLayout/SignLayout.module.scss
@@ -0,0 +1,26 @@
+@import "@/styles/global.scss";
+
+.container {
+ display: flex;
+ justify-content: center;
+ min-height: 100vh;
+ padding: calc(120 / 844 * 100vh) 3.2rem 5rem;
+ background-color: $color-light-blue;
+
+ @include tablet {
+ padding-top: calc(200 / 982 * 100vh);
+ }
+
+ @include desktop {
+ padding-top: calc(238 / 982 * 100vh);
+ }
+}
+
+.items {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ row-gap: 3rem;
+ width: 100%;
+ max-width: 40rem;
+}
diff --git a/src/page-layout/SignLayout/SignLayout.tsx b/src/page-layout/SignLayout/SignLayout.tsx
new file mode 100644
index 0000000000..a55a3c8c3f
--- /dev/null
+++ b/src/page-layout/SignLayout/SignLayout.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import styles from "./SignLayout.module.scss";
+import classNames from "classnames/bind";
+
+const cx = classNames.bind(styles);
+
+type SignInLayoutProps = {
+ header: ReactNode;
+ form: ReactNode;
+ oauth: ReactNode;
+};
+
+export const SignLayout = ({ header, form, oauth }: SignInLayoutProps) => {
+ return (
+
+
+ {header}
+ {form}
+ {oauth}
+
+
+ );
+};
diff --git a/src/page-layout/SignLayout/index.ts b/src/page-layout/SignLayout/index.ts
new file mode 100644
index 0000000000..9c4184c760
--- /dev/null
+++ b/src/page-layout/SignLayout/index.ts
@@ -0,0 +1 @@
+export * from "./SignLayout";
diff --git a/src/sharing/feature-layout/Layout.tsx b/src/sharing/feature-layout/Layout.tsx
index 480cc2d059..97471d948d 100644
--- a/src/sharing/feature-layout/Layout.tsx
+++ b/src/sharing/feature-layout/Layout.tsx
@@ -1,9 +1,9 @@
import styles from "./Layout.module.scss";
import classNames from "classnames/bind";
-import { useGetUser } from "@/src/user/data-access-user";
import { Footer } from "@/src/sharing/ui-footer";
import { NavigationBar } from "@/src/sharing/ui-navigation-bar";
import { ReactNode, RefObject } from "react";
+import { useGetCurrentUser } from "@/src/user/data-access-user";
const cx = classNames.bind(styles);
@@ -14,8 +14,9 @@ type LayoutProps = {
};
export const Layout = ({ children, isSticky = true, footerRef }: LayoutProps) => {
- const { data } = useGetUser();
- const profile = data ? { email: data.email, imageSource: data.profileImageSource } : null;
+ const { data } = useGetCurrentUser();
+ const { email, imageSource } = data;
+ const profile = data ? { email, imageSource } : null;
return (
diff --git a/src/sharing/styles/colors.scss b/src/sharing/styles/colors.scss
deleted file mode 100644
index 4b6f6e63bd..0000000000
--- a/src/sharing/styles/colors.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-$color-primary: #6d6afe;
-$color-red: #ff5b56;
-$color-black: #111322;
-$color-white: #ffffff;
-
-$color-gray100: #373740;
-$color-gray60: #9fa6b2;
-$color-gray20: #ccd5e3;
-$color-gray10: #e7effb;
-$color-gray-light: #f5f5f5;
-
-$color-light-blue: #f0f6ff;
-
-$color-text-gray: #676767;
-$color-text-content-gray: #666666;
-$color-text-content-black: #333333;
diff --git a/src/sharing/styles/global.scss b/src/sharing/styles/global.scss
deleted file mode 100644
index 7ea93de248..0000000000
--- a/src/sharing/styles/global.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "./colors.scss";
-@import "./variables.scss";
-@import "./mixin.scss";
diff --git a/src/sharing/styles/mixin.scss b/src/sharing/styles/mixin.scss
deleted file mode 100644
index 721cfd6b97..0000000000
--- a/src/sharing/styles/mixin.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@mixin desktop {
- @media (min-width: 1200px) {
- @content;
- }
-}
-
-@mixin tablet {
- @media (min-width: 768px) {
- @content;
- }
-}
-
-@mixin ellipsis($line: 1) {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap !important;
-
- @if $line > 1 {
- display: -webkit-box;
- -webkit-line-clamp: $line;
- white-space: initial !important;
- -webkit-box-orient: vertical;
- }
-}
diff --git a/src/sharing/styles/reset.css b/src/sharing/styles/reset.css
deleted file mode 100644
index ba5b5b45c5..0000000000
--- a/src/sharing/styles/reset.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/* user agent stylesheet 초기화 */
-
-* {
- box-sizing: border-box;
- margin: 0;
- font-family: "Pretendard";
- word-break: keep-all;
-}
-
-html,
-body {
- font-size: 62.5%;
-}
-
-a {
- color: inherit;
- text-decoration: none;
- cursor: pointer;
-}
-
-input {
- border: none;
- padding: none;
-}
-input:focus {
- outline: none;
-}
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
- display: none;
-}
-
-button {
- border: none;
- padding: unset;
- background-color: unset;
- cursor: pointer;
-}
diff --git a/src/sharing/styles/variables.scss b/src/sharing/styles/variables.scss
deleted file mode 100644
index 3308e47849..0000000000
--- a/src/sharing/styles/variables.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$z-index-popover: 50;
-$z-index-nav: 100;
-$z-index-fab: 100;
-$z-index-modal: 1000;
diff --git a/src/sharing/ui-card-image/constant.js b/src/sharing/ui-card-image/constant.js
index fb79ca7b8e..b195b987bb 100644
--- a/src/sharing/ui-card-image/constant.js
+++ b/src/sharing/ui-card-image/constant.js
@@ -1 +1 @@
-export const DEFAULT_IMAGE = "images/card-default.png";
+export const DEFAULT_IMAGE = "/images/card-default.png";
diff --git a/src/sharing/ui-footer/Footer.tsx b/src/sharing/ui-footer/Footer.tsx
index fbc2a2765d..62d2f70fd6 100644
--- a/src/sharing/ui-footer/Footer.tsx
+++ b/src/sharing/ui-footer/Footer.tsx
@@ -21,16 +21,16 @@ export const Footer = forwardRef((_, ref) => {
diff --git a/src/sharing/ui-input/Input.tsx b/src/sharing/ui-input/Input.tsx
index 86fc58f87f..64063cae0f 100644
--- a/src/sharing/ui-input/Input.tsx
+++ b/src/sharing/ui-input/Input.tsx
@@ -1,4 +1,4 @@
-import { ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute } from "react";
+import { ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, forwardRef } from "react";
import styles from "./Input.module.scss";
import classNames from "classnames/bind";
@@ -14,26 +14,21 @@ export type InputProps = {
onBlur?: FocusEventHandler