loading
} + {isError &&..isError
} + {data && + data.result.map((team) => { + const { teamName, description, count } = team; + return ( +{teamName}
+{teamSummary}
+{ranking}
+loading...
} + {isError &&Error....
} + {data?.map((team) => { + const { teamName, description, teamId } = team; + return ( +{name}
+{team}
++ {count} +
+{introduction}
++ {value} +
+ ); +} diff --git a/vote/src/SigninLogin/components/CheckPassword.tsx b/vote/src/SigninLogin/components/CheckPassword.tsx new file mode 100644 index 0000000..650be0a --- /dev/null +++ b/vote/src/SigninLogin/components/CheckPassword.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import { inputStyle } from "../styles/inputStyles.css"; + +export default function CheckPassword() { + return ; +} diff --git a/vote/src/SigninLogin/components/IdInput.tsx b/vote/src/SigninLogin/components/IdInput.tsx new file mode 100644 index 0000000..d76067c --- /dev/null +++ b/vote/src/SigninLogin/components/IdInput.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import { inputStyle } from "../styles/inputStyles.css"; + +export default function IdInput() { + return ; +} diff --git a/vote/src/SigninLogin/components/Input.tsx b/vote/src/SigninLogin/components/Input.tsx new file mode 100644 index 0000000..2ba4cf5 --- /dev/null +++ b/vote/src/SigninLogin/components/Input.tsx @@ -0,0 +1,20 @@ +import { inputStyle } from "../styles/inputStyles.css"; + +export default function Input({ + text, + value, + onChange, +}: { + text: string; + value: string; + onChange: React.ChangeEventHandlerBE 파트장 투표 결과
+BE 파트장 투표
+데모데이 투표 결과
+데모데이 투표
+FE 파트장 투표 결과
+FE 파트장 투표
+로그인
+파트장/데모데이 투표
+파트장 투표
+회원가입
+{name}님 환영합니당
; +} diff --git a/vote/src/components/Logout.tsx b/vote/src/components/Logout.tsx new file mode 100644 index 0000000..3ad7c7f --- /dev/null +++ b/vote/src/components/Logout.tsx @@ -0,0 +1,31 @@ +"use client"; +import React from "react"; +import { logout_btn } from "./styles/header.css"; +import { useMutation } from "@tanstack/react-query"; +import { logout } from "@/SigninLogin/api/logout"; +import { useRouter } from "next/navigation"; + +export default function Logout() { + const router = useRouter(); + + const mutation = useMutation({ + mutationFn: logout, + onSuccess: async () => { + console.log("성공"); + router.push("/login"); + }, + onError: (error) => { + console.error(error); + }, + }); + + function handleLogout() { + mutation.mutate(); + } + + return ( + + ); +} diff --git a/vote/src/components/styles/header.css.ts b/vote/src/components/styles/header.css.ts new file mode 100644 index 0000000..24a30fd --- /dev/null +++ b/vote/src/components/styles/header.css.ts @@ -0,0 +1,48 @@ +import { pretendardSemiBold } from "@/styles/font.css"; +import { style } from "@vanilla-extract/css"; + +export const headerContainer = style([ + pretendardSemiBold, + { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + padding: "2rem 4rem", + boxSizing: "border-box", + + width: "100%", + } +]); + +export const logined_haeder = style({ + display: "flex", + fontSize: "2rem", +}); + +export const logout_btn = style( +{ + display: "flex", + justifyContent: "center", + alignItems: "center", + width: "11rem", + height: "4.4rem", + + color: "#384084", + + cursor: "pointer", + fontSize: "1.8rem", + border: "2px solid #384084", + borderRadius: "20px", +}); + +export const logined_container = style([ + pretendardSemiBold, + { + display: "flex", + alignItems: "center", + width: "35rem", + height: "4.4rem", + + gap: "2rem", + }, +]); diff --git a/vote/src/styles/font.css.ts b/vote/src/styles/font.css.ts new file mode 100644 index 0000000..0ca7db9 --- /dev/null +++ b/vote/src/styles/font.css.ts @@ -0,0 +1,12 @@ +import { fontFace, style } from "@vanilla-extract/css"; + +export const pretendardSemi = fontFace([ + { + fontWeight: 600, + src: "url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-SemiBold.woff') format('woff')", + }, +]); + +export const pretendardSemiBold = style({ + fontFamily: pretendardSemi, +}); diff --git a/vote/src/styles/global.css.ts b/vote/src/styles/global.css.ts new file mode 100644 index 0000000..73a62c8 --- /dev/null +++ b/vote/src/styles/global.css.ts @@ -0,0 +1,12 @@ +import { globalStyle } from "@vanilla-extract/css"; + +import "./layers.css"; +import "./reset.css"; + +globalStyle("html, body", { + width: "100vw", + height: "100vh", + margin: 0, + + fontSize: "62.5%", +}); diff --git a/vote/src/styles/headerBtn.css.ts b/vote/src/styles/headerBtn.css.ts new file mode 100644 index 0000000..22cc965 --- /dev/null +++ b/vote/src/styles/headerBtn.css.ts @@ -0,0 +1,37 @@ +import { style, styleVariants } from "@vanilla-extract/css"; + +export const headerBtn = style({ + display: "flex", + justifyContent: "center", + alignItems: "center", + + width: "12rem", + height: "4rem", + + borderRadius: "20px", +}); + +export const buttonVariants = styleVariants({ + login: { + border: "1.5px solid #384084", + color: "#384084", + backgroundColor: "white", + fontSize: "1.8rem", + }, + signin: { + backgroundColor: "#384084", + color: "white", + border: "1.5px solid white", + fontSize: "1.8rem", + }, +}); + +export const buttons = style({ + display: "flex", + justifyContent: "center", + alignItems: "center", + + gap: "2rem", + + width: "fit-content", +}); diff --git a/vote/src/styles/layers.css.ts b/vote/src/styles/layers.css.ts new file mode 100644 index 0000000..88cb622 --- /dev/null +++ b/vote/src/styles/layers.css.ts @@ -0,0 +1,4 @@ +import { layer } from "@vanilla-extract/css"; + +export const reset = layer("reset"); +export const components = layer("components"); diff --git a/vote/src/styles/reset.css.ts b/vote/src/styles/reset.css.ts new file mode 100644 index 0000000..00138de --- /dev/null +++ b/vote/src/styles/reset.css.ts @@ -0,0 +1,213 @@ +import { globalStyle } from "@vanilla-extract/css"; + +import * as layers from "./layers.css"; + +globalStyle( + "*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *))", + { + "@layer": { + [layers.reset]: { + all: "unset", + display: "revert", + }, + }, + } +); + +/** + * 기본 box-sizing border-box로 설정 + * Preferred box-sizing value + */ +globalStyle("*, *::before, *::after", { + "@layer": { + [layers.reset]: { + boxSizing: "border-box", + }, + }, +}); + +/** + * 모바일 사파리에서 가로 모드로 전환할 때 글꼴 크기가 자동으로 커지는 현상을 방지 + * Fix mobile Safari increase font-size on landscape mode + */ +globalStyle("html", { + "@layer": { + [layers.reset]: { + MozTextSizeAdjust: "none", + WebkitTextSizeAdjust: "none", + textSizeAdjust: "none", + }, + }, +}); + +/** + * a 태그와 button 태그에 pointer 재적용 + * Reapply the pointer cursor for anchor tags + */ +globalStyle("a, button", { + "@layer": { + [layers.reset]: { + cursor: "pointer", + }, + }, +}); + +/** + * 리스트 스타일 제거 (불릿/넘버) + * Remove list styles (bullets/numbers) + */ +globalStyle("ol, ul, menu, summary", { + "@layer": { + [layers.reset]: { + listStyle: "none", + }, + }, +}); + +/** + * 이미지 요소가 컨테이너의 크기를 넘지 않도록 설정 + * For images to not be able to exceed their container + */ +globalStyle("img", { + "@layer": { + [layers.reset]: { + maxInlineSize: "100%", + maxBlockSize: "100%", + }, + }, +}); + +/** + * 테이블 셀 사이의 기본 간격을 제거 + * Removes spacing between cells in tables + */ +globalStyle("table", { + "@layer": { + [layers.reset]: { + borderCollapse: "collapse", + }, + }, +}); + +/** + * 사파리 브라우저에서 user-select:none을 적용할 때 발생할 수 있는 문제를 방지하고, 텍스트 입력 요소가 정상적으로 동작 + * Safari - solving issue when using user-select:none on the text input + * doesn't working + */ +globalStyle("input, textarea", { + "@layer": { + [layers.reset]: { + WebkitUserSelect: "auto", + }, + }, +}); + +/** + * 사파리 브라우저에서 textarea 요소의 white-space 속성을 기본값으로 되돌리기 위해 사용됩니다. + * Revert the 'white-space' property for textarea elements on Safari + */ +globalStyle("textarea", { + "@layer": { + [layers.reset]: { + whiteSpace: "revert", + }, + }, +}); + +/** + * meter 태그 사용을 위한 최소한의 스타일 설정 + * Minimum style to allow to style meter element + */ +globalStyle("meter", { + "@layer": { + [layers.reset]: { + WebkitAppearance: "revert", + appearance: "revert", + }, + }, +}); + +/** + * pre 태그의 브라우저 기본 스타일을 복원, box-sizing border-box 설정 + * Preformatted text - use only for this feature + */ +globalStyle(":where(pre)", { + "@layer": { + [layers.reset]: { + all: "revert", + boxSizing: "border-box", + }, + }, +}); + +/** + * input의 placeholder의 컬러를 지정하지 않음 + * Reset default text opacity of input placeholder + */ +globalStyle("::placeholder", { + "@layer": { + [layers.reset]: { + color: "unset", + }, + }, +}); + +/** + * hidden 속성을 가진 요소의 display none을 적용 + * Fix the feature of 'hidden' attribute. display:revert; revert to element + * instead of attribute + */ +globalStyle(":where([hidden])", { + "@layer": { + [layers.reset]: { + display: "none", + }, + }, +}); + +/** + * contenteditable 요소의 편집 기능이 제대로 동작하도록 설정 + * Revert for bug in Chromium browsers + * + * - Fix for the content editable attribute will work properly. + * - Webkit-user-select: auto; added for Safari in case of using user-select:none + * on wrapper element + */ +globalStyle(':where([contenteditable]:not([contenteditable="false"]))', { + // @ts-expect-error: -webkit-line-break is a non-standard property + "@layer": { + [layers.reset]: { + MozUserModify: "read-write", + WebkitUserModify: "read-write", + overflowWrap: "break-word", + WebkitLineBreak: "after-white-space", + WebkitUserSelect: "auto", + }, + }, +}); + +/** + * draggable 속성이 있는 요소에서 드래그 기능이 제대로 작동하도록 설정 + * Apply back the draggable feature - exist only in Chromium and Safari + */ +globalStyle(':where([draggable="true"])', { + "@layer": { + [layers.reset]: { + // @ts-expect-error: -webkit-user-drag is a non-standard property + WebkitUserDrag: "element", + }, + }, +}); + +/** + * modal의 기본 동작 복원 + * Revert Modal native behavior + */ +globalStyle(":where(dialog:modal)", { + "@layer": { + [layers.reset]: { + all: "revert", + boxSizing: "border-box", + }, + }, +}); diff --git a/vote/src/utils/HeaderIsOrNot.tsx b/vote/src/utils/HeaderIsOrNot.tsx new file mode 100644 index 0000000..88908e0 --- /dev/null +++ b/vote/src/utils/HeaderIsOrNot.tsx @@ -0,0 +1,13 @@ +"use client"; + +import { usePathname } from "next/navigation"; +import Header from "@/components/Header"; + +export default function HeaderIsOrNot() { + const pathname = usePathname(); + + return pathname.startsWith("/login") || + pathname.startsWith("/signin") ? null : ( +