From aa97be37eefd1c5fb01a5dc3d9e4b6852b77c4a3 Mon Sep 17 00:00:00 2001 From: he2e2 Date: Mon, 25 Nov 2024 09:44:15 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4=EB=A6=84?= =?UTF-8?q?=20=EC=B6=A9=EB=8F=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/appRouter.tsx | 4 +- .../GatheringCard/GatheringCard.module.scss | 64 +++++++++++++++++++ src/shared/ui/GatheringCard/GatheringCard.tsx | 50 +++++++++++++++ .../ui/GatheringCard/JobTag.module.scss | 9 +++ src/shared/ui/GatheringCard/JobTag.tsx | 8 +++ src/shared/ui/GatheringCard/index.ts | 2 + src/widgets/GatheringGrid/index.ts | 1 + src/widgets/index.ts | 4 +- 8 files changed, 137 insertions(+), 5 deletions(-) create mode 100644 src/shared/ui/GatheringCard/GatheringCard.module.scss create mode 100644 src/shared/ui/GatheringCard/GatheringCard.tsx create mode 100644 src/shared/ui/GatheringCard/JobTag.module.scss create mode 100644 src/shared/ui/GatheringCard/JobTag.tsx create mode 100644 src/shared/ui/GatheringCard/index.ts create mode 100644 src/widgets/GatheringGrid/index.ts diff --git a/src/app/appRouter.tsx b/src/app/appRouter.tsx index 0c0fd9e..ec990d6 100644 --- a/src/app/appRouter.tsx +++ b/src/app/appRouter.tsx @@ -1,7 +1,7 @@ import { createBrowserRouter } from 'react-router-dom'; import { GatheringListPage } from '@/pages'; -// import WriteArchivePage from '@/pages'; +import { WriteArchivePage } from '@/pages'; import { Layout } from '@/widgets'; const AppRouter = () => { @@ -19,7 +19,7 @@ const AppRouter = () => { }, { path: '/archive', - // element: , + element: , }, { path: '/gathering', diff --git a/src/shared/ui/GatheringCard/GatheringCard.module.scss b/src/shared/ui/GatheringCard/GatheringCard.module.scss new file mode 100644 index 0000000..cc1ed67 --- /dev/null +++ b/src/shared/ui/GatheringCard/GatheringCard.module.scss @@ -0,0 +1,64 @@ +.card { + position: relative; + display: flex; + flex-shrink: 0; + flex-direction: column; + justify-content: center; + width: 21.875rem; + height: 18.75rem; + padding: 20px 25px 0; + font-family: inherit; + color: $secondary-color; + cursor: pointer; + background-color: $primary-color; + border-radius: 0.625rem; + + &:hover { + background-color: $third-color; + transition: all 0.3s ease-in; + transform: scale(1.01); + } + + &__title { + margin-bottom: 1.25rem; + overflow: hidden; + font-size: 1.25rem; + font-weight: 600; + text-overflow: ellipsis; + white-space: nowrap; + } + + &__name { + margin-bottom: 1.25rem; + font-size: 1rem; + font-weight: 500; + } + + &__introduction { + display: -webkit-box; // 추가: Webkit 기반 브라우저 지원 + display: -moz-box; // 추가: Firefox 지원 + max-height: 2.4em; // 추가: line-height * 2 + margin-bottom: 1.25rem; + overflow: hidden; + font-weight: 400; + line-height: 1.2; // 추가: 줄 높이 지정 + text-overflow: ellipsis; + -webkit-line-clamp: 2; // 두 줄 말줄임 + line-clamp: 2; // 두 줄 말줄임 + word-break: break-word; // 긴 단어 처리 + -webkit-box-orient: vertical; + } + + &__tagCon { + display: flex; + flex-wrap: wrap; + gap: 0.625rem; + margin-bottom: 1.25rem; + } + + &__deadlineCon { + display: flex; + justify-content: space-between; + width: 100%; + } +} diff --git a/src/shared/ui/GatheringCard/GatheringCard.tsx b/src/shared/ui/GatheringCard/GatheringCard.tsx new file mode 100644 index 0000000..4f8b872 --- /dev/null +++ b/src/shared/ui/GatheringCard/GatheringCard.tsx @@ -0,0 +1,50 @@ +import cn from 'classnames'; +import { Link } from 'react-router-dom'; + +import styles from './GatheringCard.module.scss'; +import { JobTag } from './JobTag'; + +interface GatheringCardProps { + title: string; + className?: string; // 외부에서 추가 클래스 전달 가능 + name?: string; + introduction?: string; + tag?: string[]; + deadline?: string; +} + +export const GatheringCard = ({ + title, + className, + name, + introduction, + tag, + deadline, +}: GatheringCardProps) => { + return ( + +
  • +

    {title}

    +

    {name}

    +
    {introduction}
    +
      {tag?.map((e, i) => )}
    +
    +
    마감일 {deadline}
    +
    + heart icon + contact icon +
    +
    +
    • + + ); +}; diff --git a/src/shared/ui/GatheringCard/JobTag.module.scss b/src/shared/ui/GatheringCard/JobTag.module.scss new file mode 100644 index 0000000..572a12d --- /dev/null +++ b/src/shared/ui/GatheringCard/JobTag.module.scss @@ -0,0 +1,9 @@ +.jobTag { + display: flex; + padding: 0.3125rem 0.4375rem; + font-family: inherit; + color: $primary-color; + background-color: $secondary-color; + border: 1px solid $primary-color; + border-radius: 0.1875rem; +} diff --git a/src/shared/ui/GatheringCard/JobTag.tsx b/src/shared/ui/GatheringCard/JobTag.tsx new file mode 100644 index 0000000..b58d552 --- /dev/null +++ b/src/shared/ui/GatheringCard/JobTag.tsx @@ -0,0 +1,8 @@ +import styles from './JobTag.module.scss'; + +interface JobTagProps { + job: string; +} +export const JobTag = ({ job }: JobTagProps) => { + return
    {job}
    ; +}; diff --git a/src/shared/ui/GatheringCard/index.ts b/src/shared/ui/GatheringCard/index.ts new file mode 100644 index 0000000..789a7b6 --- /dev/null +++ b/src/shared/ui/GatheringCard/index.ts @@ -0,0 +1,2 @@ +export * from './GatheringCard'; +export * from './JobTag'; diff --git a/src/widgets/GatheringGrid/index.ts b/src/widgets/GatheringGrid/index.ts new file mode 100644 index 0000000..89f01a9 --- /dev/null +++ b/src/widgets/GatheringGrid/index.ts @@ -0,0 +1 @@ +export * from './GatheringGrid'; diff --git a/src/widgets/index.ts b/src/widgets/index.ts index 1f49875..e16c7e5 100644 --- a/src/widgets/index.ts +++ b/src/widgets/index.ts @@ -1,5 +1,3 @@ export * from './Layout'; - -export { GatheringGrid } from './GatheringGrid/GatheringGrid'; - +export * from './GatheringGrid'; export * from './WriteArchive';