Merge branch 'main' into google

.github/workflows/cd-prod.yml

@@ -0,0 +1,71 @@
+name: Push Prod Image to GHCR
+permissions:
+  contents: read
+  packages: write
+
+on: 
+  push:
+    branches: 
+      - main
+
+jobs:
+  publish-docker-image:
+    name: Build and Push
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: true
+      matrix:
+        include:
+          - dockerfile: ./.docker/web.Dockerfile
+            image: ghcr.io/sparcs-kaist/biseo-web
+          - dockerfile: ./.docker/api.Dockerfile
+            image: ghcr.io/sparcs-kaist/biseo-api
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Cache Docker Layers
+        uses: actions/cache@v3
+        with: 
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
+      - name: Log in to Github Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: "ghcr.io"
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract Metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ matrix.image }}
+          tags: |
+            type=raw,value=latest
+            type=sha,format=long
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ${{ matrix.dockerfile }}
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+
+      - name: Move cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache
+          

packages/api/src/listener/agenda.ts

@@ -1,5 +1,5 @@
 import * as schema from "@biseo/interface/agenda";
-import { retrieveAll, vote } from "@biseo/api/service/agenda";
+import { retrieveAll, editVote, vote } from "@biseo/api/service/agenda";
 
 import { Router } from "@biseo/api/lib/listener";
 
@@ -9,6 +9,11 @@ router.on("agenda.retrieveAll", schema.RetrieveAll, async (_, { user }) =>
   retrieveAll(user),
 );
 
+router.on("agenda.edit", schema.EditVote, async (req, { io, user }) => {
+  await editVote(req, io, user);
+  return {};
+});
+
 router.on("agenda.vote", schema.Vote, async (req, { io, user }) => {
   await vote(req, io, user);
   return {};

packages/api/src/service/agenda.ts

@@ -92,6 +92,54 @@ export const retrieveAll = async (
   return res;
 };
 
+export const editVote = async (
+  { choiceId, agendaId }: schema.Vote,
+  io: BiseoServer,
+  user: User,
+) => {
+  const existingVote = await prisma.userChoice.findFirst({
+    where: {
+      userId: user.id,
+      choice: {
+        agendaId,
+      },
+    },
+  });
+
+  if (!existingVote) throw new BiseoError("No previous vote found");
+
+  await prisma.userChoice.delete({
+    where: {
+      userId_choiceId: {
+        userId: user.id,
+        choiceId: existingVote.choiceId,
+      },
+    },
+  });
+
+  await prisma.userChoice.create({
+    data: {
+      userId: user.id,
+      choiceId,
+    },
+  });
+
+  io.to(`user/${user.username}`).emit("agenda.voted", {
+    id: agendaId,
+    user: { voted: choiceId },
+    voters: {
+      voted: await prisma.userChoice.count({
+        where: {
+          choice: { agendaId },
+        },
+      }),
+      total: await prisma.userAgendaVotable.count({
+        where: { agendaId },
+      }),
+    },
+  });
+};
+
 export const vote = async (
   { choiceId, agendaId }: schema.Vote,
   io: BiseoServer,

packages/interface/src/agenda/client.ts

@@ -11,6 +11,18 @@ export type RetrieveAll = z.infer<typeof RetrieveAll>;
 export const RetrieveAllCb = z.array(Agenda);
 export type RetrieveAllCb = z.infer<typeof RetrieveAllCb>;
 
+/**
+ * Edit Vote
+ * description
+ */
+export const EditVote = z.object({
+  choiceId: z.number(),
+  agendaId: z.number(),
+});
+export type EditVote = z.infer<typeof EditVote>;
+export const EditVoteCb = z.object({});
+export type EditVoteCb = z.infer<typeof EditVoteCb>;
+
 /**
  * Vote
  * description

packages/interface/src/events.ts

@@ -17,6 +17,7 @@ export type ClientToServerEvents = Events<{
   agenda: {
     retrieveAll: Ev<agenda.RetrieveAll, agenda.RetrieveAllCb>;
     vote: Ev<agenda.Vote, agenda.VoteCb>;
+    edit: Ev<agenda.EditVote, agenda.EditVoteCb>;
     template: {
       create: Ev<agendaTemplate.Create, agendaTemplate.CreateCb>;
       retrieveAll: Ev<agendaTemplate.RetrieveAll, agendaTemplate.RetrieveAllCb>;
@@ -59,6 +60,7 @@ export type ServerToClientEvents = Events<{
     updated: Ev<agenda.Updated>;
     started: Ev<agenda.Started>;
     voted: Ev<agenda.Voted>;
+    voteEdited: Ev<agenda.Voted>;
     terminated: Ev<agenda.Terminated>;
     deleted: Ev<agenda.Deleted>;
     reminded: Ev<agenda.Reminded>;

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

@@ -13,9 +13,17 @@ export const Button = styled.button<{
   w?: Size;
   h?: Size;
   color?: Color;
+  textColor?: Color;
   padHorizontal?: number;
 }>(
-  ({ w = "fill", h = 28, color = "blue200", padHorizontal = 0, theme }) => css`
+  ({
+    w = "fill",
+    h = 28,
+    color = "blue200",
+    textColor = "black",
+    padHorizontal = 0,
+    theme,
+  }) => css`
     display: flex;
     width: ${calcSize(w)};
     height: ${calcSize(h)};
@@ -26,6 +34,7 @@ export const Button = styled.button<{
     align-items: center;
     line-height: 28px;
     background-color: ${theme.colors[color]};
+    color: ${theme.colors[textColor]};
 
     &:hover {
       cursor: pointer;

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

@@ -2,11 +2,13 @@ import { bg, colors, h, margin, round, row, text, w } from "@biseo/web/styles";
 import React from "react";
 
 interface ToggleSwitchProps {
+  defaultValue: boolean;
   handleToggle: () => void;
   label: string;
 }
 
 export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
+  defaultValue,
   handleToggle,
   label,
 }) => (
@@ -15,6 +17,7 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
       type="checkbox"
       id="toggle"
       onChange={handleToggle}
+      checked={defaultValue}
       css={[
         w(0),
         h(0),

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

@@ -21,11 +21,13 @@ import { EmptyAgendaCard } from "./EmptyAgendaCard";
 
 interface Props extends PropsWithChildren {
   agendaStatus: AgendaStatus;
+  recentOnly?: boolean;
   handleRecentOnly?: () => void;
 }
 
 export const Group: React.FC<Props> = ({
   agendaStatus,
+  recentOnly = false,
   handleRecentOnly = () => {},
   children = null,
 }) => (
@@ -50,7 +52,11 @@ export const Group: React.FC<Props> = ({
         </div>
       </div>
       {agendaStatus === "terminated" && (
-        <ToggleSwitch label="최근 투표만" handleToggle={handleRecentOnly} />
+        <ToggleSwitch
+          label="최근 투표만"
+          defaultValue={recentOnly}
+          handleToggle={handleRecentOnly}
+        />
       )}
     </div>
     {Children.count(children) ? (

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

@@ -26,8 +26,10 @@ const agendaTags = {
 
 export const OngoingAgendaCard: React.FC<OngoingAgendaProps> = ({ agenda }) => {
   const [chosenChoiceId, setChosenChoiceId] = useState(0);
-  const { voteAgenda } = useAgenda(state => ({
+  const [isEditing, setIsEditing] = useState(false);
+  const { voteAgenda, editVote } = useAgenda(state => ({
     voteAgenda: state.voteAgenda,
+    editVote: state.editVote,
   }));
 
   const vote = useCallback(() => {
@@ -47,14 +49,20 @@ export const OngoingAgendaCard: React.FC<OngoingAgendaProps> = ({ agenda }) => {
     [chosenChoiceId],
   );
 
+  const submitEdit = useCallback(() => {
+    editVote(chosenChoiceId, agenda.id);
+    setIsEditing(false);
+  }, [chosenChoiceId, agenda.id]);
+
   let choices: JSX.Element | JSX.Element[] = <NotVotableChoice />;
   if (agenda.user.votable) {
-    if (agenda.user.voted) {
+    if (agenda.user.voted && !isEditing) {
       choices = (
         <CompletedChoice
           choice={agenda.choices.find(
             choice => choice.id === agenda.user.voted,
           )}
+          onEdit={() => setIsEditing(true)}
         />
       );
     } else {
@@ -85,9 +93,20 @@ export const OngoingAgendaCard: React.FC<OngoingAgendaProps> = ({ agenda }) => {
             <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
           </div>
         </div>
-        <div css={[column, gap(6)]}>
-          <p css={[text.body, text.blue600]}>{agenda.resolution}</p>
-          {choices}
+        <div css={[column, gap(10)]}>
+          <div css={[column, gap(6)]}>
+            <p css={[text.body, text.blue600]}>{agenda.resolution}</p>
+            {choices}
+          </div>
+          {isEditing && (
+            <div css={[row, justify.end, w("fill")]}>
+              <Button w={90} disabled={!chosen} onClick={submitEdit}>
+                <p css={[text.option1, chosen ? text.blue600 : text.blue300]}>
+                  제출하기
+                </p>
+              </Button>
+            </div>
+          )}
         </div>
         {agenda.user.votable && !agenda.user.voted && (
           <div css={[row, justify.end, w("fill")]}>