Merge pull request #13 from AmorGakCo/feat/RemainingPage#2

Feat/remaining page#2
AmorGakCo · Jan 12, 2025 · fadd11c · fadd11c
2 parents 39b024b + dfbac50
commit fadd11c
Show file tree

Hide file tree

Showing 15 changed files with 253 additions and 26 deletions.
diff --git a/public/landing_bg.png b/public/landing_bg.png
diff --git a/public/landing_bg_2.png b/public/landing_bg_2.png
diff --git a/public/landing_logo.png b/public/landing_logo.png
diff --git a/src/app/(afterLogin)/group/history/page.tsx b/src/app/(afterLogin)/group/history/page.tsx
@@ -79,7 +79,7 @@ export default function Page() {
               />
             ))}
           </div>
-          {currentGroups?.histories.length ===0 && <div className='w-full flex justify-center'>현재 참여중인 그룹이 없습니다.</div>}
+          {currentGroups?.histories.length ===0 && <div className='w-full flex text-[#4A8EF7] mb-6 justify-center'>현재 참여중인 그룹이 없습니다.</div>}
           <div className="flex gap-4 w-full">
             <Image
               width={14}

diff --git a/src/app/(afterLogin)/group/register/_lib/fetchGroupRegister.ts b/src/app/(afterLogin)/group/register/_lib/fetchGroupRegister.ts
@@ -19,6 +19,7 @@ export async function fetchGroupRegister(data: groupPost) {
 
     } else {
       console.error('Error:', result.message);
+      alert(result.message);
     }
 
     return result.data.groupId;

diff --git a/src/app/(afterLogin)/info/_component/InfoForm.tsx b/src/app/(afterLogin)/info/_component/InfoForm.tsx
@@ -0,0 +1,136 @@
+'use client';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { formSchema } from '../_lib/InfoFormSchema';
+import { z } from 'zod';
+import { useEffect, useState } from 'react';
+import useLocationStore from '@/hooks/useLocationStore';
+import { geolocation } from '@/app/_types/Map';
+import { getCurrentPosition } from '../../_lib/getCurrentPosition';
+import { fetchMemberInfo } from '../_lib/fetchMemberInfo';
+
+export function InfoForm() {
+  const setCurLocation = useLocationStore((state) => state.setCurLocation);
+  const curLocation = useLocationStore((state) => state.curLocation);
+  const [location, setLocation] = useState<geolocation>({
+    center: {
+      lat: 37.54619261015808,
+      lng: 126.7303762529431,
+    },
+    radius: 300,
+    errMsg: null,
+    isLoading: true,
+  });
+  useEffect(() => {
+    async function fetchPosition() {
+      if (curLocation.centerLat === 0 && curLocation.centerLon === 0) {
+        const { currentLat: centerLat, currentLon: centerLon } =
+          await getCurrentPosition();
+        setCurLocation({ centerLat, centerLon });
+      }
+      setLocation((prev) => ({
+        ...prev,
+        centerLat: curLocation.centerLat,
+        centerLon: curLocation.centerLon,
+      }));
+    }
+    fetchPosition();
+  }, []);
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    mode: 'onChange',
+    defaultValues: {
+      smsNotificationSetting: true,
+      latitude: location.center.lat,
+      longitude: location.center.lng,
+    },
+  });
+  return (
+    <Form {...form}>
+      <div className="w-full flex justify-center">
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="gap-6 flex flex-col mt-6 px-6 w-full max-w-96"
+        >
+          <FormField
+            control={form.control}
+            name="smsNotificationSetting"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>SMS 알림</FormLabel>
+                <FormControl>
+                  <div className="flex gap-4">
+                    <Button
+                      onClick={() => field.onChange(true)}
+                      type="button"
+                      className="w-full"
+                      variant={`${field.value ? 'default' : 'outline'}`}
+                    >
+                      ON
+                    </Button>
+                    <Button
+                      onClick={() => field.onChange(false)}
+                      className="w-full"
+                      type="button"
+                      variant={`${field.value ? 'outline' : 'default'}`}
+                    >
+                      OFF
+                    </Button>
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="githubUrl"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Github 주소 설정</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="github 주소를 입력해주세요"
+                    {...field}
+                    className="w-full"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="phoneNumber"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>전화번호</FormLabel>
+                <FormControl>
+                  <Input placeholder="전화번호를 입력해주세요" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit" className="mt-40">
+            설정
+          </Button>
+        </form>
+      </div>
+    </Form>
+  );
+}
+async function onSubmit(value: z.infer<typeof formSchema>) {
+  const data = await fetchMemberInfo(value);
+  console.log(data);
+}
diff --git a/src/app/(afterLogin)/info/_lib/InfoFormSchema.ts b/src/app/(afterLogin)/info/_lib/InfoFormSchema.ts
@@ -0,0 +1,20 @@
+import { z } from "zod";
+
+
+const githubUrlRegex = /^https:\/\/github\.com\/[a-zA-Z0-9-_]+(\/[a-zA-Z0-9-_]+)?$/;
+const phoneNumberRegex = /^010-?\d{4}-?\d{4}$/; // 한국 010 번호 형식
+
+export const formSchema = z
+.object({
+  latitude: z.number(),
+  longitude: z.number(),
+  smsNotificationSetting: z
+    .boolean(),
+  githubUrl:  z
+  .string()
+  .url("유효한 URL 형식이 아닙니다.")
+  .regex(githubUrlRegex, "올바른 GitHub URL을 입력해주세요. 예: https://github.com/username 또는 https://github.com/username/repo"),
+  phoneNumber: z
+    .string()
+    .regex(phoneNumberRegex, "유효한 전화번호를 입력해주세요. 예: 010-1234-5678 또는 01012345678"),
+});
diff --git a/src/app/(afterLogin)/info/_lib/fetchMemberInfo.ts b/src/app/(afterLogin)/info/_lib/fetchMemberInfo.ts
@@ -0,0 +1,24 @@
+import { fetchWithAuth } from '@/app/(afterLogin)/_lib/FetchWithAuth';
+import { memberPatchInfo } from '@/app/_types/Api';
+
+export async function fetchMemberInfo(data: memberPatchInfo) {
+  try {
+    const response = await fetchWithAuth(`/members`, {
+      method: 'PATCH',
+      credentials: 'include',
+      body: JSON.stringify(data),
+      cache: 'no-cache',
+    });
+    const result = await response;
+    if (result.status === 'success') {
+      alert('추가정보를 등록했습니다.');
+    } else {
+      console.error(result.message);
+      alert(result.message);
+    }
+
+    return result.data;
+  } catch (error) {
+    console.error('Error submitting the form:', error);
+  }
+}
diff --git a/src/app/(afterLogin)/info/page.tsx b/src/app/(afterLogin)/info/page.tsx
@@ -1,3 +1,7 @@
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { InfoForm } from "./_component/InfoForm";
+
 export async function generateMetadata () {
   return {
     title:'추가 정보 입력 : 아모르각코'
@@ -6,8 +10,6 @@ export async function generateMetadata () {
 
 export default function Page() {
   return (
-    <main className="flex flex-col items-center justify-between p-24">
-        정보 입력{`(수정)`} 페이지
-    </main>
+    <InfoForm />
   );
 }
diff --git a/src/app/(beforeLogin)/login/page.tsx b/src/app/(beforeLogin)/login/page.tsx
diff --git a/src/app/(beforeLogin)/page.tsx b/src/app/(beforeLogin)/page.tsx
@@ -1,7 +1,47 @@
+'use client'
+import KakaoLoginButton from '@/components/ui/KakaoLoginButton';
+import Image from 'next/image';
 export default function Home() {
   return (
-    <main className="flex flex-col items-center justify-between p-24">
-        랜딩페이지
+    <main className="w-full -mb-navbarHeight min-h-[calc(100vh-48px)] overflow-auto flex flex-col items-center">
+      <Image
+        width={194}
+        height={60}
+        alt="landing logo"
+        src={'/landing_logo.png'}
+        className="mt-[27px]"
+      />
+      <Image
+        width={270}
+        height={160}
+        alt="landing logo"
+        src={'/landing_bg.png'}
+        className="mt-9"
+      />
+      <div className="w-full h-full flex-1 relative mt-9">
+        <Image
+          layout="fill"
+          alt="landing logo"
+          src={'/landing_bg_2.png'}
+          className="object-cover z-10"
+        />
+        <div className="relaitve mt-14 w-full h-full relative flex flex-col text-center items-center z-30 font-extrabold text-2xl leading-relaxed">
+          <div className="w-[152px] flex flex-col items-start gap-2">
+            <div>
+            <span className="text-blue-900">개발자</span>를 위한
+            </div>
+            <div>
+            <span className="text-blue-600">지도</span> 기반
+            </div>
+            <div>
+            <span className="text-blue-300">모각코</span> 플랫폼
+            </div>
+          </div>
+          <div className='mt-9 mb-6'>
+          <KakaoLoginButton/>
+          </div>
+        </div>
+      </div>
     </main>
   );
 }
diff --git a/src/app/_types/Api.ts b/src/app/_types/Api.ts
@@ -89,3 +89,22 @@ export interface notificationMessage {
     | 'PARTICIPATION_TARDINESS'
     | 'PARTICIPATION_WITHDRAW';
 }
+
+export interface memberInfo {
+  address: string;
+  latitude: number;
+  longitude: number;
+  groupCapacity: number;
+  beginAt: string;
+  endAt: string;
+  name?: string; // 선택적으로 변경
+  description?: string;
+}
+
+export interface memberPatchInfo {
+  githubUrl: string;
+  phoneNumber: string;
+  smsNotificationSetting: boolean;
+  longitude: number;
+  latitude: number;
+};
diff --git a/src/components/ui/Header/DropDown/index.tsx b/src/components/ui/Header/DropDown/index.tsx
@@ -45,9 +45,9 @@ export default function DropDown() {
             ):''}
           </DropdownMenuItem>
         </Link>
-        <Link href="/user">
+        <Link href="/info">
           <DropdownMenuItem className="cursor-pointer">
-            계정관리
+            추가 정보 관리
           </DropdownMenuItem>
         </Link>
         <LogoutButton />

diff --git a/src/components/ui/Header/index.tsx b/src/components/ui/Header/index.tsx
@@ -61,11 +61,11 @@ export default function Header() {
         </div>
       )}
       {accessToken && <DropDown />}
-      {!accessToken && (
+      {/* {!accessToken && (
         <Link href="/login" className="mr-2">
           <Button>로그인</Button>
         </Link>
-      )}
+      )} */}
     </div>
   );
 }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-blue-400 bg-background box-border text-blue-400 hover:bg-[#2990FF]/90 hover:text-primary-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",