Merge branch 'main' into feat/update-monorepo-build

.github/pull_request_template.md

@@ -0,0 +1,15 @@
+# 요약 \*
+
+<!-- 닫는 이슈 번호 및 PR 내용에 대한 간단한 요약 표기. -->
+
+It closes #issue_number
+
+# 스크린샷
+
+<!-- PR 변경 사항에 대한 스크린샷이나 .gif 파일 -->
+
+# 이후 Task \*
+
+<!-- PR 이후 개설할 이슈 목록 -->
+
+- 없음

docker-compose.yml

@@ -1,4 +1,4 @@
-version: "3.4"
+version: "3.9"
 name: "biseo"
 
 services:
@@ -28,7 +28,8 @@ services:
       context: .
       dockerfile: .docker/api.Dockerfile
     depends_on:
-      - db
+      db:
+        condition: service_healthy
     networks:
       - frontend
       - backend
@@ -44,6 +45,11 @@ services:
     command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
     networks:
       - backend
+    healthcheck:
+      test: "mysql -uroot -p$$MYSQL_ROOT_PASSWORD $$MYSQL_DATABASE -e 'select 1'"
+      start_period: 0s
+      interval: 1s
+      retries: 3
 
 volumes:
   biseo-data:

packages/api/docker-compose.dev.yml

@@ -12,6 +12,11 @@ services:
     volumes:
       - db:/var/lib/mysql
     command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
+    healthcheck:
+      test: "mysql -uroot -p$$MYSQL_ROOT_PASSWORD $$MYSQL_DATABASE -e 'select 1'"
+      start_period: 0s
+      interval: 1s
+      retries: 30
 
 volumes:
   db:

packages/api/package.json

@@ -4,13 +4,13 @@
   "main": "src/index.ts",
   "license": "MIT",
   "scripts": {
-    "dev": "pnpm migrate && nodemon",
+    "dev": "pnpm migrate:dev && nodemon",
     "prod": "prisma migrate deploy && node dist/index.js",
     "db": "docker compose -f docker-compose.dev.yml",
     "typecheck": "prisma generate && tsc --noEmit",
     "typegen": "prisma generate",
-    "migrate": "pnpm db up -d && prisma migrate dev",
-    "studio": "pnpm db up -d && prisma studio",
+    "migrate:dev": "pnpm db up --wait && prisma migrate dev",
+    "studio": "pnpm db up --wait && prisma studio",
     "build": "prisma generate && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "env": "echo $NODE_ENV"
   },

packages/api/src/lib/error.ts

@@ -2,6 +2,11 @@ import type { Error as ErrorResponse } from "@biseo/interface/helpers";
 import logger from "@biseo/api/utils/logger";
 
 export class BiseoError extends Error {
+  constructor(message: string) {
+    super(message);
+    Object.setPrototypeOf(this, BiseoError.prototype);
+  }
+
   serialize() {
     return { ok: false, message: this.message } as const;
   }

packages/web/src/components/atoms/Button.tsx

@@ -33,6 +33,7 @@ export const Button = styled.button<{
 
     &:disabled {
       cursor: not-allowed;
+      background-color: ${theme.colors.gray100};
     }
   `,
 );

packages/web/src/components/atoms/Card.tsx

@@ -25,7 +25,7 @@ export const Card = styled.div<{
     background-color: ${primary ? theme.colors.blue100 : theme.colors.white};
     border: 1px solid
       ${(() => {
-        if (bold) return primary ? theme.colors.blue600 : theme.colors.gray500;
+        if (bold) return primary ? theme.colors.blue600 : theme.colors.gray400;
         return primary ? theme.colors.blue300 : theme.colors.gray300;
       })()};
     padding: ${small ? `12px 15px` : `18px 20px`};

packages/web/src/components/atoms/Label.tsx

@@ -17,7 +17,7 @@ export const Select = styled.select<{ w: number; h: number }>`
   border: 1px solid ${props => props.theme.colors.gray200};
   background-color: ${props => props.theme.colors.white};
 
-  font-family: "Noto Sansf KR";
+  font-family: "Noto Sans KR";
   font-size: 10px;
   font-style: normal;
   font-weight: 500;

packages/web/src/components/atoms/SelectBox.tsx

@@ -21,7 +21,7 @@ export const SelectBox: React.FC<SelectBoxProps> = ({
       onChange={e => onChange(e.target.value)}
       defaultValue=""
     >
-      <option value="">전체보기</option>
+      <option value="">전체 보기</option>
       {options.map(option => (
         <option key={option} value={option}>
           {option}

packages/web/src/components/atoms/placeholder.css

@@ -1,7 +1,7 @@
 ::placeholder {
   color: #d9d9d9;
 
-  font-family: "Noto Sansf KR";
+  font-family: "Noto Sans KR";
   font-size: 11px;
   font-style: normal;
   font-weight: 500;

packages/web/src/components/molecules/AgendaCard/TerminatedAgendaCard.tsx

@@ -60,7 +60,7 @@ export const TerminatedAgendaCard: React.FC<Props> = ({ agenda }) => {
             revealChoice={revealChoice}
             voted={agenda.user.voted != null}
           />
-          <div css={[column, gap(12), w("fill")]}>
+          <div css={[column, gap(6), w("fill")]}>
             {agenda.choices.map(choice => (
               <OptionVoteResult
                 name={choice.name}

packages/web/src/components/molecules/Choice.tsx

@@ -6,6 +6,7 @@ import type { Choice } from "@biseo/interface/agenda";
 import { Text } from "@biseo/web/components/atoms";
 import { SelectIcon } from "@biseo/web/assets";
 import { type Color, theme } from "@biseo/web/theme";
+import { center, h, w } from "@biseo/web/styles";
 
 const Container = styled.div<{
   color: Color;
@@ -14,9 +15,9 @@ const Container = styled.div<{
   border-radius: 5px;
   background-color: ${props => props.theme.colors[props.color]};
   border: 1px solid ${props => props.theme.colors.gray200};
-  padding: 6px 13px 6px 13px;
+  padding: 6px 12px 6px 12px;
   width: 340px;
-  height: 30px;
+  height: fit-content;
   gap: 10px;
   display: flex;
   flex-direction: row;
@@ -34,7 +35,14 @@ interface ChoiceTextProps extends PropsWithChildren {
 }
 
 const ChoiceText: React.FC<ChoiceTextProps> = ({ color, children = null }) => (
-  <Text variant="body" color={color}>
+  <Text
+    variant="body"
+    color={color}
+    style={{
+      wordBreak: "break-all",
+      overflowWrap: "break-word",
+    }}
+  >
     {children}
   </Text>
 );
@@ -76,7 +84,9 @@ const ChoiceBase: React.FC<ChoiceBaseProps> = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <SelectIcon stroke={theme.colors[choiceStyle.selectIconColor]} />
+      <div css={[w(13), h(13), center]}>
+        <SelectIcon stroke={theme.colors[choiceStyle.selectIconColor]} />
+      </div>
       <ChoiceText color={choiceStyle.textColor}>{text}</ChoiceText>
     </Container>
   );

packages/web/src/components/molecules/ModalInnerTextBox.tsx

@@ -13,6 +13,8 @@ import {
 } from "@biseo/web/components/atoms";
 import "@biseo/web/components/atoms/placeholder.css";
 import { TrashIcon } from "@biseo/web/assets";
+import { css } from "@emotion/react";
+import { scroll, scrollBar } from "@biseo/web/styles";
 
 interface ModalInnerProps extends PropsWithChildren {
   title: string;
@@ -52,6 +54,9 @@ interface SubComponents {
   TaggerBox: typeof TaggerBox;
 }
 
+/** @constant 클라이언트와 서버에서 사용하는 채팅 메시지의 최대 길이를 지정합니다. */
+const maxTextLength = 255;
+
 export const ModalInner: React.FC<ModalInnerProps> & SubComponents = ({
   title,
   count = undefined,
@@ -143,6 +148,7 @@ const InputBox: React.FC<InputProps> = ({ value = undefined, onChange }) => (
       placeholder="내용을 입력하세요"
       value={value}
       onChange={onChange}
+      maxLength={maxTextLength}
     />
   </BorderedBox>
 );
@@ -165,6 +171,7 @@ const TextAreaInputBox: React.FC<TextAreaProps> = ({
       placeholder="내용을 입력하세요"
       value={value}
       onChange={onChange}
+      maxLength={maxTextLength}
     />
   </BorderedBox>
 );
@@ -209,24 +216,45 @@ const TextButton: React.FC<SubmitProps> = ({
 );
 ModalInner.TextButton = TextButton;
 
-const VoteOptions: React.FC<PropsWithChildren> = ({ children = null }) => (
-  <Box dir="row" gap={8}>
-    {children}
-  </Box>
-);
+const VoteOptions: React.FC<PropsWithChildren> = ({ children = null }) => {
+  const scrollTyle = css`
+    ${scroll.y}
+    ${scrollBar}
+  overflow-y: scroll;
+  `;
+  return (
+    <Box
+      dir="row"
+      gap={8}
+      w="fill"
+      h={150}
+      wrap="wrap"
+      justify="flex-start"
+      css={scrollTyle}
+    >
+      {children}
+    </Box>
+  );
+};
 ModalInner.VoteOptions = VoteOptions;
 
 const VoteOption: React.FC<PropsWithChildren> = ({ children = null }) => (
   <BorderedBox
     borderColor="gray200"
     bg="white"
     w="hug"
-    h={30}
+    h="hug"
     justify="center"
     borderSize={1}
+    padVertical={7}
     padHorizontal={15}
     round={5}
     borderStyle="solid"
+    style={{
+      maxWidth: "100%",
+      wordBreak: "break-all",
+      overflowWrap: "break-word",
+    }}
   >
     <Text color="gray600" variant="subtitle">
       {children}
@@ -276,22 +304,32 @@ const VoteChoice: React.FC<PropsWithChildren & { onClick?: () => void }> = ({
     borderColor="gray200"
     bg="white"
     w="fill"
-    h={32}
+    h="hug"
     borderSize={1}
-    padVertical={6}
-    padLeft={12}
-    padRight={0}
+    padVertical={8}
+    padHorizontal={12}
     round={5}
     borderStyle="solid"
     justify="space-between"
+    gap={5}
     dir="row"
-    align="center"
+    align="flex-start"
+    style={{
+      minHeight: 32,
+    }}
   >
-    <Text color="gray500" variant="subtitle">
+    <Text
+      color="gray500"
+      variant="subtitle"
+      style={{
+        wordBreak: "break-all",
+        overflowWrap: "break-word",
+      }}
+    >
       {children}
     </Text>
     <Clickable>
-      <Box pad={10} onClick={onClick}>
+      <Box w={13} h={13} justify="center" align="center" onClick={onClick}>
         <TrashIcon />
       </Box>
     </Clickable>

packages/web/src/components/molecules/OptionVoteResult.tsx

@@ -37,7 +37,7 @@ export const OptionVoteResult: React.FC<Props> = ({
   <Box w="fill" h={30}>
     <Background
       percent={(count / totalCount) * 100}
-      color={userChoice ? "blue200" : "blue100"}
+      color={userChoice ? "blue300" : "blue200"}
       borderColor={userChoice ? "blue300" : "gray200"}
     >
       <Box

packages/web/src/components/molecules/Profile.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Button, Divider } from "@biseo/web/components/atoms";
+import {
+  text,
+  align,
+  border,
+  column,
+  round,
+  w,
+  h,
+  bg,
+  gap,
+  padding,
+  justify,
+} from "@biseo/web/styles";
+
+type Props = {
+  displayName: string;
+  onLogout: () => void;
+};
+
+export const Profile: React.FC<Props> = ({ displayName, onLogout }) => (
+  <div
+    css={[align.center, { position: "absolute", right: "0px", zIndex: 1000 }]}
+  >
+    <div css={[h(5)]} />
+    <div
+      css={[
+        border.gray200,
+        round.md,
+        w(100),
+        column,
+        align.center,
+        gap(4),
+        padding.vertical(5),
+        bg.white,
+        "box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06)",
+      ]}
+    >
+      <div
+        css={[
+          round.md,
+          w(100),
+          h(18),
+          padding.horizontal(8),
+          justify.between,
+          align.center,
+        ]}
+      >
+        <div css={[text.option2, text.gray600, "text-align: center"]}>
+          {displayName}
+        </div>
+      </div>
+      <Divider />
+      <Button w={90} h={20} padHorizontal={8} onClick={onLogout}>
+        <div css={[text.option2, text.blue600]}>로그아웃</div>
+      </Button>
+    </div>
+  </div>
+);

packages/web/src/components/molecules/UserTagCards.tsx

@@ -18,7 +18,7 @@ export const UserTagCards: React.FC<Props> = ({ tag }) => {
   const navigate = useNavigate();
   const openModal = () => navigate(`tagEdit?tagId=${tag.id}`);
   return (
-    <Card primary={false} round={5} onClick={openModal}>
+    <Card primary={false} round={5} onClick={openModal} clickable>
       <Box gap={8}>
         <Box gap={8} dir="row">
           <AdminTag tags={adminTags} suffix={tag.users.length} />

packages/web/src/components/molecules/VoteParticipate.tsx

@@ -11,7 +11,7 @@ export const VoteParticipate: React.FC<Props> = ({ voted, total }) => {
   const participantInfo = useMemo(
     () =>
       hover
-        ? `투표 참여자 ${voted}명 /투표 대상자 ${total}명`
+        ? `투표 참여자 ${voted}명 / 투표 대상자 ${total}명`
         : `${voted}/${total}`,
     [hover],
   );