[FEATURE] 공홈 어드민 홈 페이지 퍼블리싱

next.config.js

@@ -17,6 +17,7 @@ const nextConfig = {
     return config;
   },
   images: {
+    unoptimized: true,
     remotePatterns: [
       {
         protocol: 'https',

src/components/common/Layout/style.ts

@@ -7,9 +7,9 @@ export const StLayout = styled.div`
     width: 100%;
     padding: 88px 0 0 212px;
     main {
-      max-width: 98rem;
       width: 100%;
-      margin: 0 auto;
+
+      padding: 0px 49px 0px 124px;
     }
   }
 `;

src/components/org/OrgAdmin/home/ButtonSection.tsx

@@ -0,0 +1,43 @@
+import { TextField } from '@sopt-makers/ui';
+
+import LiveAppliedButton from '@/components/org/OrgAdmin/home/LiveAppliedButton';
+import {
+  StButtonFormContainer,
+  StContentContainer,
+  StFirstSectionContainer,
+  StTitle,
+} from '@/components/org/OrgAdmin/home/style';
+
+const ButtonSection = () => {
+  return (
+    <StFirstSectionContainer>
+      <StTitle>메인 버튼</StTitle>
+
+      <StContentContainer>
+        <StButtonFormContainer>
+          <TextField
+            labelText="문구"
+            placeholder="ex. 00기 YB 지원하기"
+            value={''}
+          />
+          <TextField
+            labelText="키 컬러"
+            descriptionText="호버 시, 하이라이트는 키컬러로 보여요."
+            placeholder="ex. ffffff"
+            value={''}
+          />
+          <TextField
+            labelText="서브 컬러"
+            descriptionText="호버하지 않았을 때, 버튼은 서브 컬러로 보여요."
+            placeholder="ex. ffffff"
+            value={''}
+          />
+        </StButtonFormContainer>
+
+        <LiveAppliedButton keyColor="#3c92ff" subColor="#8fc0ff" />
+      </StContentContainer>
+    </StFirstSectionContainer>
+  );
+};
+
+export default ButtonSection;

src/components/org/OrgAdmin/home/HomeSection.tsx

@@ -0,0 +1,18 @@
+import ButtonSection from '@/components/org/OrgAdmin/home/ButtonSection';
+import NewsSection from '@/components/org/OrgAdmin/home/NewsSection';
+import PartIntroSection from '@/components/org/OrgAdmin/home/PartIntroSection';
+import { StContainer, StWrapper } from '@/components/org/OrgAdmin/home/style';
+
+const HomeSection = () => {
+  return (
+    <StContainer>
+      <StWrapper>
+        <ButtonSection />
+        <PartIntroSection />
+      </StWrapper>
+      <NewsSection />
+    </StContainer>
+  );
+};
+
+export default HomeSection;

src/components/org/OrgAdmin/home/ImageInput.tsx

@@ -0,0 +1,81 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fontsObject } from '@sopt-makers/fonts';
+import { HTMLAttributes } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import MyDropZone from '../MyDropzone';
+
+interface ImageInputProps extends HTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
+}
+
+const ImageInput = ({ label, description }: ImageInputProps) => {
+  const method = useFormContext();
+
+  return (
+    <StInputContainer>
+      <StLabel aria-labelledby={label}>
+        {label}
+        <StRequiredIcon>*</StRequiredIcon>
+      </StLabel>
+      <StDescription>{description}</StDescription>
+
+      <MyDropZone
+        method={method}
+        label="newsImage"
+        width="167px"
+        height="211px"
+      />
+    </StInputContainer>
+  );
+};
+
+export default ImageInput;
+
+const StInputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const StLabel = styled.p`
+  ${fontsObject.LABEL_3_14_SB};
+  color: ${colors.white};
+`;
+
+const StRequiredIcon = styled.span`
+  color: ${colors.secondary};
+  margin-left: 4px;
+`;
+
+const StDescription = styled.p`
+  ${fontsObject.LABEL_4_12_SB};
+  color: ${colors.gray300};
+
+  padding-bottom: 5px;
+`;
+
+const StImageLabel = styled.label`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 167px;
+  height: 211px;
+
+  border-radius: 10px;
+  background-color: ${colors.gray800};
+
+  cursor: pointer;
+
+  & > svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+
+const StImageInput = styled.input`
+  display: none;
+`;

src/components/org/OrgAdmin/home/LiveAppliedButton.tsx

@@ -0,0 +1,106 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fontsObject } from '@sopt-makers/fonts';
+
+interface LiveAppliedButtonProps {
+  keyColor: string;
+  subColor: string;
+}
+
+const LiveAppliedButton = ({ keyColor, subColor }: LiveAppliedButtonProps) => {
+  return (
+    <StContainer>
+      <StExampleText>
+        <StExample>&lt;예시&gt;</StExample>
+        키컬러 #ffffff / 서브컬러 #ffffff
+      </StExampleText>
+      <StOrgButtonWrapper keyColor={keyColor} subColor={subColor}>
+        35기 YB 지원하기
+      </StOrgButtonWrapper>
+
+      <StList>
+        <StItem>
+          · 모집기간이 종료되면, &apos;모집 알림 신청하기&apos;로 문구를
+          변경해주세요.
+        </StItem>
+        <StItem>
+          · 버튼 설정 내용은 메인 페이지 상단, 하단 버튼 모두에 반영돼요.
+        </StItem>
+      </StList>
+    </StContainer>
+  );
+};
+
+export default LiveAppliedButton;
+
+export const BackgroundMove = keyframes`
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+`;
+
+export const StContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+`;
+
+export const StExampleText = styled.p`
+  ${fontsObject.BODY_3_14_M};
+  color: ${colors.gray200};
+`;
+
+export const StExample = styled.span`
+  ${fontsObject.LABEL_3_14_SB};
+  color: ${colors.gray10};
+
+  padding-right: 10px;
+`;
+
+export const StOrgButtonWrapper = styled.button<{
+  keyColor: string;
+  subColor: string;
+}>`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 62.01px;
+
+  width: 176px;
+
+  background: linear-gradient(
+    274deg,
+    ${(props) => props.keyColor},
+    ${(props) => props.subColor},
+    ${(props) => props.subColor}
+  );
+  background-size: 200% 200%;
+  animation: ${BackgroundMove} 1.8s ease-out infinite alternate;
+
+  padding: 9px 18px;
+
+  color: ${colors.gray800};
+  text-align: center;
+
+  ${fontsObject.BODY_1_18_M};
+  font-size: 17.54px;
+  font-weight: 600;
+  line-height: 26.31px;
+
+  &:hover {
+    background: ${(props) => props.subColor};
+  }
+`;
+
+export const StList = styled.ul`
+  margin-top: 4px;
+`;
+
+export const StItem = styled.li`
+  ${fontsObject.BODY_3_14_M};
+  color: ${colors.gray200};
+`;

src/components/org/OrgAdmin/home/Modal.style.ts

@@ -0,0 +1,76 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fontsObject } from '@sopt-makers/fonts';
+import { Button } from '@sopt-makers/ui';
+
+export const StModalContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  padding: 24px;
+
+  & > h2 {
+    ${fontsObject.TITLE_4_20_SB};
+    color: ${colors.gray10};
+  }
+
+  & > p {
+    ${fontsObject.BODY_2_16_R};
+    color: ${colors.gray100};
+  }
+`;
+
+export const StModalBtnWrapper = styled.div`
+  place-self: end;
+
+  display: flex;
+  gap: 12px;
+
+  padding-top: 24px;
+`;
+
+export const StCancelButton = styled(Button)`
+  background-color: ${colors.gray600};
+  color: ${colors.white};
+
+  &:hover {
+    color: ${colors.black};
+  }
+`;
+
+export const StActionButton = styled(Button)<{ btnType: 'add' | 'delete' }>`
+  color: ${(props) => (props.btnType === 'add' ? colors.black : colors.white)};
+
+  background-color: ${(props) =>
+    props.btnType === 'add' ? colors.white : colors.error};
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+
+export const StAddButton = styled(Button)`
+  background-color: ${colors.white};
+  color: ${colors.black};
+`;
+
+export const StAddModalContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+
+  width: 500px;
+
+  padding: 22px 32px 43px 32px;
+
+  background-color: ${colors.gray900};
+  border-radius: 12px;
+`;
+
+export const StAddModalBtnWrapper = styled.div`
+  place-self: end;
+
+  display: flex;
+  gap: 12px;
+`;