✨Add demo cite

.github/workflows/deploy-dev.yml

@@ -20,8 +20,6 @@ jobs:
           node-version: '20.11.1'
 
       - name: Build & Export
-        env:
-          VITE_API_BASE_URL: ${{ secrets.VITE_API_BASE_URL }}
         run: |
           yarn install
           yarn build

.github/workflows/deploy-temp.yml

@@ -0,0 +1,34 @@
+name: deploy-temp
+
+on:
+  push:
+    branches:
+      - revert-api
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.11.1'
+
+      - name: Build & Export
+        run: |
+          yarn install
+          yarn build
+
+      - name: Deploy to S3 and Invalidate Cloudfront
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ap-northeast-2
+        run: |
+          aws s3 sync ./dist s3://waffle-team4-web-temp --delete
+          aws cloudfront create-invalidation --distribution-id E2HDLBJVBNM8HH --paths "/*"

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>모이샤 dev</title>
+    <title>모이샤 Alpha</title>
   </head>
   <body>
     <div id="root"></div>

src/api/apiClient.ts

@@ -3,9 +3,8 @@ import useAuthStore from '../hooks/useAuthStore';
 
 // 공통 설정을 가진 axios 인스턴스 생성
 const apiClient = axios.create({
-  baseURL: `{import.meta.env.VITE_API_BASE_URL}/api/v1`,
+  baseURL: '/api', // 모든 요청의 기본 경로
   timeout: 5000,
-  headers: { 'Content-Type': 'application/json' },
 });
 
 // 요청 인터셉터: 모든 요청 직전에 실행됨

src/api/auth/login.ts

@@ -1,9 +1,7 @@
-import apiClient from '@/api/apiClient';
-import type { LoginRequest, LoginResponse } from '@/types/auth';
+import type { AuthResponse, LoginRequest } from '../../types/auth';
+import apiClient from '../apiClient';
 
-export default async function login(
-  data: LoginRequest
-): Promise<LoginResponse> {
-  const response = await apiClient.post<LoginResponse>('/auth/login', data);
+export default async function login(data: LoginRequest): Promise<AuthResponse> {
+  const response = await apiClient.post<AuthResponse>('/auth/login', data);
   return response.data;
 }

src/api/auth/me.ts

@@ -0,0 +1,7 @@
+import type { User, UserGroup } from '../../types/auth';
+import apiClient from '../apiClient';
+
+export default async function getMe(): Promise<User & { groups: UserGroup[] }> {
+  const response = await apiClient.get('/auth/me');
+  return response.data;
+}

src/api/auth/signup.ts

@@ -1,23 +1,19 @@
-import apiClient from '@/api/apiClient';
-import type { SignUpRequest, SignUpResponse } from '@/types/auth';
+import type { AuthResponse, SignUpRequest } from '../../types/auth';
+import apiClient from '../apiClient';
 
 export default async function signup(
   data: SignUpRequest
-): Promise<SignUpResponse> {
+): Promise<AuthResponse> {
   const formData = new FormData();
 
-  formData.append('email', data.email);
-  formData.append('name', data.name);
+  formData.append('username', data.username);
   formData.append('password', data.password);
+  formData.append('name', data.name);
 
-  if (data.profileImage) {
-    formData.append('profileImage', data.profileImage);
+  if (data.photo) {
+    formData.append('photo', data.photo); // 백엔드 필드명과 'photo' 일치시키기
   }
 
-  const response = await apiClient.post<SignUpResponse>(
-    '/auth/signup',
-    formData
-  );
-
+  const response = await apiClient.post<AuthResponse>('/auth/signup', formData);
   return response.data;
 }

src/api/auth/social.ts

@@ -1,12 +1,9 @@
-import type { SocialLoginRequest, SocialLoginResponse } from '../../types/auth';
+import type { AuthResponse, SocialLoginRequest } from '../../types/auth';
 import apiClient from '../apiClient';
 
 export default async function social(
   data: SocialLoginRequest
-): Promise<SocialLoginResponse> {
-  const response = await apiClient.post<SocialLoginResponse>(
-    '/auth/social',
-    data
-  );
+): Promise<AuthResponse> {
+  const response = await apiClient.post<AuthResponse>('/auth/social', data);
   return response.data;
 }

src/components/EventCardView.tsx

@@ -7,29 +7,31 @@ import {
   ItemMedia,
   ItemTitle,
 } from '@/components/ui/item';
-import type { Event } from '@/types/schemas';
+import type { Events } from '@/types/schema';
 import { getShortenedDate } from '@/utils/date';
 import { ChevronRightIcon, Plus } from 'lucide-react';
 import { Link } from 'react-router';
 import { Button } from './ui/button';
 
+type Event = Events & { guests: number; registration_start: string | null };
+
 function getDateLabel(
-  startEpoch: number | undefined,
-  endEpoch: number | undefined
+  startDateString: string | null,
+  endDateString: string | null
 ) {
-  if (!endEpoch) {
+  if (!endDateString) {
     return '상시 모집 중';
   }
 
   const now = new Date();
-  const endDate = new Date(endEpoch);
+  const endDate = new Date(endDateString!);
 
-  if (startEpoch && now < new Date(startEpoch)) {
-    return `${getShortenedDate(startEpoch)}부터 모집`;
+  if (startDateString && now < new Date(startDateString)) {
+    return `${getShortenedDate(startDateString)}부터 모집`;
   }
 
   if (now <= endDate) {
-    return `${getShortenedDate(endEpoch)}까지 모집`;
+    return `${getShortenedDate(endDateString)}까지 모집`;
   }
 
   return '모집 마감';
@@ -82,7 +84,10 @@ export default function EventCardView({ events }: { events: Event[] }) {
                 </h2>
               </ItemTitle>
               <ItemDescription>
-                {getDateLabel(undefined, event.registrationDeadline)}
+                {getDateLabel(
+                  event.registration_start,
+                  event.registration_deadline
+                )}
               </ItemDescription>
             </ItemContent>
             <ItemActions>

src/components/EventDetailContent.tsx

@@ -1,11 +1,10 @@
 import { ScrollArea } from '@/components/ui/scroll-area';
-import type { Event } from '@/types/schemas';
 import { useNavigate } from 'react-router';
+import type { Events } from '../types/schema';
 import { formatEventDate } from '../utils/date';
 
-interface EventDetailContentProps {
-  schedule: Event;
-  currentParticipants: number;
+interface Props {
+  schedule: Events;
 }
 
 // 아이콘
@@ -24,18 +23,15 @@ const IconChevronLeft = () => (
   </svg>
 );
 
-export default function EventDetailContent({
-  schedule,
-  currentParticipants,
-}: EventDetailContentProps) {
+export default function EventDetailContent({ schedule }: Props) {
   const navigate = useNavigate();
 
   return (
     <div className="w-full flex flex-col items-start gap-10">
       {/* 1. 일시 및 장소 */}
       <div className="text-left space-y-3 w-full">
         <p className="text-lg sm:text-xl font-bold text-black">
-          일시 {formatEventDate(schedule.startAt)}
+          일시 {formatEventDate(schedule.start_at)}
         </p>
         <p className="text-lg sm:text-xl font-bold text-black">
           장소 {schedule.location || '미정'}
@@ -44,12 +40,12 @@ export default function EventDetailContent({
 
       {/* 2. 신청 현황 버튼 */}
       <button
-        onClick={() => navigate(`/event/${schedule.id}/guests`)}
+        onClick={() => navigate('guests')}
         className="flex items-center text-lg font-bold group hover:opacity-70 transition-opacity"
       >
         {schedule.capacity}명 중{' '}
         <span className="text-black ml-2 font-extrabold">
-          {currentParticipants}명 신청
+          {/* 신청 인원 필드 필요 */}8명 신청
         </span>
         <div className="rotate-180 ml-2 group-hover:translate-x-1 transition-transform text-black">
           <IconChevronLeft />
@@ -65,8 +61,8 @@ export default function EventDetailContent({
 
       {/* 4. 마감 정보 (버튼 상단 문구) */}
       <p className="text-lg font-bold text-black">
-        {schedule.registrationDeadline
-          ? `${formatEventDate(schedule.registrationDeadline)} 모집 마감`
+        {schedule.registration_deadline
+          ? `${formatEventDate(schedule.registration_deadline)} 모집 마감`
           : '상시 모집'}
       </p>
     </div>

src/components/GuestSummaryList.tsx

@@ -1,8 +1,12 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
-import type { Guest } from '@/types/schemas';
 import { useNavigate } from 'react-router';
 
+interface Guest {
+  name: string;
+  img?: string;
+}
+
 interface Props {
   guests: Guest[];
   totalCount: number;
@@ -38,13 +42,13 @@ export default function GuestSummaryList({
           {guests.map((p, idx) => (
             <div key={idx} className="flex flex-col items-center gap-4">
               <Avatar className="w-16 h-16 border-none">
-                <AvatarImage src={p.guestEmail ?? undefined} />
+                <AvatarImage src={p.img} />
                 <AvatarFallback className="bg-black text-white text-xs">
-                  {p.guestName?.slice(0, 2)}
+                  {p.name.slice(0, 2)}
                 </AvatarFallback>
               </Avatar>
               <span className="text-sm font-bold text-gray-700 truncate w-full text-center">
-                {p.guestName}
+                {p.name}
               </span>
             </div>
           ))}

src/components/Header.tsx

@@ -2,8 +2,17 @@ import ProfileButton from '@/components/ProfileButton';
 import useAuth from '@/hooks/useAuth';
 import { Link, NavLink } from 'react-router';
 
+const userExample = {
+  id: 1,
+  email: 'user@example.com',
+  name: '박준영',
+  profileImage: 'https://github.com/shadcn.png',
+  createdAt: '2023-01-01T00:00:00.000Z',
+  updatedAt: '2023-01-01T00:00:00.000Z',
+};
+
 export default function Header() {
-  const { user, isLoggedIn, handleLogout } = useAuth();
+  const { isLoggedIn, handleLogout } = useAuth();
 
   const linkClassName = (isActive: boolean) => `
     h-[42px] items-center px-4 py-2 rounded-md text-black font-semibold
@@ -17,7 +26,7 @@ export default function Header() {
           모이샤
         </Link>
         <div className="items-center space-x-2">
-          {!isLoggedIn || !user ? (
+          {!isLoggedIn ? (
             <>
               <NavLink
                 to="/login"
@@ -33,7 +42,7 @@ export default function Header() {
               </NavLink>
             </>
           ) : (
-            <ProfileButton user={user} handleLogout={handleLogout} />
+            <ProfileButton user={userExample} handleLogout={handleLogout} />
           )}
         </div>
       </div>

src/components/ProfileButton.tsx

@@ -8,7 +8,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import type { User } from '@/types/schemas';
+import type { User } from '@/types/auth';
 
 interface ProfileButtonProps {
   user: User;