Merge pull request #131 from js43o/add-mogaco-post-page

[Design] 모각코 게시글 상세 페이지 퍼블리싱

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

@@ -1,5 +1,6 @@
+import { MogacoItem } from '@/components';
+
 import * as styles from './MogacoList.css';
-import { MogacoItem } from '../commons/MogacoItem';
 
 export function MogacoList() {
   const MOGACO_ITEM = [

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

@@ -1,5 +1,6 @@
+import { Button } from '@/components';
+
 import * as styles from './MogacoListHeader.css';
-import { Button } from '../commons/Button';
 
 export function MogacoListHeader() {
   return (

app/frontend/src/components/MogacoDetail/DetailContent.tsx

@@ -0,0 +1,7 @@
+type DetailContentProps = {
+  content: string;
+};
+
+export function DetailContent({ content }: DetailContentProps) {
+  return <div>{content}</div>;
+}

app/frontend/src/components/MogacoDetail/DetailHeader.tsx

@@ -0,0 +1,19 @@
+import { sansBold24 } from '@/styles/font.css';
+
+import { DetailHeaderButtons } from './DetailHeaderButtons';
+import * as styles from './index.css';
+
+type DetailHeaderProps = {
+  state: 'not-participated' | 'participated' | 'hosted';
+};
+
+export function DetailHeader({ state }: DetailHeaderProps) {
+  return (
+    <div className={styles.header}>
+      <div className={sansBold24}>모각코 함께 해요</div>
+      <div className={styles.buttons}>
+        <DetailHeaderButtons state={state} />
+      </div>
+    </div>
+  );
+}

app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx

@@ -0,0 +1,43 @@
+import { Button } from '@/components';
+
+type DetailHeaderButtonsProps = {
+  state: 'not-participated' | 'participated' | 'hosted';
+};
+
+export function DetailHeaderButtons({ state }: DetailHeaderButtonsProps) {
+  if (state === 'not-participated') {
+    return (
+      <Button theme="primary" shape="fill" size="large">
+        참석하기
+      </Button>
+    );
+  }
+
+  if (state === 'participated') {
+    return (
+      <>
+        <Button theme="primary" shape="fill" size="large">
+          채팅
+        </Button>
+        <Button theme="primary" shape="line" size="large">
+          참석 취소
+        </Button>
+      </>
+    );
+  }
+
+  if (state === 'hosted') {
+    return (
+      <>
+        <Button theme="primary" shape="line" size="large">
+          수정
+        </Button>
+        <Button theme="danger" shape="line" size="large">
+          삭제
+        </Button>
+      </>
+    );
+  }
+
+  return null;
+}

app/frontend/src/components/MogacoDetail/DetailInfo.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+
+import { ReactComponent as ArrowDown } from '@/assets/icons/arrow_down.svg';
+import { ReactComponent as Calendar } from '@/assets/icons/calendar_large.svg';
+import { ReactComponent as Map } from '@/assets/icons/map_large.svg';
+import { ReactComponent as People } from '@/assets/icons/people_large.svg';
+import { UserChip } from '@/components';
+import { MAP_SAMPLE_IMAGE } from '@/constants';
+import { vars } from '@/styles';
+import { UserInfo } from '@/types';
+
+import * as styles from './index.css';
+
+type DetailInfoProps = {
+  participants: UserInfo[];
+  maxParticipantsNumber: number;
+  datetime: string;
+  location: string;
+};
+
+export function DetailInfo({
+  participants,
+  maxParticipantsNumber,
+  datetime,
+  location,
+}: DetailInfoProps) {
+  const [participantsShown, setParticipantsShown] = useState(false);
+
+  const toggleParticipantsShown = () =>
+    setParticipantsShown(!participantsShown);
+
+  return (
+    <div className={styles.info}>
+      <div className={styles.infoItem}>
+        <People fill={vars.color.grayscale200} />
+        <span>
+          <span>{participants.length}</span>/
+          <span>{maxParticipantsNumber}</span>
+        </span>
+        <button
+          type="button"
+          className={`${styles.togglePeopleButton} ${
+            participantsShown ? styles.shown : ''
+          }`}
+          onClick={toggleParticipantsShown}
+        >
+          <ArrowDown fill={vars.color.grayscaleBlack} />
+        </button>
+      </div>
+      <div
+        className={`${styles.participants} ${
+          participantsShown ? styles.shown : ''
+        }`}
+      >
+        {participants.map((participant) => (
+          <UserChip
+            key={participant.providerId}
+            username={participant.nickname}
+            profileSrc={participant.profilePicture}
+          />
+        ))}
+      </div>
+      <div className={styles.infoItem}>
+        <Calendar fill={vars.color.grayscale200} />
+        <span>{datetime}</span>
+      </div>
+      <div className={styles.infoItem}>
+        <Map fill={vars.color.grayscale200} />
+        <span>{location}</span>
+      </div>
+      <img src={MAP_SAMPLE_IMAGE} alt="맵 샘플 이미지" className={styles.map} />
+    </div>
+  );
+}

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

@@ -0,0 +1,89 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '@/styles';
+import { sansRegular16 } from '@/styles/font.css';
+
+export const buttons = style({
+  display: 'flex',
+  gap: '0.4rem',
+});
+
+export const container = style([
+  sansRegular16,
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2.4rem',
+    width: '80rem',
+    lineHeight: '1.6',
+  },
+]);
+export const header = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  flexGrow: 1,
+});
+
+export const horizontalLine = style({
+  border: 'none',
+  borderBottom: `1px solid ${vars.color.grayscale100}`,
+  margin: 0,
+});
+
+export const info = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.8rem',
+});
+
+export const infoItem = style({
+  display: 'flex',
+  gap: '0.4rem',
+  alignItems: 'center',
+});
+
+export const map = style({
+  width: '32rem',
+  height: '20rem',
+  objectFit: 'cover',
+  borderRadius: '0.8rem',
+  imageRendering: 'crisp-edges',
+});
+
+const shown = style({});
+
+export const participants = style({
+  display: 'none',
+  gap: '0.8rem',
+  overflowX: 'scroll',
+
+  selectors: {
+    [`${shown}&`]: {
+      display: 'flex',
+    },
+  },
+});
+
+export { shown };
+
+export const togglePeopleButton = style({
+  display: 'flex',
+  padding: '0.25rem',
+  border: 'none',
+  background: 'none',
+  cursor: 'pointer',
+  ':hover': { background: vars.color.grayscale50, borderRadius: '50%' },
+
+  selectors: {
+    [`${shown}&`]: {
+      transform: 'rotate(180deg)',
+    },
+  },
+});
+
+export const wrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});

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

@@ -0,0 +1,45 @@
+import { DetailContent } from './DetailContent';
+import { DetailHeader } from './DetailHeader';
+import { DetailInfo } from './DetailInfo';
+import * as styles from './index.css';
+
+const participants = [
+  {
+    providerId: '1',
+    profilePicture:
+      'https://avatars.githubusercontent.com/u/50646827?s=400&v=4',
+    nickname: '지승',
+    email: '.',
+  },
+  {
+    providerId: '2',
+    profilePicture: 'https://avatars.githubusercontent.com/u/43867711?s=64&v=4',
+    nickname: '태림',
+    email: '',
+  },
+  {
+    providerId: '3',
+    profilePicture:
+      'https://avatars.githubusercontent.com/u/110762136?s=64&v=4',
+    nickname: '지원',
+    email: '',
+  },
+];
+
+export function MogacoDetailPage() {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.container}>
+        <DetailHeader state="participated" />
+        <DetailInfo
+          participants={participants}
+          maxParticipantsNumber={5}
+          datetime="2023/11/7 14:00~19:00"
+          location="서울 관악구 남현3길 71 크레이저 커피"
+        />
+        <DetailContent content="사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다." />
+        <hr className={styles.horizontalLine} />
+      </div>
+    </div>
+  );
+}

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

@@ -27,16 +27,19 @@ export const button = recipe({
     },
     size: {
       small: {
-        padding: '0.2rem 1.6rem',
+        padding: '0.2rem 0.4rem',
         fontSize: '1.4rem',
+        minWidth: '5.8rem',
       },
       medium: {
-        padding: '0.4rem 2.4rem',
+        padding: '0.4rem 0.8rem',
         fontSize: '1.4rem',
+        minWidth: '7.4rem',
       },
       large: {
-        padding: '0.8rem 3.6rem',
+        padding: '0.8rem 1.6rem',
         fontSize: '1.6rem',
+        minWidth: '10.2rem',
       },
     },
     disabled: {

app/frontend/src/components/commons/Chatting/ChattingFooter.tsx

@@ -1,5 +1,4 @@
-import { Button } from '@/components/commons/Button';
-import { Textarea } from '@/components/commons/Input/Textarea';
+import { Button, Textarea } from '@/components';
 
 import * as styles from './index.css';
 

app/frontend/src/components/commons/Chatting/ChattingHeader.tsx

@@ -1,10 +1,9 @@
 import { ReactComponent as People } from '@/assets/icons/people.svg';
+import { Popover, UserChip } from '@/components';
 import { vars } from '@/styles';
 import { ChatUser } from '@/types';
 
 import * as styles from './index.css';
-import { UserInfo } from './UserInfo';
-import { Popover } from '../Popover';
 
 type ChattingHeaderProps = {
   title: string;
@@ -21,7 +20,7 @@ export function ChattingHeader({ title, participants }: ChattingHeaderProps) {
         <Popover type="right" className={styles.popover}>
           <div className={styles.userList}>
             {participants.map(({ id, username, profileSrc }) => (
-              <UserInfo key={id} username={username} profileSrc={profileSrc} />
+              <UserChip key={id} username={username} profileSrc={profileSrc} />
             ))}
           </div>
         </Popover>

app/frontend/src/components/commons/Chatting/TalkItem.css.ts

@@ -50,30 +50,4 @@ export const datetime = style([
   },
 ]);
 
-export const defaultProfileImage = style({
-  border: `1px solid ${vars.color.morakGreen}`,
-  borderRadius: '50%',
-});
-
 export { isMine };
-
-export const profileImage = style({
-  display: 'flex',
-  flexShrink: 0,
-  width: '2.4rem',
-  height: '2.4rem',
-  borderRadius: '50%',
-  overflow: 'hidden',
-});
-
-export const userInfo = style([
-  sansRegular12,
-  {
-    display: 'flex',
-    alignItems: 'center',
-    flexShrink: 0,
-    gap: '0.4rem',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  },
-]);