Merge pull request #130 from ttaerrim/mogaco

[Design] 모각코 리스트 뷰 퍼블리싱

app/frontend/package.json

@@ -29,6 +29,7 @@
     "@tanstack/react-query": "^5.8.1",
     "@tanstack/react-query-devtools": "^5.8.1",
     "@vanilla-extract/css": "^1.14.0",
+    "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/recipes": "^0.5.1",
     "axios": "^1.6.1",
     "dayjs": "^1.11.10",

app/frontend/src/components/Mogaco/MogacoList.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2rem',
+});

app/frontend/src/components/Mogaco/MogacoList.tsx

@@ -0,0 +1,57 @@
+import * as styles from './MogacoList.css';
+import { MogacoItem } from '../commons/MogacoItem';
+
+export function MogacoList() {
+  const MOGACO_ITEM = [
+    {
+      id: 1,
+      title: '사당역 모각코',
+      group: '부스트캠프 웹 모바일 8기',
+      detail:
+        '사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락 팀이 모입니다 ',
+      people: 2,
+      maxPeople: 5,
+      location: '서울 관악구 어디길 22 모락 카페',
+      date: '2022-02-02',
+    },
+    {
+      id: 1,
+      title: '사당역 모각코',
+      group: '부스트캠프 웹 모바일 8기',
+      detail: '사당역에서 부스트캠프 모락 팀이 모입니다',
+      people: 2,
+      maxPeople: 5,
+      location: '서울 관악구 어디길 22 모락 카페',
+      date: '2022-02-02',
+    },
+    {
+      id: 1,
+      title: '사당역 모각코',
+      group: '부스트캠프 웹 모바일 8기',
+      detail: '사당역에서 부스트캠프 모락 팀이 모입니다',
+      people: 2,
+      maxPeople: 5,
+      location: '서울 관악구 어디길 22 모락 카페',
+      date: '2022-02-02',
+    },
+  ];
+  return (
+    <div className={styles.container}>
+      {MOGACO_ITEM.map(
+        ({ id, title, group, detail, people, maxPeople, location, date }) => (
+          <MogacoItem
+            key={id}
+            id={id}
+            title={title}
+            group={group}
+            detail={detail}
+            people={people}
+            maxPeople={maxPeople}
+            location={location}
+            date={date}
+          />
+        ),
+      )}
+    </div>
+  );
+}

app/frontend/src/components/Mogaco/MogacoListHeader.css.ts

@@ -0,0 +1,39 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+import { vars } from '@/styles';
+import { sansBold16, sansRegular16 } from '@/styles/font.css';
+
+export const container = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '1rem',
+});
+
+export const filter = style([
+  sansRegular16,
+  {
+    display: 'flex',
+    gap: '0.8rem',
+    color: vars.color.grayscale200,
+  },
+]);
+
+export const selected = style([
+  sansBold16,
+  {
+    selectors: {
+      [`${filter} &`]: {
+        color: vars.color.grayscale400,
+      },
+    },
+  },
+]);
+
+globalStyle(`${filter} span`, {
+  cursor: 'pointer',
+});
+
+globalStyle(`${filter} span:not(${selected})`, {
+  cursor: 'not-allowed',
+});

app/frontend/src/components/Mogaco/MogacoListHeader.tsx

@@ -0,0 +1,17 @@
+import * as styles from './MogacoListHeader.css';
+import { Button } from '../commons/Button';
+
+export function MogacoListHeader() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.filter}>
+        <span className={styles.selected}>전체</span>
+        <span>모집 중</span>
+        <span>모집 마감</span>
+      </div>
+      <Button size="medium" type="button" theme="primary" shape="fill">
+        글쓰기
+      </Button>
+    </div>
+  );
+}

app/frontend/src/components/Mogaco/index.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.2rem',
+  maxWidth: '80rem',
+  margin: '0 auto',
+});

app/frontend/src/components/Mogaco/index.tsx

@@ -0,0 +1,12 @@
+import * as styles from './index.css';
+import { MogacoList } from './MogacoList';
+import { MogacoListHeader } from './MogacoListHeader';
+
+export function MogacoPage() {
+  return (
+    <div className={styles.container}>
+      <MogacoListHeader />
+      <MogacoList />
+    </div>
+  );
+}

app/frontend/src/components/commons/MogacoItem/index.css.ts

@@ -7,8 +7,7 @@ export const container = style([
   {
     display: 'flex',
     padding: '2rem',
-    width: '73.5rem',
-    height: '19.6rem',
+    width: '100%',
     flexDirection: 'column',
     alignItems: 'flex-start',
     gap: '1.2rem',
@@ -31,12 +30,13 @@ export const content = style([
     flexDirection: 'column',
     alignItems: 'flex-start',
     gap: '0.8rem',
+    width: '100%',
     color: vars.color.grayscaleBlack,
   },
 ]);
 
 export const detail = style({
-  width: '69.5rem',
+  width: '100%',
   height: '3.5rem',
   lineHeight: '1.8rem',
   display: '-webkit-box',
@@ -63,17 +63,19 @@ export const info = style({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
+  width: '100%',
   gap: '0.4rem',
 });
 
 export const infoContent = style({
   display: 'flex',
+  width: '100%',
   alignItems: 'center',
   gap: '0.4rem',
 });
 
 export const infoText = style({
-  width: '67.5rem',
+  width: '100%',
   alignItems: 'center',
   gap: '0.4rem',
   overflow: 'hidden',
@@ -84,7 +86,6 @@ export const infoText = style({
 export const title = style([
   fontStyle.sansBold24,
   {
-    width: '42.3rem',
     color: vars.color.grayscaleBlack,
     overflow: 'hidden',
     whiteSpace: 'nowrap',
@@ -96,4 +97,5 @@ export const titleArea = style({
   display: 'flex',
   alignItems: 'center',
   gap: '0.4rem',
+  width: '100%',
 });

app/frontend/src/components/commons/MogacoItem/index.tsx

@@ -4,21 +4,10 @@ import { ReactComponent as Calendar } from '@/assets/icons/calendar.svg';
 import { ReactComponent as Map } from '@/assets/icons/map.svg';
 import { ReactComponent as People } from '@/assets/icons/people.svg';
 import { Label } from '@/components';
+import { MogacoProps } from '@/types';
 
 import * as styles from './index.css';
 
-type MogacoProps = {
-  id: number;
-  disabled?: boolean;
-  title: string;
-  group: string;
-  detail: string;
-  people: number;
-  maxPeople: number;
-  location: string;
-  date: string;
-};
-
 export function MogacoItem({
   id,
   disabled = false,

app/frontend/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Mogaco';
 export * from './commons/Button';
 export * from './commons/Chatting';
 export * from './commons/Header';

app/frontend/src/hooks/useRouter.tsx

@@ -1,7 +1,7 @@
 import { createBrowserRouter } from 'react-router-dom';
 
 import { Layout } from '@/components';
-import { Main } from '@/pages';
+import { Main, Mogaco } from '@/pages';
 
 export const useRouter = () =>
   createBrowserRouter([
@@ -12,7 +12,7 @@ export const useRouter = () =>
         { index: true, element: <Main /> },
         {
           path: 'mogaco',
-          element: <>모각코</>,
+          element: <Mogaco />,
         },
         {
           path: 'calendar',

app/frontend/src/pages/Mogaco/index.tsx

@@ -0,0 +1,5 @@
+import { MogacoPage } from '@/components';
+
+export function Mogaco() {
+  return <MogacoPage />;
+}

app/frontend/src/pages/index.ts

@@ -1 +1,2 @@
+export * from './Mogaco';
 export { Main } from './Main';

app/frontend/src/types/index.ts

@@ -1,2 +1,3 @@
 export * from './chatting';
+export * from './mogaco';
 export * from './user';

app/frontend/src/types/mogaco.ts

@@ -0,0 +1,11 @@
+export type MogacoProps = {
+  id: number;
+  disabled?: boolean;
+  title: string;
+  group: string;
+  detail: string;
+  people: number;
+  maxPeople: number;
+  location: string;
+  date: string;
+};