Skip to content

Commit

Permalink
refactor: shared 폴더 구조 컨벤션에 맞추어 정리 (#230)
Browse files Browse the repository at this point in the history
  • Loading branch information
suwonthugger committed Jan 1, 2025
1 parent f843915 commit 4356ea2
Show file tree
Hide file tree
Showing 78 changed files with 137 additions and 190 deletions.
2 changes: 1 addition & 1 deletion src/pages/AllowedServicePage/AllowedServicePage.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useEffect, useRef, useState } from 'react';

import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper';
import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/ModalWrapper';

import useClickOutside from '@/shared/hooks/useClickOutside';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { ChangeEvent, useState } from 'react';

import ArrowSVGBtn from '@/shared/components/Button/ButtonArrowSVG/ButtonArrowSVG';
import CategoryTabSelect from '@/shared/components/CategoryTabSelect';
import ArrowSVGBtn from '@/shared/components/ButtonArrowSVG/ButtonArrowSVG';

import { Direction } from '@/shared/types/global';

import { CATEGORY_MODALTABS } from '@/shared/constants/tabSelections';

import { AllowedService } from '../types';
import CategoryTabSelect from '@/pages/HomePage/ModalContentsCategory/TabCategorySelect/TabCategorySelect';

import { AllowedService } from '../types';
import BoxUrlList from './BoxUrlList/BoxUrlList';
import ColorPallete from './ColorPallete/ColorPallete';
import InputAllowedServiceUrl from './InputAllowedServiceUrl/InputAllowedServiceUrl';
import TableAllowedService from './TableAllowedService/TableAllowedService';
import BoxUrlList from './BoxUrlList/BoxUrlList';

interface BoxMakeAllowedServiceProps {
allowedService: AllowedService;
Expand Down Expand Up @@ -75,7 +75,7 @@ const BoxMakeAllowedService = ({ allowedService, updateAllowedService }: BoxMake
value={allowedServiceName}
onChange={handleMoribNameChange}
placeholder="모립세트 이름을 입력해주세요."
className="title-bold-36 placeholder-text-gray-03 w-[114rem] flex-shrink-0 bg-transparent text-white focus:outline-none"
className="placeholder-text-gray-03 w-[114rem] flex-shrink-0 bg-transparent text-white title-bold-36 focus:outline-none"
/>
</div>

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import CircleColorIcon from '@/shared/components/CircleColorIcon';
import CircleColorIcon from '@/shared/components/CircleColorIcon/CircleColorIcon';

import { colors } from '@/shared/constants/colorPallete';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useRef, useState } from 'react';

import ArrowSVGBtn from '@/shared/components/Button/ButtonArrowSVG/ButtonArrowSVG';
import ArrowSVGBtn from '@/shared/components/ButtonArrowSVG/ButtonArrowSVG';

import { Direction } from '@/shared/types/global';

Expand Down Expand Up @@ -41,7 +41,7 @@ const BoxRecommendService = ({ addUrlToAllowedService }: BoxRecommendServiceProp
return (
<div className="relative h-[18.8rem] w-[132rem] flex-shrink-0 rounded-[16px] bg-gray-bg-03">
<div className="mx-[2.8rem] flex w-[126.4rem] items-end justify-between self-stretch pt-[2.2rem]">
<h2 className="head-bold-24 text-white">추천 서비스</h2>
<h2 className="text-white head-bold-24">추천 서비스</h2>
<div className="flex items-center">
<ArrowSVGBtn
className="flex h-[3.4rem] w-[3.4rem] items-center justify-center p-[0.5rem]"
Expand Down Expand Up @@ -71,7 +71,7 @@ const BoxRecommendService = ({ addUrlToAllowedService }: BoxRecommendServiceProp
alt="favicon"
className="h-[4.2rem] w-[4.2rem] rounded-full"
/>
<p className="subhead-bold-20 max-h-[8.4rem] overflow-hidden text-white">{service.serviceName}</p>
<p className="max-h-[8.4rem] overflow-hidden text-white subhead-bold-20">{service.serviceName}</p>
</div>
))}
<div className="absolute right-0 top-0 z-0 h-[18.8rem] w-[7.2rem] flex-shrink-0 rounded-r-[16px] bg-gradient-to-r from-transparent to-[#33373F]" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Dropdown from '@/shared/components/Dropdown';
import Dropdown from '@/shared/components/Dropdown/Dropdown';

import IconMeatBall from '@/shared/assets/svgs/todo_meatball_default.svg?react';

Expand Down
4 changes: 2 additions & 2 deletions src/pages/HomePage/BoxCategory/BoxCategory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import BoxTodoInput from './BoxTodoInput/BoxTodoInput';
import StatusDefaultBoxCategory from './StatusDefaultBoxCategory/StatusDefaultBoxCategory';
import { useCreateTodo } from './hooks/useCreateTodo';

const Calendar = lazy(() => import('@/shared/components/Calendar'));
const Calendar = lazy(() => import('@/shared/components/Calendar/Calendar'));

interface BoxCategoryProps {
id: number;
Expand Down Expand Up @@ -107,7 +107,7 @@ const BoxCategory = ({
}

const handleMouseEnter = () => {
import('@/shared/components/Calendar').catch((error) => {
import('@/shared/components/Calendar/Calendar').catch((error) => {
console.error('캘린더를 받아오는데 오류가 발생했습니다.', error);
});
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import BoxTodo from '@/shared/components/BoxTodo/BoxTodo';
import HomeLargeBtn from '@/shared/components/Button/ButtonHomeLarge/ButtonHomeLarge';
import HomeLargeBtn from '@/shared/components/ButtonHomeLarge/ButtonHomeLarge';

import { HomeLargeBtnVariant } from '@/shared/types/global';
import { Task } from '@/shared/types/home';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import HomeLargeBtn from '@/shared/components/Button/ButtonHomeLarge/ButtonHomeLarge';
import HomeLargeBtn from '@/shared/components/ButtonHomeLarge/ButtonHomeLarge';

import { HomeLargeBtnVariant } from '@/shared/types/global';

Expand Down
9 changes: 4 additions & 5 deletions src/pages/HomePage/DatePicker/DatePicker.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Dayjs } from 'dayjs';

import ArrowSVGBtn from '@/shared/components/Button/ButtonArrowSVG/ButtonArrowSVG';
import ButtonDropdownOptions from '@/shared/components/ButtonDropdownOptions';
import Dropdown from '@/shared/components/Dropdown';
import ArrowSVGBtn from '@/shared/components/ButtonArrowSVG/ButtonArrowSVG';
import ButtonDropdownOptions from '@/shared/components/ButtonDropdownOptions/ButtonDropdownOptions';
import Dropdown from '@/shared/components/Dropdown/Dropdown';

import { getHomeDropdownData } from '@/shared/utils/date';

Expand All @@ -11,8 +11,7 @@ import { Direction } from '@/shared/types/global';
import ButtonArrowIcon from '@/shared/assets/svgs/btn_arrow.svg?react';
import ButtonTodayIcon from '@/shared/assets/svgs/btn_today.svg?react';

import DateBtn from '@/pages/HomePage/DatePicker/ButtonDate/ButtonDate';

import DateBtn from './ButtonDate/ButtonDate';
import { useDatePicker } from './hooks/useDatePicker';

interface DatePickerProps {
Expand Down
2 changes: 1 addition & 1 deletion src/pages/HomePage/HomePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { useNavigate } from 'react-router-dom';

import { useQueryClient } from '@tanstack/react-query';

import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper';
import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/ModalWrapper';

import useClickOutside from '@/shared/hooks/useClickOutside';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const CategoryMsetUrlInfo = ({ urlInfo, variant, children }: CategoryMoribPageIn
<div className="flex items-center">
<div className={`my-[0.1rem] flex h-[2.2rem] items-center`}>
<img src={urlInfo.favicon} alt="favicon" className="my-[0.1rem] mr-[1.2rem] h-[2rem] w-[2rem]" />
<p className={`body-reg-16 my-[0.05rem] truncate text-white ${sizeVariant[variant].pageWidth}`}>
<p className={`my-[0.05rem] truncate text-white body-reg-16 ${sizeVariant[variant].pageWidth}`}>
{urlInfo.domain}
</p>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const InputCategoryUrl = ({
/>
<div className={`flex h-[3.2rem] ${isUrlValidated === false ? 'visible' : 'invisible'}`}>
<ErrorIcon />
<div className="detail-reg-14 ml-[0.5rem] text-error-01">{errorMessage}</div>
<div className="ml-[0.5rem] text-error-01 detail-reg-14">{errorMessage}</div>
</div>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,19 @@ import DisabledDropIcon from '@/shared/assets/svgs/disabled_dropdown.svg?react';
import DropIcon from '@/shared/assets/svgs/dropIcon.svg?react';
import UpIcon from '@/shared/assets/svgs/upIcon.svg?react';

interface CategoryBtnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
interface ButtonCategoryDropdownProps extends ButtonHTMLAttributes<HTMLButtonElement> {
isClicked: boolean;
handleClicked: (prev: boolean) => void;
selectedOption: string;
}

const CategoryDropdownBtn = ({ isClicked, handleClicked, selectedOption, disabled, ...props }: CategoryBtnProps) => {
const ButtonCategoryDropdown = ({
isClicked,
handleClicked,
selectedOption,
disabled,
...props
}: ButtonCategoryDropdownProps) => {
const clickedDropdownStyle = isClicked ? 'bg-gray-bg-05 text-white' : 'bg-gray-bg-03 text-white';

const commonBtnStyle = `subhead-med-18 flex h-[4.6rem] w-[27.2rem] items-center justify-between rounded-[5px] px-[1.6rem] py-[1.1rem] mb-[3.2rem]`;
Expand Down Expand Up @@ -40,4 +46,4 @@ const CategoryDropdownBtn = ({ isClicked, handleClicked, selectedOption, disable
);
};

export default CategoryDropdownBtn;
export default ButtonCategoryDropdown;
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ import { ButtonHTMLAttributes, useRef } from 'react';

import { useQueryClient } from '@tanstack/react-query';

import ButtonCategoryDropdown from '@/shared/components/ButtonCategoryDropdown';
import ButtonDropdownOptions from '@/shared/components/ButtonDropdownOptions';
import ButtonDropdownOptions from '@/shared/components/ButtonDropdownOptions/ButtonDropdownOptions';

import useClickOutside from '@/shared/hooks/useClickOutside';

import ButtonCategoryDropdown from './ButtonCategoryDropdown/ButtonCategoryDropdown';

interface DropdownBtnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
optionData: Category[];
handleOptionId: (id: number) => void;
Expand Down Expand Up @@ -64,7 +65,7 @@ const DropdownCategory = ({
return (
<li
key={item.id}
className="subhead-med-18 flex h-[4.6rem] w-[27.2rem] flex-row items-center border-none"
className="flex h-[4.6rem] w-[27.2rem] flex-row items-center border-none subhead-med-18"
>
<ButtonDropdownOptions
onClick={() => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
import { useState } from 'react';

import ButtonCategoryCommon from '@/shared/components/ButtonCategoryCommon';
import CategoryMsetUrlInfo from '@/shared/components/CategoryMsetUrlInfo';
import CategoryTabSelect from '@/shared/components/CategoryTabSelect';
import DropdownCategory from '@/shared/components/DropdownCategory';
import TitleMoribSet from '@/shared/components/TitleMoribSet';

import { getTabName } from '@/shared/apis/modal/axios';
import { useCategoryLists, useGetMsets } from '@/shared/apis/modal/queries';

Expand All @@ -14,8 +8,13 @@ import { CATEGORY_MODALTABS } from '@/shared/constants/tabSelections';
import AddBtn from '@/shared/assets/svgs/add_btn.svg?react';
import MinusBtn from '@/shared/assets/svgs/minus_btn.svg?react';

import CategoryCommonMoribSet from './CategoryCommonMoribSet';
import InputCategoryUrl from './InputCategoryUrl';
import ButtonCategoryCommon from '../ButtonCategoryCommon/ButtonCategoryCommon';
import CategoryCommonMoribSet from '../CategoryCommonMoribSet/CategoryCommonMoribSet';
import CategoryMsetUrlInfo from '../CategoryMsetUrlInfo/CategoryMsetUrlInfo';
import InputCategoryUrl from '../InputCategoryUrl/InputCategoryUrl';
import DropdownCategory from '../ModalAddCategoryList/DropdownCategory/DropdownCategory';
import TitleMoribSet from '../ModalAddCategoryList/TitleMoribSet/TitleMoribSet';
import CategoryTabSelect from '../TabCategorySelect/TabCategorySelect';

interface UrlInfo {
url: string;
Expand Down Expand Up @@ -100,7 +99,7 @@ const AddCategoryListModal = ({
<div className="flex">
<div className="h-[80rem] w-[68.8rem] rounded-l-[10px] bg-gray-bg-04 py-[2.8rem] pl-[4.4rem] pr-[4.3rem]">
<div className="mb-[3.3rem]">
<h1 className="head-bold-24 text-gray-04">카테고리 추가</h1>
<h1 className="text-gray-04 head-bold-24">카테고리 추가</h1>
</div>
<aside className="mb-[8px]">
<div className="my-[8px]">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
type TitleMoribSetProp = { moribSetName: string };

const TitleMoribSet = ({ moribSetName }: TitleMoribSetProp) => {
return (
<div className="subhead-bold-22 mb-[8px] flex w-full flex-row justify-start p-[1rem]">
<div className="mb-[8px] flex w-full flex-row justify-start p-[1rem] subhead-bold-22">
<h2 className="text-mint-01">
{moribSetName.length > 0 ? (
moribSetName
Expand Down
20 changes: 10 additions & 10 deletions src/pages/HomePage/ModalContentsCategory/ModalContentsCategory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,8 @@ import React, { Suspense, lazy, useRef, useState } from 'react';

import { useQueryClient } from '@tanstack/react-query';

import AddCategoryListModal from '@/shared/components/AddCategoryListModal';
import ButtonCategoryCommon from '@/shared/components/ButtonCategoryCommon';
import ButtonStatusToggle from '@/shared/components/ButtonStatusToggle';
import CalendarSelectedDate from '@/shared/components/CalendarSelectedDate';
import CategoryCommonMoribSet from '@/shared/components/CategoryCommonMoribSet';
import CategoryMsetUrlInfo from '@/shared/components/CategoryMsetUrlInfo';
import InputCategoryUrl from '@/shared/components/InputCategoryUrl';
import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper';
import ButtonStatusToggle from '@/shared/components/ButtonStatusToggle/ButtonStatusToggle';
import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/ModalWrapper';

import { getTabName } from '@/shared/apis/tasks/axios/index';
import { useGetTabName, usePostCategory } from '@/shared/apis/tasks/queries/index';
Expand All @@ -19,8 +13,14 @@ import { formatCalendarApiDate } from '@/shared/utils/calendar/index';
import ArrowCircleUpRight from '@/shared/assets/svgs/arrow_circle_up_right.svg?react';

import { useCalendar } from '../hooks/useCalendar';
import ButtonCategoryCommon from './ButtonCategoryCommon/ButtonCategoryCommon';
import CalendarSelectedDate from './CalendarSelectedDate/CalendarSelectedDate';
import CategoryCommonMoribSet from './CategoryCommonMoribSet/CategoryCommonMoribSet';
import CategoryMsetUrlInfo from './CategoryMsetUrlInfo/CategoryMsetUrlInfo';
import InputCategoryUrl from './InputCategoryUrl/InputCategoryUrl';
import AddCategoryListModal from './ModalAddCategoryList/ModalAddCategoryList';

const Calendar = lazy(() => import('@/shared/components/Calendar'));
const Calendar = lazy(() => import('@/shared/components/Calendar/Calendar'));

interface UrlInfo {
url: string;
Expand Down Expand Up @@ -60,7 +60,7 @@ const ModalContentsCategory = ({ handleCloseModal }: ModalContentsCategoryProps)
const dialogRef = useRef<ModalWrapperRef>(null);

const handleMouseEnter = () => {
import('@/shared/components/Calendar').catch((error) => {
import('@/shared/components/Calendar/Calendar').catch((error) => {
console.error('캘린더를 받아오는데 오류가 발생했습니다.', error);
});
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { ButtonHTMLAttributes, ReactNode } from 'react';

interface TabBtnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
interface ButtonCategoryTabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
children: ReactNode;
activeTab: number;
tabId: number;
}

const CategoryTabBtn = ({ children, activeTab, tabId, onClick }: TabBtnProps) => {
const ButtonCategoryTab = ({ children, activeTab, tabId, onClick }: ButtonCategoryTabProps) => {
const notSelectedStyle = 'text-gray-03 subhead-bold-22 p-[1rem]';
const SelectedStyle = 'text-white subhead-bold-22 p-[1rem] border-b-[2px] border-text-white';
const tabBtnStyle = activeTab === tabId ? SelectedStyle : notSelectedStyle;
Expand All @@ -18,4 +18,4 @@ const CategoryTabBtn = ({ children, activeTab, tabId, onClick }: TabBtnProps) =>
);
};

export default CategoryTabBtn;
export default ButtonCategoryTab;
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import ButtonCategoryTab from '@/shared/components/ButtonCategoryTab';
import ButtonCategoryTab from './ButtonCategoryTab/ButtonCategoryTab';

interface Tabs {
id: number;
name: string;
}

interface TabSelectProps {
interface TabCategorySelectProps {
tabs: Tabs[];
handleTabChange: (number: number) => void;
selectedTabId: number;
}

const CategoryTabSelect = ({ tabs, handleTabChange, selectedTabId }: TabSelectProps) => {
const TabCategorySelect = ({ tabs, handleTabChange, selectedTabId }: TabCategorySelectProps) => {
return (
<>
{tabs.map((tab) => (
Expand All @@ -30,4 +30,4 @@ const CategoryTabSelect = ({ tabs, handleTabChange, selectedTabId }: TabSelectPr
);
};

export default CategoryTabSelect;
export default TabCategorySelect;
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ReactNode } from 'react';

import FriendUserProfile from '@/shared/components/ModalContents/FriendUserProfile';
import FriendUserProfile from '../../FriendUserProfile/FriendUserProfile';

interface FriendsData {
id: number;
Expand All @@ -26,8 +26,8 @@ const FriendsListRequested = ({ children, friendsData }: FriendsInfoProp) => {
<div className="flex w-[40rem]">
<FriendUserProfile imgSrc={friend.image} />
<div className="ml-[2rem] flex flex-col justify-center">
<p className="subhead-bold-20 text-white">{friend.name}</p>
<p className="body-reg-16 text-gray-04">{friend.email}</p>
<p className="text-white subhead-bold-20">{friend.name}</p>
<p className="text-gray-04 body-reg-16">{friend.email}</p>
</div>
</div>
{children}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { useRef, useState } from 'react';

import ButtonSendRequest from '@/shared/components/ModalContents/ButtonSendRequest';

import { emailRegex } from '@/shared/constants/emailRegex';

import InputClearButton from '@/shared/assets/svgs/btn_inputClear.svg?react';
import IconInputSuccess from '@/shared/assets/svgs/button_inputSuccess.svg?react';
import IconInputError from '@/shared/assets/svgs/error_input.svg?react';

import ButtonSendRequest from './ButtonSendRequest/ButtonSendRequest';

const InputSendRequest = () => {
const inputRef = useRef<HTMLInputElement | null>(null);
const [showClearBtn, setShowClearBtn] = useState(false);
Expand Down
Loading

0 comments on commit 4356ea2

Please sign in to comment.