+
Upload your Image !
+
closeFormModal()} className="modal__close">
+ X
+
+
+ {
+ setImageUploadPayload({
+ ...imageUploadPayload,
+ title: event.target.value,
+ });
+ }}
+ />
+ {
+ setImageUploadPayload({
+ ...imageUploadPayload,
+ username: event.target.value,
+ });
+ }}
+ />
+
+
+
+
+
+
+
+ );
+};
+
+export default NoticeUpdatePage;
diff --git a/src/pages/company/noticePage/NoticeWritePage.tsx b/src/pages/company/noticePage/NoticeWritePage.tsx
new file mode 100644
index 00000000..a5646789
--- /dev/null
+++ b/src/pages/company/noticePage/NoticeWritePage.tsx
@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { storage, db } from '../../../firebase';
+import { doc, addDoc, collection, updateDoc } from 'firebase/firestore';
+import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
+import { useSelector } from 'react-redux';
+
+import '@scss/components/writePage/writePage.scss';
+
+const NoticeWritePage = () => {
+ const [title, setTitle] = useState
('');
+ const [file, setFile] = useState(null);
+ const [content, setContent] = useState();
+ const userEmail = useSelector((state: State) => state.loginUpdate.email);
+ const [btnDisabled, setBtnDisabled] = useState(false);
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ try {
+ setBtnDisabled(true);
+ if (file !== null) {
+ const noticeRef = ref(storage, `images/notice/${new Date().getTime() + file.name}`);
+ const snapshot = await uploadBytes(noticeRef, file);
+ const imgUrl = await getDownloadURL(snapshot.ref);
+ const data = {
+ title,
+ content,
+ time: new Date().toLocaleString(),
+ userEmail,
+ url: imgUrl,
+ number: new Date().getTime(),
+ };
+
+ await addDoc(collection(db, 'notice'), data).then(item => {
+ const docRef = doc(db, 'notice', item.id);
+ updateDoc(docRef, {
+ id: item.id,
+ });
+ alert('์ฌ์ง ๋ฑ๋ก์ด ์๋ฃ ๋์์ต๋๋ค.');
+ });
+ } else {
+ const data = {
+ title,
+ content,
+ time: new Date().toLocaleString(),
+ userEmail,
+ url: null,
+ number: new Date().getTime(),
+ };
+ await addDoc(collection(db, 'notice'), data).then(item => {
+ const docRef = doc(db, 'notice', item.id);
+ updateDoc(docRef, {
+ id: item.id,
+ });
+ alert('์๋ฃ ๋์์ต๋๋ค.');
+ });
+ }
+ } catch {
+ setBtnDisabled(false);
+ console.error();
+ } finally {
+ setBtnDisabled(true);
+ window.location.href = '/company/notice';
+ }
+ };
+
+ const handleTitle = (e: React.ChangeEvent) => {
+ setTitle(e.target.value);
+ };
+
+ const handleContent = (e: React.ChangeEvent) => {
+ setContent(e.target.value);
+ };
+
+ const handleFile = (e: React.ChangeEvent) => {
+ setFile(e.target.files && e.target.files[0]);
+ };
+
+ return (
+
+ );
+};
+
+export default NoticeWritePage;
+
+interface login {
+ email: string;
+}
+
+interface State {
+ loginUpdate: login;
+}
diff --git a/src/pages/project/ProjectDetailPage.tsx b/src/pages/project/ProjectDetailPage.tsx
new file mode 100644
index 00000000..fbe032d4
--- /dev/null
+++ b/src/pages/project/ProjectDetailPage.tsx
@@ -0,0 +1,96 @@
+import { doc, onSnapshot } from 'firebase/firestore';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { projectCollection } from '../../firebase';
+import { Viewer } from '@toast-ui/react-editor';
+import { MyDocumentData } from './ProjectListPage';
+
+import '@scss/projectDetailPage.scss';
+
+const ProjectDetail = (): JSX.Element => {
+ const navigate = useNavigate();
+ const { id } = useParams();
+ const ref = doc(projectCollection, id);
+ const [isLoading, setIsLoading] = useState(true);
+ const [data, setData] = useState(null);
+
+ useEffect(() => {
+ const unsubscribe = onSnapshot(ref, snapshot => {
+ setData(snapshot.data() as DataType);
+ setIsLoading(false);
+ });
+
+ return () => {
+ unsubscribe();
+ };
+ }, [id]);
+
+ if (isLoading) {
+ return Loading...
;
+ }
+
+ if (data) {
+ const { writeDate, content, title, status } = data;
+ return (
+
+
+
+
+
+
+ ์์ฑ์ผ
+ {writeDate.toDate().toLocaleString()}
+
+
+
{title}
+
+
+
ํ๋ก์ ํธ
+
+
+
+
+
+ {queryResult.isLoading && Loading...
}
+ {queryResult.isSuccess && }
+
+
+
+
+ );
+};
+
+export default ProjectList;
+
+interface StateValue {
+ isLogin: boolean;
+ name: string;
+ email: string;
+}
+interface State {
+ loginUpdate: StateValue;
+}
+
+export interface MyDocumentData {
+ title: string;
+ status: string;
+ writeDate: firebase.firestore.Timestamp; // ๋๋ Date ํํ๋ก ๋ณํํ ํ ์ฌ์ฉ
+}
diff --git a/src/pages/project/ProjectUpdatePage.tsx b/src/pages/project/ProjectUpdatePage.tsx
new file mode 100644
index 00000000..61441701
--- /dev/null
+++ b/src/pages/project/ProjectUpdatePage.tsx
@@ -0,0 +1,177 @@
+import { Editor } from '@toast-ui/react-editor';
+import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
+import '@toast-ui/editor/dist/toastui-editor.css';
+import 'tui-color-picker/dist/tui-color-picker.css';
+import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
+import { useNavigate, useParams } from 'react-router-dom';
+import { db, projectCollection } from '../../firebase';
+import '@toast-ui/editor/dist/i18n/ko-kr';
+import { doc, onSnapshot, serverTimestamp, updateDoc } from 'firebase/firestore';
+import { useEffect, useRef, useState } from 'react';
+import { WriteType } from './ProjectWirtePage';
+
+import '@scss/projectWritePage.scss';
+
+const ProjectUpdate = () => {
+ const navigate = useNavigate();
+ const { id } = useParams();
+ const ref = doc(projectCollection, id);
+ const [isLoading, setIsLoading] = useState(true);
+ const editorRef = useRef(null);
+ const [edit, setEdit] = useState();
+ const [updateData, setUpdateData] = useState({
+ status: '',
+ title: '',
+ content: '',
+ writeDate: '',
+ });
+
+ useEffect(() => {
+ const unsubscribe = onSnapshot(ref, snapshot => {
+ const data = snapshot.data();
+ setIsLoading(false);
+ if (data) {
+ setUpdateData({
+ status: data.status,
+ title: data.title,
+ content: data.content,
+ writeDate: data.writeDate ? data.writeDate.toDate().toLocaleString() : '',
+ });
+ }
+ });
+ return () => {
+ unsubscribe();
+ };
+ }, [id]);
+
+ const cancelHandle = () => {
+ navigate('/project');
+ };
+
+ const changeHandle = (e: React.ChangeEvent) => {
+ const { name, value } = e.target;
+ setUpdateData({
+ ...updateData,
+ [name]: value,
+ });
+ };
+
+ const changeRadioHandle = (e: React.ChangeEvent) => {
+ const value = e.target.value;
+ setUpdateData({ ...updateData, status: value });
+ };
+
+ const changeEditHandler = () => {
+ if (editorRef.current) {
+ const editorValue = editorRef.current.getInstance().getMarkdown();
+ setEdit(editorValue);
+ setUpdateData({ ...updateData, content: edit });
+ }
+ };
+
+ const projectUpdate = async (id: string) => {
+ try {
+ const projectDoc = doc(db, 'project', id);
+ await updateDoc(projectDoc, { ...updateData, writeDate: serverTimestamp() });
+ return navigate('/project');
+ } catch (error) {
+ console.error('Error', error);
+ }
+ };
+
+ const submitHandle = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (id) {
+ await projectUpdate(id);
+ }
+ };
+
+ if (isLoading) {
+ return Loading...
;
+ }
+
+ if (!isLoading) {
+ return (
+
+ );
+ }
+
+ return <>;
+};
+
+export default ProjectUpdate;
+
+export interface UpdateType extends WriteType {
+ writeDate: string | null;
+}
diff --git a/src/pages/project/ProjectWirtePage.tsx b/src/pages/project/ProjectWirtePage.tsx
new file mode 100644
index 00000000..55610ccb
--- /dev/null
+++ b/src/pages/project/ProjectWirtePage.tsx
@@ -0,0 +1,126 @@
+import { useEffect, useRef, useState } from 'react';
+
+// Toast ์๋ํฐ
+import { Editor } from '@toast-ui/react-editor';
+import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
+import '@toast-ui/editor/dist/toastui-editor.css';
+import 'tui-color-picker/dist/tui-color-picker.css';
+import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
+import { useFirestoreCollectionMutation } from '@react-query-firebase/firestore';
+import { useNavigate } from 'react-router-dom';
+import { projectCollection } from '../../firebase';
+import '@toast-ui/editor/dist/i18n/ko-kr';
+import '@scss/projectWritePage.scss';
+import { serverTimestamp } from 'firebase/firestore';
+
+const ProjectWirte = (): JSX.Element => {
+ const mutation = useFirestoreCollectionMutation(projectCollection);
+ const navigate = useNavigate();
+ const editorRef = useRef(null);
+ const [writeData, setWriteData] = useState({
+ status: '',
+ title: '',
+ content: '',
+ });
+ const [btnStatus, setBtnState] = useState(true);
+ const changeHandle = (e: React.ChangeEvent) => {
+ const { name, value } = e.target;
+ setWriteData({
+ ...writeData,
+ [name]: value,
+ });
+ };
+
+ const changeEditHandler = () => {
+ const editorValue = editorRef.current?.getInstance().getMarkdown();
+ setWriteData({
+ ...writeData,
+ content: editorValue,
+ });
+ setBtnState(false);
+ };
+
+ const cancelHandle = () => {
+ navigate('/project');
+ };
+
+ useEffect(() => {
+ writeData.status && writeData.title && writeData.content ? setBtnState(false) : setBtnState(true);
+ }, [writeData]);
+
+ const submitHandle = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (writeData.title && writeData.content && writeData.status) {
+ mutation.mutate({
+ ...writeData,
+ writeDate: serverTimestamp(),
+ });
+ }
+ navigate('/project');
+ };
+ return (
+
+ );
+};
+
+export default ProjectWirte;
+
+export interface WriteType {
+ status: string;
+ title: string;
+ content?: string;
+}
diff --git a/src/scss/abstracts/_index.scss b/src/scss/abstracts/_index.scss
new file mode 100644
index 00000000..d0d5bf3b
--- /dev/null
+++ b/src/scss/abstracts/_index.scss
@@ -0,0 +1,2 @@
+@forward 'mixin';
+@forward 'variables';
diff --git a/src/scss/abstracts/_mixin.scss b/src/scss/abstracts/_mixin.scss
new file mode 100644
index 00000000..eba45a68
--- /dev/null
+++ b/src/scss/abstracts/_mixin.scss
@@ -0,0 +1,30 @@
+@use './variables' as *;
+
+@mixin a11y-hidden() {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ clip-path: polygon(0 0, 0 0, 0 0);
+}
+
+@mixin flex-center-row() {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+@mixin flex-center-col() {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+@mixin shadow() {
+ box-shadow:
+ 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss
new file mode 100644
index 00000000..5ae3ebcc
--- /dev/null
+++ b/src/scss/abstracts/_variables.scss
@@ -0,0 +1,32 @@
+// Font Size
+$font-sm: 1rem;
+$font-base: 1.6rem;
+$font-lg: 2.4rem;
+
+// Font Weight
+$font-thin: 300;
+$font-normal: 400;
+$font-bold500: 500;
+$font-bold700: 700;
+$font-bold900: 900;
+
+// Auth form
+$formWidth: 38rem;
+
+// color
+// sidebar bg: $blue
+// bg image: linear-gradient(180deg,$blue 10%,$darkBlue 100%)
+
+$blue: #4e73df;
+$darkBlue: #224abe;
+$white: #fff;
+$black: #5a5c69;
+$titleTextColor: #202020;
+
+$bg-light: #f8f9fc;
+
+$failed: #e74a3b;
+$success: #1cc88a;
+
+$gray: #3a3b45;
+$lightGray: #eaecf4;
diff --git a/src/scss/attendancePage.scss b/src/scss/attendancePage.scss
new file mode 100644
index 00000000..1636e423
--- /dev/null
+++ b/src/scss/attendancePage.scss
@@ -0,0 +1,135 @@
+@use './abstracts' as *;
+
+#attendancePage {
+ @include flex-center-col;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 1rem 4rem;
+ .attendancePage__top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ border-bottom: 1px solid $darkBlue;
+ padding: 0rem 4rem;
+ margin-bottom: 2rem;
+ box-sizing: border-box;
+ & h1 {
+ font-size: $font-lg;
+ color: $darkBlue;
+ }
+
+ &__attend-btn {
+ font-size: 2rem;
+ font-weight: $font-bold700;
+ color: #fff;
+ cursor: pointer;
+ transition: 0.5s;
+ background: $blue;
+ padding: 10px;
+ border-radius: 15px;
+ }
+ }
+ .attendance__list {
+ display: flex;
+ width: 100%;
+ padding: 1rem 0;
+ > div {
+ width: 100%;
+ text-align: center;
+ font-size: 14px;
+ }
+ &-wrap {
+ position: relative;
+ @include flex-center-col;
+ width: 100%;
+ height: 100%;
+ border: 2px solid $blue;
+ border-radius: 15px;
+ overflow: hidden;
+ }
+ &__title {
+ display: flex;
+ width: 100%;
+ padding: 1rem 0;
+ background: $blue;
+ color: #fff;
+ div {
+ position: relative;
+ width: 100%;
+ text-align: center;
+ font-size: $font-base;
+ &:nth-child(2) {
+ &::after,
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 1px;
+ height: 90%;
+ background: #fff;
+ }
+ &::before {
+ left: 0;
+ }
+ &::after {
+ right: 0;
+ }
+ }
+ }
+ }
+ &-box {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+ height: 100%;
+ background: #fff;
+ .placeholder.attendance {
+ height: 100%;
+ }
+ }
+ &__pagination {
+ @include flex-center-row;
+ width: 100%;
+ height: 50px;
+ column-gap: 5px;
+ flex-shrink: 0;
+ .number {
+ @include flex-center-row;
+ font-size: $font-base;
+ width: 26px;
+ height: 26px;
+ text-align: center;
+ cursor: pointer;
+ border-radius: 50%;
+ &.active {
+ font-weight: $font-bold700;
+ background: $blue;
+ color: #fff;
+ }
+ }
+ button {
+ width: 22px;
+ height: 22px;
+ margin: 1rem;
+ border: none;
+ background: $blue;
+ color: #fff;
+ border-radius: 50%;
+ cursor: pointer;
+ &:disabled {
+ cursor: default;
+ opacity: 0.5;
+ }
+ }
+ }
+ &--logout {
+ @include flex-center-row;
+ width: 100%;
+ height: 100%;
+ font-size: $font-base;
+ }
+ }
+}
diff --git a/src/scss/authPage.scss b/src/scss/authPage.scss
new file mode 100644
index 00000000..64092361
--- /dev/null
+++ b/src/scss/authPage.scss
@@ -0,0 +1,23 @@
+@use 'abstracts' as *;
+@use 'base' as *;
+
+.auth-wrapper {
+ min-height: 100vh;
+ width: 100%;
+ font-weight: $font-thin;
+ background: $blue;
+}
+
+.authForm {
+ @include shadow();
+
+ width: 100%;
+ max-width: $formWidth;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate3d(-50%, -50%, 0);
+ background: $bg-light;
+ border-radius: 5px;
+ padding: 2rem 3rem 1rem;
+}
diff --git a/src/scss/base/_index.scss b/src/scss/base/_index.scss
new file mode 100644
index 00000000..a67916f6
--- /dev/null
+++ b/src/scss/base/_index.scss
@@ -0,0 +1 @@
+@forward 'normalize';
diff --git a/src/scss/base/_normalize.scss b/src/scss/base/_normalize.scss
new file mode 100644
index 00000000..295fc8b4
--- /dev/null
+++ b/src/scss/base/_normalize.scss
@@ -0,0 +1,364 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ font-size: 62.5%;
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+ text-decoration: none;
+ color: #000;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+ /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+ /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
+
+em {
+ font-style: normal;
+}
+
+ul,
+ol {
+ padding-left: 0;
+ list-style: none;
+}
diff --git a/src/scss/benefitPage.scss b/src/scss/benefitPage.scss
new file mode 100644
index 00000000..efbaf18d
--- /dev/null
+++ b/src/scss/benefitPage.scss
@@ -0,0 +1,87 @@
+@use './abstracts' as *;
+@use './base' as *;
+
+.benefit {
+ width: 100%;
+ height: calc(100vh - 60px);
+ padding: 1rem 4rem;
+ box-sizing: border-box;
+ overflow: scroll;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ &__top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid $darkBlue;
+ padding: 0rem 4rem;
+
+ & h1 {
+ font-size: $font-lg;
+ color: $darkBlue;
+ }
+ }
+ & h3 {
+ font-size: $font-base;
+ color: $white;
+ background: $blue;
+ display: inline-block;
+ padding: 1rem;
+ margin-bottom: 1rem;
+ font-size: 1.6rem;
+ color: #fff;
+ background: #4e73df;
+ display: inline-block;
+ padding: 1rem;
+ border-radius: 4px;
+ }
+ &__list {
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ margin-bottom: 2rem;
+ width: 90%;
+ margin: 2rem auto;
+ background: $white;
+ border-radius: 10px;
+ padding: 2rem;
+ gap: 3rem;
+ max-width: 1200px;
+ @include shadow();
+ & .icon {
+ font-size: 5rem;
+ color: $darkBlue;
+ transition: 0.5s;
+ width: 100px;
+ height: 100px;
+ line-height: 100px;
+ border-radius: 100px;
+ border: 3px solid $darkBlue;
+ text-align: center;
+ background: rgb(102 132 237 / 10%);
+ }
+ &__text-box {
+ & .title {
+ font-size: $font-lg;
+ color: $darkBlue;
+ font-weight: $font-bold700;
+ margin-bottom: 2rem;
+ }
+ & dfn::before {
+ content: ' :: ';
+ }
+ & dt {
+ text-transform: uppercase;
+ }
+ & dd {
+ font-size: $font-base;
+ line-height: 3rem;
+ line-height: 2rem;
+ &::before {
+ content: ' โ ';
+ }
+ }
+ }
+ }
+}
diff --git a/src/scss/chartPage.scss b/src/scss/chartPage.scss
new file mode 100644
index 00000000..43fa3e09
--- /dev/null
+++ b/src/scss/chartPage.scss
@@ -0,0 +1,29 @@
+@use './abstracts' as *;
+@use './base' as *;
+
+.chart {
+ width: 100%;
+ height: calc(100vh - 60px);
+ padding: 1rem 4rem;
+ box-sizing: border-box;
+
+ &__top {
+ display: flex;
+ border-bottom: 1px solid $darkBlue;
+ padding: 0rem 4rem;
+
+ & h1 {
+ font-size: $font-lg;
+ color: $darkBlue;
+ }
+ }
+ &__img {
+ width: 100%;
+ height: 80vh;
+ margin-top: 2rem;
+ padding: -2rem;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+}
diff --git a/src/scss/components/_attendanceModal.scss b/src/scss/components/_attendanceModal.scss
new file mode 100644
index 00000000..4da78dae
--- /dev/null
+++ b/src/scss/components/_attendanceModal.scss
@@ -0,0 +1,46 @@
+@use '../abstracts' as *;
+
+.attendance {
+ @include flex-center-col;
+ width: 100%;
+ padding: 0 15px;
+ box-sizing: border-box;
+ &__clock {
+ font-size: $font-lg;
+ font-weight: $font-bold700;
+ margin-bottom: 1.6rem;
+ }
+ &__date {
+ font-size: 2rem;
+ font-weight: $font-bold900;
+ margin-bottom: 1rem;
+ }
+ &__btn {
+ &-box {
+ display: flex;
+ column-gap: 1rem;
+ width: 100%;
+ div {
+ font-size: $font-base;
+ padding: 10px 0;
+ border: 1px solid lightgray;
+ border-radius: 15px;
+ text-align: center;
+ }
+ }
+ &__counter {
+ width: 100%;
+ background: lightgray;
+ color: #999;
+ &.active {
+ background: transparent;
+ color: #000;
+ }
+ }
+ &__attend {
+ width: 30%;
+ flex-shrink: 0;
+ cursor: pointer;
+ }
+ }
+}
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
new file mode 100644
index 00000000..6707f120
--- /dev/null
+++ b/src/scss/components/_header.scss
@@ -0,0 +1,97 @@
+@use '../abstracts' as *;
+@use '../base' as *;
+
+.header {
+ padding: 1rem 2rem;
+ height: 7rem;
+ background: $white;
+ position: sticky;
+ top: 0;
+ z-index: 9;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ box-sizing: border-box;
+ @include shadow();
+ &__logo {
+ width: 20rem;
+ height: 5rem;
+ display: block;
+ }
+
+ &__user {
+ display: flex;
+ justify-content: flex-end;
+ padding-right: 2rem;
+ align-items: center;
+ gap: 14px;
+ position: relative;
+ &-info {
+ cursor: pointer;
+ @include flex-center-row;
+ font-size: 1.4rem;
+ gap: 2rem;
+ &-img {
+ display: block;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ border: 1px solid #ccc;
+ cursor: pointer;
+ margin: auto;
+ transition: 0.3s;
+ background-image: url('https://startbootstrap.github.io/startbootstrap-sb-admin-2/img/undraw_profile.svg');
+ background-size: cover;
+ }
+ &-img:hover {
+ transform: scale(1.2);
+ }
+ &-img img {
+ width: 100%;
+ }
+ }
+ }
+}
+
+.btn {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background: $blue;
+ color: $white;
+ margin: 0;
+ padding: 0.5rem 1rem;
+ font-size: 1rem;
+ font-weight: 400;
+ text-align: center;
+ text-decoration: none;
+ border: none;
+ border-radius: 4px;
+ display: inline-block;
+ width: auto;
+ @include shadow;
+ cursor: pointer;
+ transition: 0.5s;
+}
+.btn:active,
+.btn:hover,
+.btn:focus {
+ background: $darkBlue;
+ outline: 0;
+}
+
+@media (max-width: 600px) {
+ .header {
+ padding: 1rem 2rem;
+ }
+
+ .header__logo {
+ font-size: medium;
+ }
+}
+@media (max-width: 330px) {
+ .header__logo {
+ font-size: small;
+ }
+}
diff --git a/src/scss/components/_headerDropDown.scss b/src/scss/components/_headerDropDown.scss
new file mode 100644
index 00000000..87fadb48
--- /dev/null
+++ b/src/scss/components/_headerDropDown.scss
@@ -0,0 +1,26 @@
+@use '../abstracts' as *;
+@use '../base' as *;
+
+.header__drop-down {
+ @include flex-center-col;
+ @include shadow();
+ width: 120px;
+ background: $white;
+ position: absolute;
+ top: 65px;
+ right: 5px;
+ box-sizing: border-box;
+ border-radius: 10px;
+ & ul {
+ width: 100%;
+ text-align: center;
+ & li {
+ padding: 0.5rem;
+ cursor: pointer;
+ font-size: 1.2rem;
+ &a {
+ display: inline-block;
+ }
+ }
+ }
+}
diff --git a/src/scss/components/_mainProject.scss b/src/scss/components/_mainProject.scss
new file mode 100644
index 00000000..cf9f23ab
--- /dev/null
+++ b/src/scss/components/_mainProject.scss
@@ -0,0 +1,36 @@
+@use '../abstracts' as *;
+@use '../base' as *;
+
+.mainP-container {
+ .mainP-item {
+ display: flex;
+ justify-content: space-between;
+ margin: 1rem 1rem;
+ font-size: 1.6rem;
+ border: 2px solid $blue;
+ padding: 0.5rem;
+ border-radius: 15px;
+ &__title {
+ margin-left: 2rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ &__status {
+ font-size: 1.2rem;
+ border: 1px solid transparent;
+ padding: 0.3rem;
+ border-radius: 10px;
+ color: $white;
+
+ &.complete {
+ background: $success;
+ }
+ &.proceeding {
+ background: $blue;
+ }
+ &.expected {
+ background: #ffc881;
+ }
+ }
+ }
+}
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
new file mode 100644
index 00000000..031d058d
--- /dev/null
+++ b/src/scss/components/_modal.scss
@@ -0,0 +1,35 @@
+@use '../abstracts' as *;
+
+.modal {
+ &__wrap {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: rgba(#000, 0.8);
+ z-index: 99;
+ }
+ &__box {
+ @include flex-center-col;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 360px;
+ padding: 20px;
+ background: white;
+ border-radius: 15px;
+ box-sizing: border-box;
+ }
+ &__close-btn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 1.6rem;
+ height: 1.6rem;
+ border: 0;
+ background: transparent;
+ cursor: pointer;
+ }
+}
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
new file mode 100644
index 00000000..4fbf6f5c
--- /dev/null
+++ b/src/scss/components/_sidebar.scss
@@ -0,0 +1,123 @@
+@use '../abstracts/' as *;
+@use '../base/' as *;
+
+.nav {
+ width: 224px;
+ height: auto;
+ background-color: $blue;
+ color: $white;
+ font-size: 1.4rem;
+ flex-shrink: 0;
+
+ .nav-depth {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ padding-left: 0;
+ color: $white;
+
+ &__item {
+ list-style: none;
+ position: relative;
+ &.active {
+ > a,
+ button {
+ background: $darkBlue;
+ }
+ }
+
+ &.on {
+ font-weight: $font-bold700;
+ }
+ }
+
+ &__link {
+ padding: 20px 16px;
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: $white;
+
+ &:hover {
+ background-color: $darkBlue;
+ }
+ }
+
+ &__btn {
+ width: 100%;
+ cursor: pointer;
+ padding: 20px 16px;
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ border: none;
+ outline: none;
+ color: $white;
+ background-color: $blue;
+
+ &.show {
+ .nav-depth__icon {
+ transform: rotate(90deg);
+ }
+ }
+
+ &:hover {
+ background-color: $darkBlue;
+ }
+ }
+
+ &__logo {
+ margin-right: 10px;
+ }
+
+ &__icon {
+ margin-left: auto;
+ transition: transform 0.2s;
+ }
+
+ .nav-detail {
+ background-color: $white;
+ width: 180px;
+ height: 0px;
+ border-radius: 5px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ animation: showDetail 0.2s 0s 1 normal forwards;
+ overflow: hidden;
+ margin: 10px auto;
+
+ &__item {
+ width: 100%;
+ }
+
+ &__link {
+ display: flex;
+ color: $gray;
+ font-size: 1.2rem;
+ border-radius: 5px;
+ margin: 0 5px;
+ padding: 8px 16px;
+
+ &.on {
+ color: $blue;
+ font-weight: $font-bold700;
+ }
+
+ &:hover {
+ background-color: $lightGray;
+ }
+ }
+ }
+ }
+}
+
+@keyframes showDetail {
+ from {
+ height: 0;
+ }
+
+ to {
+ height: 120px;
+ }
+}
diff --git a/src/scss/components/auth/changeAuthPage.scss b/src/scss/components/auth/changeAuthPage.scss
new file mode 100644
index 00000000..fd160994
--- /dev/null
+++ b/src/scss/components/auth/changeAuthPage.scss
@@ -0,0 +1,20 @@
+@use '../../abstracts' as *;
+@use '../../base' as *;
+
+.link {
+ font-size: $font-base;
+ margin: 1rem 0 2rem;
+ color: $black;
+ text-align: center;
+ transition: 0.2s ease;
+
+ a {
+ color: $blue;
+ transition: 0.1s ease;
+ }
+}
+
+.link > a:hover {
+ font-weight: $font-bold700;
+ color: $blue;
+}
diff --git a/src/scss/components/auth/formTitle.scss b/src/scss/components/auth/formTitle.scss
new file mode 100644
index 00000000..0b3a26ec
--- /dev/null
+++ b/src/scss/components/auth/formTitle.scss
@@ -0,0 +1,23 @@
+@use '../../abstracts' as *;
+@use '../../base' as *;
+
+.authForm__title {
+ position: relative;
+ width: 100%;
+ line-height: 5rem;
+ font-size: $font-lg;
+ font-weight: $font-bold700;
+ letter-spacing: 2px;
+ color: $white;
+
+ &::before {
+ content: '';
+ width: 17rem;
+ height: 100%;
+ position: absolute;
+ z-index: -50;
+ top: 0;
+ left: -3rem;
+ background: $blue;
+ }
+}
diff --git a/src/scss/components/auth/input.scss b/src/scss/components/auth/input.scss
new file mode 100644
index 00000000..1fb98c1e
--- /dev/null
+++ b/src/scss/components/auth/input.scss
@@ -0,0 +1,97 @@
+@use '../../abstracts' as *;
+@use '../../base' as *;
+
+.input-container {
+ position: relative;
+ margin-top: 3rem;
+
+ label {
+ color: $gray;
+ }
+
+ input {
+ font-size: $font-base;
+ color: $black;
+ width: 100%;
+ height: 4rem;
+ border: none;
+ background: transparent;
+ outline: none;
+ padding: 0.4rem;
+
+ &:focus + label,
+ &:valid + label {
+ color: $darkBlue;
+ top: -65%;
+ }
+
+ & + label {
+ position: absolute;
+ font-size: $font-base;
+ top: 0;
+ left: 0.4rem;
+ line-height: 60px;
+ cursor: pointer;
+ transition: 0.2s ease;
+ }
+ }
+
+ &__bar {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ background: $gray;
+ width: 100%;
+ height: 1px;
+
+ &:before,
+ &:after {
+ content: '';
+ position: absolute;
+ background: $blue;
+ width: 0;
+ height: 2px;
+ transition: 0.3s ease;
+ }
+
+ &:before {
+ left: 50%;
+ }
+
+ &:after {
+ right: 50%;
+ }
+ }
+
+ input:focus ~ &__bar:before,
+ input:focus ~ &__bar:after {
+ width: 50%;
+ }
+
+ &__icon {
+ width: 24px;
+ height: 24px;
+ position: absolute;
+ top: 1.8rem;
+ right: 0.4rem;
+ font-size: 1.4rem;
+ pointer-events: none;
+ }
+
+ &__icon.success {
+ color: $blue;
+ }
+
+ &__icon.error {
+ color: $failed;
+ }
+
+ &__errorMsg {
+ position: absolute;
+ top: 120%;
+ font-weight: $font-bold500;
+ left: 0.4rem;
+ font-size: 1.2rem;
+ color: $failed;
+ }
+}
diff --git a/src/scss/components/auth/submitButton.scss b/src/scss/components/auth/submitButton.scss
new file mode 100644
index 00000000..42ad1d0d
--- /dev/null
+++ b/src/scss/components/auth/submitButton.scss
@@ -0,0 +1,27 @@
+@use '../../abstracts' as *;
+@use '../../base' as *;
+
+.authForm__button {
+ width: 100%;
+ line-height: 6.4rem;
+ font-weight: $font-bold900;
+ font-size: $font-base;
+ margin: 6rem 0 2rem;
+ border: 3px solid transparent;
+ background-color: $blue;
+ color: $white;
+ cursor: pointer;
+ outline: none;
+ transition: 0.2s ease;
+
+ &:disabled {
+ background-color: transparent;
+ border: 3px solid rgba(0, 0, 0, 0.3);
+ color: rgba(0, 0, 0, 0.4);
+ }
+
+ &:enabled:hover {
+ background-color: $darkBlue;
+ font-size: 180%;
+ }
+}
diff --git a/src/scss/components/auth/swal.scss b/src/scss/components/auth/swal.scss
new file mode 100644
index 00000000..103f3635
--- /dev/null
+++ b/src/scss/components/auth/swal.scss
@@ -0,0 +1,105 @@
+@use '../../abstracts' as *;
+@use '../../base' as *;
+
+@keyframes error-icon-border {
+ 0% {
+ border-color: $failed;
+ }
+ 50% {
+ border-color: $white;
+ }
+ 100% {
+ border-color: $failed;
+ }
+}
+
+@keyframes error-icon-content {
+ 0% {
+ background: $failed;
+ }
+ 50% {
+ background: $white;
+ }
+ 100% {
+ background: $failed;
+ }
+}
+
+.swal-overlay {
+ background: rgba(0, 0, 0, 0.8);
+}
+
+.swal-modal {
+ background: $bg-light;
+
+ &.error .swal-icon {
+ width: 5rem;
+ height: 5rem;
+ margin-bottom: 1rem;
+
+ &--warning {
+ animation: error-icon-border 1s;
+ animation-iteration-count: infinite;
+
+ &__body {
+ height: 2.2rem;
+ }
+ &__dot {
+ margin-left: -0.35rem;
+ }
+
+ &__body,
+ &__dot {
+ animation: error-icon-content 1s;
+ animation-iteration-count: infinite;
+ }
+ }
+ }
+
+ &.success .swal-icon--success {
+ border-color: $blue;
+
+ &__line {
+ background: $blue;
+ }
+
+ &__hide-corners {
+ display: none;
+ }
+
+ &::before {
+ display: none;
+ }
+ &::after {
+ display: none;
+ }
+ }
+
+ .swal-title {
+ font-size: $font-lg;
+ }
+
+ &.error .swal-text {
+ color: $failed;
+ }
+
+ &.error .swal-button {
+ background: $failed;
+
+ &:hover {
+ background-color: red;
+ }
+ }
+
+ &.success .swal-text {
+ color: $blue;
+ }
+
+ &.success .swal-button {
+ background: $blue;
+
+ &:hover {
+ background-color: $darkBlue;
+ }
+ }
+}
diff --git a/src/scss/components/carousel.scss b/src/scss/components/carousel.scss
new file mode 100644
index 00000000..de0af418
--- /dev/null
+++ b/src/scss/components/carousel.scss
@@ -0,0 +1,14 @@
+.carousel {
+ width: 100%;
+ height: 100%;
+}
+
+.carousel-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.slick-dots {
+ bottom: 25px;
+}
diff --git a/src/scss/components/gallery/modal.scss b/src/scss/components/gallery/modal.scss
new file mode 100644
index 00000000..71ebdca8
--- /dev/null
+++ b/src/scss/components/gallery/modal.scss
@@ -0,0 +1,163 @@
+@use '../../abstracts' as *;
+@use '../../base' as *;
+
+// upload modal & view modal common
+.wrapper-modal {
+ width: 100vw;
+ height: 100vh;
+ position: fixed;
+ inset: 0px;
+ z-index: 10;
+ background-color: $blue;
+ @include flex-center-col;
+
+ & .modal__close {
+ position: absolute;
+ right: 1.5rem;
+ top: 1.5rem;
+ cursor: pointer;
+ z-index: 1000;
+ color: $blue;
+ font-weight: bold;
+ font-size: $font-lg;
+ }
+
+ & .modal {
+ position: relative;
+ height: fit-content;
+ @include shadow;
+ background: $white;
+ overflow: hidden;
+ border-radius: 5px;
+ transition: all 400ms ease-in-out 0.5s;
+ animation: fadeIn 400ms;
+ overflow-y: scroll;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ & .modal__title {
+ font-size: $font-lg;
+ font-weight: $font-bold700;
+ background: $blue;
+ color: $white;
+ padding: 2rem;
+ display: inline-block;
+ text-transform: uppercase;
+ }
+
+ & .modal__content {
+ padding: 4rem;
+ display: flex;
+ box-sizing: border-box;
+ }
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: scale(0.5);
+ }
+
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+// upload modal
+.upload-modal.modal {
+ max-width: 500px;
+ width: 100%;
+ & .modal__content {
+ flex-direction: column;
+ align-items: center;
+ align-items: flex-start;
+ gap: 1.4rem;
+ }
+ & input[type='text'],
+ & textarea {
+ width: 100%;
+ height: 4rem;
+ padding: 1rem;
+ border: 2px solid $lightGray;
+ outline-color: $blue;
+ border-radius: 5px;
+ box-sizing: border-box;
+ font-size: $font-base;
+ }
+ & textarea {
+ height: 8rem;
+ }
+ & .modal__file-box {
+ width: 100%;
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ & label {
+ display: inline-block;
+ vertical-align: middle;
+ background: $blue;
+ color: $white;
+ cursor: pointer;
+ height: 4rem;
+ line-height: 4rem;
+ text-align: center;
+ font-size: $font-base;
+ border-radius: 5px 0px 0 5px;
+ width: 100px;
+ box-sizing: border-box;
+ z-index: 1;
+ }
+ & input[type='file'] {
+ width: 100%;
+ border-left: none;
+ border: 2px solid $lightGray;
+ height: 4rem;
+ width: 91%;
+ padding: 1rem;
+ padding-left: 0;
+ font-size: $font-sm;
+ border-radius: 5px;
+ position: absolute;
+ left: 38px;
+ z-index: 0;
+ box-sizing: border-box;
+ overflow: hidden;
+ background: $white;
+ color: #757575;
+ }
+ }
+}
+
+// view modal
+.view-modal {
+ max-width: 1000px;
+ width: 90%;
+ margin: 0 auto;
+ box-sizing: border-box;
+ & .modal__content {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ &__img-box {
+ width: 60%;
+ }
+ &__text-box {
+ width: 35%;
+ & .modal__img-title {
+ font-size: $font-lg;
+ background: $darkBlue;
+ color: $white;
+ padding: 0.5rem;
+ text-align: center;
+ }
+ & p {
+ font-size: $font-base;
+ margin-bottom: 1.4rem;
+ }
+ }
+ }
+}
diff --git a/src/scss/components/gallery/modalButton.scss b/src/scss/components/gallery/modalButton.scss
new file mode 100644
index 00000000..ae01efaf
--- /dev/null
+++ b/src/scss/components/gallery/modalButton.scss
@@ -0,0 +1,25 @@
+@use '../../abstracts' as *;
+@use '../../base' as *;
+
+.modal__button {
+ width: 100%;
+ line-height: 4rem;
+ font-weight: $font-bold700;
+ font-size: $font-base;
+ margin: 2rem 0;
+ border: 2px solid $blue;
+ background-color: $white;
+ color: $blue;
+ cursor: pointer;
+ outline: none;
+ text-transform: uppercase;
+ // cursor: pointer;
+ transition: 0.5s;
+
+ &:active,
+ &:hover,
+ &:focus {
+ background-color: $blue;
+ color: $white;
+ }
+}
diff --git a/src/scss/components/listbox.scss b/src/scss/components/listbox.scss
new file mode 100644
index 00000000..f73a4c0a
--- /dev/null
+++ b/src/scss/components/listbox.scss
@@ -0,0 +1,34 @@
+@use '../abstracts' as *;
+
+.listbox {
+ width: 95%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ border: 1px solid $blue;
+ border-radius: 1rem;
+ margin: 1rem auto;
+ padding: 1.5rem 1rem;
+ background-color: $white;
+ cursor: pointer;
+ @include shadow;
+
+ &__delete-checkbox {
+ flex: 0.5;
+ }
+
+ &__title {
+ flex: 20;
+ font-size: 1.3rem;
+ }
+
+ &__modify-btn {
+ padding: 1rem 2rem;
+ }
+
+ &__delete-btn {
+ padding: 1rem 2rem;
+ background-color: $gray;
+ margin-left: 1rem;
+ }
+}
diff --git a/src/scss/components/mainGallery.scss b/src/scss/components/mainGallery.scss
new file mode 100644
index 00000000..f19bcae6
--- /dev/null
+++ b/src/scss/components/mainGallery.scss
@@ -0,0 +1,71 @@
+@use '../abstracts/' as *;
+@use '../base/' as *;
+
+.mainPage__content__gallery {
+ width: 100%;
+ height: 102%;
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ flex-wrap: wrap;
+ line-height: 0;
+ & figure {
+ position: relative;
+ width: 49%;
+ height: 48%;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ border: 1px solid $blue;
+ margin: 0;
+ box-sizing: border-box;
+ overflow: hidden;
+
+ &:nth-child(1) {
+ border-left: none;
+ border-top: none;
+ border-radius: 0 0 10px 0;
+ }
+
+ &:nth-child(2) {
+ border-right: none;
+ border-top: none;
+ border-radius: 0 0 0 10px;
+ }
+ &:nth-child(3) {
+ border-left: none;
+ border-bottom: none;
+ border-radius: 0 10px 0 0;
+ }
+ &:nth-child(4) {
+ border-right: none;
+ border-bottom: none;
+ border-radius: 10px 0 0px 0;
+ }
+ & figcaption {
+ position: absolute;
+ bottom: 0;
+ background: rgb(78 115 223 / 90%);
+ color: $white;
+ width: 100%;
+ padding: 0 1rem;
+ line-height: 1.5rem;
+ box-sizing: border-box;
+
+ & h3 {
+ font-size: $font-base;
+ margin: 0;
+ padding: 1rem;
+ }
+ &p {
+ font-size: 2rem;
+ }
+ & h3,
+ & p {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+}
diff --git a/src/scss/components/noticeList.scss b/src/scss/components/noticeList.scss
new file mode 100644
index 00000000..23dcae1e
--- /dev/null
+++ b/src/scss/components/noticeList.scss
@@ -0,0 +1,47 @@
+@use '../abstracts' as *;
+
+.notice {
+ width: 100%;
+ padding: 1rem 4rem;
+ display: flex;
+ flex-direction: column;
+ row-gap: 1.5rem;
+
+ &-title {
+ border-bottom: 1px solid $darkBlue;
+ padding-left: 4rem;
+ h1 {
+ font-size: 2.4rem;
+ color: $darkBlue;
+ }
+ display: flex;
+ &-search-input {
+ display: flex;
+ column-gap: 2rem;
+ }
+ }
+
+ &-write-btn {
+ width: 10rem;
+ height: 3rem;
+ margin-left: auto;
+ }
+
+ &__item-container {
+ border: 1px solid $blue;
+ border-radius: 1rem;
+ height: auto;
+ padding: 1rem;
+ background-color: $white;
+ @include shadow;
+ }
+
+ &__btns {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ .btn {
+ padding: 1.5rem 1rem;
+ }
+ }
+}
diff --git a/src/scss/components/pagenation.scss b/src/scss/components/pagenation.scss
new file mode 100644
index 00000000..dc30fcf0
--- /dev/null
+++ b/src/scss/components/pagenation.scss
@@ -0,0 +1,52 @@
+@use '../abstracts' as *;
+
+.pagenation {
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+
+ &__list {
+ list-style: none;
+ text-align: center;
+ border-radius: 3px;
+ color: white;
+ margin: 0 2px;
+ padding: 1px;
+ border-top: 3px solid #186ead;
+ border-bottom: 3px solid #186ead;
+ background-color: rgba(0, 0, 0, 0.4);
+
+ &__item {
+ display: inline-block;
+ font-size: 17px;
+ font-weight: 600;
+ padding: 5px;
+ border-radius: 5px;
+ width: 25px;
+ &:hover {
+ cursor: pointer;
+ color: white;
+ background-color: #263a6c;
+ }
+ &:focus::after {
+ color: white;
+ background-color: #263a6c;
+ }
+
+ .page-link {
+ text-align: center;
+ &:hover::after,
+ &:focus::after {
+ border-radius: 100%;
+ color: white;
+ background-color: #263a6c;
+ }
+ }
+ }
+ }
+
+ .btn {
+ height: 3rem;
+ width: 3rem;
+ }
+}
diff --git a/src/scss/components/writePage/writePage.scss b/src/scss/components/writePage/writePage.scss
new file mode 100644
index 00000000..49c983e7
--- /dev/null
+++ b/src/scss/components/writePage/writePage.scss
@@ -0,0 +1,60 @@
+@use '../../abstracts' as *;
+@use '../../base' as *;
+
+.write-form {
+ padding-top: 5rem;
+ width: 80%;
+ max-width: 86rem;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+
+ .write-form__title {
+ width: 100%;
+ padding-bottom: 0.5rem;
+ border-bottom: 1px solid $lightGray;
+
+ &__item {
+ display: block;
+ width: 100%;
+ height: auto;
+ font-size: $font-lg;
+ color: $titleTextColor;
+ outline: none;
+ border: none;
+ resize: none;
+ line-height: 1.2;
+ overflow: hidden;
+ background-color: $bg-light;
+ border-radius: 4px;
+ padding: 1rem 0;
+ }
+ }
+
+ .write-form__content {
+ width: 100%;
+ &__item {
+ width: 100%;
+ height: 300px;
+ font-size: $font-base;
+ outline: none;
+ border: none;
+ resize: none;
+ line-height: 1.2;
+ overflow: hidden;
+ background-color: $bg-light;
+ border-radius: 4px;
+ }
+ }
+
+ .write-util {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 1rem;
+ }
+ .write-form__button {
+ display: block;
+ font-size: $font-base;
+ }
+}
diff --git a/src/scss/contentsPage.scss b/src/scss/contentsPage.scss
new file mode 100644
index 00000000..914a5d24
--- /dev/null
+++ b/src/scss/contentsPage.scss
@@ -0,0 +1,35 @@
+@use './abstracts' as *;
+@use './base/' as *;
+
+.contents {
+ padding-top: 5rem;
+ width: 80%;
+ max-width: 86rem;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ .content-util {
+ display: flex;
+ gap: 1rem;
+ &__time {
+ font-size: $font-base;
+ }
+ }
+ .content-title {
+ font-size: $font-lg;
+ font-weight: $font-bold700;
+ }
+
+ .content-item {
+ margin-top: 1rem;
+ font-size: $font-base;
+ }
+
+ .content-img {
+ margin-top: 1rem;
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ }
+}
diff --git a/src/scss/galleryPage.scss b/src/scss/galleryPage.scss
new file mode 100644
index 00000000..ec700763
--- /dev/null
+++ b/src/scss/galleryPage.scss
@@ -0,0 +1,110 @@
+@use './abstracts' as *;
+@use './base' as *;
+
+.gallery {
+ width: 100%;
+ height: calc(100vh - 60px);
+ background: $lightGray;
+ padding: 1rem 4rem;
+ box-sizing: border-box;
+ overflow: scroll;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ & .inner {
+ margin: 2rem auto;
+ max-width: 1200px;
+ width: 100%;
+ margin: 2rem auto;
+ // height: 75vh;
+ @include flex-center-row();
+ align-items: center;
+ gap: 2em;
+ flex-wrap: wrap;
+ }
+
+ &__top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid $darkBlue;
+ padding: 0rem 4rem;
+
+ & h1 {
+ font-size: $font-lg;
+ color: $darkBlue;
+ }
+
+ &__add-btn {
+ font-size: xx-large;
+ color: $blue;
+ cursor: pointer;
+ transition: 0.5s;
+
+ &:hover {
+ scale: 1.1;
+ }
+ }
+ }
+
+ &__list {
+ box-sizing: border-box;
+ & figure {
+ cursor: pointer;
+ width: 38em;
+ height: 40em;
+ margin: 0;
+ border: 4px solid rgb(78 115 223 / 80%);
+ border-radius: 10px;
+ overflow: hidden;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: cover;
+ box-sizing: border-box;
+ position: relative;
+ & figcaption {
+ position: absolute;
+ bottom: 0;
+ text-align: center;
+ background: rgb(78 115 223 / 90%);
+ color: #fff;
+ width: 100%;
+ text-align: left;
+ padding: 0.5rem 1rem;
+ box-sizing: border-box;
+ & h3 {
+ font-size: $font-base;
+ }
+ }
+ & .icon-wrap {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ & .like-icon {
+ width: 80%;
+ display: flex;
+ align-items: center;
+ & span {
+ font-size: 1.2rem;
+ margin-left: 5px;
+ }
+ }
+ & .icon {
+ font-size: 2.2rem;
+ color: #fff;
+ display: inline-block;
+ transition: all 0.3s;
+ padding: 0 5px 5px;
+ &:hover,
+ &.active {
+ color: #ffb2ac;
+ transform: scale(1.2);
+ }
+ &.minus {
+ opacity: 0.7;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/scss/landingPage.scss b/src/scss/landingPage.scss
new file mode 100644
index 00000000..1384b8fa
--- /dev/null
+++ b/src/scss/landingPage.scss
@@ -0,0 +1,8 @@
+@use 'abstracts' as *;
+@use 'base' as *;
+
+.landingContent {
+ display: flex;
+ min-height: calc(100vh - 60px);
+ background-color: $lightGray;
+}
diff --git a/src/scss/mainPage.scss b/src/scss/mainPage.scss
new file mode 100644
index 00000000..969cd20a
--- /dev/null
+++ b/src/scss/mainPage.scss
@@ -0,0 +1,71 @@
+@use './abstracts' as *;
+
+#mainPage {
+ position: relative;
+ width: 80%;
+ max-width: 1000px;
+ margin: 0 auto;
+ margin-top: 2rem;
+ // height: calc(100vh - 60px);
+ box-sizing: border-box;
+ padding: 1rem 4rem;
+ .mainPage {
+ &__content {
+ border: 2px solid $blue;
+ background: #fff;
+ border-radius: 15px;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ &-wrap {
+ display: flex;
+ flex-direction: column;
+ gap: 4rem;
+ column-gap: 1.6rem;
+ width: 100%;
+
+ .main-notice {
+ width: 100%;
+ }
+
+ .wrap-depth2 {
+ display: flex;
+ gap: 1rem;
+ justify-self: center;
+ }
+ }
+ &-box {
+ display: flex;
+ flex-direction: column;
+ height: auto;
+ &.main {
+ &-notice {
+ }
+ &-project {
+ width: 50%;
+ }
+ &-gallery {
+ width: 50%;
+
+ a {
+ height: 100%;
+ }
+ }
+ }
+ }
+ &__title {
+ font-size: $font-base;
+ font-weight: $font-bold900;
+ color: $blue;
+ margin-bottom: 1rem;
+ // margin: 2rem auto 2rem;
+ }
+
+ &.notice-container {
+ background: $blue;
+ width: 100%;
+ height: auto;
+ }
+ }
+ }
+}
diff --git a/src/scss/projectDetailPage.scss b/src/scss/projectDetailPage.scss
new file mode 100644
index 00000000..ea44402b
--- /dev/null
+++ b/src/scss/projectDetailPage.scss
@@ -0,0 +1,43 @@
+@use '../scss/abstracts/' as *;
+.project__detail {
+ width: 80%;
+ display: flex;
+ flex-direction: column;
+ margin: 3rem auto;
+ padding: 1rem 4rem;
+
+ &-btns-box {
+ display: flex;
+ justify-content: end;
+ column-gap: 1rem;
+ }
+ &-btns-box {
+ display: flex;
+ justify-content: end;
+ column-gap: 1rem;
+ }
+ &-date-box {
+ display: flex;
+ column-gap: 1rem;
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ }
+ &-date {
+ text-decoration: underline;
+ }
+ &-status-box {
+ display: flex;
+ column-gap: 1rem;
+ height: 2rem;
+ }
+ &-statu-box {
+ display: flex;
+ column-gap: 5px;
+ align-items: center;
+ }
+ &-title {
+ font-size: 3rem;
+ font-weight: bold;
+ padding: 2rem 0;
+ }
+}
diff --git a/src/scss/projectListPage.scss b/src/scss/projectListPage.scss
new file mode 100644
index 00000000..1ba2789f
--- /dev/null
+++ b/src/scss/projectListPage.scss
@@ -0,0 +1,99 @@
+@use '../scss/abstracts/' as *;
+
+.section {
+ width: 80%;
+ margin: 1rem auto;
+ padding: 1rem 4rem;
+ display: flex;
+ flex-direction: column;
+ row-gap: 1rem;
+
+ .project-top {
+ display: flex;
+ border-bottom: 1px solid $darkBlue;
+ padding: 0rem 4rem;
+
+ & h1 {
+ font-size: $font-lg;
+ color: $darkBlue;
+ }
+ }
+
+ &__filter {
+ display: flex;
+ column-gap: 2rem;
+ }
+
+ &__project {
+ &-write-btn {
+ height: 3rem;
+ margin-left: auto;
+ border-radius: 5px;
+ }
+
+ &-search-input {
+ flex: 10;
+ }
+
+ &-container {
+ border: 1px solid $blue;
+ border-radius: 1rem;
+ height: auto;
+ padding: 1rem;
+ overflow: hidden;
+ }
+
+ &-item-box {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ column-gap: 1rem;
+ height: 3rem;
+ font-size: 2rem;
+
+ border: 1px solid $blue;
+ border-radius: 1rem;
+ height: 1rem;
+ padding: 1rem;
+ margin: 0.5rem 1rem;
+ background-color: $white;
+ @include shadow;
+ }
+
+ &-date {
+ font-size: 13px;
+ }
+
+ &-status {
+ width: 7rem;
+ color: $white;
+ font-size: 13px;
+ padding: 0.3rem;
+ border-radius: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &.expected {
+ background-color: rgb(255, 200, 129);
+ }
+ &.complete {
+ background-color: green;
+ }
+ &.proceeding {
+ background-color: $blue;
+ }
+ }
+ &-title {
+ flex: 7;
+ }
+ &-delete-btn {
+ background-color: transparent;
+ border: none;
+ outline: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+}
diff --git a/src/scss/projectWritePage.scss b/src/scss/projectWritePage.scss
new file mode 100644
index 00000000..ee6780cb
--- /dev/null
+++ b/src/scss/projectWritePage.scss
@@ -0,0 +1,31 @@
+@use '../scss/abstracts/' as *;
+
+.write {
+ width: 80%;
+ margin: 1rem auto;
+ display: flex;
+ flex-direction: column;
+ row-gap: 1rem;
+
+ &__btns-box {
+ display: flex;
+ justify-content: end;
+ column-gap: 1rem;
+ }
+
+ &__radios-box {
+ display: flex;
+ }
+
+ &__radio-box {
+ display: flex;
+ align-items: center;
+ }
+ &__input-title {
+ width: calc(100% - 10px);
+ font-size: 3rem;
+ }
+ &__editor {
+ width: 1000px;
+ }
+}
diff --git a/src/store/loginSlice.ts b/src/store/loginSlice.ts
new file mode 100644
index 00000000..9cdf9ec3
--- /dev/null
+++ b/src/store/loginSlice.ts
@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const loginSlice = createSlice({
+ name: 'loginUpdate',
+ initialState: { isLogin: false, name: '', email: '' },
+ reducers: {
+ login: (state, action) => {
+ state.isLogin = true;
+ state.name = action.payload.userName;
+ state.email = action.payload.userEmail;
+ },
+ logout: state => {
+ state.isLogin = false;
+ state.name = '';
+ state.email = '';
+ },
+ },
+});
+
+export default loginSlice;
+export const { login, logout } = loginSlice.actions;
diff --git a/src/store/store.ts b/src/store/store.ts
new file mode 100644
index 00000000..fb4c8b8b
--- /dev/null
+++ b/src/store/store.ts
@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+import loginSlice from '@store/loginSlice';
+
+const store = configureStore({
+ reducer: {
+ loginUpdate: loginSlice.reducer,
+ },
+});
+
+export default store;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..3c90fc8f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"],
+ "@components/*": ["src/components/*"],
+ "@assets/*": ["src/assets/*"],
+ "@scss/*": ["src/scss/*"],
+ "@store/*": ["src/store/*"],
+ "@hooks/*": ["src/hooks/*"]
+ },
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 00000000..42872c59
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..45c541c1
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
+ '@assets': path.resolve(__dirname, './src/assets'),
+ '@components': path.resolve(__dirname, './src/components'),
+ '@scss': path.resolve(__dirname, './src/scss'),
+ '@store': path.resolve(__dirname, './src/store'),
+ '@hooks': path.resolve(__dirname, './src/hooks'),
+ },
+ },
+});
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+