Merge pull request #980 from woowacourse-teams/FE/dev

[FE] 🚀 테스트 서버 배포
woowacourse-teams · Dec 13, 2024 · c2fac24 · c2fac24
2 parents bfe865b + 3c5f105
commit c2fac24
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 5 deletions.
diff --git a/frontend/src/components/PairRoom/GuideModal/GuideModal.stories.tsx b/frontend/src/components/PairRoom/GuideModal/GuideModal.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import GuideModal from '@/components/PairRoom/GuideModal/GuideModal';
+
+const ACCESS_CODE = 'CODUO';
+
+const meta = {
+  title: 'component/PairRoom/GuideModal',
+  component: GuideModal,
+
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof GuideModal>;
+
+export default meta;
+
+type Story = StoryObj<typeof GuideModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    accessCode: ACCESS_CODE,
+  },
+};
diff --git a/...nd/src/components/PairRoom/PairListCard/CompleteRoomButton/CompleteRoomButton.stories.tsx b/...nd/src/components/PairRoom/PairListCard/CompleteRoomButton/CompleteRoomButton.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import CompleteRoomButton from '@/components/PairRoom/PairListCard/CompleteRoomButton/CompleteRoomButton';
+
+import useUserStore from '@/stores/userStore';
+
+const USER_NAME = 'CODUO';
+
+const meta = {
+  title: 'component/PairRoom/PairListCard/CompleteRoomButton',
+  component: CompleteRoomButton,
+  decorators: [
+    (Story) => {
+      const { setUser } = useUserStore.getState();
+      setUser(USER_NAME, 'SIGNED_IN');
+
+      return <Story />;
+    },
+  ],
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof CompleteRoomButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof CompleteRoomButton>;
+
+export const LoggedIn: Story = {
+  args: {
+    isOpen: true,
+  },
+};
+
+export const ClosedLoggedIn: Story = {
+  args: {
+    isOpen: false,
+  },
+};
+
+export const LoggedOut: Story = {
+  decorators: [
+    (Story) => {
+      const { resetUser } = useUserStore.getState();
+      resetUser();
+      return <Story />;
+    },
+  ],
+  args: {
+    isOpen: true,
+  },
+};
diff --git a/...tend/src/components/PairRoom/PairListCard/CompleteRoomButton/CompleteRoomButton.styles.ts b/...tend/src/components/PairRoom/PairListCard/CompleteRoomButton/CompleteRoomButton.styles.ts
@@ -17,8 +17,8 @@ export const Layout = styled.button<{ disabled: boolean }>`
   margin-top: auto;
   border-radius: 0 0 2rem 2rem;
 
-  background-color: ${({ theme, disabled }) => (disabled ? theme.color.black[100] : theme.color.danger[200])};
-  color: ${({ theme, disabled }) => (disabled ? theme.color.black[400] : theme.color.danger[600])};
+  background-color: ${({ theme, disabled }) => (disabled ? theme.color.black[100] : theme.color.danger[100])};
+  color: ${({ theme, disabled }) => (disabled ? theme.color.black[400] : theme.color.danger[500])};
   font-size: ${({ theme }) => theme.fontSize.base};
   text-overflow: ellipsis;
   white-space: nowrap;

diff --git a/frontend/src/components/PairRoom/TimerCard/TimerCard.tsx b/frontend/src/components/PairRoom/TimerCard/TimerCard.tsx
@@ -59,13 +59,15 @@ const TimerCard = ({ accessCode, defaultTime, defaultTimeleft, onTimerStop }: Ti
         <S.IconContainer>
           <IconButton
             icon={<FaPlay role="presentation" />}
+            size="lg"
             color={theme.color.secondary[500]}
             disabled={isActive}
             onClick={handleStart}
             aria-label="타이머 시작하기"
           />
           <IconButton
             icon={<FaPause role="presentation" />}
+            size="lg"
             color={theme.color.secondary[500]}
             disabled={!isActive}
             onClick={handlePause}

diff --git a/frontend/src/components/Retrospect/Textarea/Textarea.stories.tsx b/frontend/src/components/Retrospect/Textarea/Textarea.stories.tsx
@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Textarea from '@/components/Retrospect/Textarea/Textarea';
+
+const meta = {
+  title: 'component/Retrospect/Textarea',
+  component: Textarea,
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {};
diff --git a/frontend/src/components/_common/IconButton/IconButton.styles.ts b/frontend/src/components/_common/IconButton/IconButton.styles.ts
@@ -126,12 +126,12 @@ export const Layout = styled.button<IconButtonProps>`
   }
 
   &:disabled {
-    background-color: ${theme.color.black[100]};
+    background-color: transparent;
 
     cursor: default;
 
     svg {
-      color: ${theme.color.black[200]};
+      color: ${theme.color.black[400]};
     }
   }
 `;
diff --git a/frontend/src/pages/CompletedPairRoom/CompletedPairRoom.styles.ts b/frontend/src/pages/CompletedPairRoom/CompletedPairRoom.styles.ts
@@ -53,7 +53,7 @@ export const PairInfoWrapper = styled.div`
   padding: 1.2rem 1.5rem;
   border-radius: 1rem;
 
-  background-color: ${({ theme }) => theme.color.black[300]};
+  background-color: ${({ theme }) => theme.color.black[200]};
   color: ${({ theme }) => theme.color.black[700]};
   font-size: ${({ theme }) => theme.fontSize.base};
   font-weight: ${({ theme }) => theme.fontWeight.medium};