sparcs-kaist · donghyo1234 · Sep 13, 2023 · Sep 13, 2023 · Sep 13, 2023 · Sep 13, 2023
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,3 +1,5 @@
+#!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-pnpm lint-staged
+pnpm lint-staged
+
diff --git a/client/src/components/atoms/Scroll.tsx b/client/src/components/atoms/Scroll.tsx
@@ -8,7 +8,7 @@ export const Scroll = styled.div<{ hide?: boolean }>`
   height: 100%;
 
   overflow-y: scroll;
-  overflow-x: hidden;
+  overflow-x: scroll;
 
   ::-webkit-scrollbar {
     width: 14px;

diff --git a/client/src/components/molecules/AgendaCard/AdminOngoingAgendaCard.tsx b/client/src/components/molecules/AgendaCard/AdminOngoingAgendaCard.tsx
@@ -8,7 +8,7 @@ import { AgendaTag } from "@/components/molecules/AgendaTag";
 
 import { useAdminAgenda } from "@/services/admin-agenda";
 
-import { row, center, justify, gap, text, w } from "@/styles";
+import { row, center, justify, gap, text, w, column } from "@/styles";
 
 const agendaTags = {
   public: true,
@@ -39,9 +39,9 @@ export const AdminOngoingAgendaCard: React.FC<Props> = ({ agenda }) => {
 
   return (
     <Card onClick={openModal}>
-      <div css={[gap(8), w("fill")]}>
+      <div css={[gap(8), column, w("fill")]}>
         <AgendaTag tags={agendaTags} admin />
-        <div css={gap(2)}>
+        <div css={[gap(2)]}>
           <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
           <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
         </div>

diff --git a/client/src/components/molecules/AgendaCard/AdminPreparingAgendaCard.tsx b/client/src/components/molecules/AgendaCard/AdminPreparingAgendaCard.tsx
@@ -8,7 +8,7 @@
 
 import { useAdminAgenda } from "@/services/admin-agenda";
 
-import { gap, text, w } from "@/styles";
+import { w, column, gap, text } from "@/styles";
 
 const agendaTags = {
   public: true,
@@ -44,7 +44,7 @@

  const startVote = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (!validated) {
      alert("투표 대상을 설정해주세요");
      // TODO: button 아래 card click으로 간주되어 edit modal로의 redirection 때문에 alert가 뜨지 않음
      return;
    }
@@ -54,9 +54,9 @@
 
   return (
     <Card onClick={openModal}>
-      <div css={[gap(8), w("fill")]}>
+      <div css={[gap(8), column, w("fill")]}>
         <AgendaTag tags={agendaTags} admin />
-        <div css={gap(2)}>
+        <div css={[gap(2)]}>
           <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
           <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
         </div>

diff --git a/client/src/components/molecules/AgendaCard/AdminTerminatedAgendaCard.tsx b/client/src/components/molecules/AgendaCard/AdminTerminatedAgendaCard.tsx
@@ -6,7 +6,7 @@ import type { AdminAgenda } from "@biseo/interface/admin/agenda";
 import { Card } from "@/components/atoms";
 import { AgendaTag } from "@/components/molecules/AgendaTag";
 
-import { gap, text } from "@/styles";
+import { w, column, gap, text } from "@/styles";
 
 const agendaTags = {
   public: true,
@@ -24,15 +24,15 @@ export const AdminTerminatedAgendaCard: React.FC<Props> = ({ agenda }) => {
 
   return (
     <Card clickable onClick={openModal}>
-      <div css={gap(8)}>
+      <div css={[gap(8), column, w("fill")]}>
         <AgendaTag
           tags={{
             public: agendaTags.public,
             identified: agendaTags.identified,
             votable: agendaTags.votable,
           }}
         />
-        <div css={gap(2)}>
+        <div css={[gap(2), column]}>
           <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
           <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
         </div>

diff --git a/client/src/components/molecules/AgendaCard/OngoingAgendaCard.tsx b/client/src/components/molecules/AgendaCard/OngoingAgendaCard.tsx
@@ -12,7 +12,7 @@ import {
 
 import { useAgenda } from "@/services/agenda";
 
-import { gap, row, justify, text, w } from "@/styles";
+import { column, row, justify, text, w, gap } from "@/styles";
 
 interface OngoingAgendaProps {
   agenda: OngoingAgenda;
@@ -71,21 +71,28 @@ export const OngoingAgendaCard: React.FC<OngoingAgendaProps> = ({ agenda }) => {
 
   return (
     <Card primary bold>
-      <div css={gap(10)}>
-        <div css={gap(8)}>
+      <div
+        css={{
+          gap: 10,
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <div css={[gap(8), column]}>
           <AgendaTag
             tags={{
               public: agendaTags.public,
               identified: agendaTags.identified,
               votable: agenda.user.votable,
             }}
           />
-          <div css={gap(2)}>
+          <div css={[gap(2), column]}>
             <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
             <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
           </div>
         </div>
-        <div css={gap(6)}>
+        <div css={[gap(6), column]}>
           <p css={[text.body, text.blue600]}>{agenda.resolution}</p>
           {choices}
         </div>

diff --git a/client/src/components/molecules/AgendaCard/PreparingAgendaCard.tsx b/client/src/components/molecules/AgendaCard/PreparingAgendaCard.tsx
@@ -5,7 +5,7 @@ import type { PreparingAgenda } from "@biseo/interface/agenda";
 import { Card } from "@/components/atoms";
 import { AgendaTag } from "@/components/molecules/AgendaTag";
 
-import { gap, text } from "@/styles";
+import { w, gap, column, text } from "@/styles";
 
 const agendaTags = {
   public: true,
@@ -19,15 +19,15 @@ interface Props {
 
 export const PreparingAgendaCard: React.FC<Props> = ({ agenda }) => (
   <Card>
-    <div css={gap(8)}>
+    <div css={[gap(8), column, w("fill")]}>
       <AgendaTag
         tags={{
           public: agendaTags.public,
           identified: agendaTags.identified,
           votable: agenda.user.votable,
         }}
       />
-      <div css={gap(2)}>
+      <div css={[gap(2), column]}>
         <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
         <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
       </div>

diff --git a/client/src/components/molecules/AgendaCard/TerminatedAgendaCard.tsx b/client/src/components/molecules/AgendaCard/TerminatedAgendaCard.tsx
@@ -9,7 +9,7 @@ import { VoteResult } from "@/components/molecules/VoteResult";
 import { VoteDetail } from "@/components/molecules/VoteDetail";
 import { VoteParticipate } from "@/components/molecules/VoteParticipate";
 
-import { gap, text, w } from "@/styles";
+import { column, gap, text, w } from "@/styles";
 
 const agendaTags = {
   public: true,
@@ -41,8 +41,15 @@ export const TerminatedAgendaCard: React.FC<Props> = ({ agenda }) => {
       }}
     >
       {enabled ? (
-        <div css={[gap(15), w("fill")]}>
-          <div css={gap(2)}>
+        <div
+          css={{
+            gap: 15,
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <div css={[gap(2), column]}>
             <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
             <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
           </div>
@@ -74,15 +81,15 @@ export const TerminatedAgendaCard: React.FC<Props> = ({ agenda }) => {
           <VoteDetail type={agendaTags.identified} />
         </div>
       ) : (
-        <div css={gap(8)}>
+        <div css={[gap(8), column, w("fill")]}>
           <AgendaTag
             tags={{
               public: agendaTags.public,
               identified: agendaTags.identified,
               votable: agenda.user.votable,
             }}
           />
-          <div css={gap(2)}>
+          <div css={[gap(2)]}>
             <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
             <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
           </div>

diff --git a/client/src/components/organisms/UserTable.tsx b/client/src/components/organisms/UserTable.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState, useMemo } from "react";
 
 import {
   Box,
-  Body,
   Header,
   Table,
   Cell,
@@ -132,7 +131,7 @@ export const UserTable: React.FC<Props> = ({
           </Row>
         </Header>
         <Scroll>
-          <Body>
+          <Box w={298}>
             {filteredUsers.map(user => (
               <Row
                 key={user.id}
@@ -155,15 +154,15 @@ export const UserTable: React.FC<Props> = ({
                 )}
                 <Cell w={60}>{user.displayName}</Cell>
                 <Cell w={100}>{user.username}</Cell>
-                <Cell>
+                <Cell w="hug">
                   {/* {user.isAdmin ? <UserTag>어드민</UserTag> : <></>} */}
                   {user.tags.map(tag => (
                     <UserTag key={tag} tag={tag} />
                   ))}
                 </Cell>
               </Row>
             ))}
-          </Body>
+          </Box>
         </Scroll>
       </Table>
     </Box>