공유
+이름 변경
+삭제
+
+
+
+
+
+ {searchClose ? (
+
+ {searchValue}
+으로 검색한 결과입니다
+
{userData ? (
;
+ selectSortName: number;
+};
+
+const SortMenu: React.FC = ({ data, clickSortName, selectSortName }) => {
+ const [modalContent, setModalContent] = useState(null);
+ const [modalOpen, setModalOpen] = useState(false);
+
+ const handleFolderAdd = () => {
+ setModalContent("AddFolderModal");
+ setModalOpen(true);
+ };
+ const handleCloseModal = () => {
+ setModalContent(null);
+ setModalOpen(false);
+ };
+
+ return (
+ <>
+
+
+ {modalOpen && modalContent === "AddFolderModal" && (
+ `
+ font-size: 1.6rem;
+ padding: 0.8rem 1.2rem;
+ border-radius: 5px;
+ border: 1px solid var(--linkbrary-primary-color, #6d6afe);
+ background: ${(props) => (props.$isSelected ? "#6D6AFE" : "#fff")};
+ color: ${(props) => (props.$isSelected ? "#fff" : "black")};
+ cursor: pointer;
+`;
+
+export const SortInput = styled.input`
+ color: #6d6afe;
+ margin-right: 4px;
+ border: none;
+ text-align: center;
+ font-family: Abel;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: -0.3px;
+`;
+
+export const SortPlusImg = styled.img`
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+`;
+
+export const CardTitle = styled.div`
+ max-width: 106rem;
+ margin: 0 auto 10rem;
+ width: 100%;
+ padding: 0 3.2rem;
+ display: flex;
+ justify-content: space-between;
+ margin: 2.4rem auto;
+`;
+
+export const CardTitleText = styled.h2`
+ font-size: 24px;
+`;
+
+export const SortEdit = styled.div`
+ display: flex;
+ gap: 1.2rem;
+`;
+
+export const SortEditContent = styled.button`
+ font-size: 1.4rem;
+ color: #9fa6b2;
+ background-color: #fff;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+`;
+
+export const Card = styled.div`
+ width: 100%;
+ max-width: 34rem;
+ height: 33.4rem;
+ border-radius: 1rem;
+ border: 2px solid rgba(0, 0, 0, 0);
+ overflow: hidden;
+ box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.08);
+ margin: 0 auto;
+ position: relative;
+
+ &:hover {
+ border: 2px solid var(--primary);
+ }
+
+ &:hover a .cardImgWrap {
+ transition: all 1s;
+ transform: scale(1.3);
+ }
+
+ &:not(hover) a .cardImgWrap {
+ transition: all 1s;
+ }
+
+ & .cardImgWrap {
+ width: 100%;
+ height: 60%;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ & .nullImg {
+ position: absolute;
+ width: 13rem;
+ opacity: 0.5;
+ }
+`;
+
+export const NoData = styled.div`
+ display: flex;
+ max-width: 1060px;
+ min-height: 20rem;
+ padding: 41px 0px 35px 0px;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.6rem;
+ margin: 0 auto;
+`;
+
+export const CardImgWrap = styled.div`
+ width: 100%;
+ height: 60%;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ transition: all 1s;
+ transform: scale(1.3);
+ }
+
+ &:not(hover) {
+ transition: all 1s;
+ }
+`;
+
+export const NullImg = styled.img`
+ position: absolute;
+ width: 13rem;
+ opacity: 0.5;
+`;
+
+export const CardImg = styled.img`
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+`;
+
+export const CardText = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 1.5rem 2rem 1rem;
+ gap: 1rem;
+ position: relative;
+ z-index: 2;
+ background-color: #fff;
+
+ & .ago {
+ font-size: 1.3rem;
+ }
+
+ & .des {
+ font-size: 1.6rem;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: normal;
+ }
+
+ & .cardDate {
+ font-size: 1.4rem;
+ }
+`;
+
+export const Ago = styled.p`
+ font-size: 1.3rem;
+`;
+
+export const Star = styled.img`
+ width: 3.4rem;
+ height: 3.4rem;
+ position: absolute;
+ top: 1.5rem;
+ right: 1.5rem;
+`;
+
+export const KebabAgoBox = styled.div`
+ display: flex;
+ justify-content: space-between;
+ position: relative;
+`;
+
+export const Kebab = styled.button`
+ cursor: pointer;
+ background-color: #fff;
+`;
+
+export const KebabSelect = styled.div`
+ width: 10rem;
+ height: 6.4rem;
+ position: absolute;
+ right: 0;
+ top: 3rem;
+ background: var(--gray-light-gray-00, #fff);
+ box-shadow: 0px 2px 8px 0px rgba(51, 50, 54, 0.1);
+`;
+
+export const kebabOption = styled.div`
+ width: 100%;
+ height: 50%;
+ border: 1px solid #fff;
+ color: var(--gray-light-gray-100, #333236);
+ font-size: 1.4rem;
+ line-height: 3.2rem;
+ text-align: center;
+ cursor: pointer;
+ &:last-child {
+ background: #e7effb;
+ color: #6d6afe;
+ }
+`;
+
+export const Des = styled.p`
+ font-size: 1.6rem;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: normal;
+`;
+
+export const CardDate = styled.p`
+ font-size: 1.4rem;
+`;
diff --git a/src/components/Time.tsx b/src/components/Time.tsx
new file mode 100644
index 000000000..5fd1fb83f
--- /dev/null
+++ b/src/components/Time.tsx
@@ -0,0 +1,20 @@
+function formatDateString(dateString: string): string {
+ const date = new Date(dateString);
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, "0");
+ const day = String(date.getDate()).padStart(2, "0");
+
+ return `${year}-${month}-${day}`;
+}
+
+function calculateElapsedTime(dateString: string): number {
+ const currentDate = new Date();
+ const targetDate = new Date(dateString);
+
+ const timeDifference = currentDate.getTime() - targetDate.getTime();
+ const elapsedMinutes = Math.floor(timeDifference / (1000 * 60));
+
+ return elapsedMinutes;
+}
+
+export { formatDateString, calculateElapsedTime };
diff --git a/src/components/hooks/useFolder.tsx b/src/components/hooks/useFolder.tsx
new file mode 100644
index 000000000..f939e21d4
--- /dev/null
+++ b/src/components/hooks/useFolder.tsx
@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { ShowAll } from "../../utils/Api";
+import { LinkData } from "@utils/type";
+
+export const useFoldLink = (selectSortName: number) => {
+ const [foldLink, setFoldLink] = useState([]);
+ const location = useLocation();
+ const queryParams = new URLSearchParams(location.search);
+ const searchValue = queryParams.get("search");
+
+ useEffect(() => {
+ const fetchFolders = async () => {
+ try {
+ const result = await ShowAll();
+ let filteredLink = result;
+
+ if (selectSortName !== 0) {
+ filteredLink = filteredLink.filter(
+ (item) => item.folder_id === selectSortName
+ );
+ }
+
+ if (searchValue !== null) {
+ filteredLink = filteredLink.filter(
+ (item: any) =>
+ (item.description && item.description.includes(searchValue)) ||
+ (item.title && item.title.includes(searchValue)) ||
+ (item.url && item.url.includes(searchValue))
+ );
+ }
+
+ setFoldLink(filteredLink);
+ } catch (error) {
+ console.error("Error fetching folders:", error);
+ }
+ };
+
+ fetchFolders();
+ }, [selectSortName, searchValue]);
+
+ return foldLink;
+};
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
new file mode 100644
index 000000000..1199fa5d9
--- /dev/null
+++ b/src/components/modal/Modal.tsx
@@ -0,0 +1,221 @@
+import styled from "styled-components";
+import closeImg from "../../Image/_close.png";
+
+type ModalButtonProps = {
+ $redColor?: boolean;
+};
+
+type ShareImgProps = {
+ $shareApi?: string;
+}
+
+export const ModalBlur = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 9999;
+`;
+
+export const Container = styled.div`
+ display: inline-flex;
+ padding: 32px 40px;
+ flex-direction: column;
+ position: relative;
+ justify-content: center;
+ align-items: center;
+ gap: 24px;
+ border-radius: 15px;
+ border: 1px solid var(--Linkbrary-gray20, #ccd5e3);
+ background: var(--Linkbrary-white, #fff);
+ z-index: 10000;
+`;
+
+export const Feature = styled.p`
+ color: var(--Linkbrary-gray100, #373740);
+ font-family: Pretendard;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+`;
+
+export const ContentInput = styled.input`
+ display: flex;
+ width: 280px;
+ padding: 18px 15px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 8px;
+ border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
+ background: var(--Linkbrary-white, #fff);
+`;
+
+export const Button = styled.button`
+ display: flex;
+ width: 280px;
+ padding: 16px 20px;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ cursor: pointer;
+ border-radius: 8px;
+ background: ${({ $redColor }) =>
+ $redColor
+ ? "#FF5B56"
+ : "linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%)"};
+
+ & p {
+ color: var(--Grey-Light, #f5f5f5);
+ font-family: Pretendard;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ }
+`;
+
+export const CloseClick = styled.button`
+ width: 24px;
+ height: 24px;
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ background-image: url(${closeImg});
+ cursor: pointer;
+`;
+
+export const ShareModalContainer = styled.div`
+ display: flex;
+ position: relative;
+ padding: 32px 40px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 24px;
+ border-radius: 15px;
+ border: 1px solid var(--Stroke-light, #dee2e6);
+ background: var(---Gray-White, #fff);
+ z-index: 10000;
+`;
+
+export const FeatureNameWrapper = styled.div`
+ display: flex;
+ width: 280px;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 8px;
+
+ & h1 {
+ color: var(--Linkbrary-gray100, #373740);
+ font-family: Pretendard;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ }
+
+ & p {
+ color: var(--Linkbrary-gray60, #9fa6b2);
+ text-align: center;
+ font-family: Pretendard;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 22px;
+ }
+`;
+
+export const FeatureContentWrapper = styled.div`
+ display: flex;
+ align-items: flex-start;
+ gap: 32px;
+`;
+
+export const FeatureContent = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 10px;
+`;
+
+export const ShareImg = styled.div`
+ display: flex;
+ padding: 12px;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ border-radius: 37.333px;
+ cursor: pointer;
+ background-color: ${({ $shareApi }) => {
+ switch ($shareApi) {
+ case "kakao":
+ return "#FEE500";
+ case "facebook":
+ return "#1877F2";
+ case "urlCopy":
+ return "rgba(157, 157, 157, 0.04)";
+ default:
+ return "#ffffff";
+ }
+ }};
+
+ & img {
+ width: 18px;
+ height: 18px;
+ }
+`;
+
+export const ShareText = styled.p`
+ color: var(--Linkbrary-gray100, #373740);
+ text-align: center;
+ font-family: Inter;
+ font-size: 13px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 15px;
+`;
+
+export const FolderList = styled.div`
+ display: flex;
+ padding: 8px;
+ align-items: center;
+ gap: 8px;
+ color: var(--Linkbrary-gray100, #373740);
+ font-family: Pretendard;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 24px;
+ border-radius: 8px;
+
+ &:hover {
+ background: #f0f6ff;
+ cursor: pointer;
+
+ & > p {
+ color: #6d6afe;
+ }
+ }
+`;
+
+export const LinkCount = styled.span`
+ color: var(--Linkbrary-gray60, #9fa6b2);
+ font-family: Pretendard;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const FolderListWrapper = styled.div`
+ width: 100%;
+ height: 100%;
+`;
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
new file mode 100644
index 000000000..3af6eedf0
--- /dev/null
+++ b/src/components/modal/index.tsx
@@ -0,0 +1,214 @@
+import { useState, useEffect } from "react";
+import * as S from "./Modal";
+import kakaoImg from "../../Image/kakao.svg";
+import facebookImg from "../../Image/facebookBlue.svg";
+import urlLinkImg from "../../Image/link.svg";
+
+declare global {
+ interface Window {
+ Kakao: any;
+ }
+}
+type OnCloseFunction = () => void;
+
+export function ChangeNameModal({ onClose }: { onClose: OnCloseFunction }) {
+ const handleCloseModal = () => {
+ onClose();
+ };
+
+ return (
+
+
+ 이름 변경하기
+
+
+
+
+ );
+}
+
+export function AddFolderModal({ onClose }: { onClose: OnCloseFunction }) {
+ const handleCloseModal = () => {
+ onClose();
+ };
+ return (
+
+
+ 폴더 추가
+
+
+
+
+ );
+}
+
+export function ShareModal({ onClose }: { onClose: OnCloseFunction }) {
+ const handleCloseModal = () => {
+ onClose();
+ };
+
+ const host = window.location.host;
+ const userId = 1;
+ const folderId = 1;
+ const shareUrl = `https://${host}/shared?user=${userId}&folder=${folderId}`;
+
+ const shareToKaKao = () => {
+ if (!window.Kakao || !window.Kakao.isInitialized()) {
+ console.error("Kakao SDK not initialized");
+ return;
+ }
+
+ window.Kakao.init(process.env.KAKAO_KEY);
+
+ window.Kakao.Share.sendDefault({
+ objectType: "feed",
+ content: {
+ title: "Linkabrary",
+ description: "세상의 모든 링크를 저장하세요.",
+ imageUrl: "",
+ link: {
+ mobileWebUrl: shareUrl,
+ },
+ },
+ buttons: [
+ {
+ title: "보러 가기",
+ link: {
+ mobileWebUrl: shareUrl,
+ },
+ },
+ ],
+ });
+ };
+
+ const shareToFacebook = () => {
+ window.open(`http://www.facebook.com/sharer/sharer.php?u=${shareUrl}`);
+ };
+
+ const copyLinkToClipboard = () => {
+ navigator.clipboard
+ .writeText(shareUrl)
+ .then(() => alert("링크가 복사되었습니다."));
+ };
+
+ useEffect(() => {
+ if (window.Kakao && !window.Kakao.isInitialized()) {
+ window.Kakao.init(process.env.KAKAO_KEY);
+ }
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+ 
+
+ 카카오톡
+
+
+
+ 
+
+ 페이스북
+
+
+
+ 
+
+ 링크 복사
+
+
+
+
+ );
+}
+
+export function DeleteFolder({ onClose }: { onClose: OnCloseFunction }) {
+ const handleCloseModal = () => {
+ onClose();
+ };
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export function DeleteLink({ onClose }: { onClose: OnCloseFunction }) {
+ const handleCloseModal = () => {
+ onClose();
+ };
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export function AddToFolderModal({ onClose }: { onClose: OnCloseFunction }) {
+ const handleCloseModal = () => {
+ onClose();
+ };
+ const [selected, setSelected] = useState(null);
+ const handleSelected = (link: string) => {
+ setSelected(link);
+ };
+ return (
+
+
+
+
+
+ {["코딩팁", "채용 사이트", "유용한 글", "나만의 장소"].map(
+ (link, index) => (
+ handleSelected(link)}
+ >
+ 7개 링크
+
+ )
+ )}
+
+
+
+
+
+ );
+}
diff --git a/src/custom.d.ts b/src/custom.d.ts
new file mode 100644
index 000000000..5586bebf2
--- /dev/null
+++ b/src/custom.d.ts
@@ -0,0 +1,8 @@
+declare module "*.png";
+declare module "*.svg" {
+ import React = require("react");
+
+ export const ReactComponent: React.FC>;
+ const src: string;
+ export default src;
+}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index f4affe346..000000000
--- a/src/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import ReactDOM from 'react-dom';
-import App from "./App";
-
-ReactDOM.render( {
+ const response = await fetch("https://bootcamp-api.codeit.kr/api/users/1");
+ const profiledata = await response.json();
+ return profiledata;
+}
+
+export async function ShowFolders(): Promise {
+ try {
+ const response = await fetch(
+ "https://bootcamp-api.codeit.kr/api/sample/folder"
+ );
+ const data = await response.json();
+ return data.folder.links;
+ } catch (error) {
+ console.error("Error fetching folder data:", error);
+ return [];
+ }
+}
+
+export async function FetchFolderData(): Promise {
+ try {
+ const response = await fetch(
+ "https://bootcamp-api.codeit.kr/api/users/1/folders"
+ );
+ const data = await response.json();
+ return data.data;
+ } catch (error) {
+ console.error("Error fetching folder data:", error);
+ return [];
+ }
+}
+
+export async function ShowAll(): Promise {
+ const response = await fetch(
+ "https://bootcamp-api.codeit.kr/api/users/1/links"
+ );
+ const data = await response.json();
+ return data.data;
+}
diff --git a/src/utils/type.ts b/src/utils/type.ts
new file mode 100644
index 000000000..286f9c097
--- /dev/null
+++ b/src/utils/type.ts
@@ -0,0 +1,53 @@
+export interface ShardLink {
+ id: number;
+ createdAt: string;
+ url: string;
+ title: string;
+ description: string;
+ imageSource: string;
+}
+
+export interface FolderLink {
+ id: number;
+ name: string;
+ owner: {
+ id: number;
+ name?: string;
+ profileImageSource?: string;
+ };
+ links: ShardLink[];
+}
+
+export interface ProfileData {
+ data: UserData[];
+}
+
+type UserData = {
+ id: number;
+ created_at: string;
+ name: string;
+ image_source: string;
+ email: string;
+ auth_id: string;
+};
+export interface FolderData {
+ id: number;
+ created_at: string;
+ name: string;
+ user_id: number;
+ favorite: boolean;
+ link: {
+ count: number;
+ };
+}
+
+export interface LinkData {
+ id: number;
+ created_at: string;
+ updated_at: string | null;
+ url: string;
+ title: string;
+ description: string;
+ image_source: string;
+ folder_id: number;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..228857972
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "baseUrl": "./src",
+ "paths": {
+ "@components/*": ["components/*"],
+ "@utils/*": ["utils/*"],
+ "@images/*": ["Image/*"]
+ },
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src"]
+}
- {/*
diff --git a/src/Folder.css b/src/components/SharedComponents/Shared.css
similarity index 96%
rename from src/Folder.css
rename to src/components/SharedComponents/Shared.css
index 9c7b5b74e..e66daaed1 100644
--- a/src/Folder.css
+++ b/src/components/SharedComponents/Shared.css
@@ -396,20 +396,6 @@ footer {
grid-template-columns: repeat(1, 1fr);
}
- /* .hero-header img {
- width: 302px;
- height: 178px;
- object-fit: cover;
- padding: 0 32px;
- } */
-
- /* .content-image {
- width: 325px;
- height: 265px;
- object-fit: cover;
- padding: 0 32px;
- } */
-
section {
display: flex;
flex-direction: column;
diff --git a/src/App.js b/src/components/SharedComponents/Shared.js
similarity index 87%
rename from src/App.js
rename to src/components/SharedComponents/Shared.js
index 5d477cdc5..a113bd437 100644
--- a/src/App.js
+++ b/src/components/SharedComponents/Shared.js
@@ -5,7 +5,7 @@ import Card from "./Card";
import { useEffect, useState } from "react";
import Search from "./Search";
-function App() {
+function Shared() {
const [cardUser, setCardUser] = useState();
useEffect(() => {
fetch("https://bootcamp-api.codeit.kr/api/sample/folder")
@@ -13,7 +13,7 @@ function App() {
.then((result) => result.folder.links)
.then((carddata) => setCardUser(carddata))
.catch((error) => {
- console.error('Error fetching profile data:', error);
+ console.error("Error fetching profile data:", error);
});
}, []);
@@ -30,4 +30,4 @@ function App() {
);
}
-export default App;
+export default Shared;
diff --git a/Time.js b/src/components/SharedComponents/Time.js
similarity index 100%
rename from Time.js
rename to src/components/SharedComponents/Time.js
diff --git a/src/assets/bed.png b/src/components/SharedComponents/assets/bed.png
similarity index 100%
rename from src/assets/bed.png
rename to src/components/SharedComponents/assets/bed.png
diff --git a/src/assets/brownbulldog.png b/src/components/SharedComponents/assets/brownbulldog.png
similarity index 100%
rename from src/assets/brownbulldog.png
rename to src/components/SharedComponents/assets/brownbulldog.png
diff --git a/src/assets/building.png b/src/components/SharedComponents/assets/building.png
similarity index 100%
rename from src/assets/building.png
rename to src/components/SharedComponents/assets/building.png
diff --git a/src/components/SharedComponents/assets/bulldog.png b/src/components/SharedComponents/assets/bulldog.png
new file mode 100644
index 000000000..de59606e6
Binary files /dev/null and b/src/components/SharedComponents/assets/bulldog.png differ
diff --git a/src/assets/car.png b/src/components/SharedComponents/assets/car.png
similarity index 100%
rename from src/assets/car.png
rename to src/components/SharedComponents/assets/car.png
diff --git a/src/assets/chair.png b/src/components/SharedComponents/assets/chair.png
similarity index 100%
rename from src/assets/chair.png
rename to src/components/SharedComponents/assets/chair.png
diff --git a/src/assets/eye-off.svg b/src/components/SharedComponents/assets/eye-off.svg
similarity index 100%
rename from src/assets/eye-off.svg
rename to src/components/SharedComponents/assets/eye-off.svg
diff --git a/src/components/SharedComponents/assets/facebook.svg b/src/components/SharedComponents/assets/facebook.svg
new file mode 100644
index 000000000..b9c9d4939
--- /dev/null
+++ b/src/components/SharedComponents/assets/facebook.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/google.png b/src/components/SharedComponents/assets/google.png
similarity index 100%
rename from src/assets/google.png
rename to src/components/SharedComponents/assets/google.png
diff --git a/src/assets/hero.png b/src/components/SharedComponents/assets/hero.png
similarity index 100%
rename from src/assets/hero.png
rename to src/components/SharedComponents/assets/hero.png
diff --git a/src/assets/image1.png b/src/components/SharedComponents/assets/image1.png
similarity index 100%
rename from src/assets/image1.png
rename to src/components/SharedComponents/assets/image1.png
diff --git a/src/assets/image2.png b/src/components/SharedComponents/assets/image2.png
similarity index 100%
rename from src/assets/image2.png
rename to src/components/SharedComponents/assets/image2.png
diff --git a/src/assets/image3.png b/src/components/SharedComponents/assets/image3.png
similarity index 100%
rename from src/assets/image3.png
rename to src/components/SharedComponents/assets/image3.png
diff --git a/src/assets/image4.png b/src/components/SharedComponents/assets/image4.png
similarity index 100%
rename from src/assets/image4.png
rename to src/components/SharedComponents/assets/image4.png
diff --git a/src/components/SharedComponents/assets/instagram.svg b/src/components/SharedComponents/assets/instagram.svg
new file mode 100644
index 000000000..0b9337b07
--- /dev/null
+++ b/src/components/SharedComponents/assets/instagram.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/kakao.svg b/src/components/SharedComponents/assets/kakao.svg
similarity index 100%
rename from src/assets/kakao.svg
rename to src/components/SharedComponents/assets/kakao.svg
diff --git a/src/components/SharedComponents/assets/logo.svg b/src/components/SharedComponents/assets/logo.svg
new file mode 100644
index 000000000..282022090
--- /dev/null
+++ b/src/components/SharedComponents/assets/logo.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/mobill.png b/src/components/SharedComponents/assets/mobill.png
similarity index 100%
rename from src/assets/mobill.png
rename to src/components/SharedComponents/assets/mobill.png
diff --git a/src/assets/profile.svg b/src/components/SharedComponents/assets/profile.svg
similarity index 100%
rename from src/assets/profile.svg
rename to src/components/SharedComponents/assets/profile.svg
diff --git a/src/components/SharedComponents/assets/search.svg b/src/components/SharedComponents/assets/search.svg
new file mode 100644
index 000000000..6a866b7ec
--- /dev/null
+++ b/src/components/SharedComponents/assets/search.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/src/components/SharedComponents/assets/twitter.svg b/src/components/SharedComponents/assets/twitter.svg
new file mode 100644
index 000000000..14a6069a1
--- /dev/null
+++ b/src/components/SharedComponents/assets/twitter.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/userimg.svg b/src/components/SharedComponents/assets/userimg.svg
similarity index 100%
rename from src/assets/userimg.svg
rename to src/components/SharedComponents/assets/userimg.svg
diff --git a/src/assets/whitelayer.png b/src/components/SharedComponents/assets/whitelayer.png
similarity index 100%
rename from src/assets/whitelayer.png
rename to src/components/SharedComponents/assets/whitelayer.png
diff --git a/src/components/SharedComponents/assets/youtube.svg b/src/components/SharedComponents/assets/youtube.svg
new file mode 100644
index 000000000..28ed0e8ba
--- /dev/null
+++ b/src/components/SharedComponents/assets/youtube.svg
@@ -0,0 +1,10 @@
+
diff --git "a/src/assets/\353\266\210\355\210\254\353\252\205.png" "b/src/components/SharedComponents/assets/\353\266\210\355\210\254\353\252\205.png"
similarity index 100%
rename from "src/assets/\353\266\210\355\210\254\353\252\205.png"
rename to "src/components/SharedComponents/assets/\353\266\210\355\210\254\353\252\205.png"
diff --git a/src/components/SharedComponents/index.js b/src/components/SharedComponents/index.js
new file mode 100644
index 000000000..f11908f09
--- /dev/null
+++ b/src/components/SharedComponents/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Main from '../Main';
+
+const root = document.getElementById('root');
+const reactRoot = createRoot(root);
+reactRoot.render();
diff --git a/src/components/SortMenu.tsx b/src/components/SortMenu.tsx
new file mode 100644
index 000000000..ceeaa1654
--- /dev/null
+++ b/src/components/SortMenu.tsx
@@ -0,0 +1,74 @@
+import { useState } from "react";
+import * as S from "./Styled";
+import "../indexCss.css";
+import sortPlusImg from "../Image/add.svg";
+import { AddFolderModal } from "./modal/index";
+import { FolderData } from "../utils/type";
+
+type SortMenuProps = {
+ data: FolderData[];
+ clickSortName: React.MouseEventHandler */}
- {/*
*/}
{userData.folder.owner.name}
{userData.folder.name}
+
+
+ 전체
+
+ {data &&
+ data.map((item) => (
+
+ {item.name}
+
+ ))}
+
+
+
+
+ 변경하기
+추가하기
+폴더 공유
+폴더명
+폴더 삭제
+폴더명
+삭제하기
+링크 삭제
+https://www.abc.com
+삭제하기
+폴더에 추가
+링크 주소
+{link}
추가하기
+