chacha-FE-lecture1,2,3

2024-summer-FE-seminar/packages/web/src/app/chacha/my/clubs/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import React from "react";
+
+import ClubListGrid from "@sparcs-clubs/web/features/clubs/components/ClubListGrid";
+import FlexWrapper from "@sparcs-clubs/web/common/components/FlexWrapper";
+import FoldableSectionTitle from "@sparcs-clubs/web/common/components/FoldableSectionTitle";
+import PageHead from "@sparcs-clubs/web/common/components/PageHead";
+import mockMyClubList from "@sparcs-clubs/web/features/my/clubs/service/_mock/mockMyClubList";
+
+const ChachaMyClubs = () => (
+  <FlexWrapper direction="column" gap={60}>
+    <PageHead
+      items={[
+        { name: "마이페이지", path: "/my" },
+        { name: "나의 동아리", path: "/my/clubs" },
+      ]}
+      title="나의 동아리"
+    />
+    {mockMyClubList.semesters.map(e => (
+      <React.Fragment key={e.id}>
+        <FoldableSectionTitle title={e.name} />
+        <ClubListGrid clubList={e.clubs} />
+      </React.Fragment>
+    ))}
+  </FlexWrapper>
+);
+
+export default ChachaMyClubs;

2024-summer-FE-seminar/packages/web/src/app/chacha/my/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import React from "react";
+
+import styled from "styled-components";
+
+import PageHead from "@sparcs-clubs/web/common/components/PageHead";
+import ChachaMyInfoFrame from "@sparcs-clubs/web/features/my/frame/_atomic/ChachaMyInfoFrame";
+import ChachaMyClubFrame from "@sparcs-clubs/web/features/my/frame/_atomic/ChachaMyClubFrame";
+import ChachaMyServiceFrame from "@sparcs-clubs/web/features/my/frame/_atomic/ChachaMyServiceFrame";
+import FlexWrapper from "@sparcs-clubs/web/common/components/FlexWrapper";
+
+const ChachaMy = () => (
+  <FlexWrapper direction="column" gap={60}>
+    <PageHead
+      items={[{ name: "마이페이지", path: "/my" }]}
+      title="마이페이지"
+    />
+    <ChachaMyInfoFrame />
+    <ChachaMyClubFrame />
+    <ChachaMyServiceFrame />
+  </FlexWrapper>
+);
+
+export default ChachaMy;

2024-summer-FE-seminar/packages/web/src/app/chacha/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+import TextInput from "@sparcs-clubs/web/common/components/chacha/TextInput";
+import ItemNumberInput from "@sparcs-clubs/web/common/components/chacha/ItemNumberInput";
+
+import FlexWrapper from "@sparcs-clubs/web/common/components/FlexWrapper";
+
+const Chacha = () => {
+  const [inputText, setInputText] = useState("");
+  const [inputNumber, setInputNumber] = useState("");
+
+  useEffect(() => {
+    setInputText(inputText);
+  }, [inputText]);
+  return (
+    <FlexWrapper direction="column" gap={16}>
+      <TextInput disabled inputValue={inputText} setInputValue={setInputText} />
+      <TextInput
+        disabled={false}
+        placeholder="내용"
+        inputValue={inputText}
+        setInputValue={setInputText}
+      />
+      <TextInput
+        disabled={false}
+        placeholder="내용"
+        errorMessage="에러 메세지"
+        inputValue={inputText}
+        setInputValue={setInputText}
+      />
+      <ItemNumberInput
+        disabled={false}
+        placeholder="내용"
+        label="Label"
+        input={inputNumber}
+        setInputValue={setInputNumber}
+      />
+    </FlexWrapper>
+  );
+};
+
+export default Chacha;

2024-summer-FE-seminar/packages/web/src/common/components/chacha/ItemNumberInput.tsx

@@ -0,0 +1,196 @@
+import React, { useEffect, useState } from "react";
+
+import styled from "styled-components";
+
+import Label from "../FormLabel";
+
+import FormError from "../FormError";
+
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+
+interface ItemNumberInputProps
+  extends InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
+  constraint?: number;
+  disabled: boolean;
+  error?: boolean;
+  placeholder: string;
+  label: string;
+  input?: string;
+  setInputValue?: (inputValue: string) => void;
+}
+
+const ItemInputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const ItemLabel = styled.div`
+  display: flex;
+  padding: 0px 2px;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+`;
+
+const Icon = styled(InfoOutlinedIcon)`
+  color: ${({ theme }) => theme.colors.GRAY[300]};
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+`;
+
+const ItemInputInner = styled.div`
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+`;
+
+const ItemInput = styled.input`
+  width: 100%;
+  border-radius: 4px;
+  padding: 8px 12px;
+  border: 1px solid ${({ theme }) => theme.colors.GRAY[200]};
+  background: ${({ theme }) => theme.colors.WHITE};
+  z-index: 0;
+  font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
+  font-size: 16px;
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
+  line-height: 20px;
+  &:focus {
+    outline: none;
+    border: 1px solid
+      ${({ theme, error, disabled }) =>
+        (!error && !disabled && theme.colors.PRIMARY) ||
+        (error && !disabled && theme.colors.RED[600])};
+  }
+  &:hover:not(:focus) {
+    border: 1px solid
+      ${({ theme, disabled, error }) =>
+        disabled
+          ? !error && theme.colors.GRAY[200]
+          : (!error && theme.colors.GRAY[300]) ||
+            (error && theme.colors.RED[600])};
+  }
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.GRAY[200]};
+  }
+  ${({ disabled, theme }) =>
+    `background-color: ${disabled ? theme.colors.GRAY[100] : theme.colors.WHITE};
+    color: ${disabled ? theme.colors.GRAY[300] : theme.colors.BLACK};`}
+
+  ${({ error, theme }) =>
+    error
+      ? `border: 1px solid ${theme.colors.RED[600]};
+    color: ${theme.colors.RED[600]}`
+      : ``};
+`;
+
+const ItemInputConstraint = styled.div`
+  display: flex;
+  white-space: nowrap;
+  position: relative;
+  right: 60px;
+  color: ${({ theme }) => theme.colors.GRAY[300]};
+  font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
+  font-size: 16px;
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
+  line-height: 20px;
+  z-index: 1;
+`;
+
+const ItemNumberInput: React.FC<ItemNumberInputProps> = ({
+  constraint = 99,
+  disabled,
+  error = false,
+  placeholder,
+  label,
+  input = "",
+  setInputValue = () => {},
+}) => {
+  const [errorMessage, setErrorMessage] = useState("");
+  const [shownValue, setShownValue] = useState("");
+
+  useEffect(() => {
+    if (input === "") return;
+    setShownValue(`${input}개`);
+  }, [input, shownValue]);
+  // useEffect(() => {
+  //   const digitTest = /^\d*$/g.test(input);
+  //   console.log(input);
+  //   const inputNumber = parseInt(input);
+
+  //   if (input === "") {
+  //     setErrorMessage("");
+  //   } else if (!digitTest) {
+  //     setErrorMessage("숫자만 입력 가능합니다");
+  //     console.log(digitTest);
+  //   } else if (inputNumber > constraint) {
+  //     setErrorMessage("신청 가능 갯수를 초과했습니다");
+  //     console.log(constraint);
+  //     console.log(inputNumber);
+  //   } else {
+  //     setErrorMessage("");
+  //   }
+  //   setInputValue(input);
+  // }, [input, constraint]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setShownValue(input);
+    const value = e.target.value.replace("개", "");
+    const digitTest = /^\d*$/g.test(value);
+
+    const inputValue = e.target.value.replace(/[^0-9]/g, "");
+    console.log(e.target.value);
+    const inputNumber = parseInt(inputValue);
+
+    if (value === "") {
+      setErrorMessage("");
+      setInputValue("");
+    } else if (!digitTest) {
+      setShownValue("");
+      setInputValue("");
+      setErrorMessage("숫자만 입력 가능합니다");
+    } else if (inputNumber > constraint) {
+      setErrorMessage("신청 가능 갯수를 초과했습니다");
+      setInputValue(inputValue);
+      setShownValue(`${inputValue}개`);
+    } else {
+      setErrorMessage("");
+      setInputValue(inputValue);
+      setShownValue(`${inputValue}개`);
+    }
+  };
+
+  // const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+  //   const inputValue = e.target.value.replace("개", "");
+  //   console.log(input);
+  //   setInputValue(inputValue);
+  // };
+
+  return (
+    <ItemInputWrapper>
+      <ItemLabel>
+        {label && <Label>{label}</Label>}
+        <Icon style={{ fontSize: "16px" }} />
+      </ItemLabel>
+      <ItemInputInner error={!!errorMessage}>
+        <ItemInput
+          placeholder={placeholder}
+          disabled={disabled}
+          placeholder={placeholder}
+          value={shownValue}
+          onChange={handleChange}
+          error={!!errorMessage}
+        />
+        <ItemInputConstraint>/ {constraint}개</ItemInputConstraint>
+      </ItemInputInner>
+      {errorMessage && <FormError>{errorMessage}</FormError>}
+    </ItemInputWrapper>
+  );
+};
+
+export default ItemNumberInput;

2024-summer-FE-seminar/packages/web/src/common/components/chacha/TextInput.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React, { ChangeEvent, InputHTMLAttributes, useEffect } from "react";
+
+import styled from "styled-components";
+
+import FormError from "../FormError";
+
+import Typography from "@sparcs-clubs/web/common/components/Typography";
+
+interface TextInputProps
+  extends InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
+  // 의미 : HTML 요소의 기본 속성을 쓸 수 있음.
+  disabled: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  placeholder: string;
+  inputValue?: string;
+  onValueChange?: (inputValue: string) => void;
+}
+
+const TextInputInner = styled.input`
+  display: flex;
+  width: 300px;
+  padding: 8px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 4px;
+  border: 1px solid ${({ theme }) => theme.colors.GRAY[200]};
+  background: ${({ theme }) => theme.colors.WHITE};
+  &:focus {
+    outline: none;
+    border: 1px solid
+      ${({ theme, error, disabled }) =>
+        (!error && !disabled && theme.colors.PRIMARY) ||
+        (error && !disabled && theme.colors.RED[600])};
+  }
+  &:hover:not(:focus) {
+    border: 1px solid
+      ${({ theme, disabled, error }) =>
+        disabled
+          ? !error && theme.colors.GRAY[200]
+          : (!error && theme.colors.GRAY[300]) ||
+            (error && theme.colors.RED[600])};
+  }
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.GRAY[200]};
+  }
+  ${({ disabled, theme }) =>
+    `background-color: ${disabled ? theme.colors.GRAY[100] : theme.colors.WHITE};
+    color: ${disabled ? theme.colors.GRAY[300] : theme.colors.BLACK};`}
+
+  ${({ error, theme }) =>
+    error ? `border: 1px solid ${theme.colors.RED[600]};` : ``}
+
+  font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
+  font-size: 16px;
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
+  line-height: 20px;
+`;
+
+const TextInputWrapper = styled.div`
+  display: flex;
+  width: 300px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const TextInput: React.FC<TextInputProps> = ({
+  disabled,
+  error = false,
+  errorMessage = "",
+  placeholder,
+  inputValue = "", // 의미: api 연결 시 필요, 모듈화 목적?
+  setInputValue = () => {}, // 의미: 필요한 함수 대입 사용.
+}) => {
+  // 코드 참고
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const input = e.target.value;
+    setInputValue(input);
+  };
+
+  return (
+    <TextInputWrapper>
+      <TextInputInner
+        disabled={disabled}
+        error={!!errorMessage}
+        placeholder={placeholder}
+        value={inputValue}
+        onChange={handleChange}
+      />
+      {errorMessage && <FormError>{errorMessage}</FormError>}
+    </TextInputWrapper>
+  );
+};
+export default TextInput;