refactor: 프로젝트 폴더, 파일구조 변경 (멘토링 참고)

src/components/Field/Error/index.jsx → src/components/Field/Error.jsx

@@ -1,6 +1,6 @@
-import styles from "./styles.module.scss";
+import styles from "./Error.module.scss";
 
-export default function Error({ error }) {
+export function Error({ error }) {
   if (!error) {
     return null;
   }

src/components/Field/FieldItem/index.jsx → src/components/Field/FieldItem.jsx

@@ -1,6 +1,6 @@
-import styles from "./styles.module.scss";
+import styles from "./FieldItem.module.scss";
 
-export default function FieldItem({ children }) {
+export function FieldItem({ children }) {
   return <div className={styles["form-item"]}>{children}</div>;
 }
 

src/components/Field/Form/index.jsx → src/components/Field/Form.jsx

@@ -1,7 +1,6 @@
-import Alert from "@components/Alert";
-import LoadingSpinner from "@components/LoadingSpinner";
+import { Alert, LoadingSpinner } from "@components/ui";
 
-export default function ProductForm({ isLoading, error, onSubmit, children }) {
+export function Form({ isLoading, error, onSubmit, children }) {
   return (
     <>
       {isLoading && <LoadingSpinner />}

src/components/Field/ImageUpload/index.jsx → src/components/Field/ImageUpload.jsx

@@ -1,12 +1,11 @@
 import useSingleFile from "@hooks/useSingleFile";
-import Preview from "../Preview";
-import Error from "../Error";
+import { Preview, Error } from "@components/Field";
 import iconPlus from "@assets/img/icon/icon_plus.svg";
-import styles from "./styles.module.scss";
+import styles from "./ImageUpload.module.scss";
 
 const LIMIT_SIZE_MB = 2;
 
-export default function ImageUpload({
+export function ImageUpload({
   error,
   value,
   id,

src/components/Field/Input/index.jsx → src/components/Field/Input.jsx

@@ -1,11 +1,11 @@
 import { useState } from "react";
 import clsx from "clsx";
-import Error from "../Error";
+import { Error } from "@components/Field";
 import iconViewOn from "@assets/img/icon/icon_view_on.svg";
 import iconViewOff from "@assets/img/icon/icon_view_off.svg";
-import styles from "./styles.module.scss";
+import styles from "./Input.module.scss";
 
-export default function Input({ type = "text", error, value, ...props }) {
+export function Input({ type = "text", error, value, ...props }) {
   const [currentType, setCurrentType] = useState(type);
   const valid = value && !error;
 

src/components/Field/NumberInput/index.jsx → src/components/Field/NumberInput.jsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import clsx from "clsx";
-import Error from "../Error";
+import { Error } from "@components/Field";
 
-export default function NumberInput({
+export function NumberInput({
   type = "number",
   error,
   value,

src/components/Field/Preview/index.jsx → src/components/Field/Preview.jsx

@@ -1,7 +1,7 @@
 import clearIcon from "@assets/img/icon/icon_clear.svg";
-import styles from "./styles.module.scss";
+import styles from "./Preview.module.scss";
 
-export default function Preview({ src, onRemove }) {
+export function Preview({ src, onRemove }) {
   return (
     <figure className={styles.cover}>
       <button type="button" className={styles.button} onClick={onRemove}>

src/components/Field/TagsInput/index.jsx → src/components/Field/TagsInput.jsx

@@ -1,16 +1,9 @@
 import { useRef } from "react";
 import clsx from "clsx";
-import Tags from "@components/Tags";
-import Error from "../Error";
+import { Tags } from "@components/ui";
+import { Error } from "@components/Field";
 
-export default function TagsInput({
-  error,
-  value,
-  id,
-  name,
-  onChange,
-  placeholder,
-}) {
+export function TagsInput({ error, value, id, name, onChange, placeholder }) {
   const inputRef = useRef(null);
   const valid = value.length && !error;
 

src/components/Field/Textarea/index.jsx → src/components/Field/Textarea.jsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
-import Error from "../Error";
+import { Error } from "@components/Field";
 
-export default function Textarea({ error, value, ...props }) {
+export function Textarea({ error, value, ...props }) {
   const valid = value && !error;
 
   return (

src/components/Field/index.js

@@ -0,0 +1,9 @@
+export * from "./Form";
+export * from "./Error";
+export * from "./FieldItem";
+export * from "./Input";
+export * from "./Textarea";
+export * from "./TagsInput";
+export * from "./ImageUpload";
+export * from "./NumberInput";
+export * from "./Preview";

src/components/Footer/index.jsx → src/components/Footer/Footer.jsx

@@ -1,12 +1,12 @@
 import { Link } from "react-router-dom";
-import styles from "./styles.module.scss";
+import styles from "./Footer.module.scss";
 
 import facebookIcon from "@assets/img/icon/icon_facebook.svg";
 import twitterIcon from "@assets/img/icon/icon_twitter.svg";
 import youtubeIcon from "@assets/img/icon/icon_youtube.svg";
 import instagramIcon from "@assets/img/icon/icon_instagram.svg";
 
-export default function Footer() {
+export function Footer() {
   return (
     <footer className={styles.footer}>
       <div className={styles.inner}>

src/components/Footer/index.js

@@ -0,0 +1 @@
+export * from "./Footer";

src/components/Header/index.jsx → src/components/Header/Header.jsx

@@ -1,9 +1,7 @@
-import Logo from "./Logo";
-import Nav from "./Nav";
-import Util from "./Util";
-import styles from "./styles.module.scss";
+import { Logo, Nav, Util } from "@components/Header";
+import styles from "./Header.module.scss";
 
-export default function Header({ showNav = false }) {
+export function Header({ showNav = false }) {
   return (
     <header className={styles.header}>
       <nav className={styles.nav}>

src/components/Header/Logo/index.jsx → src/components/Header/Logo.jsx

@@ -1,9 +1,9 @@
 import { Link } from "react-router-dom";
 import logoPC from "@assets/img/common/logo_full.svg";
 import logoMobile from "@assets/img/common/logo_text.svg";
-import styles from "./styles.module.scss";
+import styles from "./Logo.module.scss";
 
-export default function Logo() {
+export function Logo() {
   return (
     <h1 className={styles.logo}>
       <Link to="/">

src/components/Header/Nav/index.jsx → src/components/Header/Nav.jsx

@@ -1,6 +1,6 @@
 import { NavLink, useLocation } from "react-router-dom";
 import clsx from "clsx";
-import styles from "./styles.module.scss";
+import styles from "./Nav.module.scss";
 
 const MENU = [
   {
@@ -19,7 +19,7 @@ function isInclude(path, list = []) {
   return list.includes(path);
 }
 
-export default function Nav() {
+export function Nav() {
   const { pathname } = useLocation();
 
   return (

src/components/Header/Profile/index.jsx → src/components/Header/Profile.jsx

@@ -1,7 +1,6 @@
-import Dropdown from "@components/Dropdown";
-import Avatar from "@components/Avatar";
+import { Dropdown, Avatar } from "@components/ui";
 
-export default function Profile({ user, onLogout }) {
+export function Profile({ user, onLogout }) {
   function handleLogout() {
     if (confirm("정말로 로그아웃 하시겠습니까?")) {
       onLogout();

src/components/Header/Util/index.jsx → src/components/Header/Util.jsx

@@ -1,9 +1,9 @@
 import { useAuth } from "@context/AuthContext";
-import Button from "@components/Button";
-import Profile from "@components/Header/Profile";
-import styles from "./styles.module.scss";
+import { Button } from "@components/ui";
+import { Profile } from "@components/Header";
+import styles from "./Util.module.scss";
 
-export default function Util() {
+export function Util() {
   const {
     auth: { user },
     handleLogout,

src/components/Header/index.js

@@ -0,0 +1,5 @@
+export * from "./Header";
+export * from "./Logo";
+export * from "./Nav";
+export * from "./Profile";
+export * from "./Util";

src/components/Layout/index.jsx → src/components/Layout/Layout.jsx

@@ -1,9 +1,9 @@
 import { Outlet } from "react-router-dom";
-import Header from "../Header";
-import Footer from "../Footer";
-import styles from "./styles.module.scss";
+import { Header } from "@components/Header";
+import { Footer } from "@components/Footer";
+import styles from "./Layout.module.scss";
 
-export default function Layout({ hasNav = false, hasFooter = false }) {
+export function Layout({ hasNav = false, hasFooter = false }) {
   return (
     <>
       <Header showNav={hasNav} />

src/components/Layout/index.js

@@ -0,0 +1 @@
+export * from "./Layout";

src/components/List/index.jsx → src/components/List/List.jsx

@@ -1,7 +1,7 @@
-import LoadingSpinner from "@components/LoadingSpinner";
-import Message from "./Message";
+import { LoadingSpinner } from "@components/ui";
+import { Message } from "@components/List";
 
-export default function List({
+export function List({
   items,
   renderItem,
   isLoading,

src/components/List/Message.jsx

@@ -0,0 +1,5 @@
+import styles from "./Message.module.scss";
+
+export function Message({ children }) {
+  return <div className={styles.message}>{children}</div>;
+}

src/components/List/index.js

@@ -0,0 +1,2 @@
+export * from "./List";
+export * from "./Message";

src/components/Page/PageWrapper.jsx

@@ -0,0 +1,5 @@
+import styles from "./PageWrapper.module.scss";
+
+export function PageWrapper({ children }) {
+  return <div className={styles.container}>{children}</div>;
+}

src/components/Page/index.js

@@ -0,0 +1 @@
+export * from "./PageWrapper";

src/components/Pagination/index.jsx → src/components/Pagination/Pagination.jsx

@@ -1,9 +1,9 @@
 import clsx from "clsx";
 import arrowLeft from "@assets/img/icon/icon_arrow_left.svg";
 import arrowRight from "@assets/img/icon/icon_arrow_right.svg";
-import styles from "./styles.module.scss";
+import styles from "./Pagination.module.scss";
 
-export default function Pagination({
+export function Pagination({
   page,
   pageNumbers,
   isPrevDisabled,

src/components/Pagination/index.js

@@ -0,0 +1 @@
+export * from "./Pagination";

src/components/Search/Recent/index.jsx → src/components/Search/Recent.jsx

@@ -1,8 +1,8 @@
 import { cloneElement, useEffect, useRef, useState } from "react";
 import searchIcon from "@assets/img/icon/icon_search.svg";
-import styles from "./styles.module.scss";
+import styles from "./Recent.module.scss";
 
-export default function Recent({
+export function Recent({
   title,
   data,
   onItemClick,

src/components/Search/index.jsx → src/components/Search/Search.jsx

@@ -1,9 +1,9 @@
 import { useRef } from "react";
 import searchIcon from "@assets/img/icon/icon_search.svg";
 import clearIcon from "@assets/img/icon/icon_clear.svg";
-import styles from "./styles.module.scss";
+import styles from "./Search.module.scss";
 
-export default function Search({
+export function Search({
   value,
   onChange,
   onSubmit,

src/components/Search/index.js

@@ -0,0 +1,2 @@
+export * from "./Search";
+export * from "./Recent";

src/components/Section/index.jsx → src/components/Section/Section.jsx

@@ -1,6 +1,6 @@
-import styles from "./styles.module.scss";
+import styles from "./Section.module.scss";
 
-function Section({ children }) {
+export function Section({ children }) {
   return <section className={styles.section}>{children}</section>;
 }
 
@@ -19,5 +19,3 @@ function Content({ children }) {
 
 Section.Header = Header;
 Section.Content = Content;
-
-export default Section;

src/components/Section/index.js

@@ -0,0 +1 @@
+export * from "./Section";

src/components/Alert/index.jsx → src/components/ui/Alert.jsx

@@ -1,14 +1,14 @@
+import clsx from "clsx";
 import iconError from "@assets/img/icon/icon_error.svg";
 import iconWarn from "@assets/img/icon/icon_warn.svg";
-import styles from "./styles.module.scss";
-import clsx from "clsx";
+import styles from "./Alert.module.scss";
 
 const iconImg = {
   warn: { src: iconWarn, alt: "경고" },
   error: { src: iconError, alt: "에러" },
 };
 
-export default function Alert({ mode = "error", children }) {
+export function Alert({ mode = "error", children }) {
   return (
     <div className={clsx(styles.alert, styles[mode])}>
       <img src={iconImg[mode].src} alt={iconImg[mode].alt} />

src/components/Avatar/index.jsx → src/components/ui/Avatar.jsx

@@ -1,7 +1,7 @@
 import defaultAvatar from "@assets/img/icon/icon_avatar.svg";
-import styles from "./styles.module.scss";
+import styles from "./Avatar.module.scss";
 
-export default function Avatar({ nickname, img }) {
+export function Avatar({ nickname, img }) {
   const avatarImg = img || defaultAvatar;
 
   function handleError(e) {

src/components/Button/index.jsx → src/components/ui/Button.jsx

@@ -1,8 +1,8 @@
 import { Link } from "react-router-dom";
 import clsx from "clsx";
-import styles from "./styles.module.scss";
+import styles from "./Button.module.scss";
 
-export default function Button({ to, className, children, size, ...props }) {
+export function Button({ to, className, children, size, ...props }) {
   const css = clsx(styles.btn, size && styles[`btn-${size}`], className);
   const Component = to ? Link : "button";
   const ComponentProps = {

src/components/Chip/index.jsx → src/components/ui/Chip.jsx

@@ -1,7 +1,7 @@
 import clearIcon from "@assets/img/icon/icon_clear.svg";
-import styles from "./styles.module.scss";
+import styles from "./Chip.module.scss";
 
-export default function Chip({ removable, text, onClick }) {
+export function Chip({ removable, text, onClick }) {
   return (
     <div className={styles.chip}>
       {text}