Merge pull request #63 from gummmmmy0v0/feature/#62

cskime · web-flow · commit 467b2f2ad34e · 2025-08-23T14:54:32.000+09:00
[post / send page] 단순 변경 사항 및 오류 수정
diff --git a/index.html b/index.html
@@ -11,24 +11,16 @@
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
     />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css"
-    />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
       rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
       rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Edu+SA+Hand:wght@400..700&family=Nanum+Gothic&family=Nanum+Pen+Script&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
       rel="stylesheet"
diff --git a/src/components/option/background-select.jsx b/src/components/option/background-select.jsx
@@ -20,7 +20,26 @@ const OptionItem = styled.div`
   height: 168px;
   border-radius: 8px;
   cursor: pointer;
-  background-color: ${({ type, color }) => (type === "color" ? color : "none")};
+  position: relative;
+`;
+
+const CheckedIcon = styled.img`
+  background-color: ${Colors.gray(500)};
+  box-shadow: none;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 5px;
+  }
+`;
+
+const BackgroundOverlay = styled.div`
+  height: 100%;
+  border-radius: 8px;
+  background-color: ${({ type, color }) =>
+    type === "color" ? color : "transparent"};
   background-image: ${({ type, url }) =>
     type === "image" ? `url(${url})` : "none"};
   background-position: center;
@@ -29,20 +48,8 @@ const OptionItem = styled.div`
   opacity: ${({ selected }) => (selected ? 0.3 : 1)};
 `;
 
-const CircleButtonWrapper = styled.div`
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  & > button {
-    border-radius: 50%;
-  }
-`;
-
 function BackgroundSelect({ type, selected, onSelect }) {
-  const [imageUrls, setImageUrls] = useState([]);
+  const [backgroundUrls, setBackgroundUrls] = useState([]);
 
   const colorOptions = [
     { color: BACKGROUND_COLOR.beige },
@@ -51,62 +58,34 @@ function BackgroundSelect({ type, selected, onSelect }) {
     { color: BACKGROUND_COLOR.green },
   ];
 
-  /* useEffect(() => {
-    if (type !== "image") return;
-
-    const BackgroundImageUrls = async () => {
-      try {
-        const response = await fetch(
-          "https://rolling-api.vercel.app/background-images"
-        );
-        const data = await response.json();
-        setImageUrls(data.imageUrls || []);
-      } catch (error) {
-        console.error(error);
-        setImageUrls([]);
-      }
-    };
-    BackgroundImageUrls();
-  }, [type]); */
-
-  // 이미지 옵션 테스트 코드
   useEffect(() => {
     if (type !== "image") return;
 
-    const testImages = [
-      "https://i.pinimg.com/280x280_RS/44/d2/b0/44d2b0b9e08cf1f05b7215356925a146.jpg",
-      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPe2BEhk6RfeibdWPG-1Iac78Tk1bdO1Rtqg&s",
-      "https://center.exm.co.kr/data/goodsimg/phob/l/0018/027/18027744/61709_1661145612.jpg",
-      "https://i.pinimg.com/736x/35/4e/03/354e03cd79702063da7353ffea0c8f8b.jpg",
+    const imageUrls = [
+      "https://picsum.photos/id/683/3840/2160",
+      "https://picsum.photos/id/24/3840/2160",
+      "https://picsum.photos/id/599/3840/2160",
+      "https://picsum.photos/id/1058/3840/2160",
     ];
-    setImageUrls(testImages || []);
+    setBackgroundUrls(imageUrls || []);
   }, [type]);
 
   const options =
     type === "color"
       ? colorOptions
-      : imageUrls.map((url, index) => ({ label: `${index}`, url }));
+      : backgroundUrls.map((url, index) => ({ label: `${index}`, url }));
 
   return (
     <BackgroundWrapper>
       {options.map((option, index) => (
-        <OptionItem
-          key={index}
-          type={type}
-          color={option.color}
-          url={option.url}
-          onClick={() => onSelect(index)}
-          selected={selected === index}
-        >
-          {selected === index && (
-            <CircleButtonWrapper>
-              <OutlinedButton
-                size={BUTTON_SIZE.extraSmall}
-                icon={CheckImage}
-                style={{ backgroundColor: Colors.gray(500), boxShadow: "none" }}
-              />
-            </CircleButtonWrapper>
-          )}
+        <OptionItem key={index} onClick={() => onSelect(index)}>
+          <BackgroundOverlay
+            type={type}
+            color={option.color}
+            url={option.url}
+            selected={selected === index}
+          />
+          {selected === index && <CheckedIcon src={CheckImage} />}
         </OptionItem>
       ))}
     </BackgroundWrapper>
diff --git a/src/pages/create-post-page.jsx b/src/pages/create-post-page.jsx
@@ -60,12 +60,12 @@ function CreatePostPage() {
     setNameError(""); // 값 입력 중 에러 없애기
   };
 
+  const trimmed = name.trim();
+
   const handleBlur = () => {
-    const trimmed = name.trim();
+    setName(trimmed);
     if (trimmed === "") {
-      setNameError("값을 입력해 주세요");
-    } else if (trimmed !== name) {
-      setNameError("앞 뒤 공백 없이 입력해 주세요"); // 텍스트 앞 뒤 공백 에러 처리(임시)
+      setNameError("이름을 입력해 주세요");
     }
   };
 
@@ -83,7 +83,7 @@ function CreatePostPage() {
     navigate(`/post/${randomID}`);
   };
 
-  const canCreate = name.trim() !== "";
+  const canCreate = trimmed !== "";
 
   return (
     <PostContainer>
diff --git a/src/pages/send-message-page.jsx b/src/pages/send-message-page.jsx
@@ -53,10 +53,9 @@ const AvatarOption = styled.div`
 
 const AvatarPreview = styled.div`
   cursor: pointer;
-`;
-
-const DefaultAvatar = styled.div`
-  cursor: pointer;
+  box-shadow: ${({ $isSelected }) =>
+    $isSelected ? `0 0 0 2px ${Colors.purple(600)}` : "none"};
+  border-radius: 50%;
 `;
 
 const ButtonWrapper = styled.div`
@@ -69,13 +68,20 @@ const CreateButton = styled(PrimaryButton)`
   width: 100%;
 `;
 
+const TextFieldStyle = styled(TextField)`
+  width: 50%;
+`;
+
 function SendMessagePage() {
   const [name, setName] = useState("");
   const [nameError, setNameError] = useState("");
   const [relationOption, setRelationOption] = useState("지인");
   const [selectedAvatar, setSelectedAvatar] = useState(null);
   const [content, setContent] = useState("I am your reach text editor.");
-  const [fontOption, setFontOption] = useState("Noto Sans");
+  const [selectedFont, setSelectedFont] = useState({
+    title: "Noto Sans",
+    fontFamily: "Noto Sans",
+  });
   const navigate = useNavigate();
 
   const handleChange = (e) => {
@@ -88,33 +94,43 @@ function SendMessagePage() {
     }
   };
 
+  const trimmed = name.trim();
+
   const handleBlur = () => {
-    if (name.trim() === "") {
-      setNameError("값을 입력해 주세요");
-    } else if (name !== name.trim()) {
-      setNameError("공백 없이 입력해 주세요"); // 텍스트 앞 뒤 공백 에러 처리(임시)
+    setName(trimmed);
+    if (trimmed === "") {
+      setNameError("이름을 입력해 주세요");
     }
   };
 
   const avatarList = [
-    "https://i.pinimg.com/236x/49/86/62/4986627b45cecd1a5c4330bda777c2bf.jpg",
-    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRok3sjZOWtm7o5kFf0BdW0w7IUHI1oAlC-Z6RCKAiCvvCExG_qq7qMzPOQlEzfknS3B3U&usqp=CAU",
-    "https://i.pinimg.com/236x/20/d1/6f/20d16f236500e8daa315a298a8586193.jpg",
-    "https://i.pinimg.com/474x/28/6c/fd/286cfdcdaeaf2768d4b285a226c33a02.jpg",
-    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvxR-Twic2lXwfF87JweyQ81vrGDUgn7zzYj60N-wD21DwS4JzOc0BLhzaOuUt4PGfLcI&usqp=CAU",
-    "https://i.pinimg.com/236x/74/68/89/7468894ce7592357a3514dbb8dc5f181.jpg",
-    "https://mblogthumb-phinf.pstatic.net/MjAyMTA5MDNfMjE1/MDAxNjMwNTk5NjE4NTc5.b-OgHjcav5kz8kt_9Cr2u1Z_eJYmKY_H9Ii9mOnwo74g.r0G6iGYg-oQMLnTymwyrjDlOMGLEnWGYJXefCSy2ixwg.JPEG.gmlwjd5363/FB＿IMG＿1630599533529.jpg?type=w800",
-    "https://mblogthumb-phinf.pstatic.net/MjAyMTA5MDNfMTIy/MDAxNjMwNTk5NjE5MDA5.w_wMeYmMF2kOhDAVXXxe0JgVqJhtGd0EuR0b2D2k3S0g.Nds6Oxagjks2DjjwFz5yWyjCGcEOL1iS84XqhAQw3wUg.JPEG.gmlwjd5363/FB＿IMG＿1630599535069.jpg?type=w800",
-    "https://mblogthumb-phinf.pstatic.net/MjAyMTA5MDNfNDQg/MDAxNjMwNTk5NjE5MzQ4.J4lhtJZRKMzEXj0HjrG1aH65qIcBv9GI1LdVQsWlC-Ug.10QCNt81CdbIyBkd1bFOAOAolDL6hxYXrb9dXgmS8zQg.JPEG.gmlwjd5363/FB＿IMG＿1630599536666.jpg?type=w800",
-    "https://mblogthumb-phinf.pstatic.net/MjAyMTA5MDNfMzAg/MDAxNjMwNTk5NjE5ODI2.cmwNyDHTza4N64bhN0rIRu2KaFHUxqv0BkuaX6GBHJ0g.ufZqe7x1GLrCLJg2zb6N_nJ_fTgFPXq09TTe_fhsMiog.JPEG.gmlwjd5363/FB＿IMG＿1630599538261.jpg?type=w800",
+    "https://learn-codeit-kr-static.s3.ap-northeast-2.amazonaws.com/sprint-proj-image/default_avatar.png",
+    "https://picsum.photos/id/522/100/100",
+    "https://picsum.photos/id/547/100/100",
+    "https://picsum.photos/id/268/100/100",
+    "https://picsum.photos/id/1082/100/100",
+    "https://picsum.photos/id/571/100/100",
+    "https://picsum.photos/id/494/100/100",
+    "https://picsum.photos/id/859/100/100",
+    "https://picsum.photos/id/437/100/100",
+    "https://picsum.photos/id/1064/100/100",
   ];
 
   const handleCreate = () => {
     const randomID = Math.floor(Math.random() * 10000);
     navigate(`/post/${randomID}`);
   };
 
-  const canCreate = name.trim() !== "";
+  const canCreate =
+    trimmed !== "" && content.replace(/<[^>]+>/g, "").trim() !== "";
+  // 정규식 유효성 검사로 html 태그 찾기("<"로 시작해서 ">"로 끝나는 문자 중 > 를 제외한(^ not) 모든 문자 제외)
+
+  const fontOptions = [
+    { title: "Noto Sans", fontFamily: "Noto Sans" },
+    { title: "Pretendard", fontFamily: "Pretendard" },
+    { title: "나눔고딕", fontFamily: "Nanum Ghthic" },
+    { title: "나눔손글씨 펜체", fontFamily: "Nanum Pen Script" },
+  ];
 
   return (
     <SendContainer>
@@ -132,11 +148,7 @@ function SendMessagePage() {
       <Wrapper>
         <SendTitle>프로필 이미지</SendTitle>
         <AvatarWrapper>
-          <DefaultAvatar
-            onClick={() => setSelectedAvatar((prev) => (prev ? null : prev))} // 아바타 선택 상태에서 재클릭 시 기본 아바타로
-          >
-            <Avatar size={AVATAR_SIZE.large} source={selectedAvatar} />
-          </DefaultAvatar>
+          <Avatar size={AVATAR_SIZE.large} source={selectedAvatar} />
           <AvatarOptionWrapper>
             <AvatarDescription>
               프로필 이미지를 선택해 주세요!
@@ -145,6 +157,7 @@ function SendMessagePage() {
               {avatarList.map((url, index) => (
                 <AvatarPreview
                   key={index}
+                  $isSelected={selectedAvatar === url}
                   onClick={() => setSelectedAvatar(url)}
                 >
                   <Avatar size={AVATAR_SIZE.medium} source={url} />
@@ -156,7 +169,7 @@ function SendMessagePage() {
       </Wrapper>
       <Wrapper>
         <SendTitle>상대와의 관계</SendTitle>
-        <TextField
+        <TextFieldStyle
           type={TEXT_FIELD_TYPE.dropdown}
           dropdownId="realtionship-dropdown"
           placeholder={relationOption}
@@ -176,24 +189,25 @@ function SendMessagePage() {
             }}
             value={content}
             onChange={(value) => setContent(value)}
-            font={fontOption}
+            font={selectedFont.fontFamily}
           />
         </div>
       </Wrapper>
       <Wrapper>
         <SendTitle>폰트 선택</SendTitle>
-        <TextField
+        <TextFieldStyle
           type={TEXT_FIELD_TYPE.dropdown}
           dropdownId="font-option-dropdown"
-          placeholder={fontOption}
-          value={fontOption}
-          options={[
-            "Noto Sans",
-            "Pretendard",
-            "Nanum Gothic",
-            "Nanum Pen Script",
-          ]}
-          onSelect={setFontOption}
+          placeholder={selectedFont.title}
+          value={selectedFont.title}
+          options={fontOptions}
+          onSelect={(selectedFontOption) => {
+            const selected = fontOptions.find(
+              (fontOption) => fontOption.title === selectedFontOption
+            );
+            setSelectedFont(selected);
+          }}
+          style={{ fontFamily: selectedFont.fontFamily }}
         />
       </Wrapper>
       <ButtonWrapper>
