Merge pull request #153 from School-of-Company/feat/slogan

bae080311 · web-flow · commit 7def66f90fbf · 2026-03-09T19:54:39.000+09:00
feat: slogan 날짜 설정
diff --git a/src/entities/slogan/lib/formReducer.ts b/src/entities/slogan/lib/formReducer.ts
@@ -2,7 +2,6 @@ import { SloganFormValues } from "../model/schema";
 
 export interface FormState {
   formValues: SloganFormValues;
-  isValid: boolean;
   isSubmitted: boolean;
   isSubmitting: boolean;
   sloganLength: number;
@@ -15,7 +14,6 @@ export type FormAction =
   | { type: "UPDATE_DESCRIPTION"; value: string; length: number }
   | { type: "SET_SUBMITTING"; value: boolean }
   | { type: "SET_SUBMITTED"; value: boolean }
-  | { type: "SET_VALID"; value: boolean }
   | { type: "SELECT_SCHOOL"; schoolName: string };
 
 export const initialFormState: FormState = {
@@ -28,7 +26,6 @@ export const initialFormState: FormState = {
     classroom: "",
     phone_number: "",
   },
-  isValid: false,
   isSubmitted: false,
   isSubmitting: false,
   sloganLength: 0,
@@ -63,8 +60,6 @@ export const formReducer = (state: FormState, action: FormAction): FormState =>
       return { ...state, isSubmitting: action.value };
     case "SET_SUBMITTED":
       return { ...state, isSubmitted: action.value };
-    case "SET_VALID":
-      return { ...state, isValid: action.value };
     default:
       return state;
   }
diff --git a/src/entities/slogan/lib/types.ts b/src/entities/slogan/lib/types.ts
@@ -20,6 +20,7 @@ export interface SloganFormSchoolData {
 
 export interface UseSloganFormReturn {
   state: FormState;
+  isValid: boolean;
   handlers: SloganFormHandlers;
   schoolData: SloganFormSchoolData;
 }
diff --git a/src/entities/slogan/lib/useSloganForm.ts b/src/entities/slogan/lib/useSloganForm.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useReducer, useCallback, useMemo, useEffect } from "react";
+import { useReducer, useCallback, useMemo } from "react";
 import { formReducer, initialFormState } from "./formReducer";
 import { sloganSchema, SloganFormValues } from "../model/schema";
 import { handleSloganFormSubmit } from "./handleSloganFormSubmit";
@@ -13,13 +13,7 @@ const SCHOOL_SEARCH_DELAY = 200;
 export const useSloganForm = (): UseSloganFormReturn => {
   const [state, dispatch] = useReducer(formReducer, initialFormState);
 
-  const isValid = useMemo(() => {
-    return sloganSchema.safeParse(state.formValues).success;
-  }, [state.formValues]);
-
-  useEffect(() => {
-    dispatch({ type: "SET_VALID", value: isValid });
-  }, [isValid]);
+  const isValid = sloganSchema.safeParse(state.formValues).success;
 
   const normalizedSchoolName = useMemo(
     () => state.formValues.school.replace(/\s+/g, ""),
@@ -77,6 +71,7 @@ export const useSloganForm = (): UseSloganFormReturn => {
 
   return {
     state,
+    isValid,
     handlers: {
       handleSloganChange,
       handleDescriptionChange,
diff --git a/src/widgets/main/SloganSecondSection/index.tsx b/src/widgets/main/SloganSecondSection/index.tsx
@@ -1,92 +1,79 @@
 import React from "react";
-// import { useRouter } from "next/navigation";
-import PrizeItem from "@/entities/home/ui/PrizeItem";
+import { useRouter } from "next/navigation";
+// import PrizeItem from "@/entities/home/ui/PrizeItem";
 import SloganMarquee from "@/entities/home/ui/SloganMarquee";
-// import Button from "@/shared/ui/Button";
+import Button from "@/shared/ui/Button";
 import { cn } from "@/shared/utils/cn";
 import { SectionTitle } from "@/shared/ui/SectionTitle";
-// import { formatDate } from "@/shared/utils/formatDate";
+import { formatDate } from "@/shared/utils/formatDate";
 
-const PRIZES = [
-  {
-    rank: "2등",
-    bg: "bg-gray-400",
-    emoji: "광주SW마이스터고 2학년 ",
-    desc: "허O서",
-    slogan: '"광주의 빛나는, 또 빛날 별들의 향연"',
-  },
-  {
-    rank: "1등",
-    bg: "bg-yellow-300",
-    emoji: "전대사대부고 2학년 ",
-    desc: "김O은",
-    slogan: '"세상의 무대 위, 광탈페! 너의 꿈이 시작되는 순간!"',
-  },
-  {
-    rank: "3등",
-    bg: "bg-orange-700",
-    emoji: "빛고을고 2학년 ",
-    desc: "최O원",
-    slogan: '"재능이 피어나는 시간, 가능성이 자라는 무대"',
-  },
-];
+const SLOGAN_YEAR = 2026;
 
-// const SLOGAN_START = new Date("2025-05-26T00:00:00+09:00");
-// const SLOGAN_END = new Date("2025-05-30T17:59:59+09:00");
+const SLOGAN_START = new Date(`${SLOGAN_YEAR}-05-04T00:00:00+09:00`);
+const SLOGAN_END = new Date(`${SLOGAN_YEAR}-05-08T17:59:59+09:00`);
 
 const SloganSecondSection = () => {
-  // const R = useRouter();
+  const router = useRouter();
 
-  // const isSloganPeriod = React.useMemo(() => {
-  //   const now = new Date();
-  //   return now >= SLOGAN_START && now <= SLOGAN_END;
-  // }, []);
+  const [isSloganPeriod, setIsSloganPeriod] = React.useState(false);
 
-  // const submissionPeriodText = React.useMemo(() => {
-  //   const startText = formatDate(SLOGAN_START);
-  //   const endText = formatDate(SLOGAN_END);
-  //   return `공모기간 : 2025.${startText}~${endText} 18:00까지`;
-  // }, []);
+  React.useEffect(() => {
+    const checkPeriod = () => {
+      const now = new Date();
+      setIsSloganPeriod(now >= SLOGAN_START && now <= SLOGAN_END);
+    };
+
+    checkPeriod();
+    const timer = setInterval(checkPeriod, 60000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const submissionPeriodText = React.useMemo(() => {
+    const startText = formatDate(SLOGAN_START);
+    const endText = formatDate(SLOGAN_END);
+    return `공모기간 : ${SLOGAN_YEAR}.${startText}~${endText} 18:00까지`;
+  }, []);
 
   return (
     <section id="SloganSecondSection" className={cn("w-full mt-[3.5rem] mobile:mt-20 text-center")}>
       <SectionTitle
-        title="2025 광탈페 슬로건"
+        title={`${SLOGAN_YEAR} 광탈페 슬로건`}
         description={
           <>
             <span className="text-black text-body2b">
               세상의 무대 위, 광탈페! 너의 꿈이 시작되는 순간!
             </span>
             <span className={cn("block")}>
-              2025년 모두가 주인공이 되는 광주학생탈렌트페스티벌의 꿈의 무대가 펼쳐집니다.
+              {SLOGAN_YEAR}년 모두가 주인공이 되는 광주학생탈렌트페스티벌의 꿈의 무대가 펼쳐집니다.
             </span>
           </>
         }
       />
 
       <SloganMarquee />
 
-      <div className={cn("flex flex-col items-center p-6 bg-white my-30")}>
+      {/* <div className={cn("flex flex-col items-center p-6 bg-white my-30")}>
         <div className={cn("flex justify-center items-center gap-[40px]")}>
           <PrizeItem key={PRIZES[1].rank} {...PRIZES[1]} />
           <PrizeItem key={PRIZES[0].rank} {...PRIZES[0]} />
           <PrizeItem key={PRIZES[2].rank} {...PRIZES[2]} />
         </div>
-      </div>
-      {/* 
-        <Button
-          onClick={() => R.push("/slogan")}
-          className={cn("my-[24px] mobile:mb-[12px] px-28")}
-          isDisabled={!isSloganPeriod}
-        >
-          <span className={cn("text-body2b mobile:text-body3b flex items-center gap-10")}>
-            {isSloganPeriod ? "슬로건 공모하러가기" : "공모기간이 아닙니다"} <span>➔</span>
-          </span>
-        </Button>
+      </div> */}
+      <Button
+        type="button"
+        onClick={() => router.push("/slogan")}
+        className={cn("my-[24px] mobile:mb-[12px] px-28")}
+        disabled={!isSloganPeriod}
+      >
+        <span className={cn("text-body2b mobile:text-body3b flex items-center gap-10")}>
+          {isSloganPeriod ? "슬로건 공모하러가기" : "공모기간이 아닙니다"} <span>➔</span>
+        </span>
+      </Button>
 
-        <div className={cn("text-caption1r mobile:text-caption2r text-gray-400")}>
-          {submissionPeriodText}
-        </div> */}
+      <div className={cn("text-caption1r mobile:text-caption2r text-gray-400")}>
+        {submissionPeriodText}
+      </div>
     </section>
   );
 };
diff --git a/src/widgets/slogan/ui/SloganFormContainer/index.tsx b/src/widgets/slogan/ui/SloganFormContainer/index.tsx
@@ -11,7 +11,7 @@ import PersonalInfoInputs from "@/entities/slogan/ui/PersonalInfoInputs";
 import { useSloganForm } from "@/entities/slogan/lib/useSloganForm";
 
 export default function SloganFormContainer() {
-  const { state, handlers, schoolData } = useSloganForm();
+  const { state, isValid, handlers, schoolData } = useSloganForm();
 
   if (state.isSubmitted) {
     return <SloganFormSuccess />;
@@ -56,7 +56,7 @@ export default function SloganFormContainer() {
           />
         </div>
       </div>
-      <Button type="submit" disabled={!state.isValid || state.isSubmitting}>
+      <Button type="submit" disabled={!isValid || state.isSubmitting}>
         응모하기
       </Button>
     </form>

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ export interface SloganFormSchoolData {`
`20`	`20`
`21`	`21`	`export interface UseSloganFormReturn {`
`22`	`22`	`state: FormState;`
	`23`	`+ isValid: boolean;`
`23`	`24`	`handlers: SloganFormHandlers;`
`24`	`25`	`schoolData: SloganFormSchoolData;`
`25`	`26`	`}`