[FE] 테스트 서버 색상 수정

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,
+  },
+};

frontend/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,
+  },
+};

frontend/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;

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 = {};

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};