의존성 픽스

package.json

@@ -17,6 +17,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@tanstack/react-query": "^5.90.21",
     "clsx": "^2.1.1",
     "framer-motion": "^12.34.0",
     "next": "16.1.3",

src/app/addteam/_domain/components/CreateTeamCard.module.css

@@ -0,0 +1,85 @@
+.title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+.label {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 19px;
+}
+
+.card {
+  position: relative;
+  width: var(--create-card-width-desktop);
+  padding: 32px 28px;
+  gap: 20px;
+  border-radius: 24px;
+  box-shadow: 4px 4px 10px 0 #24242440;
+  background-color: var(--color-background-inverse);
+}
+
+.profileSection {
+  gap: 12px;
+}
+
+.inputSection {
+  gap: 8px;
+}
+
+.teamNameInput {
+  height: var(--control-height-desktop);
+}
+
+.submitButton {
+  margin-top: 40px;
+  height: var(--control-height-desktop);
+}
+
+@media (max-width: 767px) {
+  .title {
+    font-size: 20px;
+    line-height: 24px;
+  }
+
+  .label {
+    color: var(--color-text-primary);
+    font-size: 14px;
+    line-height: 17px;
+  }
+
+  .card {
+    width: var(--create-card-width-mobile);
+    min-height: 464px;
+    padding: 24px 22px;
+    gap: 0;
+    border-radius: 24px;
+  }
+
+  .profileSection {
+    margin-top: 34px;
+  }
+
+  .inputSection {
+    margin-top: 24px;
+    gap: 8px;
+  }
+
+  .teamNameInput {
+    height: var(--control-height-mobile);
+    padding: 12px;
+    font-size: 14px;
+    line-height: 17px;
+  }
+
+  .submitButton {
+    margin-top: 40px;
+    height: var(--control-height-mobile);
+    font-size: 14px;
+  }
+}

src/app/addteam/_domain/components/CreateTeamCard.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { type FormEvent } from 'react';
+import { BaseButton } from '@/components/Button/base';
+import { Input } from '@/components/input';
+import { ProfileImage } from '@/components/profile-img';
+import type { CreateTeamFeedback } from '../interfaces/feedback';
+import FeedbackMessage from './FeedbackMessage';
+import cardStyles from './CreateTeamCard.module.css';
+import clsx from 'clsx';
+import commonStyles from '../styles/common.module.css';
+
+const CREATE_TEAM_FEEDBACK_ID = 'create-team-feedback';
+
+interface CreateTeamCardProps {
+  value: string;
+  disabled: boolean;
+  feedback: CreateTeamFeedback | null;
+  onChange: (value: string) => void;
+  onSubmit: () => void | Promise<void>;
+}
+
+export default function CreateTeamCard({
+  value,
+  disabled,
+  feedback,
+  onChange,
+  onSubmit,
+}: CreateTeamCardProps) {
+  const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    void onSubmit();
+  };
+
+  return (
+    <form className={clsx(commonStyles.flexCol, cardStyles.card)} onSubmit={handleFormSubmit}>
+      <h2 className={cardStyles.title}>팀 생성하기</h2>
+
+      <div className={clsx(commonStyles.flexColCenter, cardStyles.profileSection)}>
+        <ProfileImage variant="team" size="xl" editable />
+      </div>
+
+      <div className={clsx(commonStyles.flexCol, cardStyles.inputSection)}>
+        <label htmlFor="team-name" className={cardStyles.label}>
+          팀 이름
+        </label>
+        <Input
+          id="team-name"
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          aria-describedby={CREATE_TEAM_FEEDBACK_ID}
+          placeholder="팀 이름을 입력해주세요"
+          className={cardStyles.teamNameInput}
+        />
+      </div>
+
+      <BaseButton className={cardStyles.submitButton} type="submit" disabled={disabled}>
+        생성하기
+      </BaseButton>
+
+      <FeedbackMessage id={CREATE_TEAM_FEEDBACK_ID} createTeamFeedback={feedback} />
+    </form>
+  );
+}

src/app/addteam/_domain/components/FeedbackMessage.module.css

@@ -0,0 +1,37 @@
+.helperText {
+  margin: 0;
+  color: var(--color-text-default);
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.errorText {
+  margin: 0;
+  color: var(--color-status-danger);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.successText {
+  margin: 0;
+  color: var(--color-brand-primary);
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+@media (max-width: 767px) {
+  .helperText,
+  .errorText,
+  .successText {
+    margin-top: 16px;
+  }
+
+  .helperText {
+    font-size: 12px;
+    line-height: 14px;
+  }
+}

src/app/addteam/_domain/components/FeedbackMessage.tsx

@@ -0,0 +1,31 @@
+import type { CreateTeamFeedback } from '../interfaces/feedback';
+import feedbackMessageStyles from './FeedbackMessage.module.css';
+
+interface FeedbackMessageProps {
+  id: string;
+  createTeamFeedback: CreateTeamFeedback | null;
+}
+
+export default function FeedbackMessage({ id, createTeamFeedback }: FeedbackMessageProps) {
+  if (!createTeamFeedback) {
+    return (
+      <p id={id} className={feedbackMessageStyles.helperText}>
+        팀 이름은 회사명이나 모임 이름 등으로 설정하면 좋아요.
+      </p>
+    );
+  }
+
+  if (createTeamFeedback.type === 'error') {
+    return (
+      <p id={id} role="alert" aria-live="assertive" className={feedbackMessageStyles.errorText}>
+        {createTeamFeedback.message}
+      </p>
+    );
+  }
+
+  return (
+    <p id={id} role="status" aria-live="polite" className={feedbackMessageStyles.successText}>
+      {createTeamFeedback.message}
+    </p>
+  );
+}

src/app/addteam/_domain/components/JoinTeamCard.module.css

@@ -0,0 +1,99 @@
+.title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+.joinLabel {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 19px;
+}
+
+.joinCard {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  width: var(--join-card-width-desktop);
+  height: 400px;
+  padding: 59px 45px 63px;
+  border-radius: 20px;
+  background: var(--color-background-inverse);
+}
+
+.joinInputSection {
+  width: var(--join-input-width-desktop);
+  margin-top: 40px;
+  gap: 8px;
+}
+
+.teamLinkInput {
+  width: 100%;
+  height: var(--control-height-desktop);
+}
+
+.joinSubmitButton {
+  width: var(--join-input-width-desktop);
+  height: var(--control-height-desktop);
+  margin-top: 40px;
+  border-radius: 12px;
+}
+
+.joinHelperText {
+  margin: 24px 0 0;
+  color: var(--color-text-default);
+  font-size: 16px;
+  line-height: 19px;
+  text-align: center;
+}
+
+@media (max-width: 767px) {
+  .joinCard {
+    align-items: stretch;
+    justify-content: flex-start;
+    width: var(--create-card-width-mobile);
+    min-height: 264px;
+    padding: 24px 22px 28px;
+    border-radius: 24px;
+  }
+
+  .joinInputSection {
+    width: 100%;
+    margin-top: 24px;
+    gap: 8px;
+  }
+
+  .title {
+    font-size: 20px;
+    line-height: 24px;
+  }
+
+  .joinLabel {
+    font-size: 14px;
+    line-height: 17px;
+  }
+
+  .teamLinkInput {
+    height: var(--control-height-mobile);
+    font-size: 14px;
+    line-height: 17px;
+  }
+
+  .joinSubmitButton {
+    width: 100%;
+    height: var(--control-height-mobile);
+    margin-top: 40px;
+    font-size: 14px;
+    line-height: 17px;
+  }
+
+  .joinHelperText {
+    margin-top: 16px;
+    font-size: 12px;
+    line-height: 14px;
+  }
+}