Merge pull request #48 from academic-relations/47-impl-semester-doc-s…

…elect-component Impl Semester component And DocType component
academic-relations · Jan 2, 2025 · a2f1e12 · a2f1e12
2 parents 30c99c8 + 4631b7c
commit a2f1e12
Show file tree

Hide file tree

Showing 16 changed files with 1,204 additions and 28 deletions.
diff --git a/packages/web/src/common/components/FormError.tsx b/packages/web/src/common/components/FormError.tsx
@@ -0,0 +1,24 @@
+// FormError.tsx
+import React from "react";
+
+import styled from "styled-components";
+
+const StyledErrorMessage = styled.span`
+  display: block;
+  padding: 0px 0px 0px 2px;
+  color: ${({ theme }) => theme.colors.RED[700]};
+  font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
+  font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM};
+  font-size: 12px;
+  line-height: 16px;
+`;
+
+interface FormErrorProps {
+  children: React.ReactNode;
+}
+
+const FormError: React.FC<FormErrorProps> = ({ children }) => (
+  <StyledErrorMessage>{children}</StyledErrorMessage>
+);
+
+export default FormError;
diff --git a/packages/web/src/common/components/FormLabel.tsx b/packages/web/src/common/components/FormLabel.tsx
@@ -0,0 +1,26 @@
+// Label.tsx
+import React from "react";
+
+import styled from "styled-components";
+
+const StyledLabel = styled.label`
+  display: block;
+  margin: 0px 2px 0px 2px;
+  gap: 10px;
+  font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
+  font-size: 16px;
+  font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM};
+  color: ${({ theme }) => theme.colors.BLACK};
+  line-height: 20px;
+  text-align: left;
+`;
+
+interface LabelProps {
+  children: React.ReactNode;
+}
+
+const Label: React.FC<LabelProps> = ({ children }) => (
+  <StyledLabel>{children}</StyledLabel>
+);
+
+export default Label;
diff --git a/packages/web/src/common/components/Radio/RadioButton.tsx b/packages/web/src/common/components/Radio/RadioButton.tsx
@@ -8,16 +8,11 @@ const RadioButton = ({ checked = false }: { checked: boolean }) => (
     xmlns="http://www.w3.org/2000/svg"
     width="16"
     height="16"
-    viewBox="0 0 16 16"
+    viewBox="0 0 17 17" // CHACHA: 디자인은 16 16 인데 자꾸 원 끝에가 묘하게 잘려서..
     fill="none"
   >
-    <rect
-      width="16"
-      height="16"
-      rx="8"
-      fill={checked ? colors.PRIMARY : colors.GRAY[200]}
-    />
-    <rect x="4" y="4" width="8" height="8" rx="4" fill={colors.WHITE} />
+    <circle cx="8" cy="8" r="7" stroke={colors.GREEN[600]} strokeWidth="2" />
+    {checked ? <circle cx="8" cy="8" r="4" fill={colors.GREEN[800]} /> : null}
   </svg>
 );
 

diff --git a/packages/web/src/common/components/Radio/RadioOption.tsx b/packages/web/src/common/components/Radio/RadioOption.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import isPropValid from "@emotion/is-prop-valid";
 import styled from "styled-components";
 import RadioButton from "./RadioButton";
 
@@ -9,13 +10,17 @@ export interface RadioOptionProps<T extends string> {
   checked?: boolean;
   children: React.ReactNode;
   onClick?: (value: T) => void;
+  width?: string;
 }
 
-const RadioOptionInner = styled.div`
+const RadioOptionInner = styled.div.withConfig({
+  shouldForwardProp: prop => isPropValid(prop),
+})<{ width?: string }>`
   display: flex;
   padding-left: 2px;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
+  width: ${({ width }) => width ?? ""};
   color: ${({ theme }) => theme.colors.BLACK};
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
   font-size: 16px;
@@ -34,8 +39,9 @@ const RadioOption = <T extends string>({
   checked = false,
   children,
   onClick = () => {},
+  width = "",
 }: RadioOptionProps<T>) => (
-  <RadioOptionInner onClick={() => onClick(value)}>
+  <RadioOptionInner onClick={() => onClick(value)} width={width}>
     <RadioButton checked={checked} />
     {children}
   </RadioOptionInner>

diff --git a/packages/web/src/common/components/Radio/index.tsx b/packages/web/src/common/components/Radio/index.tsx
@@ -8,8 +8,10 @@ type RadioProps<T extends string> = {
   children: ReactElement<RadioOptionProps<T>>[];
   value: T;
   onChange: (value: T) => void;
-  direction?: "row" | "column";
-  gap?: string;
+  rows?: number;
+  columns?: number;
+  rg?: string;
+  cg?: string;
 };
 
 function isRadioOptionElement<T extends string>(
@@ -19,20 +21,28 @@ function isRadioOptionElement<T extends string>(
 }
 
 const StyledRadioInner = styled.div<{
-  direction: "row" | "column";
-  gap: string;
+  rows?: number;
+  columns?: number;
+  rg: string;
+  cg: string;
 }>`
-  display: flex;
-  flex-direction: ${({ direction }) => direction};
-  gap: ${({ gap }) => gap};
+  display: grid;
+  grid-template-rows: ${({ rows }) =>
+    rows !== 1 ? `repeat(${rows}, auto)` : "auto"};
+  grid-template-columns: ${({ columns }) =>
+    columns !== 1 ? `repeat(${columns}, auto)` : "auto"};
+  row-gap: ${({ rg, rows }) => (rows !== 1 ? rg : "0px")};
+  column-gap: ${({ cg, columns }) => (columns !== 1 ? cg : "0px")};
 `;
 
 const Radio = <T extends string>({
-  direction = "column",
-  gap = "12px",
   value,
   onChange,
   children,
+  rows = 1,
+  columns = children.length,
+  rg = "12px",
+  cg = "12px",
 }: RadioProps<T>) => {
   const handleChange = (newValue: T) => {
     if (newValue !== value) {
@@ -41,7 +51,7 @@ const Radio = <T extends string>({
   };
 
   return (
-    <StyledRadioInner direction={direction} gap={gap}>
+    <StyledRadioInner rows={rows} columns={columns} rg={rg} cg={cg}>
       {React.Children.map(children, child => {
         if (isRadioOptionElement<T>(child)) {
           return cloneElement(child, {

diff --git a/packages/web/src/common/components/Select/Dropdown.tsx b/packages/web/src/common/components/Select/Dropdown.tsx
@@ -3,19 +3,30 @@ import styled from "styled-components";
 
 const Dropdown = styled.div.withConfig({
   shouldForwardProp: prop => isPropValid(prop),
-})<{ marginTop?: number; maxContent?: boolean }>`
+})<{
+  marginTop?: number;
+  maxContent?: boolean;
+  onlyDropdown?: boolean;
+  height?: number;
+}>`
   /* TODO: marginTop magic number인데 좀 더 깔끔하게 바꾸는 방법 */
-  position: absolute;
+  position: ${({ onlyDropdown }) => (onlyDropdown ? "relative" : "absolute")};
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
   width: ${({ maxContent }) => (maxContent ? "max-content" : "100%")};
-  margin-top: ${({ marginTop }) => marginTop || 0}px;
+  height: ${({ height }) => (height ? `${height}px` : "fit-content")};
+  margin-top: ${({ marginTop, onlyDropdown }) =>
+    onlyDropdown ? 0 : marginTop || 0}px;
   padding: 8px;
-  border: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
+  border: 1px solid ${({ theme }) => theme.colors.GREEN[300]};
   border-radius: 4px;
   background-color: ${({ theme }) => theme.colors.WHITE};
-  gap: 4px;
-  z-index: 1000; // Ensure the dropdown appears above other content
+  gap: 8px;
+  ${({ onlyDropdown }) =>
+    onlyDropdown
+      ? ""
+      : "z-index: 1000;"}; // Ensure the dropdown appears above other content
 
   max-height: 200px;
   overflow-y: auto;

diff --git a/packages/web/src/common/components/Select/SelectOption.tsx b/packages/web/src/common/components/Select/SelectOption.tsx
@@ -0,0 +1,34 @@
+import isPropValid from "@emotion/is-prop-valid";
+import styled, { css } from "styled-components";
+
+const SelectOption = styled.div.withConfig({
+  shouldForwardProp: prop => isPropValid(prop),
+})<{ selectable?: boolean; selected?: boolean }>`
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  gap: 10px;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
+  color: ${({ theme, selectable }) =>
+    selectable ? theme.colors.BLACK : theme.colors.GRAY[400]};
+  background-color: ${({ theme, selected }) =>
+    selected !== undefined && selected
+      ? theme.colors.GREEN[100]
+      : theme.colors.WHITE};
+  ${({ selectable }) =>
+    selectable &&
+    css`
+      &:hover {
+        background-color: ${({ theme }) => theme.colors.GRAY[100]};
+      }
+    `}
+  cursor: ${({ selectable }) => (selectable ? `pointer` : null)};
+`;
+
+export default SelectOption;
diff --git a/packages/web/src/common/components/Select/_atomic/NoOption.tsx b/packages/web/src/common/components/Select/_atomic/NoOption.tsx
@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+const NoOption = styled.div`
+  padding: 4px 12px;
+  gap: 10px;
+  font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
+  text-align: center;
+  pointer-events: none;
+  color: ${({ theme }) => theme.colors.GRAY[400]};
+`;
+
+export default NoOption;