+
{value.name}
{
};
const List = ({ listClassName = "" }) => {
- const { showDropdown, dropdownList, onClickDropdownItem } =
+ const { showDropdown, dropdownList, onDropdownItemClick } =
useContext(DropdownContext);
if (!showDropdown) return null;
return (
@@ -70,7 +61,7 @@ const List = ({ listClassName = "" }) => {
{dropdownList?.map((item, index) => (
onClickDropdownItem(item)}
+ onClick={() => onDropdownItemClick(item)}
>
{item.name}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 00000000..987001a7
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,59 @@
+import facebookLogo from "../img/ic_facebook.svg";
+import twitterLogo from "../img/ic_twitter.svg";
+import youtubeLogo from "../img/ic_youtube.svg";
+import instagramLogo from "../img/ic_instagram.svg";
+import "./css/Footer.css";
+import { Link } from "react-router-dom";
+import SnsLink from "./SnsLink";
+
+const Footer = () => {
+ const snsLinks = [
+ {
+ href: "https://www.facebook.com",
+ logo: facebookLogo,
+ alt: "페이스북 로고",
+ },
+ {
+ href: "https://x.com",
+ logo: twitterLogo,
+ alt: "트위터 로고",
+ },
+ {
+ href: "https://www.youtube.com",
+ logo: youtubeLogo,
+ alt: "유튜브 로고",
+ },
+ {
+ href: "https://www.instagram.com",
+ logo: instagramLogo,
+ alt: "인스타그램 로고",
+ },
+ ];
+
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/src/components/Label.js b/src/components/Label.js
deleted file mode 100644
index f8d60f27..00000000
--- a/src/components/Label.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import "./css/Label.css";
-
-const Label = ({ children }) => {
- return ;
-};
-
-export default Label;
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
new file mode 100644
index 00000000..08758888
--- /dev/null
+++ b/src/components/Label.tsx
@@ -0,0 +1,17 @@
+import { LabelHTMLAttributes, ReactNode } from "react";
+import "./css/Label.css";
+
+interface LabelProps extends LabelHTMLAttributes {
+ children?: ReactNode;
+ className?: string;
+}
+
+const Label = ({ children, className, ...rest }: LabelProps) => {
+ return (
+
+ );
+};
+
+export default Label;
diff --git a/src/components/MoreDropdown.js b/src/components/MoreDropdown.js
index 95f9b0c3..d52a2df5 100644
--- a/src/components/MoreDropdown.js
+++ b/src/components/MoreDropdown.js
@@ -4,8 +4,8 @@ import moreIcon from "../img/more.svg";
const MoreDropdown = ({
className,
- onClickDropdown,
- onClickDropdownItem,
+ onToggleDropdown,
+ onDropdownItemClick,
onCloseDropdown,
dropdownList,
showDropdown,
@@ -14,8 +14,8 @@ const MoreDropdown = ({
return (
-
- );
-};
-
-export default Nav;
+import { Link, NavLink, useLocation } from "react-router-dom";
+import textLogoIcon from "../img/logo_text.jpg";
+import logoIcon from "../img/logo.svg";
+import userIcon from "../img/user.svg";
+import "./css/Nav.css";
+import Button from "./Button";
+
+const Nav = () => {
+ const location = useLocation();
+ const isLogin = false;
+
+ return (
+
+
+ );
+};
+
+export default Nav;
diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js
index fff75433..709ef051 100644
--- a/src/components/SearchInput.js
+++ b/src/components/SearchInput.js
@@ -1,24 +1,24 @@
-import searchIcon from "../img/search.svg";
-import "./css/SearchInput.css";
-
-const SearchInput = ({ value, onInput, onKeyDown, onClick, className }) => {
- return (
- 
+
+ );
+};
+
+export default SnsLink;
diff --git a/src/components/SortDropdown.js b/src/components/SortDropdown.js
index ab6e627f..bf40cfab 100644
--- a/src/components/SortDropdown.js
+++ b/src/components/SortDropdown.js
@@ -2,8 +2,8 @@ import Dropdown from "./Dropdown";
const SortDropdown = ({
className,
- onClickDropdown,
- onClickDropdownItem,
+ onToggleDropdown,
+ onDropdownItemClick,
onCloseDropdown,
dropdownList,
showDropdown,
@@ -12,8 +12,8 @@ const SortDropdown = ({
return (
{},
- onAdd = () => {},
- onDelete = () => {},
-}) => {
- const [tagInputVal, setTagInputVal] = useState("");
- const onKeyDown = (e) => {
- // 엔터 입력 시 추가
- if (e.key === "Enter") {
- const newVal = e.target.value.replaceAll(" ", "");
- onAdd(newVal);
- setTagInputVal("");
- }
- };
-
- const onChangeVal = (name, value) => {
- setTagInputVal(value);
- onChange(value);
- };
-
- const handleOnClickDelete = (index) => {
- onDelete(index);
- };
-
- return (
-
-
-
-
- 
-
-
- -
-
-
-
- isActive ? "header__content__link--active" : "" - } - > - 자유게시판 - -
-
- -
-
- isActive || location.pathname === "/additem" - ? "header__content__link--active" - : "" - } - > - 중고마켓 - -
-
-
- 
-
-
-
+
+
+
+
+
+
+ {isLogin ? (
+ -
+
-
+
+ isActive ? "header__content__link--active" : "" + } + > + 자유게시판 + +
+
+ -
+
+ isActive || location.pathname === "/additem" + ? "header__content__link--active" + : "" + } + > + 중고마켓 + +
+
+
+
+
+
+ ) : (
+
+
+
+
+
+ )}
+
-
- 
-
- );
-};
-
-export default SearchInput;
+import searchIcon from "../img/search.svg";
+import "./css/SearchInput.css";
+
+const SearchInput = ({ value, onInput, onKeyDown, onClick, className }) => {
+ return (
+
+
+
+
+ );
+};
+
+export default SearchInput;
diff --git a/src/components/SnsLink.tsx b/src/components/SnsLink.tsx
new file mode 100644
index 00000000..ce818d08
--- /dev/null
+++ b/src/components/SnsLink.tsx
@@ -0,0 +1,15 @@
+interface SnsLinkProps {
+ href: string;
+ logo: string;
+ alt: string;
+}
+
+const SnsLink = ({ href, logo, alt }: SnsLinkProps) => {
+ return (
+
+
-
- );
-};
-
-export default TagInput;
+import { useState } from "react";
+import Textfield from "./Textfield";
+import Tag from "./Tag";
+import "./css/TagInput.css";
+
+const TagInput = ({
+ tagList,
+ isValid,
+ message,
+ onChange = () => {},
+ onAdd = () => {},
+ onDelete = () => {},
+}) => {
+ const [tagInputVal, setTagInputVal] = useState("");
+ const onKeyDown = (e) => {
+ // 엔터 입력 시 추가
+ if (e.key === "Enter") {
+ const newVal = e.target.value.replaceAll(" ", "");
+ onAdd(newVal);
+ setTagInputVal("");
+ }
+ };
+
+ const onChangeVal = (name, value) => {
+ setTagInputVal(value);
+ onChange(value);
+ };
+
+ const handleOnClickDelete = (index) => {
+ onDelete(index);
+ };
+
+ return (
+
- {tagList.map((tag, index) => (
- handleOnClickDelete(index)}
- >
- {tag}
-
- ))}
-
-
+ onChangeVal(e.target.name, e.target.value)}
+ className="taginput__textfield"
+ />
+
+ );
+};
+
+export default TagInput;
diff --git a/src/components/TextArea.js b/src/components/TextArea.js
deleted file mode 100644
index bc8edef8..00000000
--- a/src/components/TextArea.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import "./css/InputCommon.css";
-import "./css/TextArea.css";
-
-/*
- [Textfield 필수 속성]
- - value: 텍스트필드 값
- - placeholder: 플레이스홀더 텍스트
- - onChange: 컴포넌트 밖에서 텍스트필드 값을 변경하는 메소드 전달 필요
-
- [TextArea 상태 속성]
- - isValid: 에러 상태 표시 => null(초기상태). true 값을 넘기면 메시지 출력
- - message: 메세지가 있는 경우 출력
-*/
-
-const TextArea = ({
- value,
- name,
- placeholder = "입력해주세요",
- onChange = () => {},
- isValid = null,
- message,
- className,
- ...rest
-}) => {
- const statusMessageClass = {
- null: "",
- false: "input__message--error",
- };
-
- const hasMessage = !!message;
- const isInvalid = isValid === false;
- const showMessage = hasMessage && isInvalid;
-
- return (
-
+ {tagList.map((tag, index) => (
+ handleOnClickDelete(index)}
+ >
+ {tag}
+
+ ))}
+
+
-