[#167] 커뮤니티 작성 페이지 api

package.json

@@ -46,4 +46,4 @@
     "storybook": "7.0.18",
     "tsconfig-paths-webpack-plugin": "4.1.0"
   }
-}
+}

src/apis/communityAPIS.ts

@@ -60,3 +60,28 @@ export const getCommunityInfoCommentAPI = async (articleID: number) => {
     return null;
   }
 };
+
+
+interface postCommunityWritingApiResponse {
+  topic: string;
+  title: string;
+  content: string;
+  images: string[]; // 가령 이미지 URL들을 담은 배열로 가정합니다.
+}
+
+export const postCommunityWritingAPI = async (postData: {
+  topic: string;
+  title: string;
+  content: string;
+  images: string[];
+}) => {
+  try {
+    const response = await axiosInstance.post('/community/article', postData);
+    return response.data as postCommunityWritingApiResponse;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};

src/components/community/community_writing/HorizontalLine.tsx

@@ -9,7 +9,7 @@ interface HorizontalLineProps {
 }
 
 const HorizontalLineWrapper = styled.div<HorizontalLineProps>`
-  width: ${(props) => (props.width ? `${props.width}px` : '400px')};
+  width: ${(props) => (props.width ? `${props.width}px` : '100%')};
   height: ${(props) => (props.height ? `${props.height}px` : '1px')};
   background-color: ${(props) => (props.color ? `${props.color}` : `${COLORS.grayscale.Gray1}`)};
   margin: 10px 0;

src/components/community/community_writing/ImageInputBox/IconBox/IconBox.tsx

@@ -1,45 +1,23 @@
 import React from 'react';
 import { COLORS } from '@/styles/constants/colors';
-import * as styles from '@/components/community/community_writing/ImageInputBox/IconBox/IconBox.styles';
-import Image from 'next/image';
+import * as styles from "@/components/community/community_writing/ImageInputBox/IconBox/IconBox.styles"
 interface FormData {
-  iconSize?: number;
-  width?: number;
-  height?: number;
-  backgroundColor?: string;
-  margin?: number;
-  IconColor?: string;
+  iconSize?:number;
+  width?:number;
+  height?:number;
+  backCol?:string;
+  margin?:number;
+  IconCol?:string;
 }
 
-const IconBox = ({
-  iconSize,
-  width,
-  height,
-  backgroundColor,
-  margin,
-  IconColor,
-}: FormData) => {
+const IconBox = ({iconSize,width,height,backCol,margin,IconCol }:FormData) => {
   return (
     <>
       <label htmlFor="imageInput">
-        <styles.IconBox
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-          width={width}
-          height={height}
-          backgroundColor={backgroundColor}
-          margin={margin}
-        >
-          <Image
-            src="/camera.svg"
-            width={iconSize ? iconSize : 40}
-            height={iconSize ? iconSize : 40}
-            color={IconColor ? IconColor : COLORS.grayscale.Black}
-            alt="camera"
-          />
+        <styles.IconBox  style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+        width={width} height={height} backgroundColor={backCol} margin={margin}>
+          <img src="/camera.svg" style={{color:`${IconCol?IconCol: COLORS.grayscale.Black}`,
+          width:`${iconSize? `${iconSize}px`: "40px"}`}}/>
         </styles.IconBox>
       </label>
     </>

src/components/community/community_writing/ImageInputBox/ImageInputBox.tsx

@@ -5,32 +5,32 @@ import TitleBox from './TitleBox/TitleBox';
 
 interface FormData {
   previewImage: string[]; // 이미지 미리보기를 위한 string 배열
-  handleImageChange: (event: React.ChangeEvent<HTMLInputElement>) => void; // onChange 타입 변경
+  handleImageChange:(event: React.ChangeEvent<HTMLInputElement>) => void; // onChange 타입 변경
 }
 
-const ImageInputBox = ({ previewImage, handleImageChange }: FormData) => {
+const ImageInputBox = ({previewImage,handleImageChange }:FormData) => {
   return (
     <>
-      <TitleBox />
-      <div style={{ display: 'flex' }}>
-        {previewImage.length === 0 ? null : (
-          <>
-            {previewImage.map((image, index) => (
-              <ImageBox key={index} index={index} image={image} />
-            ))}
-          </>
-        )}
-        <IconBox />
-        <input
-          type="file"
-          id="imageInput"
-          name="previewImage"
-          accept="image/*"
-          multiple
-          onChange={handleImageChange}
-          hidden
-        />
-      </div>
+    <TitleBox fontSize={16}/>
+    <div style={{display:"flex"}}>
+      {previewImage.length === 0 ? null : (
+        <>
+          {previewImage.map((image, index) => (
+            <ImageBox key={index} index={index} image={image}/>
+          ))}
+        </>
+      )}
+      <IconBox/>
+      <input
+        type="file"
+        id="imageInput"
+        name="previewImage"
+        accept="image/*"
+        multiple
+        onChange={handleImageChange}
+        hidden
+      />
+    </div>
     </>
   );
 };

src/components/community/community_writing/ImageInputBox/TitleBox/TitleBox.styles.tsx

@@ -15,17 +15,15 @@ interface titleProps {
 export const TitleBox = styled.div<titleProps>`
   width: ${(props) => (props.width ? `${props.width}px` : '100px')};
   height: ${(props) => (props.height ? `${props.height}px` : '40px')};
-  margin-top:${(props) => (props.marginT ? `${props.marginT}px` : '10px')};
-  margin-bottom:${(props) => (props.marginB ? `${props.marginB}px` : '10px')};
+  margin-top:${(props) => (props.marginT ? `${props.marginT}px` : '3px')};
+  margin-bottom:${(props) => (props.marginB ? `${props.marginB}px` : '0px')};
 
   display: flex;
-  flex-direction: column; /* 세로로 정렬하기 위해 컬럼 방향으로 설정 */
-  justify-content: center; /* 가로 방향 중앙 정렬 */
-  align-items: center; /* 세로 방향 중앙 정렬 */
-
-  color: ${COLORS.grayscale.Black}; /* 원하는 폰트 색상 설정 */
-  font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : '20px')}; /* 원하는 폰트 크기 설정 */
+  flex-direction: column; 
+  justify-content: center;
 
+  color: ${COLORS.grayscale.Black}; 
+  font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : '16px')}; 
 `;
 
 

src/components/community/community_writing/InputForm/TextForm/TextForm.styles.tsx

@@ -19,7 +19,7 @@ interface TextFormProps {
 export const TextForm = styled.textarea<TextFormProps>`
   rows:${(props) => (props.rows ? `${props.rows}` : '20')};
   cols:${(props) => (props.cols ? `${props.cols}` : '50')};
-  width: ${(props) => (props.width ? `${props.width}px` : '400px')};
+  width: ${(props) => (props.width ? `${props.width}px` : '100%')};
   height: ${(props) => (props.height ? `${props.height}px` : '400px')};
   margin-top: ${(props) => (props.margin ? `${props.margin}px` : '0px')};
   padding-top:${(props) => (props.padding ? `${props.padding}px` : '10px')};
@@ -30,10 +30,13 @@ export const TextForm = styled.textarea<TextFormProps>`
   border: 1px none; // 원하는 스타일 추가
   padding: 10px; // 원하는 스타일 추가
   outline: none;
+
   &::placeholder {
     font-size: 16px; /* 원하는 플레이스홀더 텍스트의 글씨 크기로 조정 */
-    color: ${COLORS.grayscale.Gray1}; /* 플레이스홀더 텍스트의 색상 지정 */
+    color: ${COLORS.grayscale.Gray3}; /* 플레이스홀더 텍스트의 색상 지정 */
   }
+  color: ${COLORS.grayscale.Black}; 
+  background-color: ${COLORS.grayscale.white}
 `;
 
 // onChange 이벤트 핸들러 추가

src/components/community/community_writing/InputForm/TitleForm/TitleForm.styles.tsx

@@ -13,20 +13,24 @@ interface TitleFormProps {
 }
 
 export const TitleForm = styled.input<TitleFormProps>`
-  width: ${(props) => (props.width ? `${props.width}px` : '400px')};
+  width: ${(props) => (props.width ? `${props.width}px` : '100%')};
   height: ${(props) => (props.height ? `${props.height}px` : '20px')};
   margin-top: ${(props) => (props.margin ? `${props.margin}px` : '0px')};
   border-radius: 12px;
   align-items: center;
   display: flex;
   font-size: 20px;
-  border: 1px none; // 원하는 스타일 추가
+  border: 1px none; 
   outline: none;
-  padding: 10px; // 원하는 스타일 추가
+  padding: 10px; 
+
   &::placeholder {
-    font-size: 20px; /* 원하는 플레이스홀더 텍스트의 글씨 크기로 조정 */
-    color: ${COLORS.grayscale.Gray1}; /* 플레이스홀더 텍스트의 색상 지정 */
+    font-size: 20px; 
+    color: ${COLORS.grayscale.Gray3}; 
   }
+  color: ${COLORS.grayscale.Black}; 
+
+  background-color: ${COLORS.grayscale.white}
 `;
 
 // onChange 이벤트 핸들러 추가

src/components/community/community_writing/InputForm/TitleForm/TitleForm.tsx

@@ -7,10 +7,10 @@ interface TitleFormnProps {
 
   hint:string;
   selectedValue?:string;
-  handleChange?:(event: React.ChangeEvent<HTMLInputElement>) => void; // onChange 타입 변경
+  handleChange?:(event: React.ChangeEvent<HTMLInputElement>) => void; 
 }
 
-const TitleForm = ({selectedValue,handleChange,hint}: TitleFormnProps) => (
+const TitleForm = ({selectedValue,handleChange,hint,height}: TitleFormnProps) => (
 
     <>
     <styles.TitleForm
@@ -20,6 +20,7 @@ const TitleForm = ({selectedValue,handleChange,hint}: TitleFormnProps) => (
       onChange={handleChange}
       placeholder={hint}
       autoComplete="off"
+      height={height}
     />
   </>
 );

src/components/community/community_writing/MainForm/MainForm.tsx

@@ -1,24 +1,21 @@
 
 import { SubSelectBox } from "@/components/community/community_writing/MainForm/SubSelectBox/SubSelectBox";
 
+import React, { ChangeEvent, useState } from 'react';
 interface SubmitHeadernProps {
   label?: string;
   width?: number;
   height?: number;
   color?: string;
 
   selectedValue?:string;
-  onChange?: () => void;
-  onSubmit?: () => void;
-  onClose?:()=>void;
+  onChange?:(e: ChangeEvent<HTMLSelectElement>)  => void; 
 }
 
-const SubmitHeader = ({onChange, onSubmit,onClose}: SubmitHeadernProps) => (
+const SubmitHeader = ({onChange,selectedValue}: SubmitHeadernProps) => (
   <>
-    <div style={{height:"45px",width:"390px",backgroundColor:"gray"}}>해더
-      </div> 
 
-    <SubSelectBox options={["잡담","질문", "정보"]} ></SubSelectBox>
+    <SubSelectBox chosen={selectedValue} options={["잡담","질문", "정보"]} onChange={onChange}></SubSelectBox>
   </>
 );
 

src/components/community/community_writing/MainForm/SubSelectBox/SelectListBox/SelectListBox.styles.tsx

@@ -10,11 +10,35 @@ interface SelectListBoxProps {
 }
 
 export const SelectListBox = styled.div<SelectListBoxProps>`
-  width: ${(props) => (props.width ? `${props.width}px` : '390px')};
+  width: ${(props) => (props.width ? `${props.width}px` : '100%')};
   height: ${(props) => (props.height ? `${props.height}px` : '46px')};
   margin-top: ${(props) => (props.margin ? `${props.margin}px` : '0px')};
   border-radius: 12px;
   align-items: center; 
   display: flex;
   font-size: 16px; 
-`;
+`;
+
+interface SelectListSelectProps {
+  width?: number;
+  height?: number;
+  color?: string;
+  margin?:number;
+}
+
+export const SelectListSelect = styled.select<SelectListSelectProps>`
+  width: ${(props) => (props.width ? `${props.width}px` : '92%')};
+  height: ${(props) => (props.height ? `${props.height}px` : '45px')};
+  margin-top: ${(props) => (props.margin ? `${props.margin}px` : '0px')};
+  border:1px solid ${COLORS.grayscale.Gray3}
+  border-radius: 10px;
+
+  align-items: center; 
+  display: flex;
+
+  font-size: 14px; 
+  color:  ${COLORS.grayscale.Black};
+
+  cursor: pointer;
+
+`;

src/components/community/community_writing/MainForm/SubSelectBox/SelectListBox/SelectListBox.tsx

@@ -1,10 +1,12 @@
 import { NextPage } from 'next';
-import React from 'react';
+import React, { ChangeEvent, useState } from 'react';
+import { SelectListSelect } from './SelectListBox.styles';
+
 
 interface SelectListBoxProps {
   options: string[]; // options를 문자열 배열로 변경
   chosen?: string | null; // chosen을 문자열 또는 null로 변경
-  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void; // onChange 타입 변경
+  onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;  // onChange 타입 변경
 }
 
 export const SelectListBox = ({
@@ -13,10 +15,10 @@ export const SelectListBox = ({
   onChange,
 }:SelectListBoxProps) => {
   return (
-        <select
+        <SelectListSelect
           id="selectList"
           name="selectedValue"
-          value={chosen || ''} // 선택한 값이 null이면 빈 문자열로 설정
+          value={chosen || 'err'} // 선택한 값이 null이면 빈 문자열로 설정
           onChange={onChange}
           className={'custom-select'}
           style={{
@@ -34,6 +36,6 @@ export const SelectListBox = ({
               {option}
             </option>
           ))}
-        </select>
+        </SelectListSelect>
   );
 };

src/components/community/community_writing/MainForm/SubSelectBox/SubSelectBox.styles.tsx

@@ -10,7 +10,7 @@ interface SubjectSelectProps {
 }
 
 export const SubjectSelectBox = styled.div<SubjectSelectProps>`
-  width: ${(props) => (props.width ? `${props.width}px` : '390px')};
+  width: ${(props) => (props.width ? `${props.width}px` : '100%')};
   height: ${(props) => (props.height ? `${props.height}px` : '46px')};
   margin-top: ${(props) => (props.marginTop ? `${props.marginTop}px` : '0px')};
   margin-bottom: ${(props) => (props.marginBottom ? `${props.marginBottom}px` : '0px')};
@@ -28,7 +28,7 @@ interface SubjectSelectListProps {
 }
 
 export const SubjectSelectBoxList = styled.div<SubjectSelectListProps>`
-  width: ${(props) => (props.width ? `${props.width}px` : '92px')};
+  width: ${(props) => (props.width ? `${props.width}px` : '70%')};
   height: ${(props) => (props.height ? `${props.height}px` : '46px')};
   margin-top: ${(props) => (props.marginTop ? `${props.marginTop}px` : '0px')};
   border-radius: 12px;